protostar inline css [solved]

[Koos O]

I notice that in protostar index.php an inline css is created that alters user css code at some point.

For instance: if you want to change the colour of a link I used to fo that with custom css
/* linken paars maken*/
a {
color:#732645;
}

Now I the custom css plugin is no longer there so I use user css and find that the index.php overrules the user css.

That seems to me a bug in the system. Why should index.php overrule things?

I solved the issue true deleting in index.php this line whre links are set to the template color.
a {
color: ' . $this->params->get('templateColor') . ';
}

But that's not a great way to act because with every new update I have to do it again. Is there a better way to change the color of the links?
If I use !important; in the user css it overrules the index.php but that is also no good solution (it works to good).
Or is this a bug in the system. The index.php should not create inline css?

[Webdongle]

The css in the template's index.php is read after any css files ... therefore it overrides previous css.

The code that you deleted is there to display the value given by the settings in Joomla's admin. Best not edit it.

If you need to edit the file then make a copy and edit the copy. Otherwise you will loose your changes.

[sozzled]

Thank you for your question. I would like to make two points:

1) Never, under any circumstances (except where you will never update the software that you use on your website and you are prepared to run the risk that your site will be hacked), change original software. This includes making changes to Protostar's index.php or template.css files.

I realise, of course, that a lot of people ignore this advice. That's OK. If people want to change original software in order to make something work then I say good luck to them. You can do whatever you want to do but, before people go wild and do whatever they want to do, they need to be reminded that there are consequences.

People can minimise these consequences by creating CSS files to store their unique, personalised customisations or create template overrides that will fix the "issues". I also realise that everyone has different abilities and expertise in handling how to write CSS or create template overrides. The point that I want to make here is that the solution that one person finds to solve their problem may not suit everyone and may, in fact, cause other problems for others.

2) While it may not be good "programming practice" to use the !important CSS rule modifier, there's no commandment that outlaws the use of !important. This doesn't mean that people should use !important whenever they want to (or because they're too lazy); I would suggest that people should first try to change the behaviour of an element on a page without using the modifier. If the behaviour changes only with the !important then you've found a solution.

Another solution is to use a different template.

I don't think there is a "bug" in Protostar. I agree that you've discovered one of several limitations within Protostar but it's not a limitation that can't be easily overcome.

[Per Yngve Berg]

Another solution is to use a more specific selector in your css.

Code: Select all

div a.myclass {
color:#732645;
}

Adding the a as a child of a div or with a class will override just a "a".

[Koos O]

You are absolutely right Sozzled! That's why I post my question.

Thank you Per Yngve, your solution works but I have to adjust more then 300 articles :-(

I found another solution that works fine for me. In the user.css I added the following lines. They do the job and in occasions that an incidental link needs another color I can chance it with html style colour (and that could not be done if I used !important in the css.

/* link color purple-red*/
a:link {
color: #732645;
}
a:hover {
text-decoration: underline;
color:#732645;
}
a:visited {
color:#732645;
}

Thank you all for responding