Jump to content
Sign in to follow this  
alexcox6

Custom Side Menu and Widget Styling

Recommended Posts

alexcox6    0
alexcox6

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
alexcox6    0
alexcox6
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
catrina    103
catrina
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?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
alexcox6    0
alexcox6
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
catrina    103
catrina
Hm, try this instead: [code]div#sidebar_primary ul.menu li.menu-item a {color: #9C9DA0; background-color: #ECECED;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
alexcox6    0
alexcox6
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
catrina    103
catrina
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

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
alexcox6    0
alexcox6
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
alexcox6    0
alexcox6
I am reading the tutorial at the moment, its a lot to figurout

Share this post


Link to post
Share on other sites
catrina    103
catrina
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.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
alexcox6    0
alexcox6
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

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  

×