0
Welcome Guest! Login
0 items Join Now

SOLVED different mainmenu style for each template override

Last Post
Search Topic
    • Riccardo's Avatar
    • Riccardo
    • Elite Rocketeer
    • Posts: 1078
    • Thanks: 28

    SOLVED different mainmenu style for each template override

    Posted 8 years 7 months ago
    • I want to use a different mainmenu style (different size, hight and other) for each template override. At this moment, I using the under-written code in my custom.scss, but this setting no works.

      Which style variable syntax I need to use, so that this have effect on the single mainmenu (for the single template override)?
      By Firebug I have found this item specification, that I inserted in the css style, but I think it's wrong.
      .g-main-nav .g-menu-item-159 .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
	font-size: 2.2rem;
	line-height: 2.0rem;
}
    • Last Edit: 8 years 7 months ago by Riccardo.
    • Riccardo Rausch
      www.rausch.it
    #1283339
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED different mainmenu style for each template override

    Posted 8 years 7 months ago
    #1283359
    • Riccardo's Avatar
    • Riccardo
    • Elite Rocketeer
    • Posts: 1078
    • Thanks: 28

    Re: SOLVED different mainmenu style for each template override

    Posted 8 years 7 months ago
    • I'm not an expert in CSS syntax, and I made two attempts it based on the previous post:
      .body.outline-24 .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
	font-size: 2.2rem;
	line-height: 2.0rem;
}
      and
      .g-main-nav.outline-24 .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
	font-size: 2.2rem;
	line-height: 2.0rem;
}
      They have not worked.
      Still using Firebug, I tried to change the style from the single mainmenu item. I tried to change the css style with change the home item from this template override; as I mentioned in the first post.
      But even this did not work.
    • Riccardo Rausch
      www.rausch.it
    #1283483
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED different mainmenu style for each template override

    Posted 8 years 7 months ago
    • So your two attempts are indeed both incorrect here is the corrected version of each...
      body.outline-24 .g-main-nav .g-menu-item-159 .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
    font-size: 2.2rem;
    line-height: 2.0rem;
}

      and
      .outline-24 .g-main-nav .g-menu-item-159 .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
    font-size: 2.2rem;
    line-height: 2.0rem;
}

      You need to pay attention to the hierarichal structure of the html ie what element appears inside another (the selector follows hierarchy). Also "." denotes a class and "#" denotes an ID. You put ".body" meaning an element that has a class of "body" - there is no such thing, "body" is an html tag. I corrected it to "body.outline-24" which means html "body" tag that has a class of "outline-24" on it. In the second statement the hierarchy was incorrect. You also seemed to drop the reference to the specific menu item that you had in your original statement for some reason? I don't know if that was intentional or not?

      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.
    #1283490
    • Riccardo's Avatar
    • Riccardo
    • Elite Rocketeer
    • Posts: 1078
    • Thanks: 28

    Re: SOLVED different mainmenu style for each template override

    Posted 8 years 7 months ago
    • I entered the correct css code (in the custom.scss) but I can't be varied the font size of the mainmenu of this single template override.
    • Last Edit: 8 years 7 months ago by Riccardo.
    • Riccardo Rausch
      www.rausch.it
    #1283495
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED different mainmenu style for each template override

    Posted 8 years 7 months ago
    • Well that's outline 27 not outline 24. Also, you now indicated all of the menu items and not a specific one, so...
      .outline-27 .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
    font-size: 1.5rem;
}

      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.
    #1283497
    • Riccardo's Avatar
    • Riccardo
    • Elite Rocketeer
    • Posts: 1078
    • Thanks: 28

    Re: SOLVED different mainmenu style for each template override

    Posted 8 years 7 months ago
    • Yet the setting, that you've given me regarding the body font size (of the p tag) works correctly with the outline 24. I tried to enter the 27 but still does not work.
    • Last Edit: 8 years 7 months ago by Riccardo.
    • Riccardo Rausch
      www.rausch.it
    #1283500
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED different mainmenu style for each template override

    Posted 8 years 7 months ago
    • Any CSS that I gave you to change the p tag on outline 24 will not be working on that page that is outline 27.

      You have another piece of custom CSS changing the font size on that page and the selector is "body p" which means any paragraph inside the body tag of any page (unless there is another statement with higher CSS specifity that contradicts this).

      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.
    #1283503
    • Riccardo's Avatar
    • Riccardo
    • Elite Rocketeer
    • Posts: 1078
    • Thanks: 28

    Re: SOLVED different mainmenu style for each template override

    Posted 8 years 7 months ago
    • You have probably chosen the English language (perhaps provided by your browser the link in English). For each language, running a separate template override (It's a multilanguage website).
      The graphical test I'm doing, runs only in the Italian language ("bellavilla-mainmenu-ita" template override ID=24). When I have finished this graphic work, I will apply these css properties on all three templates (in the three languages: ID=24, 26 and 27).

      From what I understand, the "outline-xx" ID number which is used, corresponds to the one indicated in the templates list. I have did more tests, to sure for these settings, and, as you can see in custom.scss, by placing a very high value of the font size (by using outline-24), the Italian text is correctly magnified.
      But this is not the case for the other css style value with same ID; what refers to the mainmenu.

      I hope I have better illustrated the problem and I apologize for my bad English.
    • Last Edit: 8 years 7 months ago by Riccardo.
    • Riccardo Rausch
      www.rausch.it
    #1283541
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13482
    • Web Designer/Developer

    Re: SOLVED different mainmenu style for each template override

    Posted 8 years 7 months ago
    • The statement you added for outline 24 to change the menu is to change a specific menu item but it is incorrect - change this:
      body.outline-24 .g-main-nav .g-menu-item-159 .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
    font-size: 2.8rem;
    line-height: 2.6rem;
}

      to this:
      body.outline-24 .g-main-nav .g-toplevel > li.g-menu-item-159 > .g-menu-item-container > .g-menu-item-content {
    font-size: 2.8rem;
    line-height: 2.6rem;
}


      But if you are trying to change the whole italian menu (rather than a menu item within it) then the CSS should be:
      body.outline-24 .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {
    font-size: 2.8rem;
    line-height: 2.6rem;
}



      Regards, Mark.

    • The following users have thanked you: Riccardo

    • 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.
    #1283546

Time to create page: 0.060 seconds