0
Welcome Guest! Login
0 items Join Now

SOLVED change clarion menu theme

    • ancle's Avatar
    • ancle
    • Jr. Rocketeer
    • Posts: 25
    • Thanks: 0

    SOLVED change clarion menu theme

    Posted 8 years 4 months ago
    • Hi am just wondering if i could change the color theme of my navigation bar ? I have the clarion template but I my client persits on chaning the theme color to something more red. I browsed through other templates and i saw voxel's nav and i kinda liked that glossy color. I tried changing but a lot of changes need to be made.
      Can you tell me how can i achieve this?

      Thanks a lot !!!
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED change clarion menu theme

    Posted 8 years 4 months ago
    • I'm not sure what you mean at all? You already have a red header?

      Can you rephrase your question please - Please do a screengrab of your problem and annotate to make it clear.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • ancle's Avatar
    • ancle
    • Jr. Rocketeer
    • Posts: 25
    • Thanks: 0

    Re: SOLVED change clarion menu theme

    Posted 8 years 4 months ago
    • I wasn't talking about the header but the nav bar

      This image is hidden for guests.
      Please log in or register to see it.


      I want to change the color to the one that "voxel template" has

      http://demo.rockettheme.com/joomla-templates/voxel/

      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 8 years 4 months ago by ancle. Reason: image
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED change clarion menu theme

    Posted 8 years 4 months ago
    • This will approximate it to get you started...

      Use this code...
      .rt-menubar {
          float: none;
      }
      .menutop > li.active.root .item, .menutop li.root.f-mainparent-itemfocus .item, .menutop li.f-mainparent-itemfocus .item, .rt-menubar .menutop > li:hover .item, .rt-menubar .menutop > li.active .item {
          height: 40px;
          line-height: 40px;
      }
      .menutop li.root > .item {
          border: medium none;
          color: white;
          height: 40px;
          line-height: 40px;
      }
      .menutop > li.active.root .item img, .menutop li.root.f-mainparent-itemfocus .item img, .menutop li.f-mainparent-itemfocus .item img, .rt-menubar .menutop > li:hover .item img, .rt-menubar .menutop > li.active .item img {
          margin: 10px 10px 15px 0;
      }
      div.menu-block {
          background: #de2323; /* Old browsers */
          background: -moz-linear-gradient(top,  #de2323 0%, #de2323 48%, #dd7c7c 100%); /* FF3.6-15 */
          background: -webkit-linear-gradient(top,  #de2323 0%,#de2323 48%,#dd7c7c 100%); /* Chrome10-25,Safari5.1-6 */
          background: linear-gradient(to bottom,  #de2323 0%,#de2323 48%,#dd7c7c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#de2323', endColorstr='#dd7c7c',GradientType=0 ); /* IE6-9 */
      }
      div#rt-navigation .menutop {
          background-color: transparent;
          background-image: none;
      }
      ul.menutop > li.active, .menutop li.root:hover, ul.menutop li.f-mainparent-itemfocus, .menutop > li:hover {
          background-color: #333333;
          background-image: none;
          border: medium none;
      }

      There would be lots more code to get it identical...

      This is how to create a custom CSS compatible with Gantry 4...

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_iridescent would be rt_iridescent-custom.css). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • ancle's Avatar
    • ancle
    • Jr. Rocketeer
    • Posts: 25
    • Thanks: 0

    Re: SOLVED change clarion menu theme

    Posted 8 years 4 months ago
    • thanks a lot

Time to create page: 0.041 seconds