Jump to content


Photo
- - - - -

Styling the two sidebars differently

Primary Sidebar Secondary Sidebar custom menu

Best Answer bobbekaer , 24 June 2013 - 09:35 AM

And thank you Martin

 

Using the page ID will be usefull :-)

 

Best

Bolette

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 18 June 2013 - 07:56 AM

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: 

Please Login or Register to see this Hidden Content

The clients demo-site:

Please Login or Register to see this Hidden Content

 


#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 18 June 2013 - 01:25 PM

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 - 

Please Login or Register to see this Hidden Content

 

 

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



#3 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 18 June 2013 - 02:09 PM

Hi Martin

 

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

Please Login or Register to see this Hidden Content

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



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 June 2013 - 04:10 PM

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.



#5 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 24 June 2013 - 09:29 AM

Hi Rob,

 

I did now - and it works. I added this 
 

Please Login or Register to see this Hidden Content

 

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 :-)



#6 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 24 June 2013 - 09:35 AM   Best Answer

And thank you Martin

 

Using the page ID will be usefull :-)

 

Best

Bolette







Also tagged with one or more of these keywords: Primary Sidebar, Secondary Sidebar, custom menu