4 Replies Latest reply on Feb 4, 2010 3:21 AM by EagerBob

    struggling with complex inherited styles

    EagerBob Level 2

      I am working on a Wordpress shopping cart theme.

       

      Theme is a childtheme to an existing theme, so basicly any rules I write in my

      style.css (which is a copy of the original theme) file will overrule the original theme.

       

      page is

      here

       

      lists have a bullet (the red triangle) which is a background image (bullet.gif), defined in line 391 like so:

       

      #content ul li,

      #content ol li {

       

          background: url('images/bullet.gif') no-repeat 16px 9px;

       

              padding: 3px 0 3px 30px;

       

      }

       

       

      Lists are used in three places:

       

          1.    in the blue sidebar for the product categories
          2.    below that, the ul #barnav menu (facebook, nieuwsbrief and RSS feed)
          3.    In the main content area, the products categoriy list.

       

      1 is the same as 3, the list of the product catehories: (a .wpsc_category_link)

       

      What I want is keep the bullets in 1 and get rid of them in 2 and 3
      Then I want to style the images in 3 so that they are bigger and sit next to each other in a grid view.

       


      I added a style like so:

       

      #products_page_container .wpsc_categories li{
          background-image: none;
          display: inline;
      }

       

      .wpsc_categories img{
          height: 160px;
          width: 160px;
      }

       

      div #sidebar-1 .small #barnav li {
          background-image:none;
      }

       

      The first part works, list 3 has lost its bullets, the second part doen't, the bullets in 2 are still there.

       

      My questions:

       

      How can I select 2 so that I can get rid of the bullets ?
      What causes the text links in 3 to get pushed aside from under the images ?

       

      Thanks.
        • 1. Re: struggling with complex inherited styles
          osgood_ Level 8

          This css will get rid of the red bullets in the bottom left menu:

           

           

          #content #barnav li {
            background-image: none;
          }

          1 person found this helpful
          • 2. Re: struggling with complex inherited styles
            EagerBob Level 2

            Thank you, that helped !

             

            I won't label the question as "answered" yet, hoping that maybe someone can help me getting the text links (accessoires, babys, kids, mannen) under the images instead of to the right. I guess there is not enough space under the images, but why ?   cheers  Bob

            • 3. Re: struggling with complex inherited styles
              osgood_ Level 8

              EagerBob wrote:

               

              Thank you, that helped !

               

              I won't label the question as "answered" yet, hoping that maybe someone can help me getting the text links (accessoires, babys, kids, mannen) under the images instead of to the right. I guess there is not enough space under the images, but why ?   cheers  Bob

               

              This is a job for International Rescue. I will call them.

               

              "Mayday, mayday, mayday, do you copy, do you copy?

               

              "This is International Rescue, you're coming in loud and clear. State your emergency?'"

               

              "We have a css Wordpress disaster, a css Wordpress disaster, do you read me?",

               

              "Yes we read you buddy, Thunderbird 1 is airborne and on its way. Thunderbird 2 is ready for launch, ETA around 3mins, hang on in there buddy".

               

              "Virgil to Scot, Virgil to Scot, can you read me, can you read me?"

               

              "Loud and clear Virgil"

               

              "What's the situation like Scot?"

               

              "It's a complete css train wreck as far as I can see Virgil, I'm circling the code now. I can't get in too close, there's too much heat coming off of it. Are you receiving the images Virgil? "

               

              "Yes, Brains is in onboard analysing the data now and we have a validator checker in pod 5, as back-up".

               

              "Good work Virgil, but that validator thing is a load of pants."

               

              "Ok, Brains thinks we has identified the problem Scott. Tell the guy to change the below css".

               

               

               

              #products_page_container .wpsc_categories li{
                   background-image: none;
                   display: inline;
              }

               

              "to this css".

               

              #products_page_container .wpsc_categories li {
              float: left;
              width: 160px;
              margin: 0 0 30px 80px;
              display: inline;
              }

              • 4. IR to the rescue
                EagerBob Level 2

                OK captain,

                Good that you have a direct line to IR, they managed to solve the problem, as always.

                 

                (I did mess with a "float left" and width of 160 but must have missed something)

                Anyway, it works now, and validating a page is always a good thing.

                 

                Thanks again !