GoFuckYourself.com - Adult Webmaster Forum

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)
-   Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)
-   -   Who's the WP theme.CSS guru around here? (https://gfy.com/showthread.php?t=717012)

spacedog 03-21-2007 09:01 PM
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 :helpme :helpme :helpme :helpme

These damn float .px are no fun either :1orglaugh

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 (Post 12127338)
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 (Post 12127363)
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 :thumbsup

All fixed now..

spacedog 03-21-2007 10:19 PM
just read sarettah's & Sultry_Selenia's replies. .. thanks :thumbsup

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

sarettah 03-21-2007 10:45 PM
you're welcome :thumbsup

Glad you got it working


All times are GMT -7. The time now is 09:12 AM.

Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2025, vBulletin Solutions, Inc.
©2000-, AI Media Network Inc123