Text alignment of the Zen skin

1 coldhart Apr 11, 2008 15:12

My b2evolution Version: 2.4.1

I am currently in a bit of a quandry - I have two skins that I like and am trying to take the best of both worlds.

One the best features of the zen is the text alignment

http://coldheartedtruth.com/politics/index.php/2008/04/09/war-and-politics-don-t-mix?blog=2

Notice how the print left justifies and right justifies? Very clean and very professional looking. (also notice the clean lines of the skin)

on the flip side, the other skin (an illacrimo design) looks chopier without the right justification.

http://coldheartedtruth.com/politics/index.php?blog=5

I like the contrast of this skin and the fact that the wider sidebar helps me add features that I otherwise couldn't -

anyways... other than soliciting opinions about the two skins, what I am really asking is if anyone knows the magic code that is making the zen main post text to justify to both sides? I would like to add the same clean lines to the illacrimo skin.

2 afwas Apr 11, 2008 15:25

In Simple Zen it's this piece of css (from stylesheet.css):

.bText p {
	line-height: 150%;
	padding: 0px 0px 7px 0px;
	text-align: justify;
	font-size: 13px;
}

In Illacrimo look for line 113 in style.css:

.PostContent p { font-size: 12px; line-height: 17px;}

simply change to:

.PostContent p { font-size: 12px; line-height: 17px; text-align: justify; }

Good luck

3 djidiouf Apr 12, 2008 00:33

Hi !

Do you know the line en css for the skin Asevo in order to make the same thing : justify the text ? I serach in css of Asevo but I haven't seen some "text-align: right" for articles.

Thanks !

4 afwas Apr 12, 2008 01:11

look for style.css line 201:

.evo_post_text p {
	margin: 1em 0;
}

You can add the line like so:

.evo_post_text p {
	margin: 1em 0;
    text-align: justify;
}

Good luck

5 djidiouf Apr 12, 2008 03:43

Thanks for your help !

I try your tip but it doesn't work. However I try to adding "text-align: justify;" in some line which are near and I found what I want.

So, for people who need this tip for this skin :

Skin asevo : style.css line 180

.evo_post
{
	clear: both;
	margin: 0 0 5ex 0;
	padding: 0;
}

Add the line like so :

.evo_post
{
	clear: both;
	margin: 0 0 5ex 0;
	padding: 0;
	text-align: justify;
}

6 hudson2001 Jan 19, 2010 15:03

Ha! I love it when I find a thread that has an answer I was looking for.

But I do have another one for this skin: I want to change some of the header styles, and I've tried messing with them, but there are a lot of h_ lines that have thrown me (I don't know a lot about CSS).

What I'd really like to do is create an h5 (since I don't see it being used, so figure it would be easiest) and just have it be the regular page font except larger and a different color. I tried this code:

h5 {
font-size: 1.3em;
color: #4e607b;
}

And it didn't seem to do anything. I also tried changing the h4 code to that and nothing happened, so it must be conflicted with more CSS that I just don't understand.

Here is the code for the entire skin:

/*
* Simple Zen skin
*
* This version by Foppe Hemminga - http://www.blog.hemminga.net/
* Licence: GPL2/3
* Skin for B2evolution v 2.x- http://www.b2evolution.net/
*
*
* Original Copyright information:
* Theme Name: SimpleZEN WS
* Theme URI: http://www.wpskins.org/themes/1654/Simple-Zen/
* Description: A clean, Adsense-optimized 3 column theme
* Version: 0.1
* Author: Maki
* Author URI: http://www.wpskins.org/author.php?id=maki
* Licence: GPL
*
*/

@import url(../../rsc/css/basic.css);	/* Import basic styles */
@import url(../../rsc/css/img.css);	/* Import standard image styles */
@import url(../../rsc/css/blog_elements.css);	/* Import standard blog elements styles */
@import url(../../rsc/css/forms.css);	/* Import default form styles */
@import url(../../rsc/css/comments.css);	/* Import default comment styles */

/* Begin Typography & Colors */
body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;

}

#page {
	background-color: white;
	/* border: 1px solid #959596; */

}


#content {
	clear: both;
	font-size: 1em
}

ul, li, ul li {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}

.narrowcolumn .bText,
.widecolumn .bText {
	line-height: 1.4em;
}

.narrowcolumn .postmetadata {
	text-align: center;
}

.alt {
	background-color: #f8f8f8;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

#footer {
	border: none;
}

small {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.9em;
	line-height: 1.5em;
}

h1,
h2,
h3 {
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
}

.widget_core_coll_title h1 {
	font-size: 5em;
	margin: 0 0 0 500px;
}
.widget_core_coll_tagline {
	font-size: 2em;
	margin: 0 0 0 500px;
	color: white;
}

h2.evo_post_title {
	font-size: 24px;
	text-align: left;
	padding: 0 0 0 5px;
	color: black;
}

h2 {
	font-size: 1.6em;
}

h2.pagetitle {
	font-size: 1.6em;
}

/* #sidebar h2, #sidebar_2 h2 {
	font-family: 'trebuchet MS', 'Lucida Grande', Verdana, Sans-Serif;
	font-size: 1em;
} */

h3 {
	font-size: 1.3em;
	color: #4e607b;
}

h1,
h1 a,
h1 a:hover,
h1 a:visited {
	text-decoration: none;
	color: white;
}

h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited {
	color: #333;
}

h2,
h2 a,
h2 a:hover,
h2 a:visited,
h3,
h3 a,
h3 a:hover,
h3 a:visited,
#sidebar h2,
#sidebar_2 h2,
.bCalendarTable caption,
cite {
	text-decoration: none;
}

.bText p a:visited {
	color: #b85b5a;
}

#sidebar, #sidebar_2 {
	font: 1.2em 'trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	text-align: left;
}

/*
small, #sidebar ul ul li,
#sidebar ul ol li,
#sidebar_2 ul ul li,
#sidebar_2 ul ol li,
.nocomments,
.postmetadata,
blockquote,
strike {
	color: #777;
}
*/

code {
	font: 1.1em 'Courier New', Courier, Fixed;
}

acronym, abbr, span.caps
{
	font-size: 0.9em;
	letter-spacing: .07em;
}

a,
h2 a:hover,
h3 a:hover {
	color: #06c;
	text-decoration: none;
}

a:hover {
	color: #147;
	text-decoration: underline;
}

/* End Typography & Colors */



/* Begin Structure */
body {
	margin: 0 0 20px 0;
	padding: 0;
	text-align: center;
}

#page {
	background-image: url(img/bg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	margin: 20px auto;
	padding: 0;
	text-align: left;
}

#wrapper{
	width: 1000px;
	text-align: left;
	margin: auto;
}

#header {
	margin: 0 1px 0 1px;
	padding: 0;
	height: 220px;
}

#headerimg {
	background: transparent url('img/headerimg.jpg') no-repeat center 15px;
	margin: 0;
	height: 180px;
	width: 100%;
}

.widget_core_colls_list_public {
	height: 53px;
	overflow: hidden;
	font-size: 12px;
	text-transform:uppercase;
	font-weight: bold;
}

.widget_core_colls_list_public ul {

}

.widget_core_colls_list_public li {
	list-style: none;
	float: left;
}

.widget_core_colls_list_public a {
	padding: 20px 10px;
	display: block;
	text-decoration: none;
	color: #A3AEBA;
}

.widget_core_colls_list_public a:hover {
	background-color: #4e607b;
	color: #fff;

}

.widget_core_colls_list_public .selected {
	background-color: #544A65;
}

/**
 * Top menu
 * This is the menu below the image header bar
 **/
div.top_menu {
	padding-top: 7px;
	height: 30px;
	float: left;
	width: 100%;
	clear: both;
	display: block;
	/*overflow: hidden;*/
}

div.top_menu ul {
	float:left;
	margin: 0 10px;
	padding: 0;
	list-style-type:none;
	padding: 4px 0 8px 0;
	font-size: 120%;
}

div.top_menu h3 {
	display: none;
}

div.top_menu ul li {
	display: inline;
	list-style: none;
	float: left;
	padding-top: 2px;
	padding: 0 1ex 0 0;
}

#header .top_menu a {
	font-style: normal;
	font-size: 140%;
	font-weight: bold;
	color: #0066D9;
}

.narrowcolumn {
	float: left;
	padding: 0 0 20px 0px;
	margin: 0px 40px 0 0;
	width: 620px;
}

div.clear {
	width: 100%;
	clear: both;
	display: block;
	border: 1px red solid;
}

.widecolumn {
	float: left;
	padding: 0 0 20px 0px;
	margin: 0px 40px 0 0;
	width: 700px;
}

.post {
	margin: 0 0 40px;
	text-align: justify;
	clear: both;
}

.post h2 {
	border-bottom: 1px solid #43637B;
	letter-spacing: -1px;
	text-align: left;
}

.bText {
	float: right;
	width: 450px;
	padding: 10px 0px 5px 0px;
}

.bText p {
	line-height: 150%;
	padding: 0px 0px 7px 0px;
	text-align: justify;
	font-size: 13px;
}

.post hr {
	display: block;
}

.metadata {
	background: url( "img/tag_blue.png" ) no-repeat center left;
	clear: both;
	border-top: 1px dotted #DEDEDE;
	border-bottom: 1px solid #5383BA;
	padding: 5px 0 5px 10px;
}

.narrowcolumn .postmetadata {
	padding-top: 5px;
}

.postmetadata {
	clear: left;
	width: 150px;
}

.alt {
	width: 200px;
}

.posttags {
	clear: both;
	text-align: center;
	color: #777;
}

#sidebar {
	margin-top: 15px;
	float: left;
	width: 170px;
}

#sidebar_2 {
	margin-top: 15px;
	width: 140px;
	float: right;
}

#footer {
	padding: 0;
	margin: 0 auto;
	width: 1000px;
	clear: both;
}

#footer p {
	margin: 0;
	padding: 0 0 20px;
	text-align: center;
}
/* End Structure */


/* Begin Lists

Special stylized non-IE bullets
Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .bText ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
}

html>body .bText li {
	margin: 7px 0 8px 10px;
}

.bText ul li:before {
	content: "\00BB \0020";
}

.bText ol {
	padding: 0 0 0 15px;
	margin: 0;
	font-size:13px;
}

.bText ol li {
	margin: 0;
	padding: 0;
}

.postmetadata ul {
	padding: 5px;
	text-align: left;
}

.postmetadata li {
	list-style: none;
	border-bottom: 1px dotted #AAAAAA;
	margin: 4px 0px;
}

.postmetadata .author {
	background: url( "img/user.png" ) no-repeat;
	padding: 0 0 0 20px;
}

.postmetadata .date {
	background: url( "img/calendar.png" ) no-repeat;
	padding: 0 0 0 20px;
}

.postmetadata .category {
	background: url( "img/folder.png" ) no-repeat;
	padding: 0 0 0 20px;
}

.postmetadata .feedback {
	background: url( "img/comment.png" ) no-repeat;
	padding: 0 0 0 20px;
}

.postmetadata .views {
	background: url( "img/icon_looking_glass.png" ) no-repeat;
	padding: 0 0 0 20px;
}

#sidebar .widget_core_coll_common_links ul li,
#sidebar_2 .widget_core_coll_common_links ul li,
#sidebar .widget_plugin_evo_Arch ul li,
#sidebar_2 .widget_plugin_evo_Arch ul li {
	text-align: left;
	list-style-type: none;
	border-bottom: 1px dotted #5383BA;
	margin: 0px 0px 3px 0px;
}

#sidebar li.widget_core_coll_category_list ul li,
#sidebar_2 li.widget_core_coll_category_list ul li {
	text-align: left;
	list-style-type: none;
	border-bottom: 1px dotted #5383BA;
	margin: 0px 0px 3px 0px;
}

#sidebar li.widget_core_coll_category_list ul li ul li,
#sidebar_2 li.widget_core_coll_category_list ul li ul li {
	text-align: left;
	list-style-type: none;
	border-bottom: none;
	margin: 0px 0px 3px 0px;
}

#sidebar li.widget_core_coll_category_list,
#sidebar_2 li.widget_core_coll_category_list {
	text-align: left;
	list-style-type: none;
	border-bottom: none;
	margin: 0px 0px 3px 0px;
}


#sidebar .widget_core_linkblog ul li ul li,
#sidebar_2 .widget_core_linkblog ul li ul li {
	text-align: left;
	list-style-type: none;
	border-bottom: 1px dotted #5383BA;
	margin: 0px 0px 3px 0px;
}

#sidebar .widget_core_coll_xml_feeds ul li,
#sidebar .widget_core_coll_comment_list ul li,
#sidebar .notes,
#sidebar_2 .widget_core_coll_xml_feeds ul li,
#sidebar_2 .widget_core_coll_comment_list ul li,
#sidebar_2 .notes {
	text-align: left;
	list-style-type: none;
	border-bottom: 1px dotted #5383BA;
	margin: 0px 0px 3px 0px;
}

#sidebar .widget_core_coll_post_list ul li,
#sidebar_2 .widget_core_coll_post_list ul li,
#sidebar .widget_core_colls_list_public ul li,
#sidebar_2 .widget_core_colls_list_public ul li,
#sidebar .widget_core_colls_list_owner ul li,
#sidebar_2 .widget_core_colls_list_owner ul li {
	text-align: left;
	list-style-type: none;
	border-bottom: 1px dotted #5383BA;
	margin: 0px 0px 3px 0px;
}

#sidebar .widget_core_menu_link ul li,
#sidebar_2 .widget_core_menu_link ul li {
	text-align: left;
	list-style-type: none;
	border-bottom: 1px dotted #5383BA;
	margin: 0px 0px 3px 0px;
}

#sidebar .widget_core_user_tools ul li,
#sidebar_2 .widget_core_user_tools ul li {
	text-align: left;
	list-style-type: none;
	border-bottom: 1px dotted #5383BA;
	margin: 0px 0px 3px 0px;
}

#sidebar ul ol,
#sidebar_2 ul ol {
	text-align: left;
	list-style-type: none;
	border-bottom: 1px dotted #5383BA;
	margin: 0px 0px 3px 0px;
}

#sidebar ul li,
#sidebar_2 ul li  {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
}

#sidebar ul p,
#sidebar ul select,
#sidebar_2 ul p, #sidebar_2 ul select  {
	margin: 5px 0 8px;
}

#sidebar ul ul, #sidebar ul ol,
#sidebar_2 ul ul, #sidebar_2 ul ol  {
	margin: 5px 0 0 0px;
}

ol li, #sidebar ul ol li,
#sidebar_2 ul ol li {
	list-style: decimal outside;
}

#sidebar ul ul li,
#sidebar ul ol li,
#sidebar_2 ul ul li,
#sidebar_2 ul ol li  {
	margin: 3px 0 0;
	padding: 0;
}
/* End bText Lists */

/*	Begin Headers */
h1 {
	padding-top: 30px;
	margin: 0;
}

h2 {
	margin: 30px 0 0;
}

h2.pagetitle {
	margin-top: 30px;
	text-align: center;
}

#sidebar h2,
#sidebar_2 h2 {
	font-weight: normal;
	font-size: 16px;
	border-bottom: 1px solid #4E637B;
	text-align: right;
	text-transform: uppercase;
	line-height: 20px;
	margin-bottom: 10px;

}

h3 {
	padding: 0;
	margin: 30px 0 0;
}


/* End Headers */

/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
}

/*	Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}

.alignright {
	float: right;
}

.alignleft {
	float: left
}
/* End Images */


/* Begin Sidebar */
#sidebar form, #sidebar_2 form {
	margin: 0;
}


#sidebar .note, #sidebar .notes,
	#sidebar_2 .note, #sidebar_2 .notes  {
	margin-top: 1ex;
	font-size: 100%;
}

.widget_plugin_evo_Calr {
	padding-top: 10px;
}

table.bCalendarTable {
	font-size: 80%;
	width: 100%;
}

table.bCalendarTable caption {
	font-family: 'trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: normal;
	font-size: 16px;
	border-bottom: 1px solid #4E637B;
	text-align: right;
	text-transform: uppercase;
	line-height: 20px;
	margin-bottom: 10px;
}
table.bCalendarTable th {
	font-size: 70%;
}

input.SearchField {
	width: 160px;
	padding: 2px;
}
/* End Sidebar */

/* Begin Various Tags & Classes */
acronym,
abbr,
span.caps {
	cursor: help;
}

acronym,
abbr {
	border-bottom: 1px dashed #999;
}

blockquote {
	margin: 25px 5px 0 15px;
	padding-left: 10px;
	padding-right: 10px;
	border-left: 8px solid #4E637B;
	font-style: italic;
}

blockquote cite {
	margin: 2px;
	display: block;
}

.center {
	text-align: center;
}

hr {
	display: none;
}

a img {
	border: none;
}

.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
}
/* End Various Tags & Classes*/


/* Default styles overriden for this skin: */
table.prevnext_post {
	width: 100%;
}

Is there an easy way to do what I want?

Form is loading...

Text alignment of the Zen skin

1 coldhart Apr 11, 2008 15:12

2 afwas Apr 11, 2008 15:25

3 djidiouf Apr 12, 2008 00:33

4 afwas Apr 12, 2008 01:11

5 djidiouf Apr 12, 2008 03:43

6 hudson2001 Jan 19, 2010 15:03

About b2evolution

Downloads

About us

Webhosting Guide

Docs & Support

Other

Stay in touch