[Solved] how to change the color of horizon line below the main menu

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
sulla2018
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Tue Jun 26, 2018 1:37 pm

[Solved] how to change the color of horizon line below the main menu

Post by sulla2018 » Sun Jul 01, 2018 3:16 pm

I changed the position of main menu from position 7 to position 1, and set menu from vertical to horizon. I want to change the color of horizon line below the main menu, how to do that?

In template.css, there are several parameters,

Code: Select all

.nav {

.nav-tabs >

.navbar .divider-vertical {

.navigation {

.navigation .nav-pills {
which on is related to that horizon line? I think that horizon line is just a border bottom.
Last edited by imanickam on Mon Jul 02, 2018 8:46 am, edited 1 time in total.
Reason: Marked as Solved

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 24806
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: how to change the color of horizon line below the main menu

Post by Per Yngve Berg » Sun Jul 01, 2018 3:56 pm

Which Template?

User avatar
imanickam
Joomla! Master
Joomla! Master
Posts: 26722
Joined: Wed Aug 13, 2008 2:57 am
Location: Chennai, India

Re: how to change the color of horizon line below the main menu

Post by imanickam » Sun Jul 01, 2018 3:59 pm

From your previous posts, assuming that you are using the Protostar template. If that is the case, add the following css entry in the file user.css located in the directory \templates\protostar\css.

Code: Select all

.navigation {
    border-bottom: 1px solid rgba(255,0,0,0.8);
}
Note:
The sample code assumes Red color with some transparency.

Next time, please provide your site's URL. The reason being, others can see the css changes you may have made to the template.
Ilagnayeru (MIG) Manickam | இளஞாயிறு மாணிக்கம்
Global Moderators Team | Translations Coordination Team | Tamil (தமிழ்) Translation Team

Eegan - Support the poor and underprivileged

sulla2018
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Tue Jun 26, 2018 1:37 pm

Re: how to change the color of horizon line below the main menu

Post by sulla2018 » Sun Jul 01, 2018 9:17 pm

imanickam wrote:From your previous posts, assuming that you are using the Protostar template. If that is the case, add the following css entry in the file user.css located in the directory \templates\protostar\css.

Code: Select all

.navigation {
    border-bottom: 1px solid rgba(255,0,0,0.8);
}
Note:
The sample code assumes Red color with some transparency.

Next time, please provide your site's URL. The reason being, others can see the css changes you may have made to the template.
I added the code to user.css, but nothing changed.

User avatar
sozzled
Joomla! Champion
Joomla! Champion
Posts: 5648
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: how to change the color of horizontal line below the main menu

Post by sozzled » Sun Jul 01, 2018 9:35 pm

sulla2018 wrote:I added the code to user.css, but nothing changed.
This could be for one of two possible reasons.

1) As we discovered in another topic that you created,
Jaydot wrote:... you have ... overridden the CSS for ... in your index.php.

You need to revert the changes you made to the index.php. Any changes you want to make to the styling of a webpage should be in the custom css, never in the index.php.
I completely agree. People should not modify any file named index.php.

2) You may have caching involved. Disable any caching and go to System » Clear Cache » Delete All in the backend and force a browser refresh. Also, if you have the System — Page Cache plugin enabled then you should disable it.

This may also help to understand about caching: http://lmgtfy.com/?q=To+cache+or+not+to+cache%3F

I hope this helps.
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

sulla2018
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Tue Jun 26, 2018 1:37 pm

Re: how to change the color of horizontal line below the main menu

Post by sulla2018 » Mon Jul 02, 2018 1:32 am

sozzled wrote:
sulla2018 wrote:I added the code to user.css, but nothing changed.
This could be for one of two possible reasons.

1) As we discovered in another topic that you created,
Jaydot wrote:... you have ... overridden the CSS for ... in your index.php.

You need to revert the changes you made to the index.php. Any changes you want to make to the styling of a webpage should be in the custom css, never in the index.php.
I completely agree. People should not modify any file named index.php.

2) You may have caching involved. Disable any caching and go to System » Clear Cache » Delete All in the backend and force a browser refresh. Also, if you have the System — Page Cache plugin enabled then you should disable it.

This may also help to understand about caching: http://lmgtfy.com/?q=To+cache+or+not+to+cache%3F

I hope this helps.
I cleared cache, still no change.

By the way, I need to add google analytics tracking code to index.php,
Can I add google analytics tracking code to user.css instead of index.php?

In addition, I also added four unused positions in index.php,
can I add those code to user.css in order to keep index.php untouched?

User avatar
sozzled
Joomla! Champion
Joomla! Champion
Posts: 5648
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: CSS changes in user.css don't work ... and other matters

Post by sozzled » Mon Jul 02, 2018 3:47 am

sulla2018 wrote:I cleared cache, still no change.
Then I don't know what's wrong. It would be good, for others to help you, if you could provide us with the URL for your website. It may also help if you used the Forum Post Assistant tool (the link for where you can obtain it and instructions for use are located in the pink-coloured area at the top of this page.
sulla2018 wrote:Can I add google analytics tracking code to user.css instead of index.php?
No, you can't do that. You can, however, create a Joomla custom module, copy the Google Analytics Javascript to it and assign the module to those site pages where you want Google Analytics to collect data.
sulla2018 wrote:I also added four unused positions in index.php. Can I add those code to user.css in order to keep index.php untouched?
No, you can't do that. CSS is CSS; PHP is PHP. You cannot run PHP code within CSS.
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

sulla2018
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Tue Jun 26, 2018 1:37 pm

Re: how to change the color of horizon line below the main menu

Post by sulla2018 » Mon Jul 02, 2018 7:20 am

imanickam wrote:From your previous posts, assuming that you are using the Protostar template. If that is the case, add the following css entry in the file user.css located in the directory \templates\protostar\css.

Code: Select all

.navigation {
    border-bottom: 1px solid rgba(255,0,0,0.8);
}
Note:
The sample code assumes Red color with some transparency.

Next time, please provide your site's URL. The reason being, others can see the css changes you may have made to the template.
I tried again. You're right, the following code works

Code: Select all

.navigation {
    border-bottom: 1px solid rgba(255,0,0,0.8);
}


Post Reply

Return to “Templates for Joomla! 3.x”