Archived

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

  • 0

Styling the two sidebars differently


Question

Posted · Report post

Hi :-)

 

I am trying to style the Primary Sidebar and the Secondary Sidebar differently. On the PS (left) I am looking for a way to change the line height, font and font-color in the Custom Menu Widget

 

On the SB (right) I want to style the Text Widget to have the gradient background and the shadows. But the problem is that on some of the pages I need to use the Text Widget without the background in the PS.

 

I guess one way would to add the background in the html in the Text Widget - but I would like to make it easier for the client to change the text in the widget without being confronted with the html ;-)

 

 

The site I am working on: http://manometer.wpforalle.dk/plo-frederiksberg/

The clients demo-site: http://www.manometer.dk/job/PLOfrederiksberg/plo_login_nylaeger.html

 

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

And thank you Martin

 

Using the page ID will be usefull :-)

 

Best

Bolette

Share this post


Link to post
Share on other sites

Posted · Report post

Bobbekaer 

 

You can do this with CSS, , I recommend using Firebug or your browsers built-in web dev tools and inspect the Masthead sections to find the correct code.

 

For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/ 

 

you can use .Page-id-xx (where xx is the ID of your page) to restrict styling to a particular page 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Martin

 

I am trying to figure this out using Firebug - for changing the Custom Menu I added this to Custom CSS:

.widget ul li {
    font-size: 0.95em;
    list-style: none outside none;
    line-height: 28px;
    
}
  
.widget ul li a {
    text-decoration: none;
    color: #000000;
}
    
.widget ul li a:hover {
    text-decoration: none;
    color: # 539aa9;
}
    
.widget ul li a:active {
    text-decoration: none;
    color: #000000;
}

But only the a:hover and the line-height is working - and I am going crazy :-D 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Bolette,

 

Did you try applying a custom class to the menu items in Dashboard > Appearance > Menus?  You can then apply styling to that unique class in CSS.

 

As for the text widget, I think you just need to apply a class as the first line of the text widget, and ask your client to leave that and the closing </div> alone.  You can then set a background for the unique class.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob,

 

I did now - and it works. I added this 
 

/*----- VENSTRE SIDEBAR MENU -----*/
.menu-venstre-sidebar {
	font-size: 16px !important;
	line-height: 32px;
	ul li a:hover: #5CA4B3 !important;
}

.menu-venstre-sidebar a:hover {
	color: #5CA4B3 !important;
	text-decoration: none !important;
}

.menu-venstre-sidebar a:active {
	color: #000000 !important;
	text-decoration: none !important;
	font-weight: bold !important;
}
 

But I can't figure out how to do: show selected item in bold text? But maybe that is a new topic? 

 

But anyway, thank you :-)

Share this post


Link to post
Share on other sites