Multi color header and text in Themler

Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 June 2018

Dear Sir,

I need one feature what other tools are offering in their desig. Like for <h1> tab hello world both letters I want too different colors.

Can you make this as default feature of headed ex. H1, h2, h3, h4 etc and text fields in Themler.

Any third party CSS Integration script please refer the link or sample code. And, you can make this as part of feature in next relese.

Open this ticket for others to vote for this feature too.

Thanks in advance,

Regards
Suffian Ahmed

Dear Sir, I need one feature what other tools are offering in their desig. Like for &lt;h1&gt; tab hello world both letters I want too different colors. Can you make this as default feature of headed ex. H1, h2, h3, h4 etc and text fields in Themler. Any third party CSS Integration script please refer the link or sample code. And, you can make this as part of feature in next relese. Open this ticket for others to vote for this feature too. Thanks in advance, Regards Suffian Ahmed
Vote to pay developers attention to this features or issue.
14 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 05 June 2018

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, 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
Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 June 2018

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 Hella, Can we do it same for Horizontal Menus... Each menu with different colors and icons if we need it ? Regards Suffian Ahmed
Support Team
Support Team posted this 05 June 2018

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

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
Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 June 2018

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

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

Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 June 2018

FYI -

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

Regards
Suffian Ahmed

FYI - http://jsfiddle.net/2HmUk/ http://themes.typepad.com/guide/2012/01/navbar-multi-color.html Regards Suffian Ahmed
Support Team
Support Team posted this 05 June 2018

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

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
Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 June 2018

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

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
Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 June 2018

<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

<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
Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 June 2018

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

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

Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 June 2018

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

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

Support Team posted this 05 June 2018

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, 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
Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 June 2018

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, 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
Web IT Solutions LLP
308 Posts
Web IT Solutions LLP posted this 05 June 2018

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 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
Support Team
Support Team posted this 06 June 2018

Hi,

Nice to hear that all is working fine now.

Sincerely,
Hella

Hi, Nice to hear that all is working fine now. Sincerely, Hella
You must log in or register to leave comments