Jump to content


Photo
- - - - -

Best Css Practises

CSS

Best Answer Danny , 18 December 2012 - 09:46 AM

If you inspect your menu, you will notice that each of the menu items is given a unique class. For example, the Editorial Team has the following class:

 

menu-item-7784

 

So you can use this to style the menu items.

 

Example

 

 
.menu-item-7784 {
background: red;
}


.menu-item-7784 a {
color: white;
}
Go to the full post


  • Please log in to reply
9 replies to this topic

#1 LukeB

LukeB

    Super Member

  • Members
  • 139 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 17 December 2012 - 12:14 PM

I’m going to use the custom menu widget in the content sidebar and locate the sidebar just above my content. However I need the menu items to be listed in a single horizontal line. I was just wondering what CSS would be best to use?

 

.widget ul li {

    float: left;

}

 

or

 

.widget ul li {

    display: inline;

}

 

Here’s a link to my site and the page I’m using this menu on.

Please Login or Register to see this Hidden Content

 

Any advice would be much appreciated.



#2 catrina

catrina

    Advocate

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

Posted 17 December 2012 - 03:27 PM

The second code would be best.



#3 LukeB

LukeB

    Super Member

  • Members
  • 139 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 17 December 2012 - 05:22 PM

Thanks for the reply.

 

As I’m going to be using a number of different menus i need to be able to target one particular menu and i was wondering which class I could use? I’m using firebug to find the correct one and using the customize plugin but I’m not having any luck.

 

Obviously .widget ul li will change widgets contained within the sidebar area but i need to locate the specific widget menus I’ll be using within the sidebars

 

Ive tried .menu-about-menu-container but that didn’t affect it.

 

Please Login or Register to see this Hidden Content



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 December 2012 - 07:33 AM

Hi,

 

I don't see any menus in your sidebar, have you disabled the widget ?



#5 LukeB

LukeB

    Super Member

  • Members
  • 139 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 18 December 2012 - 09:27 AM

Hi sorry I dont think i explained it as well as i could have. Im basically using the Universal Sidebar above the content and then using the Custom Menu widget within this sidebar. So the menu im looking to edit on the About page (

Please Login or Register to see this Hidden Content

) is the menu above the content that contains: Editorial Team, Contribute to DYC and Submissions. Its currenlty displayed in a vertical list but i would like to edit this, ill be using different custom menus on different pages so I need a way to edit them on an individual basis.

 

Is there an easier way to set a secondary navigation? I know its possible do set Secondary Nav on pages however I would also need a way to set a Secondary Nav on category pages and Single Post pages.

 

Structure Example

 

Parent Page (Main Nav)

- Child Page (Secondary Nav)

- Child Page (Secondary Nav)

- Child Page (Secondary Nav)

 

Parent Category (Main Nav)

- Child Category (Secondary Nav)

- Child Category (Secondary Nav)

- Child Category (Secondary Nav)



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 December 2012 - 09:46 AM   Best Answer

If you inspect your menu, you will notice that each of the menu items is given a unique class. For example, the Editorial Team has the following class:

 

menu-item-7784

 

So you can use this to style the menu items.

 

Example

 

Please Login or Register to see this Hidden Content



#7 LukeB

LukeB

    Super Member

  • Members
  • 139 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 18 December 2012 - 11:07 AM

Thanks, using the id's ive managed to achieve the layout i need with the menu items in a horizontal line.

 

Im using the following css

 

.menu-item-7784 {
float: left;
}

.menu-item-7785 {
float: left;
}

.menu-item-7783 {
float: left;
}

 

 

but I was wondering if i could just combine it to something like this

 

.menu-item-7784 .menu-item-7785 .menu-item-7783 {

float: left;

}

 

Ive tried various combinations but the only CSS i can get to work is the first set of code where they are not combined.



#8 batman

batman

    Bat Learning

  • Members

  • 2079 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 December 2012 - 11:30 AM

Hi

Please you can try with

 

Please Login or Register to see this Hidden Content



#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 December 2012 - 11:36 AM

Use the class instead of the ID, as ID can over power everything else. Also Batman's suggested code above should work.

 

I recommend if you need further assistance with CSS, you visit the W3 Schools website - 

Please Login or Register to see this Hidden Content



#10 LukeB

LukeB

    Super Member

  • Members
  • 139 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 20 December 2012 - 10:18 AM

Brilliant thanks, I had missed out the commas which is why it didnt work i guess,

 

Thanks for the help







Also tagged with one or more of these keywords: CSS