Jump to content

Archived

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

travistsickle

Custom Styling Classes

Recommended Posts

travistsickle

Is there a tutorial on how to use the custom styling classes and inline css styling.

 

I'm trying to figure out how to change the font color on a single page header and not the entire site.  When I add custom css to the </> custom section it changes the entire site.  So I'm trying to only do it on a single page.  

 

Thank you.

Share this post


Link to post
Share on other sites
GetMeWebDesign

First question would be - are you familiar with using Chrome developer tools (which is more ideal as you should be editing site in Chrome), Firebug, IE F12 developer etc? 

 

There are various methods to Custom styling/inline styling, with the latter being used sparingly.

 

When you add code to your </> Custom or the WP admin > Pagelines > DMS Fallbacks > Custom LESS, they will apply to the site, unless you are more specific in your Custom CSS rule ie:

 

h1 {

  color: red;

}

will turn all h1 into red all over your site, whereas you can identify site wide section...

 

.pl-hero h1 {

  color: red;

}

 

will only turn hero h1 red and not others like masterhead h1 etc. In the same way you can overide on a page using its id etc

 

However, if there is a certain page or pages where you want to customise, then you can create a custom class in </> custom or DMS Fallbacks

 

.mycolor {

  color: #7A43B6;

}

 

In each section, under the Standard Options, you reference your custom class name but without the full stop ie: mycolor, in the Custom Styling Classes. Please note: this will apply to that section where ever it is used with that template . If it is a single page then you need to either save that page as a separate template or use </> custom or DMS Fallbacks to target that page or that sections id

 

Inline styling is to use basic CSS rules. Ie

 

color: red; back-ground-color: blue;

 

It should be used sparingly and again will apply to that section wherever it is used with that associated template. I rarely use it, but it is a quick way to add a CSS rule without have to write a custom CSS/LESS rule. The advantage of the latter, is that your custom LESS can contain many separate rules. Good examples shown here as well as showing what is the difference between LESS and complied CSS http://docs.pagelines.com/advanced/less-css


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
travistsickle
The css that I want to change is below and I want to change the text to white but only for the one page.  Not every section on every page.  The tutorial says to make my own css and when i do I add the title without the period in front for the section.  But that doesn't seem to work.  What am I missing?
 
.pl-ph-container h2 {
    color: #16A5DD;
    font-size: 50px;
    font-weight: 600;
    line-height: 1.3em;
    margin: 0;
}

 

 

I tried this...and placed it in the custom css section and then put blue-white-header in the section under custom styling classes.  Doesn't work.

 

.blue-white-header {
    color: #FFFFFF;
    font-size: 60px;
    font-weight: 800;
    line-height: 2.0em;
    margin: 0;
}

Share this post


Link to post
Share on other sites
travistsickle

I figured it out and it works.  I accidentally put the same css class in the custom area.  

Share this post


Link to post
Share on other sites
GetMeWebDesign

Glad you are getting the hang of it


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny

Thanks for informing us the issue has been resolved and yeah, you only need the class name in the styling class field, not the full CSS for that class.

 

For example, let's say you add the following CSS, which will give any section a blue background color.

 

.bg-blue { background-color: #428BCA; }

 

You only need to add this to the styling classes field.

 

bg-blue

 

You do not need anything else, except the class name.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
tuftseducation

How do I convert #site .icallout-action {background-color: #afb5d1;} to a Custom Styling Class so I can add it to just one icallout button?

Share this post


Link to post
Share on other sites
Danny

tuftseducation - Not sure what you're referring to. Therefore, would it be possible for you to create your own topic as this topic has now been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×