Jump to content


Photo
- - - - -

Custom Side Menu and Widget Styling


  • Please log in to reply
13 replies to this topic

#1 alexcox6

alexcox6

    Member

  • Members

  • 18 posts
  • Country: Country Flag

Posted 11 December 2011 - 06:42 PM

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

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 December 2011 - 06:43 PM

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

#3 alexcox6

alexcox6

    Member

  • Members

  • 18 posts
  • Country: Country Flag

Posted 11 December 2011 - 06:48 PM

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

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 December 2011 - 07:03 PM

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?

#5 alexcox6

alexcox6

    Member

  • Members

  • 18 posts
  • Country: Country Flag

Posted 11 December 2011 - 07:16 PM

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?

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 December 2011 - 07:19 PM

Hm, try this instead:

Please Login or Register to see this Hidden Content



#7 alexcox6

alexcox6

    Member

  • Members

  • 18 posts
  • Country: Country Flag

Posted 11 December 2011 - 07:24 PM

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

#8 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 December 2011 - 07:30 PM

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



#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 December 2011 - 07:36 PM

Does the CSS tutorial help?

#10 alexcox6

alexcox6

    Member

  • Members

  • 18 posts
  • Country: Country Flag

Posted 11 December 2011 - 07:40 PM

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

#11 alexcox6

alexcox6

    Member

  • Members

  • 18 posts
  • Country: Country Flag

Posted 11 December 2011 - 07:41 PM

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

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 December 2011 - 07:43 PM

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.

#13 alexcox6

alexcox6

    Member

  • Members

  • 18 posts
  • Country: Country Flag

Posted 11 December 2011 - 07:49 PM

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

#14 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 11 December 2011 - 07:51 PM

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