Adding Custom CSS In Platform 5

Adding css is something every developer has to do at some point. But that also brings up some questions about where it should be placed.

With Platform 5 or DMS you have a couple options.

Option one:

Platform 5 users

The first and probably the easiest is to use the Custom Less plugin that is available to Platform Pro users. You can download it from the extend area by simple searching for “LESS” and it will pop up.

The benefits from using the plugin is that it gives you a bit of assurance that your custom css will be safe from updates.  The css you add will update in real time with no need to refresh the page. The downside is that currently it is a bit hard to read once you get a lot of lines.

less

DMS users

DMS users can apply there custom css to the LESS/CSS area in the frontend as well as the fallback are in the backend.

Option two

The next option will work for any theme you use and will  also keep your css changes safe during an update. Like Jetpack doesn’t have enough cool features they have now included a safe area to add your custom css. It can found at Appearance > Edit css. You can read more about it here.

Here are just some of the features:

  •  Preprocessor: the CSS editor has support for CSS preprocessors LESS and Sass (SCSS Syntax). This is an advanced option for users who wish to take advantage of CSS extensions like variables and mixins. See the LESS and Sass websites for more information.
  • Add-on: when making changes to your site’s design, you can choose to build on the existing theme stylesheet (Add-on CSS), or replace the existing theme’s stylesheet with your own CSS. This second option should be used if you want to start with only the theme’s HTML structure and recreate all of its CSS from scratch. Refer to the theme’s original stylesheet for reference, and make sure you have all rules/styles accounted for. If you are missing certain elements, the public view of the blog may appear skewed. Only the CSS code in the editing window will be applied to your blog with this option.
  • Mobile Compatible: if you use Jetpack’s Mobile Theme, you might want your CSS changes to be applied to the mobile theme as well.
  • Content width: this option should be used if you have modified the width of the primary content area using custom CSS. The “Content Width” setting is used as the default size for full-size images when they are inserted into your blog. Note that it will not affect the size of some images you added before changing the setting, depending on how they were inserted, and you may have to re-insert some of them after changing the setting.

I found it super powerful and it works with LESS.

jetpack

Third option: Advanced Users

This last one can be done in a  couple of ways but both require you either create a custom child theme or FTP to your server.

Method One

Depending on which file editor program you use create a new css file with a custom name like “apple.css”. Next we need to save it to the server and call it by adding a link in the pagelines >settings >advanced. This method is easy to read the css  and for the most part you can make changes without logging into the site. Read more about linking css files here

Method Two

With this method you can not go wrong. All that is required is that you make a custom child theme of your theme. If you are using  Framework Theme pagelines makes its easy to create a child theme. The thing to note about this child theme is that if it is update all your changes will be lost. So before you start making changes you want to first change the name of the pl-framework-pagelines folder to something else to prevent if from being update.

To edit the style.css you can go to appearance > editor and add your css there. Alternatively you can ftp to the server and add css directly into the childtheme style sheet.

If you are not using framework you can use a awesome plugin like One click child theme and it will do all the work for you.

You can read more about child themes here The Purpose Of Child Themes.

**update 12/31/2015**

Formatting your CSS

When it comes to organizing your CSS  there isn't really a wrong way or a right way in my opinion. You should really keep your your css organized in a way that suits you.

For me I like to use block comments to help keep things organized and easy to find. I always start with a base set up and from there things usually grow from 4 main blocks comments to 6 main blocks and 10 sub blocks. Here is my base style sheet that I start with on most sites.

/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*      Variables        */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/






/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*      Global Styles    */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/




/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*        home page      */ 
/*\\\\\\\\\\\\\\\\\\\\\\\*/

/*  header font  */
.header-test {
color: red;
}



/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*        about page     */ 
/*\\\\\\\\\\\\\\\\\\\\\\\*/





/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*  Desktop media-Query  */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/

@media screen and (min-width: 768px) {
    
}


/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*  Mobile media-query   */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/

@media screen and (max-width: 767px) {
    
}





/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*    Extra block        */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/

As you can see if this style sheet was full of css I could easily find a certain area and make changes.

Now when it comes to placement of your css that when things get a little different. I like the Custom Less plugin for the simple fact that changes are live but it is impossible to navigate through it when you get a crap ton of styles in that small box.

So what I do is really based on the magnitude of the project.

  1. Large Project: If the project looks like it will be a large one I would use Jetpack CSS/Less along with Custom Less. I would apply the changes to the Custom Less to see how things look and transfer the final css to Jetpack CSS (or child theme) . Seems like a lot of work but if I have to find something it is a lot easier to do it full screen than in a 200px box.
  2. Small Project: I would work with just the Custom Less plugin.

***Advice***

Always make a copy of your css and keep it some where safe. I know we all backup our sites but I go one step further to protect my CSS. Up load it to google drive  just in case the backup fails.

I hope you find this post was very informative. Just remember the goal is to be able to make changes to your site and have them remain after an update.

As always leave comments below of you have any questions.

~Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

2 Responses to "Adding Custom CSS In Platform 5"
  1. You're building an amazing resource here! Bravo!
    Comment: would love to see examples of how you've formatted the CSS in the PL5 plugin and then where did you put it to activate it.
    Question: how do you create classes for PL5 shortcodes?
    When you get around to it!! Thanks...Judith

Leave a Reply

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


custom css

Adding Custom CSS In Platform 5

Published on by | 2 Comments

Adding css is something every developer has to do at some point. But that also brings up some questions about where it should be placed.

With Platform 5 or DMS you have a couple options.

Option one:

Platform 5 users

The first and probably the easiest is to use the Custom Less plugin that is available to Platform Pro users. You can download it from the extend area by simple searching for “LESS” and it will pop up.

The benefits from using the plugin is that it gives you a bit of assurance that your custom css will be safe from updates.  The css you add will update in real time with no need to refresh the page. The downside is that currently it is a bit hard to read once you get a lot of lines.

less

DMS users

DMS users can apply there custom css to the LESS/CSS area in the frontend as well as the fallback are in the backend.

Option two

The next option will work for any theme you use and will  also keep your css changes safe during an update. Like Jetpack doesn’t have enough cool features they have now included a safe area to add your custom css. It can found at Appearance > Edit css. You can read more about it here.

Here are just some of the features:

  •  Preprocessor: the CSS editor has support for CSS preprocessors LESS and Sass (SCSS Syntax). This is an advanced option for users who wish to take advantage of CSS extensions like variables and mixins. See the LESS and Sass websites for more information.
  • Add-on: when making changes to your site’s design, you can choose to build on the existing theme stylesheet (Add-on CSS), or replace the existing theme’s stylesheet with your own CSS. This second option should be used if you want to start with only the theme’s HTML structure and recreate all of its CSS from scratch. Refer to the theme’s original stylesheet for reference, and make sure you have all rules/styles accounted for. If you are missing certain elements, the public view of the blog may appear skewed. Only the CSS code in the editing window will be applied to your blog with this option.
  • Mobile Compatible: if you use Jetpack’s Mobile Theme, you might want your CSS changes to be applied to the mobile theme as well.
  • Content width: this option should be used if you have modified the width of the primary content area using custom CSS. The “Content Width” setting is used as the default size for full-size images when they are inserted into your blog. Note that it will not affect the size of some images you added before changing the setting, depending on how they were inserted, and you may have to re-insert some of them after changing the setting.

I found it super powerful and it works with LESS.

jetpack

Third option: Advanced Users

This last one can be done in a  couple of ways but both require you either create a custom child theme or FTP to your server.

Method One

Depending on which file editor program you use create a new css file with a custom name like “apple.css”. Next we need to save it to the server and call it by adding a link in the pagelines >settings >advanced. This method is easy to read the css  and for the most part you can make changes without logging into the site. Read more about linking css files here

Method Two

With this method you can not go wrong. All that is required is that you make a custom child theme of your theme. If you are using  Framework Theme pagelines makes its easy to create a child theme. The thing to note about this child theme is that if it is update all your changes will be lost. So before you start making changes you want to first change the name of the pl-framework-pagelines folder to something else to prevent if from being update.

To edit the style.css you can go to appearance > editor and add your css there. Alternatively you can ftp to the server and add css directly into the childtheme style sheet.

If you are not using framework you can use a awesome plugin like One click child theme and it will do all the work for you.

You can read more about child themes here The Purpose Of Child Themes.

**update 12/31/2015**

Formatting your CSS

When it comes to organizing your CSS  there isn't really a wrong way or a right way in my opinion. You should really keep your your css organized in a way that suits you.

For me I like to use block comments to help keep things organized and easy to find. I always start with a base set up and from there things usually grow from 4 main blocks comments to 6 main blocks and 10 sub blocks. Here is my base style sheet that I start with on most sites.

/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*      Variables        */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/






/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*      Global Styles    */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/




/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*        home page      */ 
/*\\\\\\\\\\\\\\\\\\\\\\\*/

/*  header font  */
.header-test {
color: red;
}



/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*        about page     */ 
/*\\\\\\\\\\\\\\\\\\\\\\\*/





/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*  Desktop media-Query  */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/

@media screen and (min-width: 768px) {
    
}


/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*  Mobile media-query   */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/

@media screen and (max-width: 767px) {
    
}





/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*    Extra block        */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/

As you can see if this style sheet was full of css I could easily find a certain area and make changes.

Now when it comes to placement of your css that when things get a little different. I like the Custom Less plugin for the simple fact that changes are live but it is impossible to navigate through it when you get a crap ton of styles in that small box.

So what I do is really based on the magnitude of the project.

  1. Large Project: If the project looks like it will be a large one I would use Jetpack CSS/Less along with Custom Less. I would apply the changes to the Custom Less to see how things look and transfer the final css to Jetpack CSS (or child theme) . Seems like a lot of work but if I have to find something it is a lot easier to do it full screen than in a 200px box.
  2. Small Project: I would work with just the Custom Less plugin.

***Advice***

Always make a copy of your css and keep it some where safe. I know we all backup our sites but I go one step further to protect my CSS. Up load it to google drive  just in case the backup fails.

I hope you find this post was very informative. Just remember the goal is to be able to make changes to your site and have them remain after an update.

As always leave comments below of you have any questions.

~Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

2 Responses to "Adding Custom CSS In Platform 5"
  1. You're building an amazing resource here! Bravo!
    Comment: would love to see examples of how you've formatted the CSS in the PL5 plugin and then where did you put it to activate it.
    Question: how do you create classes for PL5 shortcodes?
    When you get around to it!! Thanks...Judith

Leave a Reply

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


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match