How to remove protostar's unwanted blue top line

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

How to remove protostar's unwanted blue top line

Post by sulla2018 » Sat Jun 30, 2018 4:06 pm

There is blue top line between the logo and url bar.
I tried to remove the line
"border-top: 3px solid ' . $this->params->get('templateColor') . ';"
from template's index.php, it doesn't help.

If I change the template color via template/style setting, this top line color will change. But I want to remove this top line, how to do that ?


see screenshot
You do not have the required permissions to view the files attached to this post.

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 261
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: How to remove protostar's unwanted blue top line

Post by Jaydot » Sat Jun 30, 2018 4:28 pm

In your custom css file (for Protostar, that's a file in your templates/protostar/css directory named user.css - if it doesn't exist, you have to create it), add:

Code: Select all

.body.site {
   border-top: none;
}
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

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

Re: How to remove protostar's unwanted blue top line

Post by sulla2018 » Sat Jun 30, 2018 9:32 pm

Jaydot wrote:In your custom css file (for Protostar, that's a file in your templates/protostar/css directory named user.css - if it doesn't exist, you have to create it), add:

Code: Select all

.body.site {
   border-top: none;
}
yes, I added the code to user.css, nothing changed.
I also tested different browsers, there is no difference.

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 261
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: How to remove protostar's unwanted blue top line

Post by Jaydot » Sun Jul 01, 2018 8:46 am

Oops, it should be

Code: Select all

body.site {
   border-top: none;
}
without the dot before body!
Sorry about that.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

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

Re: How to remove protostar's unwanted blue top line

Post by sulla2018 » Sun Jul 01, 2018 1:51 pm

Jaydot wrote:Oops, it should be

Code: Select all

body.site {
   border-top: none;
}
without the dot before body!
Sorry about that.
same,still no change

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 261
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: How to remove protostar's unwanted blue top line

Post by Jaydot » Sun Jul 01, 2018 2:36 pm

I know this works, because I use it on my own site...
Could you share a link to your site?
Do you know how to use your browser's Inspector tool? It will show you exactly how the blue line is coded in the template.css, see image. That's the css you need to override in your user.css.

Things you could check:
- did you clear your cache?
- is the user.css stored in the right directory?
- are there no typo's in the user.css?
- did you revert any changes you tried to make to the template's index.php?
You do not have the required permissions to view the files attached to this post.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 261
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: How to remove protostar's unwanted blue top line

Post by Jaydot » Sun Jul 01, 2018 3:49 pm

You sent me the url to your site by PM, but I will reply on the forum, because that's what the forum is for :).

As you can see in the image (using the browser's Inspector tool on your site), you have somehow overridden the css for the blue line in your index.php...
sulla2018 wrote:I tried to remove the line
"border-top: 3px solid ' . $this->params->get('templateColor') . ';"
from template's index.php, it doesn't help.
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.

Also, your user.css does not show up, so it is probably stored in the wrong directory... It should be stored in ../templates/protostar/css (but your override in index.php will also override the css in your user.css).

ps: in case you don't remember what you changed in index.php, this is what it should look like:

Code: Select all

// Template color
if ($this->params->get('templateColor'))
{
	$this->addStyleDeclaration('
	body.site {
		border-top: 3px solid ' . $this->params->get('templateColor') . ';
		background-color: ' . $this->params->get('templateBackgroundColor') . ';
	}
You do not have the required permissions to view the files attached to this post.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

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

Re: How to remove protostar's unwanted blue top line

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

Jaydot wrote:You sent me the url to your site by PM, but I will reply on the forum, because that's what the forum is for :).

As you can see in the image (using the browser's Inspector tool on your site), you have somehow overridden the css for the blue line in your index.php...
sulla2018 wrote:I tried to remove the line
"border-top: 3px solid ' . $this->params->get('templateColor') . ';"
from template's index.php, it doesn't help.
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.

Also, your user.css does not show up, so it is probably stored in the wrong directory... It should be stored in ../templates/protostar/css (but your override in index.php will also override the css in your user.css).

ps: in case you don't remember what you changed in index.php, this is what it should look like:

Code: Select all

// Template color
if ($this->params->get('templateColor'))
{
	$this->addStyleDeclaration('
	body.site {
		border-top: 3px solid ' . $this->params->get('templateColor') . ';
		background-color: ' . $this->params->get('templateBackgroundColor') . ';
	}

I renamed index.php and transferred original one. still no change.
see attachment, i don't think user.css is in wrong directory.

I am using an extension called breezingform which I setup to bootstrap,
is that possible there are some conflict between protostar template and bootstrap?

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

Re: How to remove protostar's unwanted blue top line

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

user.css directory
You do not have the required permissions to view the files attached to this post.

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

Re: How to remove protostar's unwanted blue top line

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

sulla2018 wrote:... same, still no change
See also my thoughts here: viewtopic.php?f=713&t=963288&p=3530657#p3530657
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 remove protostar's unwanted blue top line

Post by sulla2018 » Mon Jul 02, 2018 6:59 am

finally solved.

see image

I updated index.php. This issue is related to index.php, not template.css, although it's same 'body.site {}'

Thank you.
You do not have the required permissions to view the files attached to this post.

Koos O
Joomla! Apprentice
Joomla! Apprentice
Posts: 49
Joined: Fri Aug 11, 2017 8:40 am

Re: How to remove protostar's unwanted blue top line

Post by Koos O » Sun Aug 05, 2018 8:16 pm

It's easy

goto extensions, templates, styles, protostar and change the background color.

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

Re: How to remove protostar's unwanted blue top line

Post by sozzled » Sun Aug 05, 2018 8:41 pm

Removing the blue line appearing at the top of the Protostar template is easy:

If you haven't already done so, create the file user.css in Protostar's CSS folder and add the following lines of code to it

Code: Select all

body.site {
    border-top-width: 0 !important;
}
Koos O wrote:
Sun Aug 05, 2018 8:16 pm
... go to extensions, templates, styles, protostar and change the background color.
Sorry, mate, but that won't do anything. See the following screenshot and you will observe that the background colour is #f4f6f7 (an off-white colour); we're talking about a blue line.
protostar_style.png
You do not have the required permissions to view the files attached to this post.
Last edited by sozzled on Sun Aug 05, 2018 8:55 pm, edited 1 time in total.
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?

Koos O
Joomla! Apprentice
Joomla! Apprentice
Posts: 49
Joined: Fri Aug 11, 2017 8:40 am

Re: How to remove protostar's unwanted blue top line

Post by Koos O » Sun Aug 05, 2018 8:51 pm

Oké. Then I had the wrong impression. Excuse me.


Post Reply

Return to “Templates for Joomla! 3.x”