Jump to content

Archived

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

altonc

Styling Classes - How to use them?

Recommended Posts

altonc

CSS newbie here.

Are there any instructions on how to use the "Styling Classes" section in the "Standard Options" panel scattered about through most of the editor pages? It's just one input field, and I'm not sure what the option(s) is/are.

 

Reference image here.

 

Please advise.

Thanks much!

Share this post


Link to post
Share on other sites
Rob

Hi,

 

When you think or know you want to style something uniquely, you can add a custom class name to that field.  Let's say you want to make all the text in a section red.  You would add something like my-red-text (classes cannot have spaces, and only - or _ as punctuation) to that field.

 

Then, you could add CSS to the Custom Code editor, like this:

.my-red-text {color: red;}

 

That will make the text in that section only, red, as desired.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
altonc

Thank you Rob for your Herculean efforts on this board.

And thanks for helping send me in the right direction.

I look forward to more details eventually being added to the documentation.

 

A

Share this post


Link to post
Share on other sites
Rob

You're very welcome.  I too look forward to the continued expansion of our docs.  Now, they're a community effort and everyone is welcome to contribute.  That should make them some of the best docs online. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
margeaux7

Hello,

I put

my-red-text in Styling Classes

In Custom code I put

.my-red-text {
  color: red !important;
}

 

Nothing happened. Could you please tell me what I did wrong so that I can begin to understand and stop asking questions?

Thank you.

Share this post


Link to post
Share on other sites
batman

Hi

I copy the codes and this work fine to me at Hero, see the images

Captura%2520de%2520pantalla%25202013-08-

 

Captura%2520de%2520pantalla%25202013-08-

 

Please, you can verify 

1. You have not any space behind my-red-text in Styling Classes

2. You have published the change

3. You clean your cache browser


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
batman

Hi margeaux7

The two image are the same

Please, you can add the image at  "Styling Classes"

:)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
nfp1900

I'm finding that you can't apply the same CSS to two styling classes on the same page. e.g. if I have two highlights that I want to apply a background to and have saved the classes highlight1 and highlight2

 

.highlight1 .highlight2 {

background-color: #fff

}

 

the CSS doesn't work - but if I use just one class it's fine. 

Share this post


Link to post
Share on other sites
batman

Hi there

Please, you can try again

You see the image from my test forum

1. Write in your "Custom Code"

 .my-red-text {

  color: red !important;
}

2. Publish

Captura%2520de%2520pantalla%25202013-08-

3. Write in your "Styling Classes"

my-red-text (without the dot)

4. Publish

5. Refresh

Captura%2520de%2520pantalla%25202013-08-

 

I hope this works for you

:)


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
margeaux7

I promise you that is exactly what I have. I also deactivated all of my plug-ins to see if there was a conflict. I also double checked to make sure I didn't have any conflicting custom code written. Can you think of anything else that is preventing this from working. I also examined whether I have extra spaces and I do not.

Share this post


Link to post
Share on other sites
Rob

Possibly a plugin conflict, particularly if you're using legacy products or any older plugins that haven't been made ready for WP 3.6.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
margeaux7

Okay. Thank you very much for your time. Let's close this. Hopefully it will help someone else though.

Share this post


Link to post
Share on other sites
Danny

I'm finding that you can't apply the same CSS to two styling classes on the same page. e.g. if I have two highlights that I want to apply a background to and have saved the classes highlight1 and highlight2

 

.highlight1 .highlight2 {

background-color: #fff

}

 

the CSS doesn't work - but if I use just one class it's fine. 

 

Your code is not valid, you're missing a , to separate the two classes. It should look like this:

.highlight1, .highlight2 {
background-color: #fff
}

However, if you want a white background, see our documentation here for a better example, by creating multiple classes for different colors then just add the class name for that section.

 

http://docs.pagelines.com/tutorials/section-area-styling

 

Although the doc is specific to the Full Width Layout Section, the principle is the same for any style classes field.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

Thanks for the tip with the comma!

Share this post


Link to post
Share on other sites
Danny

no problem :D


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
caspersjan

I just found this thread, followed the instruction and tips and hey presto - styling classes at my beck and call! This is easily the best improvement from Framework I have seen - I used to search high and low for the classes of items and did not always find them. Now I can write them, in seconds. Thank you all for your great work! 

Share this post


Link to post
Share on other sites
Rob

You're very welcome and I'm happy to hear you're pleased with DMS!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×