Jump to content

Archived

This topic is now archived and is closed to further replies.

monmart

How to change Primary Text and H tag CSS

Recommended Posts

monmart

I would like to customize the bodycopy of the theme, which happens to be Primary Text in the Global settings. But in order to change the CSS in Custom Code I need to know which class it's under.

Share this post


Link to post
Share on other sites
monmart

Thanks Steve,

 

However, I tried using P and there is no change or override. To test this I used a text widget with P and the widget responds to my custom CSS. With Primary Text there is no change. 

 

For example:

 

p {
  font-size: 24px;
}
 
has no effects on Primary Text.

Share this post


Link to post
Share on other sites
monmart

I'm still having trouble with this

 

The only way I can create custom CSS for the Primary Text is to use ".post-excerpt".

 

.post-excerpt{
font-family: ProximaNova-Thin;
font-size: 90%;
line-height: 1.6em;
margin-bottom:1.5em;
letter-spacing: 0.9px;
}

 

Is this safe? 

 

And if not, how am I able to change the Primary text.

 

I tried 

 

p {
  font-size: 24px;
}

But this has no effect.

 

As for H tags, I have tried this

 

h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 48px;
}

With no change.

 

So what's the secret? haha

Share this post


Link to post
Share on other sites
Rob

Show me a snapshot of where the text is that you want to change, and give me a link. I'll happily take a look.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
monmart

Show me a snapshot of where the text is that you want to change, and give me a link. I'll happily take a look.

 

Thanks! Well the project is private and it's on a local host. I can give you a screenshot.

Share this post


Link to post
Share on other sites
Rob

Try

h1, .fpost .entry-title {
    font-size50.4px;
    line-height110%;
}

 

Change the 50.4px to the size you desire.

 

Do you have Firebug for Firefox?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
monmart

 

Try

h1, .fpost .entry-title {
    font-size: 50.4px;
    line-height: 110%;
}

 

This works!

 

 

 

 

Do you have Firebug for Firefox?

 

Yes I do. And I think I know what you're getting at; By hovering over the code in FireBug it will show me what the classes are?

 

What gets me though, is the documentation states to use H1 and P like you normally would to customize CSS. Maybe it's just me, but this seems only partially true as there are other classes deeper below these tags such as "fpost and "entry-title".

Share this post


Link to post
Share on other sites
monmart

Rob,

 

How would you go about finding the correct CSS with Firebug.

 

For example, with the post bodycopy it uses "aside" with a class of "post-excerpt"

 

So would it be

 

aside, .fpost .post-excerpt {
    font-size: 50.4px;
    line-height: 110%;
}
 
This seems to work for me btw.

Share this post


Link to post
Share on other sites
Danny

If you want to become a ninja with Web Devs tools such as Google Chromes Web Dev Tools (Chromes is the best imo and easier to use than FireBug). I would highly recommend you check out Code School, its free to sign up and they provide a free and insanely awesome course on how to use Chromes Web Dev tools. Seriously, after doing this course, you should be a ninja with it.

 

http://www.codeschool.com/courses/discover-devtools

 

Also, imo, overriding the default styling of p and header tags shouldn't be done. What I would do instead is override the class for that particular header or p tag. Most of them include a class which you can target for customization.

 

If they don't include a class, then use the DOMs hierarchy to target it, for example:

 

<div class="omgwtfbbq">

<h1>Awesome Sauce tastes awesome!</h1>

</div>

 

Now to target that h1 tag and customize it with CSS, making the text larger or giving it a specific color, what you would do is this:

.omgwtfbbq h1 {
font-size: 2000px;
color: red;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
monmart

Thanks Danny, good stuff! I will check out the course right away. I'm also trying to get away from CSS fundamentals and into something more advanced, if you know of any online course for more advanced CSS please let me know. I took the CodeAcademy course and I'm looking to expand on that.

 

Yeah you're right, tarting specific H and P tags will give me more control.

Share this post


Link to post
Share on other sites
monmart

Danny I just wanted to thank you SO much man for your CodeSchool recommendation and using Chrome Tools. This is exactly what I've been looking for. Now I can edit my theme perfectly! 

 

Saves HOURS of time, thank you!!

Share this post


Link to post
Share on other sites

×