Jump to content
InvisionCommunity.de - Der Deutsche Invision Community Support
Sign in to follow this  
K.Bean

IPContent css Anpassungen

Recommended Posts

Hallo Community,

ich versuche gerade meine IPContent Startseite desigtechnich ein wenig anzupassen. Nach ewigem Probieren ist bisher das rausgekommen, was auf den Bildern zu erkennen ist. Allerdings komme ich momentan nicht weiter.

Ich bin da auch nicht so der Fachmann drin...

Folgende Fragen

1. Beim readmore Button fehlt mir leider der Hover Effekt. Wie und mit welchem Code kann dieser eingefügt werden?

2. Leider gelingt es mir nicht auch den Comment Button wie den readmore Button zu gestalten. Auch hier wäre ein Tipp super von euch. (siehe Bilder)

3. Für die Startseite möchte ich gerne den Blocksatz Schreibstil nutzen. Leider scheint es so, als würde dieser zumindest auf der Content Startseite nicht funktionieren. In der Detailansicht der News ist Blocksatz aber aktiviert. Kann man das ändern?

Die änderungen habe ich in der IPContent.css vorgenommen. Ich poste die auch mal, damit man mir vielleicht sagen kann wo da die änderungen vorgenommen werden müssen. Für eure Hilfe bedanke ich mich schonmal im vorraus!

/**

 /**

 * Article layout styles

 */

.articles-layout {

	width: 100%;

}


.articles {

	font-size: 13px;

	width: 78%;

	float: left;

}


	.articles a {

		text-decoration: none;

	}


	.articles a:hover {

		text-decoration: none;

	}


.articles .clear {

	clear: both;

}


.articles .type-1x2x2 .block-2,

.articles .type-1x2x2 .block-3 {

	width: 48%;

	float: left;

}


.articles .type-1x1x1 h2 {

	font-size: 20px;

}


.articles .type-1x2x2 .block-2 h2 {

	font-size: 16px;

}


.articles .type-1x2x2 .block-1 h2 {

	font-size: 22px;

}


.articles .type-1x2x2 .block-3 h2 {

	font-size: 14px;

}


.articles .article_title {

	font-size: 24px;

	text-indent: 0px;

	height: auto;

	width: auto;

	clear: right;

}


.articles .type-1x1x1 .photo {

	float: right;

	margin-left: 15px;

}


.articles .type-1x2x2 .photo {

	margin-right: 15px;

	float: left;

}


.articles .type-1x1x1 .overview {

	width: 100%;

}


.articles .type-1x2x2 .block-1 .overview {

	float: left;

	width: 70%;

}


.articles .type-1x2x2 .block-2 .links,

.articles .type-1x2x2 .block-3 .links {

	padding-top: 10px;

	margin-left: 0px;

	display: block;

	clear: both;

	bottom: 0px;

	position: relative;

}


.articles .block {

	padding-bottom: 20px;

	padding-top: 20px;

}


	.articles .block .article-pages {

		display: none;

	}


	.articles .block-1,

	.articles .type-1x2x2 .article_row {

		border-bottom: 1px solid rgba(255,255,255,0.05);

	}


		.articles .type-1x2x2 .article_row:last-child {

			border-bottom: none;

		}


.article_row, .articles .block {

	overflow: hidden;

}


.articles .moderated { background-color: #f2e4e7; padding: 2px; }

.articles .block.moderated { padding: 5px; }

.articles .moderated a { color: #6f3642; }


.articles h2,

.articles h3 {

	font-weight: bold;

}


.articles .overview h2 a {

	font-size: 20px;

	text-decoration: none;

}


	.articles .links {

		margin-top: 8px;

		display: block;

	}


	.articles .links a {

		font-size: 11px;

	}


	.articles .links a.read_more {	

	background-color: #3d3d3d;

			background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.05)), to(transparent)); /* Saf-Chrome */

			background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, transparent 100%); /* FF */

			background-image: linear-gradient(top, rgba(255,255,255,0.05), transparent);

			box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

			-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

			-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

			color: #0aa3f2;

			padding: 3px 10px;

			-moz-border-radius: 8px;

			-webkit-border-radius: 8px;

			border-radius: 8px;

	}


.articles .excerpt,

.articles .article_body {

	margin-top: 10px;

	line-height: 150%;

}


.articles .article_body {

	margin-bottom: 25px;

}


.articles .pagelinks {

	margin-top: 4px;

}


.utilities {

	font-size: 11px;

	bottom: -10px;

	position: relative;

}


	.utilties a:hover {

		text-decoration: none;

	}


	.utilities img {

		vertical-align: bottom;

		margin-top: -2px;

	}


#previous_bar {

	text-align: right;

	font-size: 14px;

	font-weight: bold;

	padding: 7px;

}



/**

 * Archive and category styles

 */

.articles .archives h2,

.articles .categories h2 {

	font-size: 20px;

}


.articles .archives h3,

.articles .categories h3 {

	font-size: 16px;

	padding-left: 0px;

}


.articles .archives .block,

.articles .categories .block {

	padding: 10px 0;

}


	.articles .archives .block {

		border-top: 1px solid #ebebeb;

	}


		.articles .archives .block:nth-child(6) {

			border-top: none;

		}


	.articles .archives .block .excerpt, .articles .archives .links,

	.articles .categories .block .excerpt, .articles .categories .links {

		margin-top: 5px;

	}


.articles .subcat {

	margin-bottom: 10px;

	padding: 15px 0 10px;

	border-top: 1px solid rgba(255,255,255,0.05);

	overflow: hidden;

}


	.articles .subcat h2 {

		float: left;

		width: 180px;

		font-weight: normal;

	}


		.articles .subcat h2 .desc {

			display: block;

			margin-top: 10px;

		}


		.articles .subcat h2 img {

			vertical-align: middle;

			margin-right: 5px;

		}


		.articles .subcat h2 a {

			text-decoration: none;

		}


	.articles .subcat em.moderated {

		padding: 5px;

		-moz-border-radius: 4px;

		-webkit-border-radius: 4px;

		border-radius: 4px;

	}


.articles .archives .photo,

.articles .categories .photo {

	float: right;

	margin-left: 15px;

	margin-top: 10px;

}


.sort_bar {

	font-size: 11px;

	padding: 6px 6px;

	text-align: right;

	border-bottom: 4px solid #ebebeb;

	color: #a3a3a3;

}


	.sort_bar ul, .sort_bar li {

		display: inline;

	}


	.sort_bar li {

		margin: 0 0 0 10px;

	}


	.sort_bar a {

		text-decoration: none;

	}


	.sort_bar li.active {

		font-weight: bold;

	}


		.sort_bar li.active a {

			background-color: #3d3d3d;

			background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.05)), to(transparent)); /* Saf-Chrome */

			background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, transparent 100%); /* FF */

			background-image: linear-gradient(top, rgba(255,255,255,0.05), transparent);

			box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

			-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

			-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

			color: #a2a2a2;

			padding: 3px 10px;

			-moz-border-radius: 8px;

			-webkit-border-radius: 8px;

			border-radius: 8px;

		}


.articles .children {

	overflow: hidden;

	font-size: 11px;

	margin-top: 8px;

	float: left;

	clear: left;

	max-width: 180px;

	margin-left: 20px;

	line-height: 130%;

}


.articles .archives .subcats .subcat:first-child {

	border-top-width: 4px;

}

.articles .categories .subcats .subcat:first-child {

	border-top-width: 0px;

}


	.articles .last_article {

		margin-left: 200px;

	}


		.articles .last_article h3 {

			padding-left: 0px;

		}


.articles .pagelinks a {

	display: inline-block;

	text-decoration: none;

	background: url(http://community.ipbsupport.de/public/style_images/master/topic_button_right.png );

	margin-left: 5px;

	padding: 4px 7px 4px;

	color: #fff;

	-moz-border-radius: 4px;

	-webkit-border-radius: 4px;

	border-radius: 4px;

	font-size: 14px;

	font-weight: bold;

}


	.articles .pagelinks a:hover {

		background: url(http://community.ipbsupport.de/public/style_images/master/topic_button_right_hover.png );

		text-decoration: none !important;

		color: #fff;

	}


.articles .archives .topic_controls {

	min-height: 0px;

}



/**

 * Article view

 */


.articles .posted_info,

/**

 * name und datum

 */

.comment_wrap .posted_date {

	background-color: #3d3d3d;

			background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.05)), to(transparent)); /* Saf-Chrome */

			background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, transparent 100%); /* FF */

			background-image: linear-gradient(top, rgba(255,255,255,0.05), transparent);

			box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

			-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

			-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

			color: #a2a2a2;

			padding: 3px 10px;

			-moz-border-radius: 8px;

			-webkit-border-radius: 8px;

			border-radius: 8px;

}


	.articles .post_block .post_wrap .posted_info {

		color: #a7a7a7;

		font-weight: normal;

	}


		.articles .post_block .post_wrap .posted_info a {

			font-weight: bold;

		}


	.articles .article_body {

		padding: 10px;

	}


	.articles .article_body .photo {

		float: right;

		margin: 0 0 15px 15px;

	}


.article-pages {

	overflow: hidden;

}


.share_links {

	margin: 8px 0px 8px 0px;

	border-top: 1px solid rgba(255,255,255,0.05);

	padding: 8px;

	clear: both;

}


.topic_share li {

	float: left;

	margin: 4px 8px 0 0;

}


.articles .view .rating {

	float: right;

}


	.articles .view ul.shareButtons {

		float: right;

	}


.comment_wrap, .comment_pages {

	clear: both !important;

}


	.comment_wrap .moderated {

    	background-color: #f2e4e7;

	}


	.comment_wrap .comment, .comment_wrap p.no_messages {

		margin: 0px 8px !important;

		clear: both;

	}


span.pagination.no_pages {

	display: none;

	height: 0px;

}


	/* Move comments down */

	.articles .view h2.section_title {

    	margin-top: 20px;

	}



/** 

 *	Sidebar styles

 */


#article_sidebar {

	float: right;

	margin-left: 5px;

	width: 20%;

}


#category_list, #recent_articles, #recent_comments {

	padding: 0px;

	overflow: hidden;

}


	#category_list h3, #recent_articles h3, #recent_comments h3 {

		margin: 0px 0px 3px 0px;

	}


		#category_list h3 a {

			font-size: 14px;

			text-decoration: none;

			float: right;

			font-weight: normal;

			padding-top: 2px;

		}


	#category_list ul a {

		text-decoration: none;

		display: block;

		padding: 8px 12px;

		background-color: transparent;

		border-bottom: 1px solid rgba(255,255,255,0.03);

	}


		#category_list ul a:hover {

			background: rgba(255,255,255,0.03);

		}


		#category_list ul a:active {

			background: rgba(255,255,255,0.01);

		}


	#category_list li {

		margin: 0;

		font-size: 14px;

		font-weight: bold;

		text-shadow: 1px 1px 2px rgba(0,0,0,0.5);

	}


		#category_list ul ul {

			margin-top: 0px;

		}


			#category_list ul ul li a {

				font-size: 12px;

				font-weight: normal;

				padding: 6px 12px 6px 25px;

				opacity: 0.7;

			}


	#article_sidebar .block_list {

		padding-top: 0px;

	}


		#recent_articles .block_list li {

			padding-right: 10px;

		}


	#recent_comments .photo {

		float: left;

		margin-right: 8px;

	}


	#recent_comments .desc {

		font-size: 0.9em;

	}




/**

 * Some misc/global styles

 */


.section_title, .post_form h2 {

	font-size: 2.5em !important;

	font-weight: bold;

	border-bottom: 2px solid rgba(255,255,255,0.05);

	padding-bottom: 3px;

	margin-bottom: 5px;

}


.add_link, .post_block .share_links a {

	display: inline-block;

	text-decoration: none;

	background-color: #3d3d3d;

	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.05)), to(transparent)); /* Saf-Chrome */

	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, transparent 100%); /* FF */

	background-image: linear-gradient(top, rgba(255,255,255,0.05), transparent);

	border-radius: 4px;

	-moz-border-radius: 4px;

	-webkit-border-radius: 4px;

	box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);

	color: #a2a2a2;

	text-decoration: none;

	padding: 4px 9px 5px 8px;

	margin-left: 5px;

	font-size: 14px;

	cursor: pointer;

}


	.add_link:hover, .post_block .share_links a:hover {

		background-color: #484848;

		text-decoration: none !important;

		color: #fff;

	}


	.add_link:active, .post_block .share_links a:active {

		background: #232323;

		color: #a2a2a2;

		box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 2px 8px rgba(0,0,0,0.5);

		-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 2px 8px rgba(0,0,0,0.5);

		-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1), inset 0 2px 8px rgba(0,0,0,0.5);

	}


.add_link {

	position: relative;

	top: -4px;

}


.desc {

	font-size: 11px;

	color: #858585;

} 


/* Videos system */


.videos {

	width: 78%;

}


#videos_latest {

	text-align: center;

}


	#videos_latest h2, #videos_recent h2 {

		text-align: left;

		font-size: 22px !important;

		font-weight: bold;

		border-bottom: 2px solid rgba(255,255,255,0.05);

		padding-bottom: 3px;

		margin-bottom: 5px;

	}


#videos_recent {

	clear: both;

	width: 100%;

	margin-top: 20px;

}


	.video_thumb {

		padding: 10px;

		width: 140px;

		height: 140px;

		overflow: hidden;

		margin: 10px 3px 3px 3px;

		float: left;

	}


		.video_thumb img {

			margin-bottom: 5px;

		}


		.video_thumb a {

			color: #30587f;

			font-size: 11px;

			font-weight: bold;

			text-decoration: none;

		}


		.video_thumb .time {

			color: #979797;

			font-size: 11px;

		}


		.video_thumb .rating {

			margin-top: 8px;

			display: inline-block;

		}


/* Unpublished articles - give a diff color */

.unpublished, body .unpublished td,

.unpublished td.altrow, .post_block.unpublished,

body td.unpublished {

	background-color: #d5eaff;

}


	.unpublished, .unpublished a {

		color: #0056ff;

	}

post-3313-0-30399200-1311078654_thumb.pn

post-3313-0-72371000-1311078658_thumb.pn

Edited by Helge
Spoiler eingefügt

Share this post


Link to post

Kurz vorweg: Ohne die Seite "live" zu sehen ist es fast unmöglich anhand eines "fremden" CSS-Codes Hilfestellung zu geben.

1. Beim readmore Button fehlt mir leider der Hover Effekt. Wie und mit welchem Code kann dieser eingefügt werden?

Eine neue Klasse ".articles .links a.read_more a:hover" mit entsprechenden Werten einfügen.

2. Leider gelingt es mir nicht auch den Comment Button wie den readmore Button zu gestalten. Auch hier wäre ein Tipp super von euch. (siehe Bilder)

Siehe Hinweis, welcher Code dafür verantwortlich ist sehe ich hier nicht, vermutlich keiner, da muss also der Button vermutlich eine Klasse erhalten und eine neue CSS Klasse (z. B. .comment_link) eingefügt werden.

3. Für die Startseite möchte ich gerne den Blocksatz Schreibstil nutzen. Leider scheint es so, als würde dieser zumindest auf der Content Startseite nicht funktionieren. In der Detailansicht der News ist Blocksatz aber aktiviert. Kann man das ändern?

Hier gilt das gleiche wie oben, ohne die Seite zu sehen kann ich dir das nicht sagen. Grundsätzlich: "text-align:justify;" zur entsprechenden CSS-Klasse hinzufügen.

Mit dem Firefox-Addon Firebug kann man kinderleicht rausfinden, welche Klassen für entsprechende Bereiche zuständig sind.

Share this post


Link to post

Hallo Helge,

vielen Dank für deine Unterstützung. Eine Testseite ist hier zu finden http://www.gamespoint-portal.de/tow/

Ich habe auch schon versucht deine Tipps umzusetzen mkomme aber nicht weiter. Egal welchen Code ich da eingeben, ein Hover Effekt entsteht bei mir leider nicht...Vielleicht hast Du noch den richtigen Anstoß für mich, wenn Du die Seite Live siehst.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×