13 replies to this topic

[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

[catrina]

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

[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

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

Please Login or Register to see this Hidden Content

This code is added to PageLines settings > Custom Code > Custom CSS

ul#menu-navigation-menu li#menu-item a = 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

Please Login or Register to see this Hidden Content

and a tutorial for using Firebug for CSS customizations is here:

Please Login or Register to see this Hidden Content

)
color = Text link color
background-color = Background color

Does that make sense so far?

[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?

[catrina]

Hm, try this instead:

Please Login or Register to see this Hidden Content

[alexcox6]

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

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

Please Login or Register to see this Hidden Content

padding: 10px adds 10 pixels of extra grey space.

More information on how to use padding is here:

Please Login or Register to see this Hidden Content

[catrina]

Does the CSS tutorial help?

[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

[alexcox6]

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

[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.

[alexcox6]

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

[catrina]

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