0
Welcome Guest! Login
0 items Join Now

Custom css for duplicate theme

Last Post
Search Topic

  • Custom css for duplicate theme

    Posted 10 years 2 months ago
    • Hi, I`ve duplicated my main template expecting to do some changes por the rest of the pages. I understand its better to work with page suffixes. My override templatename-custom.css works well with other overrides.
      Here is my problem: I want to change my logo image and size for the other pages. for the logo its under #rt-logo, and for the padding it under .rt-logo-block.
      I want the index page to have a bigger logo, and the rest a different smaller logo I`ve made an override for all the other pages. So I`ve been struggling on how to apply this age suffixes to the index page. I`ve tried doing the following:

      For the Logo:
      .inicio #rt-logo {
      background-image: url(../images/logo/logo2.png);
      height: 104px !important;
      }

      For the block:
      .bloque .rt-logo-block {
      padding: 40px 30px;
      }

      I write this suffixes in my menu button for main in the following way:
      feb14-home bloque inicio

      I`m not sure if I`m not using the right sintax or it should be done differently but none of this will work. Im using Tesselate template.
      Thanks for the help.
    • Last Edit: 10 years 2 months ago by Ivan Alvarez Malo.
    #1139963
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Custom css for duplicate theme

    Posted 10 years 2 months ago
    • There's an easier way. Make sure that Admin -> Extend or Extensions -> Template Manager -> rt_template(MASTER) -> Advanced -> Page Suffix -> ON
      Now Gantry will create a page class suffix for you on every menu page and insert it into the <body> tag.

      So your code goes something like this:
      .menu-home .some-class {
    some CSS code
}

.menu-contact-us {
    some other CSS code
}

    • The following users have thanked you: Saso Sanjic

    #1140065

  • Re: Custom css for duplicate theme

    Posted 10 years 1 month ago
    • Ok, thanks for the reply. I still don´t quite understand how to use that feature. It´s on in my settings, I just don´t know what would the class for the page be, whats the name for it?

      Lets use for example the logo css. I have button in my menu called "Zen" and I want to use a different logo there.

      .zen #rt-logo {
      background-image: url(../images/logo/logo2.png);
      height: 104px !important;
      }

      Would that be the correct way to handle it?

      Thanks,
    #1143202
    • 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, thanks for the reply. I still don´t quite understand how to use that feature. It´s on in my settings, I just don´t know what would the class for the page be, whats the name for it?

      There are four ways to obtain the name:
      1. use FireBug for Firefox or Chrome Developer Tools to inspect the <body> tag
      2. on the menu page you need right click and select "View Page Source" and again inspect the <body> tag
      3. view the Menu item itself and look at the Alias setting
      4. Admin -> Menus -> Main Menu -> Home -> Page Display Options -> Page Class = define some name
      Ivan Alvarez Malo wrote:
      Lets use for example the logo css. I have button in my menu called "Zen" and I want to use a different logo there.

      First I'll use method #1. So you have a menu page called "My Zen" on our Chimera template so here's the <body> tag:
      <body class="logo-type-chimera demostyle-type-custom header-type-scroll mainbody-overlay-light font-family-chimera font-size-is-default menu-type-dropdownmenu layout-mode-responsive col12 option-com-content menu-my-zen" cz-shortcut-listen="true">

      Joomla has two rules when creating an alias from your menu title:
      1. all UPPERcase is converted to lowercase
      2. any spaces are converted to a dash "-"
      Gantry also adds this rule, ALL Joomla title aliases have the suffix "menu-" prepended to them.

      So your title menu page "My Zen" becomes "menu-my-zen"
      The code becomes:
      .menu-my-zen #rt-logo {
background-image: url(../images/logo/logo2.png);
height: 104px !important;
}

      Because "menu-my-zen" is part of the <body> tag then just like the <body> tag, "menu-my-zen" if used affects EVERYTHING on that menu page.

      Last you would add your overriding by menu page custom CSS to youe rt_templateName-custom.css file.
    #1143221

  • Re: Custom css for duplicate theme

    Posted 10 years 1 month ago
    • OK, thanks. I have it working for the most part, although I´m kinda new to CSS and when I do:

      .menu-my-zen #rt-logo {
background-image: url(../images/logo/logo2.png);
height: 104px !important;
}

      The #rt-logo wont override, and it will keep the original settings. Is that because its an ID? What should I do?

      EDIT** Actually, it seems to randomly decide what to override and what not. It´ll work in some and in other cases with the same format it wont, I have cleaned cache many times.
    • Last Edit: 10 years 1 month ago by Ivan Alvarez Malo.
    #1143512
    • 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, thanks. I have it working for the most part, although I´m kinda new to CSS and when I do:
      .menu-my-zen #rt-logo {
      background-image: url(../images/logo/logo2.png);
      height: 104px !important;
      }

      The #rt-logo wont override, and it will keep the original settings. Is that because its an ID? What should I do?

      Is your menu item actually called "My Zen"???

      If this is a site that is online (just installed, dev or live) could you please supply a link in the Public or SECURE part of your reply so we can better diagnose the issue?
      It makes our suggestions more accurate if we see the actual coding of your site.
      This is especially important with RokSprocket as our templates carry an override folder to modify the native styling.
    #1143524

  • Re: Custom css for duplicate theme

    Posted 10 years 1 month ago
    • Its calle menu-zen, I have it set up properly in my override css.
      For example if you check rt-header-surround in the main page you can see in the override the color, and when I apply this same type of override in the Zen section you´ll see its the same (with different color) and it wont work. Also note the override for the logo is there and it doesnt work. I´ve checked in the body tag and mennu-zen is there.

      Thanks
    #1143526
    • 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:
      Its calle menu-zen, I have it set up properly in my override css.

      And there is the problem. Okay I'm not trying to be mean here but I need you to understand how this works - it will help you.

      So I posted:DanG wrote:
      Joomla has two rules when creating an alias from your menu title:
      1. all UPPERcase is converted to lowercase
      2. any spaces are converted to a dash "-"
      Gantry also adds this rule, ALL Joomla title aliases have the suffix "menu-" prepended to them.

      So your title menu page "My Zen" becomes "menu-my-zen"
      The code becomes:
      .menu-my-zen #rt-logo {
background-image: url(../images/logo/logo2.png);
height: 104px !important;
}

      Because "menu-my-zen" is part of the <body> tag then just like the <body> tag, "menu-my-zen" if used affects EVERYTHING on that menu page.
      Last you would add your overriding by menu page custom CSS to your rt_templateName-custom.css file.

      So "menu-my-zen" was the EXAMPLE I used.

      Then you posted:Ivan Alvarez Malo wrote:
      OK, thanks. I have it working for the most part, although I´m kinda new to CSS and when I do:
      .menu-my-zen #rt-logo {
background-image: url(../images/logo/logo2.png);
height: 104px !important;
}

      The #rt-logo wont override, and it will keep the original settings. Is that because its an ID? What should I do?

      So you used my EXAMPLE "menu-my-zen" to place in the code.

      Then you posted:Ivan Alvarez Malo wrote:
      Its calle menu-zen, I have it set up properly in my override css.

      Your using ".menu-my-zen" from my EXAMPLE but your menu is REALLY called "menu-zen" (I assuming this is the menu ALIAS).

      So the code should be:
      .menu-zen #rt-logo {
background-image: url(../images/logo/logo2.png);
height: 104px !important;
}
    #1143570

  • Re: Custom css for duplicate theme

    Posted 10 years 1 month ago
    • Haha I know you are not trying to be mean, but I did it properly and I didn´t use .menu-my-zen in my css I used .menu-zen
      I have a screenshot of my code, and a screen shot of my body tag, where I highlighted in green menu-zen.
      Thanks for the time and help.
    • Last Edit: 10 years 1 month ago by Ivan Alvarez Malo.
    #1143835
    • 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:
      Haha I know you are not trying to be mean, but I did it properly and I didn´t use .menu-my-zen in my css I used .menu-zen
      I have a screenshot of my code, and a screen shot of my body tag, where I highlighted in green menu-zen.
      Thanks for the time and help.

      Okay...let's fix this:
      First, this code:
      // Logo
//Zen

      is wrong as these are not the proper comment types for CSS. CSS uses /* comment */. The dual slashes are strictly used for commenting in LESS files (the advanced version of CSS) ;)

      Next,
      .menu-zen .rt-logo #rt-logo{
	height: 50px !important;
	background-image: url(../images/logo/logo2.png) !important;
}

      This code will never work because as a template HTML element the class ".rt-logo" doesn't exist. So the CSS isn't valid. So change it to:
      .menu-zen #rt-logo{
	height: 50px !important;
	background-image: url(../images/logo/logo2.png) !important;
}

      Last, what is the exact URL for your image -> /images/logo/logo2.png ??
    #1143858

Time to create page: 0.055 seconds