Jump to content
Sign in to follow this  
bobbekaer

Styling the two sidebars differently

Recommended Posts

bobbekaer    0
bobbekaer

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
greenfly    230
greenfly

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 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
bobbekaer    0
bobbekaer

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bobbekaer    0
bobbekaer

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
bobbekaer    0
bobbekaer

And thank you Martin

 

Using the page ID will be usefull :-)

 

Best

Bolette

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • artos90
      By artos90+
      I am trying to start from scratch and create a page template. i have inserted the navbar and header with a text area and the primary sidebar on the right hand side of the page. 
       
      My page is 1200 pixels wide and I want to have the text column to be 900 pixels and the sidebar column 300 pixels
       
      I have tried adding a two column and three column into the section and adjusting the sizes of the text area and the sidebar.
       
      When I get the text area width above 6/12 and the sidebar 3/12 the sidebar jumps to the bottom of the section with the text area above it. 
       
      Any Ideas? What am I missing here? Appreciate any help!
    • redstate
      By redstate
      I'm just trying to set up a standard website with a primary sidebar in the right column and blog on the Homepage beneath a RevSlider, Highlight and ibox. The templates seem to have changed with DMS2. Please tell me how to set this up. On a DMS1 website, I set up a Home page template, inside pages template and 2 others, needing only a little help.
       
      On this DMS2 website, I just want a Home page template and all other pages template. Please tell me how. The website is rockwallrocks.com.
       
      Thanks!
    • meanmcbean
      By meanmcbean
      Hi, the Primary sidebar on my site's Calendar page looks great on Chrome, but doesn't show in Firefox or IE?  The crazy thing is that it worked fine while on my test site.  But now this problem has appeared on my client's live site.  I am using DMS 1 and Wordpress 3.9.  I deactivated all plugins and the problem still remains.  Here is the Calendar page's link... http://eastondems.com/calendar-3/.  You'll see that the sidebar is visible only in Chrome.  Not sure how to fix this?
    • himalaya01
      By himalaya01
      My primary sidebar is full of widgets, when I go to the widget menu in wordpress I don't see any widgets in the universal sidebar.
      What do you suggest me to do? 
       
      Thank in advance!
    • hjerterom333
      By hjerterom333
      Dear PageLines team,

      Hi. How are you doing today?
       
      While I was editing my website, something happened to my Primary SIdebar.
      It looks like this. [x]  Unfortunately, I have no idea why this has happened.

      This width cannot afford what I want to show (e.g. categories, monthly archives) in each line.
      Would you kindly tell me how to adjust the width?
       
      Thank you in advance for your support.
       
      Ayumu
×