• Resolved Jam

    (@pimaniii)


    I have a custom menu in a sidebar. Right now it is styled with bullet points. How can I customize ONLY that sidebar/menu such that it doesn’t have bullet points? Whenever I remove the bullet points in css it removes them from everywhere on the site!

    I’m not sure how to isolate my css to only that area. Any thoughts?

    Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • You can use more specific selectors to target CSS to only that list –
    http://www.w3schools.com/cssref/css_selectors.asp

    Thread Starter Jam

    (@pimaniii)

    Thanks! I’m not quite sure which selector to use in this situation. I have
    this plugin but I made a template with the following css:

    #dc_jqaccordion_widget-%ID%-item ul ul a {font-weight:normal; padding: 5px 5px 5px 0px; background: transparent url(/wp-content/themes/u-design/styles/style1/images/heading_underline.png) repeat-x scroll 0 100%; list-style:none;}
    
    #dc_jqaccordion_widget-%ID%-item ul a { padding: 5px 5px 5px 0px; background: transparent url(/wp-content/themes/u-design/styles/style1/images/heading_underline.png) repeat-x scroll 0 100%; list-style:none;}

    I’m not suite sure how I’d use selectors in this situation because the styling itself is css.

    When I remove the bulletpoints directly here by doing something like

    ul {
        list-style:none;
    }

    It removes ALL bullet points from the site instead of this plugin.

    How do I target ONLY this css code?

    Why are you putting CSS inline? It should all go in an external stylesheet.

    Can’t really help with CSS without seeing the page live… In general, look at what element(s) that list is in – use the class of the containing element as part of the selector. For example, something like

    .mysidebar ul {
      ...
    }

    Thread Starter Jam

    (@pimaniii)

    Cool! So I tried that out in a few places, but it doesn’t seem to control that content. When using Google’s Inspect tool, I found that I can control that list only in reset.css, which seems like I’m not styling something correctly.

    It shows that my new css style elemtents are being applied to the menu, but the ‘list-style:none;’ seems to not do anything. I also tried !important but it didnt work.

    Is there something I have to change with class permissions?

    No, there’s no such thing as class permissions – it’s either that your CSS is invalid or your selectors are not specific enough. Or it’s possible that the reset.css file is being loaded after wherever you are putting those styles. What is the setup of your site – what theme are you using? Are you using a child theme or custom CSS or ??

    Also, unless you have a class called “mysidebar” (unlikely) that’s not going to work 🙂 – that’s an example.

    Make sure your CSS is valid –
    http://www.w3schools.com/css/css_list.asp

    Possibly try:

    list-style-type: none;

    Thread Starter Jam

    (@pimaniii)

    Got it to work! Jut took some playing around with.

    WPyogi, thank you very much for your time and help! I’m learning to love css!

    Thanks again!

    Thread Starter Jam

    (@pimaniii)

    A quick sidequestion: do you happen to know how to add an element to menu items (or list items) that only have children? I can’t seem to find how to do this in css.

    I’m not sure what you mean on this last question.

    Thread Starter Jam

    (@pimaniii)

    Sorry, let me rephrase: I want to style only the parents of children in a list (aka not list items with no children). I want to put a ‘[+]’ behind every parent with children. But I don’t know how to style only those elements.

    Thread Starter Jam

    (@pimaniii)

    Or is this not possible?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How to style a sidebar/widget element?’ is closed to new replies.