0
Welcome Guest! Login
0 items Join Now

SOLVED Custom CSS for Menu Subtext

Last Post
Search Topic

  • SOLVED Custom CSS for Menu Subtext

    Posted 10 years 8 months ago
    • I would like to create a custom css class for certain menus so that the subtext is of a different color. Perhaps the image below will better explain better what i'm trying to achieve.
      This image is hidden for guests.
      Please log in or register to see it.

      In the image above, i would like to style the subtext for "Egypt Conservation" to be in Orange.

      I added the following to the custom css file for the template. It picks up the color change for the submenu itself and makes it cyan but it doesn't change the color of the subtext.


      .subtextClosedClass a.item 
	{
		font-family: @menu-font-family;
		font-size: @menu-font-size;
		line-height: @menu-line-height;
		color: cyan !important;

		padding: 4px 12px;
		text-align: left;
		text-shadow: 0 1px 2px @menu-text-shadow;
		text-decoration: none;
		display: block;
		outline: 0;
		cursor: pointer;

		// Subtext styling
		&.subtext 
		{
			padding-top: 5px;
			padding-bottom: 8px;

			> em 
			{
				display: block;
				font-size: @menu-font-size - 2;
				line-height: @menu-line-height - 12;
				color: orange !important;
				text-shadow: 0 1px 2px @menu-text-shadow;
				text-align: left;
				font-style: normal;
			}
		}
	}
    • Last Edit: 10 years 8 months ago by Abhishek Goel. Reason: The question was answered and so I'm marking the topic as [SOLVED]
    #1127751
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Custom CSS for Menu Subtext

    Posted 10 years 8 months ago
    • If this is a site that is online 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.
    #1127806

  • Re: Custom CSS for Menu Subtext

    Posted 10 years 8 months ago
    #1127807
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Custom CSS for Menu Subtext

    Posted 10 years 8 months ago
    • Abhishek Goel wrote:
      Thanks for responding. The link to the site is: www.ifrglobal.org

      Your custom CSS won't work as your using nested rules and comments from the LESS format. Try this instead, in your rt_alerion-custom.css file add this:
      #rt-header ul li a.item.subtext {
	color: #FD8905 !important;
}
#rt-header ul li a.item.subtext:hover {
	color: #FFFFFF !important;
}

      This covers the normal state -> orange and the hover state -> white. Adjust value(s) to suit.

      BTW, very nice what you've done with Alerion
      This image is hidden for guests.
      Please log in or register to see it.
    #1127818

  • Re: Custom CSS for Menu Subtext

    Posted 10 years 8 months ago
    • Thank you so much for your reply. I really love the Alerion template and it was a pleasure to play around with it and customize it for our site.

      I used the CSS code you sent me and oddly, it changes the look of the menu item itself but doesn't affect the subtext line. So in the menu, it changes the colors of the submenu itself ("Egypt - Conservation", "Egypt - Fayum", "South Africa"... and so on) but it doesn't change the subtext ("Closed", "Open" etc).

      Sorry for being such a pain and thanks again for the help. I've tried a bunch of things but nothing seems to work so that's why I'm troubling you again.

      Abhishek
    #1128440
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Custom CSS for Menu Subtext

    Posted 10 years 8 months ago
    • Abhishek Goel wrote:
      I used the CSS code you sent me and oddly, it changes the look of the menu item itself but doesn't affect the subtext line. So in the menu, it changes the colors of the submenu itself ("Egypt - Conservation", "Egypt - Fayum", "South Africa"... and so on) but it doesn't change the subtext ("Closed", "Open" etc).

      If your up for a little work you make like this solution.
      In your Admin Menu Manager: Edit Menu Item screen, for any class that is closed find Dropdown Menu Options -> Custom CSS Class and enter in this menu class -> classclosed

      Similarly for open classes -> Dropdown Menu Options -> Custom CSS Class and enter in this menu class -> classopen

      In your rt_alerion-custom.css file add this:
      .gf-menu .item.subtext.classopen > em {
	color: #8CB942 !important;
}
.gf-menu .item.subtext.classclosed > em {
	color: #DD2807 !important;
}

      Now the closed subtext will be red and the open subtext will be green.
    #1128456

  • Re: Custom CSS for Menu Subtext

    Posted 10 years 8 months ago
    • THANK YOU SO MUCH! That worked with a slight tweek.

      The I had to modify the code to:
      .classopen .item.subtext > em {
	color: #8CB942 !important;
}
.classclosed .item.subtext > em {
	color: #DD2807 !important;
}

      Thank you. This had been bugging me for a while. This is a big help.

      Thanks.
    #1128468
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Custom CSS for Menu Subtext

    Posted 10 years 8 months ago
    • Abhishek Goel wrote:
      Thank you. This had been bugging me for a while. This is a big help.

      Thanks.

      Yeah that looks cool now.

      To mark this issue as Solved, please change to a Checkmark and edit the Topic Title in your FIRST post of the Topic
      This image is hidden for guests.
      Please log in or register to see it.

      Thanks.
    • Last Edit: 10 years 8 months ago by DanG.
    #1128476

Time to create page: 0.060 seconds