Isolating sidebar widgets

• 

  bitnbigimage1 · Member · May 10, 2017 at 12:14 am

  • Copy link
  • Add topic to favorites

  Hello –

  I am currently using the MH MAGAZINE theme. I wondering how (or if), it is possible to change the color of the sidebar section. I would like to differentiate the sidebar from the pages, rather than have the sidebar info float on the same background as the pages/posts.

  I have opened the CSS and HTML of the area however I am uncertain as to where to drop in custom CSS to affect the change. Any help would be appreciated.

  The blog I need help with is: (visible only to logged in users)

• 

  jaimemarchwinski · Member · May 10, 2017 at 7:51 pm

  • Copy link

  In order to change the color of the sidebar, you have to call out the specific names of the sidebar elements. From what I can tell, you should change:

  h4.widget-title and div.hp-sidebar.sb-right.hp-home-6.

  I found these elements by using your website’s developer tools. You should be able to change the background-color under “Customizing CSS,” and it should look something like this:

  h4.widget-title {
  background-color: red;
  }

  Hope this helps! Good luck!

• 

  thesacredpath · Member · May 16, 2017 at 5:32 am

  • Copy link

  Hi @bitnbigimage1, we can use the following to change the background color of the right sidebar. You can edit the color code as desired, and if you wish, edit the left/right paddings I have added to keep the content from being flush up against the edges.

  .hp-sidebar.sb-right:not(.hp-sidebar-right) {
    background: #00bb44;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }