• 0
Sign in to follow this  
Followers 0

Custom Side Menu and Widget Styling

Question

Posted · Report post

Hi Guys Hopefully someone can help me. I am rebuilding our company website using Wordpress and Page lines pro and am having real problems with the CSS for the Menu and widget styling and would really like some assistance if possible. My current website is www.imsm.com and the wordpress site is imsm.bisongrid.com. Thank you in advance Alex. PS the widgets are the case study, twitter ect box's

Share this post


Link to post
Share on other sites

13 answers to this question

  • 0

Posted · Report post

What problems are you having with the CSS styling? What do you want to adjust?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Catrina I just can't replicate the look at all. Unfortunately I am new to this all and understand the HTML but just can't understand the CSS. Cheers

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think the best place to start is with the widget links. I inspected the colors on the site you want to replicate and they are as follows: Orange: #F58220 Light Grey: #ECECED Medium Grey (Text): #9C9DA0 You're going to need these hex codes in the CSS. Here's an example of what the CSS should look like (when changing the link text and background colors): [code]ul#menu-navigation-menu li#menu-item a {color: #9C9DA0; background-color: #ECECED;}[/code] This code is added to PageLines settings > Custom Code > Custom CSS [b]ul#menu-navigation-menu li#menu-item a[/b] = The selector used to identify what you want to style on the page (in this case, it's the link item in the sidebar - this can be identified using [url="http://getfirebug.com"]Firebug[/url] and a tutorial for using Firebug for CSS customizations is here: http://www.pagelines.com/wiki/index.php?title=CSS_Customization#How_to_use_CSS_Inspection_Tools) [b]color[/b] = Text link color [b]background-color[/b] = Background color Does that make sense so far?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes that makes sense, have installed firebug and had a look at the code and can see where you have got the references from. I have put the code into the custom css page but nothing happens?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hm, try this instead: [code]div#sidebar_primary ul.menu li.menu-item a {color: #9C9DA0; background-color: #ECECED;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

the has now given me a small gray background to each menu item but with the div the code is now being accepted

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, now that the selector is correct, more properties can be added to the CSS to customize the styling further. For example, padding can be added to create "breathing space" around the text inside background: [code]div#sidebar_primary ul.menu li.menu-item a {color: #9C9DA0; background-color: #ECECED; padding: 10px;}[/code] [b]padding: 10px[/b] adds 10 pixels of extra grey space. More information on how to use padding is here: http://www.w3schools.com/css/css_padding.asp

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Does the CSS tutorial help?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

that makes sense. its now got more gray around it. this is the original code from the current site for the menu #main-navigation { width: 176px; overflow: hidden; margin-bottom: 15px;} #main-navigation ul { width: 176px; } #main-navigation ul li { float: left; width: 180px; } #main-navigation ul li a { width: 155px; display: block; background: #ececed url(../images/nav-arrow.gif) 7px 7px no-repeat; padding: 6px 0px 6px 21px; text-decoration: none; color: #9b9c9e; border-bottom: 2px solid #FFF; font-size: 12px; } #main-navigation ul li a:hover, #main-navigation ul li.active a { background: #f58220 url(../images/nav-arrow-hover.gif) 7px 7px no-repeat; color: #FFF; } #main-navigation ul li.active ul li#last a { margin-bottom: 5px; border-bottom: none; } #main-navigation ul li.active ul li a { background: url(../images/subnav-arrow.gif) 0px 6px no-repeat; color: #9b9c9e; border-bottom: 1px solid #f58220; margin-left: 20px; padding: 0px 0px 0px 15px; height: 25px; line-height: 25px; font-size: 11px; } #main-navigation ul li.active ul li a:hover, #main-navigation ul li.active ul li.active a { color: #f58220; background: url(../images/subnav-arrow-hover.gif) 0px 6px no-repeat; can i use any of this to replicate the look of the menu or do we need to create complete new css code

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I am reading the tutorial at the moment, its a lot to figurout

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It'll take some time and multiple adjustments to replicate the exact look you're trying to create. The other CSS tutorials on w3schools.com can also help with other CSS customizations you're trying to implement.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

ok cook i will work through them. i guess its the same process for the widget areas

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The more you use Firebug, the more familiar it becomes. :)

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