0
Welcome Guest! Login
0 items Join Now

{SOLVED} This is a complicated question

Last Post
Search Topic

  • {SOLVED} This is a complicated question

    Posted 12 years 3 months ago
    • afaststartnow.com/partners2

      I would like to change this page only, which has it's own template style, to the light style but keep the dark style in the Navigation. I searched the board, couldn't find this particular issue, surprisingly. Thanks in advance for your help!

      I guess my question is, How can I change the background/body to a lighter style on this single page leaving the navigation dark and leaving the rest of the site dark as is. Is this possible???
    • Last Edit: 12 years 3 months ago by Jacob Stanfield.
    • Thanks.
      Senior Multimedia Designer
      This email address is being protected from spambots. You need JavaScript enabled to view it.
    #928711
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: {SOLVED} This is a complicated question

    Posted 12 years 3 months ago
    • Hi there,

      It is possible if you use page suffix and then add css to match the suffix.

      For example, when you set light as default it calls the main-light.css instead of main-dark.css. So if you find all of the css relating to the top navigation area and copy them to main-light.css and add the page suffix then it should work.

      The navigation area has a dark background and is controlled by the following codes in the appropriate css file...
      /* Navigation - as shown in main-dark  */
#rt-headerblock {border-bottom: 1px solid #444;box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);}
.menutop.level1 > li.active .item {color: #fff;background-image: url(../images/overlays/dark/readon.png);box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);text-shadow: 0 0 2px rgba(0,0,0,0.6);}
.menutop.level1 > li.active:hover .item, .menutop.level1 > li.active.f-mainparent-itemfocus .item {color: #fff;}
.menutop.level1 > li.active {box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);border-radius: 6px;}
body .menutop.fusion-js-container ul li > .fusion-modules.item:hover, .menutop .item, .splitmenu .item, .module-content .menu a {color: #fefefe;}
.fusion-submenu-wrapper {background-color: #2D2D2D;box-shadow: 0 4px 4px rgba(0,0,0,0.4);}
.daddyicon, .menutop ul li > .daddy span {background-image: url(../images/overlays/dark/arrows.png);}
 
/* Subnavigation */
#rt-subnavigation .menu-block {border-left: 3px solid rgba(0,0,0,0.5);border-right: 3px solid rgba(0,0,0,0.5);border-bottom: 3px solid rgba(0,0,0,0.5);}
#rt-subnavigation .rt-menubar.splitmenu {border-left: 1px solid #000;border-right: 1px solid #000;border-bottom: 1px solid #000;background-image: url(../images/overlays/dark/submenu-overlay.png);box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.12);}
      The same code for light...
      /* Navigation - as shown in main-light*/
#rt-headerblock {border-bottom: 1px solid #fff;box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);}
.menutop.level1 > li.active .item {color: #fff;background-image: url(../images/overlays/light/readon.png);box-shadow: inset 0 1px 3px rgba(0,0,0,0.7);text-shadow: 0 0 2px rgba(0,0,0,0.6);}
.menutop.level1 > li.active:hover .item, .menutop.level1 > li.active.f-mainparent-itemfocus .item {color: #fff;}
.menutop.level1 > li.active {box-shadow: 0 4px 2px #fff, 0 0 0 3px rgba(225, 225, 225, 0.9);border-radius: 5px;}
body .menutop.fusion-js-container ul li > .fusion-modules.item:hover, .menutop .item, .splitmenu .item, .module-content .menu a {color: #60676F;text-shadow: 1px 1px 1px #fff;}
.fusion-submenu-wrapper {background-color: #F3F3F3;box-shadow: 0 4px 4px rgba(0,0,0,0.4);}
.daddyicon, .menutop ul li > .daddy span {background-image: url(../images/overlays/light/arrows.png);}
 
/* Subnavigation */
#rt-subnavigation .menu-block {border-left: 3px solid rgba(0,0,0,0.1);border-right: 3px solid rgba(0,0,0,0.1);border-bottom: 3px solid rgba(0,0,0,0.1);box-shadow: 0 0 5px rgba(225,225,225,0.6);}
#rt-subnavigation .rt-menubar.splitmenu {border-left: 1px solid #C2C2C2;border-right: 1px solid #C2C2C2;border-bottom: 1px solid #C2C2C2;background-image: url(../images/overlays/light/submenu-overlay.png);box-shadow: inset 0 -1px 4px rgba(0, 0, 0, 0.12);}
      If you give your menu item the page suffix of darkheader and then take all of the code entries for dark and prefix each element with .darkheader then save that to the bottom of main-light.css then you should get the effect you want.

      You may have to add !important at the end of each rule.

      Hope this helps 8)

    • 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
    #930473

  • Re: {SOLVED} This is a complicated question

    Posted 12 years 3 months ago
    • Thanks David,

      I thought about doing that as well only it didn't quite work for me. If you go there now, www.afaststartnow.com/partners2 you will see that the logo and the box are still in the "Light Style". Can you check the .css and see if I made any errors or if I need to add anything?

      Thank you for your help!!!
    • Thanks.
      Senior Multimedia Designer
      This email address is being protected from spambots. You need JavaScript enabled to view it.
    #930625

  • Re: {SOLVED} This is a complicated question

    Posted 12 years 3 months ago
    • Since I was only using the light style on this one page, and really any other page I'm going to use the light style on in the future, I changed the CSS for some of the other code to match the dark style. For some reason, I'm unsure why, I couldn't override a few things in my custom.css file. Anyway, it's fine now. I'll mark solved. Thanks to all that gave suggestions.
    • Thanks.
      Senior Multimedia Designer
      This email address is being protected from spambots. You need JavaScript enabled to view it.
    #931135

Time to create page: 0.048 seconds