Multi color header and text in Themler

Hi,

We do not plan such feature. You can try to use the HTML control with the code that will include two <span> tags with the inline color values. Like this:

<h1><span style="color:red;">Hello</span><span style="color:blue;">world!</span></h1>

Sincerely,
Hella

Hi Hella,

Can we do it same for Horizontal Menus...

Each menu with different colors and icons if we need it ?

Regards
Suffian Ahmed

Hi,

The menu item name cannot be edited as the HTML so that is not possible. The color of the item background can be added as the custom CSS code. But we do not support such custom modifications.

Sincerely,
Hella

Ok, at least Is there any way to use some third-party CSS to achieve the same with different colors menus...

Share some third party links so that we can explore the same.

Thank in advance, Appreciate your quick response...

Regards
Suffian Ahmed

Last edited 05 June 2018 by Web IT Solutions LLP

FYI -

http://jsfiddle.net/2HmUk/
http://themes.typepad.com/guide/2012/01/navbar-multi-color.html

Regards
Suffian Ahmed

Hi,

You can use those tutorials and add that code into the Home >> Settings >> Additional CSS. Also use the !important; after each option like this:

color:red!important;

Sincerely,
Hella

How this thing works for me,

<ul>
    <li><a id="darkcyan" href="#">Link</a></li>
    <li><a id="darkgray" href="#">Link</a></li>
    <li><a id="skyblue" href="#">Link</a></li>
    <li><a id="coral" href="#">Link</a></li>
    <li><a id="sandybrown" href="#">Link</a></li>
    <li><a id="crimson" href="#">Link</a></li>
  </ul>

================CSS =============

nav ul li:nth-child(1) a { color: orange; }
nav ul li:nth-child(2) a { color: red; }
nav ul li:nth-child(3) a { color: green; }
nav ul li:nth-child(4) a { color: brown; }
nav ul li:nth-child(5) a { color: yellow; }
nav ul li:nth-child(6) a { color: purple; }

Regards
Suffian Ahmed

<ul>
    <li><a id="darkcyan" href="#">Link</a></li>
    <li><a id="darkgray" href="#">Link</a></li>
    <li><a id="skyblue" href="#">Link</a></li>
    <li><a id="coral" href="#">Link</a></li>
    <li><a id="sandybrown" href="#">Link</a></li>
    <li><a id="crimson" href="#">Link</a></li>
  </ul>
================CSS =============


nav ul li:nth-child(1) a { color: orange; }
nav ul li:nth-child(2) a { color: red; }
nav ul li:nth-child(3) a { color: green; }
nav ul li:nth-child(4) a { color: brown; }
nav ul li:nth-child(5) a { color: yellow; }
nav ul li:nth-child(6) a { color: purple; }

color:red!important;

Is that above code, where i need to add it in the Themler ?

Regards
Suffian Ahmed

We used this to get the background color for different horizontal menus

nav ul li:nth-child(1) a { background: orange!Important; }
nav ul li:nth-child(2) a { background: red!Important; }
nav ul li:nth-child(3) a { background: green!Important; }
nav ul li:nth-child(4) a { backgrond: brown!Important; }
nav ul li:nth-child(5) a { background: yellow!Important; }
nav ul li:nth-child(6) a { background: purple!Important; }
nav ul li:nth-child(7) a { background: pink!Important; }
nav ul li:nth-child(8) a { background: skyblue!Important; }

Is this works for us? Attached screenshot for your reference...

This you can achieve using Themler too right as a default feature for menus. ?

Regards
Suffian Ahmed

Last edited 05 June 2018 by Web IT Solutions LLP

And, the above code is not working for sub menu, I am getting same sub-menu root color and submenu colors as same...

Find the screenshot attached, I like to add colors only for root menus and not to submenus.

Check the screenshot... Same colors even for menus and submenus of the same. Wh?

Regards
Suffian Ahmed

Last edited 05 June 2018 by Web IT Solutions LLP

Hi,

The code you created affects all a elements inside nav tree. The subitems are ul-li-a tree too. If you want to affect 1st level items only you need more specific selectors. For example:

nav ul.nav > li:nth-child(1) > a {...}

Thank you,
Olivia

Hi Olivia,

The below code as per your suggestions is working for first menu and its sub menu but failed for next second sub menu and its root menu.

nav ul.nav > li:nth-child(1) a { background: orange!Important; }
nav ul.nav > li:nth-child(2) a { background: red!Important; }
nav ul.nav > li:nth-child(3) a { background: green!Important; }
nav ul.nav > li:nth-child(4) a { backgrond: brown!Important; }
nav ul.nav > li:nth-child(5) a { background: yellow!Important; }
nav ul.nav > li:nth-child(6) a { background: purple!Important; }
nav ul.nav > li:nth-child(7) a { background: pink!Important; }
nav ul.nav > li:nth-child(8) a { background: skyblue!Important; }

Kindly check the screenshot attached for your reference, please let us know how to apply nth-child of root menus of all main menus in horizontal menus only.

Regards
Suffian Ahmed

Hi Olivia,

Sorry, the below code of yours is working fine.

nav ul.nav > li:nth-child(1) > a { background: orange!Important; }
nav ul.nav > li:nth-child(2) > a { background: red!Important; }
nav ul.nav > li:nth-child(3) > a { background: green!Important; }
nav ul.nav > li:nth-child(4) > a { backgrond: brown!Important; }
nav ul.nav > li:nth-child(5) > a { background: yellow!Important; }
nav ul.nav > li:nth-child(6) > a { background: purple!Important; }
nav ul.nav > li:nth-child(7) > a { background: pink!Important; }
nav ul.nav > li:nth-child(8) > a { background: skyblue!Important; }

Appreciated your response, i missed out some of the script so got it wrong. Now, its working fine.

Regards
Suffian Ahmed

Hi,

Nice to hear that all is working fine now.

Sincerely,
Hella