SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help w/ Menu -- Horiz bullet images, but not on every item in list

    Hello everyone. I am just starting out with CSS and have been working on a friend's website in WordPress, using an ecommerce theme. I have been trying to create a small blue heart image in between the navigation menu categories across the top, but have been only slightly successful.

    I am trying to remove the image in front of the following text (on top): Home, Search, Login, Register, and before the image of the shopping cart.

    Also, I would like to remove the image before the first word of each category line (currently "All Products," and "Simply Swarovski"). It's possible that more categories may be added in the future, which would then change the first category name in the second line. Then have the 2 category lines flush left underneath the logo.

    This is the site (it's not yet open): http://crystalpearlboutique.com/shop/

    I would so greatly appreciate any help you could provide -- at this point I am totally clueless as to what to do.

    Thanks so much in advance. I look forward to your replies.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, since both lists meet the rule of "#header ul li" all of them will have the background image. You can override that rule to remove the background image on the top list by doing as such
    Code:
    #header ul.LR_navi li{background:none;}
    Or you could change your #header ul li{} CSS rule to be more specific and only apply it to the bottom list

    As for the category change, why not just go into the HTML and remove the word?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, since both lists meet the rule of "#header ul li" all of them will have the background image. You can override that rule to remove the background image on the top list by doing as such
    Code:
    #header ul.LR_navi li{background:none;}
    Thanks so much for your reply. Would I add this underneath /*LR Navi*/ ?

    Or you could change your #header ul li{} CSS rule to be more specific and only apply it to the bottom list
    I would love to create a rule, but I have no idea how to go about that.

    As for the category change, why not just go into the HTML and remove the word?
    I think I might have confused things by saying this (I add the categories in WordPress so that's not a problem). I mentioned it because I specifically wanted the bullets gone from before each of the first words in each line, not just removed from in front of those 2 particular words (since those first words may change if more categories are added). Hope that makes sense.

  4. #4
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I went ahead and tried adding it under /*LR Navi*/ and as you can see it just removed the bullets from in front of Home, Search, Login, Register, and before the image of the shopping cart. Unfortunately, the bullets are still in front of the 2 first words in each of the category lines (I think I will keep the one in front of "Home" in the upper right-hand corner). But yay! Thank you for getting me this far! Anything else that you could help with is a tremendous plus!

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As you see, you add it anywhere . If you want to pick and choose which gets bullets, add classes and set the backgrounds accordingly
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or you could change your #header ul li{} CSS rule to be more specific and only apply it to the bottom list
    Hmmm, how would I go about applying the bullet to only the navigation? I'm interested in learning how if you have the time to share.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just add a class to the navigation, aka class="nav"

    Now change your CSS of "#header ul li" to "#header ul.nav li" to target the nav
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for helping, Ryan, but I think I'm doing something wrong b/c I tried it and it didn't work. I'm sure I must have put it in the wrong place -- all the bullet images disappeared.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cryslb View Post
    Thanks so much for helping, Ryan, but I think I'm doing something wrong b/c I tried it and it didn't work. I'm sure I must have put it in the wrong place -- all the bullet images disappeared.
    I'll go look, but if you only updated hte CSS and not the HTML then that would be a definate cause
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Instead of me messing through that entire source, post the HTML for the navigation, along with the CSS you think it should be working with
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhhh -- the html! I don't even know where the html files would be. That sounds sad, doesn't it... I will have to go look at all the files and see what I can find.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The HTML file for the link you posted will be in your root folder (well, go there)

    Then find the folder called "shop"
    Go into there, then you will most likely see a file called index.html (or whatever the defualt page is)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan,

    I did find an index.php file under the parent theme folder (which I'm not supposed to edit directly - I'm supposed to copy that file over to the child theme and edit it there). This file contained a couple of "class" lines that had to do with where the sidebar went (in the theme design), but I didn't see any html pages where I could add a "class" line about the category navigation. I would have loved to remove the 2 bullet images that come before the first words on both lines, but I think for now I'll leave it as is. Thank you so much for your help! It's greatly appreciated.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad to help . And the class line could hvae been added as such
    Say you had <ul>
    Just make it <ul class="whatever">
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •