Announcement

Collapse
No announcement yet.

Change color of category menu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Change color of category menu

    Hi

    I have logged a couple of calls with helpdesk but they seem unable to tell me where I can change the color of the menu bar (from black). I have just installed a new responsiveness theme called Computerland and am trying to get it back to mimicing my previous layout and colors.

    Help desk suggested "If you are trying to change the background of the menu you will have to download the image locally via FTP" - however there doesn't appear to be an image!

    Any help would be appreciated.
    Sue
    Fabric Garden
    fabricgarden.com.au

  • #2
    you're right. it's not an image

    default_modified.css line 1332 is what you are looking for

    Code:
    ul#desktopMenu {
    	margin: 0;
        padding: 10px 0;
    	list-style: none;
    	text-align: left;
    	font-family: 'Open Sans', sans-serif;
    	font-size: 14px!important;
    	font-weight: 500;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	background: #3f3f3f; /* Old browsers */
    	background: -moz-linear-gradient(top,  #3f3f3f 0%, #0b0b0b 100%); /* FF3.6+ */
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(100%,#0b0b0b)); /* Chrome,Safari4+ */
    	background: -webkit-linear-gradient(top,  #3f3f3f 0%,#0b0b0b 100%); /* Chrome10+,Safari5.1+ */
    	background: -o-linear-gradient(top,  #3f3f3f 0%,#0b0b0b 100%); /* Opera 11.10+ */
    	background: -ms-linear-gradient(top,  #3f3f3f 0%,#0b0b0b 100%); /* IE10+ */
    	background: linear-gradient(to bottom,  #3f3f3f 0%,#0b0b0b 100%); /* W3C */
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */	
    }
    everywhere you see #3f3f3f and #0b0b0b replace with your appropriate colors.

    Comment


    • #3
      I have logged a couple of calls with helpdesk but they seem unable to tell me where I can change the color of the menu bar (from black).

      Help desk suggested "If you are trying to change the background of the menu you will have to download the image locally via FTP" - however there doesn't appear to be an image!
      Any level of support should have taken literally a couple seconds to answer this CORRECTLY. But also pointing you in the wrong direction? Not good.

      jleclair is correct on the rule.

      You can also simplify it if you have solid colors and not gradients by using below instead:

      ul#desktopMenu {
      background: YOUR SOLID COLOR (e.g. #e20177);
      border-radius: 5px;
      font-family: "Open Sans",sans-serif;
      font-size: 14px !important;
      font-weight: 500;
      list-style: outside none none;
      margin: 0;
      padding: 10px 0;
      text-align: left;
      }

      -then to get all of your nav items on one line so its easier to view find the rule below in your active css file default_modified.css:

      ul#desktopMenu li a {
      color: #fff;
      display: block;
      font-size: 14px !important;
      font-weight: 500;
      padding: 0 20px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
      text-transform: capitalize;
      }

      -CHANGE TO-

      ul#desktopMenu li a {
      color: #fff;
      display: block;
      font-size: 14px !important;
      font-weight: 500;
      padding: 0 5px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
      text-transform: capitalize;
      }

      Hope this helps a bit more. Its not easy moving a design over when the navigation is going to another row. This should make it easier though.

      Thanks,
      Shaun
      Last edited by thecartdesigner; 11-26-2014, 12:14 PM.
      TheCartDesigner.com
      Not 3dcart Owned or Operated
      100% Independent 3dcart Expert


      Follow Us on Twitter

      Comment


      • #4
        jleclair & Shaun

        Thanks for pointing me in the right direction - I will have a play and see what I can do.

        Support seemed completely confused about this one.
        Sue
        Fabric Garden
        fabricgarden.com.au

        Comment


        • #5
          They're not good at changing colors. I had the same experience.

          Comment


          • #6
            Can anyone help us with this? We just simply want to add a background to the ul#desktopMenu (Top Desktop Menu Nav). We would love to have it gradient, but just a simple background for now would be okay. We can't figure this out and if anyone could help, that would be awesome. Thank you so much

            Comment


            • #7
              add this at bottom of your css
              ul#desktopMenu { max-height: 100%; width: 100%; background: #ccc; }
              You can change the background color to any color you want. ccc is gry.
              if you want to change color of elements, add this to your css by replacing with the color of your choice
              ul#desktopMenu li a{color:#000;}
              tangopixel.com
              Website Design and Development

              Comment

              Working...
              X