Easy Styles with PageLines’ Custom Classes

Posted · 1 Comment
class-blog

We’re happy to have one of PageLines’ rockstar store developers guest blogging on PageLines.com.  Ellen Moore has been creating sections and plugins for PageLines for the last few years and has a wealth of knowledge to share with the community.  Today, Ellen walks through all the ins and outs of applying custom styling classes to a section in DMS.

Sometimes we get bogged down trying to figure out how to do something simple, say like changing the color of the text on items in one section but keeping the default text color in others.

Some would go and find the CSS class to target in the HTML code and write CSS to target that class. Problem with that solution is that you need to find the class to target in each section you want to change the text color.

Create and Apply Custom Styling Class

A better way to handle changing text color for certain items is to create a custom styling class that contains the css with the text color. Say you want the text color to be red in some sections. Let’s create a custom class called my-red-text and add the code to the Custom LESS/CSS Box under the Custom Tab in the DMS Editor.

Step 1: Create Class in Custom LESS/CSS Code Box

Go to the DMS Toolbox –> Custom –> Custom LESS/CSS Tab. Copy and paste the code below in the code area.

/* Custom Class for Red Text */
 .my-red-text {
 color: #ff1414;
 }

Here is how it should look.

my-red-text class added to Custom LESS/CSS Box

my-red-text class added to Custom LESS/CSS Box

Step 2: Add Custom Class to Section(s) to apply CSS color change

Every section in DMS has Standard Options under the Section specific options. Under the Standard Options is a text field called Custom Styling Classes. This is where you are going to add the class my-red-text.

In this example I want the text in my Navi Menu to be red. To do this I opened up the options for Navi by clicking on the pencil icon and added the class to the Custom Styling Classes text field.

Navi area without Custom Class

Navi without custom class added

Navi without custom class added

Navi area with Custom Class

Navi with custom class my-red-text

Navi with custom class my-red-text

The my-red-text class can be added to any section by adding it to the Standard Options –> Custom Styling Classes text area.

Bonus Tip:

You can use this class when writing posts or pages by adding it to the element. Just click on the Text Tab in the post/page editor and add the class to an HTML element.

Add class to an html element in post/page editor

Add class to an html element in post/page editor

Result:

My Red Heading using my-red-text class

My Red Heading using my-red-text class

Extra Classes Contained in DMS Extensions

Some DMS Extensions have created extra styling classes to add in the Custom Styling Classes option rather than including them as options since styling cases can be many. I just released Single Bits for DMS that helps you create unique layouts for the single post and page templates and saw the need for adding extra styling classes that some users might find helpful but that others would find unnecessary.

Case in point, with Single Bits you can use the Featured Image of a post as the background in the Container area that holds Single Bits and DMS Sections. A common use is to display the post title and some post meta over the background image. In some cases, the color of the text might not stand out against the background so I included classes to create a dark or light opaque background around the text.

Single Bits without extra styling classes

Single Bits without extra styling classes

Single Bits With Extra Styling Classes

Single Bits With Extra Styling Classes

A Really Big Bonus:

I chatted with Danny who keeps people happy on the Support Forums with excellent help and asked him what the biggest styling issues were for people. He responded that padding and margin for sections and font styling were some of the major queries. I covered font styling a little with creating a custom styling class but failed to provide an example for padding and margin styling. Don’t worry, I have a solution (rather than a long blog post that gets longer).

I’m providing people with a little plugin called Classy that has some styling classes already created for you to add to the Custom Styling Classes area in your Section Options. Install Classy like you would any WordPress Plugin and Activate. To see the additional classes go to Site Options and click on Classy.

Classy Download

Find classes included in Classy under Site Options

Find classes included in Classy under Site Options

Further Reading:

Section Styling and HTML and CSS Utilities in PageLines Docs

One Response to "Easy Styles with PageLines’ Custom Classes"
  1. batmanmac says:

    HI Ellen
    Very well explained and the “Single Bits” is really amazing, like all your sections. 
    Thank you very much for always helping us with our problems.
    Regards.
    Batman

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>