Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Applying styling to H2 H3 in Content Post and Pages (http://forum.bytesforall.com/showthread.php?t=11569)

Mykhailo Dec 6, 2010 05:50 PM

[SOLVED] Applying styling to H2 H3 in Content Post and Pages
 
Applying styling to H2 H3 in Content Post and Pages

Hi, on my post and pages I would like to Center h2, h3 tags within content can you please direct me into the right steps?

Thanks
Mike

lmilesw Dec 6, 2010 05:59 PM

If I understand correctly you would just use the following in ATO>Add HTML/CSS Inserts>CSS Inserts
HTML Code:

h2, h3 {
text-align:center;
}


Mykhailo Dec 6, 2010 06:05 PM

Thanks lmilesw, it worked nice, was sorted now :) However it caused Title tag (h1) to be mived to the middle as well, would you know how to move it back to the left? I have tried to add an additional line with
h1{
text-align:left;
}

it worked, only pulled h2, h3 to the left as well

lmilesw Dec 6, 2010 06:15 PM

How about this
HTML Code:

h1 {
text-align: left !important;
}

Not sure why it is happening though.

Mykhailo Dec 6, 2010 06:32 PM

h1 priority pulled left h2, h3 as well. Here is the code all together

h1 {
text-align: left !important;
}
h2, h3 {
text-align:center;
}

Strange really, I'm kind of puzzled myself.

ps. I have sent my site url

lmilesw Dec 6, 2010 07:10 PM

I just did a virtual test of
h2, h3 {
text-align: center;
}
and all worked fine. Are you putting the code in ATO>Add HTML/CSS Inserts>CSS Inserts?

Mykhailo Dec 7, 2010 09:08 AM

Hi Imilesw,

Under "Various Content Items" > clicked Add HTML/CSS Inserts > CSS Inserts > and inserted the code you gave. Still something cases for h2, h3 to stick on the left.

I also added a sentence "Party Planning Videos" to my main front and assigned h3 tag to it still stays on the left.

I have made a snapshot of the CSS Insert section and sent it to your e-mail.

Mike M

Mykhailo Dec 8, 2010 12:52 PM

Hi lmilesw, I hope you have received my url e-mail.

Would you think there is a way to specify separately for H1 to behave differently that h2, h3 on out content pages and posts? may be it make sense in some way to make h1 tag on the left only and h2, h3 on the content middle. I will try to play around to see if I can find how.

Mike M

lmilesw Dec 8, 2010 01:19 PM

First of all I didn't get the screenshot of your CSS. Next which H1, H2, and H3 tags are you targeting. The ones for the post title or within the post itself?

Mykhailo Dec 8, 2010 05:00 PM

Hi, h2, h3, in post and pages sections. As I tried to move h2, h3 within the page content section Blog Title in a header moves as well. All I wanted is to make h2, h3 move independently within our content post and pages from h1 header and title tags.

Mike

lmilesw Dec 8, 2010 06:01 PM

Instead of just h1 h2 or h3 use.
div.post-bodycopy h1
or
div.post-bodycopy h2
or
div.post-bodycopy h3
for the selectors then only the h tags within the posts should be affected.

Mykhailo Dec 9, 2010 08:35 AM

Hi,

I wish I would know how to structure the CSS entries correctly, can you please provide the complete code structure that I can insert it into the "CSS Inserts" section. I have tried different combinations with no success.

Many Thanks

lmilesw Dec 9, 2010 02:21 PM

To center h2 and h3 tags within the body of the posts use the following in CSS Inserts.
HTML Code:

div.post-bodycopy h2, div.post-bodycopy h3 {
text-align: center;
}


Mykhailo Dec 9, 2010 03:27 PM

1 Attachment(s)
Hi lmilesw,

Thanks for the code, I inserted in the css section as advised and for some reason something make h3 glued to the left hand side of the content section. I have created a sort video that you can see what I have done, just in case I was wrong with the code.

Mike.

lmilesw Dec 9, 2010 10:03 PM

Right above the code you put in there is a missing ending curly brace so the code isn't executed. Here is what you currently have.
HTML Code:

/* reset 2nd+ level */
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a {
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;

div.post-bodycopy h2, div.post-bodycopy h3 {
text-align: center;
}
div.page-bodycopy h2, div.page-bodycopy h3 {
text-align: center;
}

Instead of that you should put the following
HTML Code:

/* reset 2nd+ level */
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a {
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
div.post-bodycopy h2, div.post-bodycopy h3 {
text-align: center;
}

I added a } above the centering code and took out the div.page-bodycopy selector as it is invalid.

Mykhailo Dec 10, 2010 06:46 AM

Thanks lmilesw, it worked perfectly well :)


All times are GMT -6. The time now is 02:30 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.