Jump to content


Photo
- - - - -

Change Canvas Sidebar Color

canvasbackground

Best Answer Danny , 08 June 2014 - 11:27 AM

To achieve this you can do one of two things. You can either use custom CSS or switch your layout mode to Boxed Mode in Layout & Nav settings panel. However, using this option, will force all your sections to be in box mode and you will not be able to have any full width sections.

 

To use custom CSS method, add the following to your custom CSS.

 

#pl_areau39c7d {
background-color: green;
}
 
#pl_areau39c7d .pl-content {
background-color: white;
}

 

Please note that some additional styling may be required and you will probably want to change the colors.

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 jasonthedce

jasonthedce

    Member

  • Members

  • 11 posts
  • Country: Country Flag

Posted 05 June 2014 - 07:42 PM

I just purchased DMS 2, so I'm still a little new to this. Hoping someone can help me out.

 

I am trying to change the sidebars outside the main content/grid area to a specific color while still leaving the content area background white. I found a topic from 2 years ago that did this (http://forum.pagelin... two background), but I couldn't get that to work on my site. I'm assuming the old one was an old version of DMS. 

 

Anyone know how to do this in the current version?

 

Thanks!



#2 batman

batman

    Bat Learning

  • Members

  • 2217 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 05 June 2014 - 08:55 PM

HI @jasonthedce

First welcome

You need add some CSS code to this, you can use a Child Theme

I use for this a Danny┬┤s Child Theme, this works fine to me in all update.

https://github.com/Dannyholt/skeleton

 

You can install the .zip like a theme in your dashboard > themes > upload

and the copy/paste yours CSS rules in the style.css

http://screencast.com/t/sZXzimY7x

 

I use the Child because I read this after update the theme

Please Note: Any customizations you have made to theme files will be lost. Please consider using child themes for modifications.

You can see the image

http://screencast.com/t/FeFQEG1Qav

 

You take a look to this too

http://docs.pageline...ase-child-theme

 

Then...

Please, you can post your site's url so we can properly troubleshoot the issue for you.



#3 GetMeWebDesign

GetMeWebDesign

    Advocate

  • Members

  • 524 posts
  • LocationSurrey, UK
  • Framework Version:developer
  • Country: Country Flag

Posted 05 June 2014 - 10:46 PM

An easier way to just change the background of any section, is via Inline styling, under Standard Options (of a section). background: #your-color;  You have choices as to whether you add that to the column Inline, the section etc



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17931 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 June 2014 - 12:46 PM

Can you provide a link to the site in question and also, a screenshot of what you're trying to achieve. As you may be able to simply add a custom class name to the styling classes field in the Sidebar column if you have used one that is and then use custom CSS associated to that classname and give the sidebar a custom color.



#5 jasonthedce

jasonthedce

    Member

  • Members

  • 11 posts
  • Country: Country Flag

Posted 06 June 2014 - 02:59 PM

I've attached an image of what I am trying to accomplish. The green bars would fill the canvas section outside the 12 column grid. The white area of the canvas has a wp-content section that's 10 columns wide, offset by 1 from the left. I want the 1 column buffer on either side of the 10-column wp-content section to remain white, along with the wp-content.

 

The current site is using my old theme, but you can preview the dms version here:

 

http://firsttrinity....ents/?theme=dms

 

Thanks for the help.

 

Attached File  FT Website Canvas 2-color mock-up.jpg   71.87KB   0 downloads



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17931 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 June 2014 - 11:27 AM   Best Answer

To achieve this you can do one of two things. You can either use custom CSS or switch your layout mode to Boxed Mode in Layout & Nav settings panel. However, using this option, will force all your sections to be in box mode and you will not be able to have any full width sections.

 

To use custom CSS method, add the following to your custom CSS.

 

#pl_areau39c7d {
background-color: green;
}
 
#pl_areau39c7d .pl-content {
background-color: white;
}

 

Please note that some additional styling may be required and you will probably want to change the colors.



#7 jasonthedce

jasonthedce

    Member

  • Members

  • 11 posts
  • Country: Country Flag

Posted 11 June 2014 - 08:54 PM

Thanks for the help! The custom CSS did exactly what I wanted!


  • Danny likes this

#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17931 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 June 2014 - 12:12 PM

No worries dude, happy to help and thanks for informing us the issue has been resolved.