0
Welcome Guest! Login
0 items Join Now

Custom css for duplicate theme

Last Post
Search Topic

  • Re: Custom css for duplicate theme

    Posted 10 years 1 month ago
    • Ok, got almost everything working getting the // from the file. I just have one final question.
      I have this two overrides:

      .menu-home .headersurround-type-preset1 #rt-header-surround {
background-color: #bacfdb;
background-image: none !important;
}

.menu-zen .headersurround-type-preset1 #rt-header-surround {
background-color: #BADBC9;
background-image: none !important;
}

      They only work when I get the .menu-home or .menu-zen from the begining. Is that because it is not allowed to have two overrides?
      Thanks
    #1144488
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Custom css for duplicate theme

    Posted 10 years 1 month ago
    • Ivan Alvarez Malo wrote:
      Ok, got almost everything working getting the // from the file. I just have one final question.
      I have this two overrides:

      .menu-home .headersurround-type-preset1 #rt-header-surround {
background-color: #bacfdb;
background-image: none !important;
}

.menu-zen .headersurround-type-preset1 #rt-header-surround {
background-color: #BADBC9;
background-image: none !important;
}

      They only work when I get the .menu-home or .menu-zen from the begining. Is that because it is not allowed to have two overrides?
      Thanks

      You have to some Googling on basic CSS statements -> http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ !!!

      Here is the <body> class statement from your site. It's basically the same for all pages except the Gantry page class suffix injection and any styling changes that have been made in the Template Manager. This is for the Home page:
      <body class="logo-type-preset1 logo-type-preset1 demostyle-type-preset1 headermode-type-static headersurround-type-preset1 mainbody-overlay-light font-family-tessellate font-size-is-default menu-type-dropdownmenu layout-mode-responsive col12 option-com-content menu-zen " cz-shortcut-listen="true">

      So if I want to affect the font colour on the Home page, I could put:
      body {color: #FFF;}

      OR
      .menu-home {color: #FFF;}

      OR
      .headersurround-type-preset1 {color: #FFF;}

      so basically any of those class suffixes does the SAME as the <body> element.

      When you code:
      .menu-home .headersurround-type-preset1 #rt-header-surround {
background-color: #bacfdb;
background-image: none !important;
}

      You are saying I want to affect the:
      "background-color" of a
      <div> (represented by "#rt-header-surround") of the
      body (represented by ".headersurround-type-preset1") that is the child of a
      parent body (represented by ".menu-home")

      This is WRONG. All webpages can only have ONE <body>. The correct way of saying the body represented by TWO page class suffix's is:
      .menu-home.headersurround-type-preset1 #rt-header-surround {
background-color: #bacfdb;
background-image: none !important;
}

      Notice NO SPACE between .menu-home & .headersurround-type-preset1.
      However you don't really need TWO, ONE will do:
      .menu-home #rt-header-surround {
background-color: #bacfdb;
background-image: none !important;
}
 
.menu-zen #rt-header-surround {
background-color: #BADBC9;
background-image: none !important;
}
    • Last Edit: 10 years 1 month ago by DanG.
    #1144492

Time to create page: 0.049 seconds