• 0
Sign in to follow this  
Followers 0

Where can I find a list of styling classes?

Question

Posted · Report post

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

7 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0