Jump to content

Archived

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

alexanderck3

Where can I find a list of styling classes?

Recommended Posts

alexanderck3+    0
alexanderck3

Like how would I change the text to white for instance? I know this would be easy in css but I can't figure out how to do it in styling options per section which would be more powerful.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

I am in the process of writing a docs page that will cover a variety of customizing options and this is one of them. The best method imo, is to inspect the element and find the appropriate class and customize it that way.

 

However, for some sections you can do create a custom class such as:

 

.text-white {

color: #FFFFFF;

}

 

.text-blue {

color: #428BCA;

}

 

.text-red {

color: #D9534F;

}

 

and so on, add these to your custom code/stylesheet then goto the sections options, on the section you want to change the color and in the Standard Options > Styling Classes field, add the classes name.

So using the code above as an example, lets say you want to change the Mastheads (for example) title and text color from the default to red, in the Styling Classes field, you would add

text-red

 

Then click Publish. When you refresh your site, the Masthead sections title and subtext should be red.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
alexanderck3+    0
alexanderck3

Awesome, thanks so much Danny! Definitely let me know when you finish that Doc!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

You can find it here - http://docs.pagelines.com/customize/css-less-cheatsheet

Please be aware that is a very draft and will be update frequently, but with all the stuff Im adding it will take some time as I have to check all the code, as well as get grammar checks etc...


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
CoachJo    3
CoachJo

I tried adding to the custom code to make a green text option.

 

First I tried putting in:

 

.text-green {

color: #003300;

}

 

When that didn't work, I tried making it look more like my area CSS:

 

/* green text */
.my-green-text {
    color: #003300;
      color:  green;
}

 

but that didn't work either.  What am I doing wrong?

 

Thanks!

Share this post


Link to post
Share on other sites
apcomputing    2
apcomputing

Can you post a link to your site and what text you are trying to change the color of.

We could give you example code for that area, and that would probably make a lot more sense.

 

Feel free to message me as well and I will get back to you as quickly as I can.

 

These are some very helpful websites for beginners or people who just want a quick answer!

 

http://www.w3schools.com/css/

http://www.designscripting.com/webtools/css3/generator/

As Danny mentioned: http://docs.pagelines.com/customize/css-less-cheatsheet

Share this post


Link to post
Share on other sites
CoachJo    3
CoachJo

I tried deleting my message above but it didn't work.  The second option does work.  Thanks!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

CoachJo

Basically, when you create a custom class like the ones I listed above, you add these to either your child theme/customize plugins style.less file or to DMS Toolbar > Custom Code > CSS/LESS Editor.

 

Once add, publish these changes, now goto the section where you want to have your text green for example and click on the pencil icon to edit that section, this will bring up that sections options, which include an option called Styling Classes. In that option field add the classes name which you want to use, for example, if you want green text, add my-green-text.

 

You only need to add the classes name nothing else.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×