Who's the WP theme.CSS guru around here? - GoFuckYourself.com

spacedog · 03-21-2007, 09:01 PM

I've been fucking with a custom theme for hours trying everything possible & it's busting my friggen balls & need some help.

I got .css with colums aligned left with text aligned left, but whole blog is also aligned left, so I try centering it, but the text then centers with it & it's pissing me off because I want centered blog with left aligned text & only thing I can accomplish is centered blog with centered text or left aligned blog with left text when what I want is centered blog with left aligned text

These damn float .px are no fun either

348-132-803

sarettah · 03-21-2007, 09:39 PM

I am not a guru but

Code:

<style>

body {
   text-align : center;
   min-width : 500px;
   padding: 0;
   margin: 0;
   
}

DIV.main_page { 
  position:relative; 
  text-align: center;
  left:0px; 
  width: 500px;
  margin-left : auto;
  margin-right : auto;
}

DIV.main_head{
  text-align: center;
  display: table-cell;
  width:500px;
}

DIV.left_text{
  display: table-cell;
  text-align: left;
  width:500px;
 
}


</style>

</head>
  <body>
<br><br>
<div class="main_page">
<div class="main_head">
This text should be centered on the page<br>
</div>
<br>
<div class="left_text">
This text should be left aligned in center of page.<br> 
</div>
</div>
  </body>
</html>

example: http://www.bntnews.com/cssexample.htm

Hope that helps

spacedog · 03-21-2007, 09:53 PM

Quote:

Originally Posted by sarettah

I am not a guru but

Code:

<style>

body {
   text-align : center;
   min-width : 500px;
   padding: 0;
   margin: 0;
   
}

DIV.main_page { 
  position:relative; 
  text-align: center;
  left:0px; 
  width: 500px;
  margin-left : auto;
  margin-right : auto;
}

DIV.main_head{
  text-align: center;
  display: table-cell;
  width:500px;
}

DIV.left_text{
  display: table-cell;
  text-align: left;
  width:500px;
 
}


</style>

</head>
  <body>
<br><br>
<div class="main_page">
<div class="main_head">
This text should be centered on the page<br>
</div>
<br>
<div class="left_text">
This text should be left aligned in center of page.<br> 
</div>
</div>
  </body>
</html>

example: http://www.bntnews.com/cssexample.htm

Hope that helps

I understand that & question isn't about how to align the text.

I'm having issue with a conflict somewhere in either header.php or .css & whatever I try to center the 3 colums of blog end up centering the text as well even though the .css is coded for left text. I been going in circles with this for hours & for the life of me can't get all the files to co-operate.

I wish it was simple to code as in your example, but I'm referencing to a blog theme which is made of several different .php templates & somewhere there is a conflict.

anyway, here's the .css

Code:

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
	margin: 0;
	padding: 0;
}

body{
	font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
	font-size: 12px;
	text-align: left;
	vertical-align: top;
	background: #FF6600;
	color: #003300;
}

h1, h2, h3, h4, h5, h6{
	font-family: Verdana, Arial, Helvetica, Georgia, Sans-Serif;
	font-size: 14px;
}

a{
	text-decoration: underline;
	color: #fff;
}

a:hover{
	text-decoration: none;
}

a img, img{
	border: 0;
}

abbr, acronym{ border: 0; }

address, dl, p{ padding: 15px 0 0; }

blockquote{
	margin: 15px 0 0;
	background: #FFCC00;
	color: #fff;
}

blockquote p{ padding: 15px; }

blockquote blockquote{
	margin: 15px;
	background: #FFCC00;
	color: #fff;
}

code{
	background: #FFCC00;
}

dt{ font-weight: bold; }

dd{ padding: 0 0 0 15px; }

hr{
	clear: both;
	margin: 15px 15px 5px 15px;
	border: 0;
	height: 1px;
	text-align: left;
	background: #FFCC00;
	color: #FFCC00;
}

/* Modified image styles of WordPress Default Theme, Kubrick */

.entry img{
	border: 1px solid #FFCC00;
}

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

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

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

img.wp-smiley{
	border: 0;
	margin: 0;
	padding: 0;
	background-color: transparent;
}

.alignright {
	float: right;
}

.alignleft {
	float: left
}

/* end image styles */

small{
	font-size: 11px;
}

pre{
	width: 90%;
}

input, textarea{
	font-family: Arial, Helvetica, Georgia, sans-serif;
	font-size: 12px;
	padding: 2px;
}

input#s, input#author, input#email, input#url, textarea#comment{
	border: 1px solid #393939;
	background-color: #FF6600;
	padding: 3px;
	color: #fff;
}

input#author, input#email, input#url{
	margin: 0 5px 0 0;
}

#saranwrap{
	margin: 0 auto;
	width: 800px;
	text-align: left;
	vertical-align: top;
}

.airbubble{
	padding: 5px;
	background: #003300;
}

#header{
	width: 800px;
	height: 113px;
	background: #000 ;
	clear: both;
}

#header h1{
	padding: 35px 0 0 20px;
	font-family: Arial, Helvetica, Georgia, Sans-Serif;
	font-size: 36px;
	color: #fff;
}

#top-menu{
	padding: 11px 0 10px 0;
	background: #FFCC00 ;
}

#top-menu ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#top-menu ul li{
	display: inline;
	padding: 0 10px;
	font-family: Arial;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFCC00;
}

#top-menu a{
	text-decoration: none;
}

#top-menu a:hover{
	text-decoration: underline;
}

#banner{
	float: left;
	margin: 5px 0;
	width: 760px;
	height: 250px;
	overflow: hidden;
	background: #FFCC00;
}

#page{
	clear: both;
	float: left;
	width: 760px;
	background: #FFCC00;
	color: #FF6600;
}

.pagecap{
	padding: 19px 20px;
	font-family: Arial;
	font-size: 18px;
	background: #FFCC00;
	color: #fff;
}

#sidebar{
	float: left;
	width: 170px;
}

#sidebar ul{
	margin: 5px 5px 0;
	padding: 0;
	list-style-type: none;
}

#sidebar ul li h2{
	margin-bottom: 1px;
	padding: 11px 10px 10px;
	font-size: 12px;
	font-weight: bold;
	color: #FF6600;
	background: #FFCC00;
}

#sidebar ul ul{
	margin: 0;
	padding: 0 0 20px;
	background: #FFCC00;
}

#sidebar ul ul li{
	padding: 6px 10px 0 10px;
	font-size: 11px;
	line-height: 18px;
}

#sidebar ul ul ul{
	padding: 0;
	background-color: transparent;
	background-image: none;
}

.obar{
	float: left;
	width: 160px;
}

.obar ul{
	margin: 97px 10px 0 0;
	padding: 0;
	list-style-type: none;
}

.obar ul li#search{
	background-image: none;
	padding-left: 0;
}

.obar ul li#search input{
	margin: 0 0 5px;
}

.obar ul li h2{
	padding-bottom: 10px;
	border-bottom: 3px solid #FFFFFF;
	font-size: 12px;
	color: #000000;
}

.obar ul ul{
	margin: 0;
	padding: 0 0 20px;
}

.obar ul ul li{
	padding: 6px 10px 0 15px;
	font-size: 11px;
	line-height: 18px;
	background: url(images/bg-bullet.gif) 0px 13px no-repeat;
}

.obar ul ul ul{
	padding: 0;
}

.obar ul ul ul li{
	padding: 6px 10px 0 10px;
	background-color: transparent;
	background-image: none;
}

.narrowcolumn{
	float: left;
	margin-top: 5px;
	width: 581px;
	background: #FFCC00;
}

.narrowcolumn-footer{
	clear: both;
	width: 581px;
	height: 18px;
	background: #FFCC00;
}

.maincol{
	float: left;
	width: 421px;
}

.maincol-padding{
	padding: 10px 10px 0;
}

.maincol .site-title{
	padding: 10px 10px 8px;
	border-bottom: 3px solid #006600;
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	color: #006600;
}

.subscribe{
	margin: 0 0 1px;
	padding: 6px 10px 7px;
	border-bottom: 3px solid #fff;
	font-size: 11px;
	background: url(images/feed-icon.png)  10px 6px no-repeat;
}

.subscribe a{
	padding-left: 22px;
	color: #000000;
}

.post{
	margin-bottom: 10px;
	padding: 10px;
	background: #FFCC00;
}

.post h2{
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
}

.post h2 a{
	color: #000000;	
}

.entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6{
	border: 0;
	padding: 15px 0 0;
	background: none;
}

.entry h1{
	font-size: 24px;
	font-weight: normal;
	line-height: 30px;
}

.entry h2{font-size: 14px;}

.entry h3{}

.entry  h4{ font-size: 16px; }

.entry h5{ font-size: 14px; }

.entry h6{ font-size: 11px; font-weight: normal; }

.entry{
	line-height: 24px;
	color: #000000;
}

.postmetadata{
	margin: 10px 0 0;
	padding: 6px 10px;
	font-size: 11px;
	line-height: 18px;
	background: #FFCC00;
	color: #000;
}

.postmetadata a{
	color: #FF6600;
}

.browse{
	padding: 0 10px;
	font-size: 11px;
	line-height: 18px;
	background: #FFCC00;
}

/* comments template */

.comments-template{
	margin: 10px 0 0;
	border-top: 1px solid #fff;
}

.comments-template ol{
	margin: 0;
	padding: 0 0 20px;
	list-style: none;
}

.comments-template ol li{
	margin: 15px 0 0;
	padding: 5px 0 15px;
	line-height: 24px;
	line-height: 24px;
	border-bottom: 1px solid #fff;
}

.commentmetadata{
	font-size: 12px;
}

.comments-template p.nocomments{
	padding: 0;
}

.comments-template textarea{
	width: 90%;
}

/* end comments template */

#footer{
	clear: both;
	width: 760px;
	padding: 5px 0;
	background: #FFCC00;
}

#footer p{
	margin: 0 5px;
	padding: 20px 10px;
	font-size: 11px;
	line-height: 18px;
	background: #FFCC00;
}

I've tried center tags, div, etc & all work but end up changing text with it at same time.. I'd like for the entire blog to be in center with the left align text, but am only able to get center/center or left/left but never center/left

Sultry_Selenia · 03-21-2007, 10:04 PM

I'm not exactly a css guru, but

Code:

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
	margin: 0;
	padding: 0;
}

What you want to do is seperate your text elements out from the body element so that you can define those seperately (like break off h1, h2, p, etc into their own section)

so would end up something like

Code:

h1, h2, p, etc etc {
margin: 0;
padding: 0;
text-align: left;

and you would put whatever styles you want to the body in a seperate section in the css.
and that way you're defining the alignment of the text elements completely seperate from the body or any other div.

And hopefully this makes some sort of sense, I know enough css to be dangerous, but not always enough to be completely clear haha

sarettah · 03-21-2007, 10:08 PM

Quote:

Originally Posted by spacedog

I've tried center tags, div, etc & all work but end up changing text with it at same time.. I'd like for the entire blog to be in center with the left align text, but am only able to get center/center or left/left but never center/left

That is what the double wrapper (body with text-align center and main_page with text_align center) takes care of.

I worked on this for a bunch of hours last week with a template, finally found the fix on a css board.

I only put up the basic part of it, but the double wrapper is key to it. After that was in place everything else worked fine. I had to mess a bit with moving stuff out of display:block and make them table-cell or inline and such.

The auto magins on the main_page wrapper are a key part too.

Sultry_Selenia · 03-21-2007, 10:09 PM

Ran out of edit time lol - but just on a quick rescan of your css, it looks like basically the only thing with an alignment value is the second body section. Chances are, everything else is just inheriting that value because they don't have anything specfiically set, unless I'm completely wrong about how this works (which I may be, css stumps the hell outta me sometimes).

spacedog · 03-21-2007, 10:15 PM

Thanks Tim from Xlabor

All fixed now..

spacedog · 03-21-2007, 10:19 PM

just read sarettah's & Sultry_Selenia's replies. .. thanks

Above was posted before reading.. tim from xlabor hit me up & we fixed it

sarettah · 03-21-2007, 10:45 PM

you're welcome

Glad you got it working

03-21-2007, 09:01 PM	#1
spacedog Yes that IS me. Bitch. Industry Role: Join Date: Nov 2001 Posts: 14,149	Who's the WP theme.CSS guru around here? I've been fucking with a custom theme for hours trying everything possible & it's busting my friggen balls & need some help. I got .css with colums aligned left with text aligned left, but whole blog is also aligned left, so I try centering it, but the text then centers with it & it's pissing me off because I want centered blog with left aligned text & only thing I can accomplish is centered blog with centered text or left aligned blog with left text when what I want is centered blog with left aligned text These damn float .px are no fun either 348-132-803

03-21-2007, 10:04 PM	#4
Sultry_Selenia Confirmed User Join Date: Jul 2006 Posts: 337	I'm not exactly a css guru, but Code: body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{ margin: 0; padding: 0; } What you want to do is seperate your text elements out from the body element so that you can define those seperately (like break off h1, h2, p, etc into their own section) so would end up something like Code: h1, h2, p, etc etc { margin: 0; padding: 0; text-align: left; and you would put whatever styles you want to the body in a seperate section in the css. and that way you're defining the alignment of the text elements completely seperate from the body or any other div. And hopefully this makes some sort of sense, I know enough css to be dangerous, but not always enough to be completely clear haha __________________ Adult copywriting, blogging and reviewing services ICQ 269179271 \| Retro Porn Last edited by Sultry_Selenia; 03-21-2007 at 10:06 PM..

03-21-2007, 10:09 PM	#6
Sultry_Selenia Confirmed User Join Date: Jul 2006 Posts: 337	Ran out of edit time lol - but just on a quick rescan of your css, it looks like basically the only thing with an alignment value is the second body section. Chances are, everything else is just inheriting that value because they don't have anything specfiically set, unless I'm completely wrong about how this works (which I may be, css stumps the hell outta me sometimes). __________________ Adult copywriting, blogging and reviewing services ICQ 269179271 \| Retro Porn

03-21-2007, 10:45 PM	#9
sarettah see you later, I'm gone Industry Role: Join Date: Oct 2002 Posts: 14,121	you're welcome Glad you got it working __________________ All cookies cleared!

03-21-2007, 10:15 PM	#7
spacedog Yes that IS me. Bitch. Industry Role: Join Date: Nov 2001 Posts: 14,149	Thanks Tim from Xlabor All fixed now..

03-21-2007, 10:19 PM	#8
spacedog Yes that IS me. Bitch. Industry Role: Join Date: Nov 2001 Posts: 14,149	just read sarettah's & Sultry_Selenia's replies. .. thanks Above was posted before reading.. tim from xlabor hit me up & we fixed it