How to override css for a component?

[indevo]

Hi Everybody,

I am developing a new template, and wanted to override the default styles (CSS) for eventlist component making any change in com_eventlist folder.

Recently, i was using eventlist 1.0 and made necessarry changes to eventlist component css. But when i upgraded eventlist 1.0 to eventlist 1.1 , it replaced the css with the default one.
I know that my approach was not right, then after reading a lot i came to know that i can override everything in template. But here the first thing i want to override is only the css for my components.

Please suggest/help as how can i override styles for a component from within template?
Please... Please.... H.E.L.P!!!!!!!!

Thanks in advance

[pxforti]

each component can have it's own css. And sometimes, components also come with modules and these might have their own css.

to change the css, look in the component's directory for the css file. that's all it takes.

[indevo]

Thanks for your reply,
Can't I override it in my template?

[pxforti]

Probably the easiest way to determine the css is to your firefox with the Firebug plugin. Firebug allows you to view a web page and see the html code plus the css rules that are applied to it. But you can also look at the source code of the html page and determine the css by find the divs and other elements generated by the component. Once you do that, you can search your css for those divs and find the rules that control the appearance.

[indevo]

Yes!!! Got it.

Thanks a lot Guru!!!

[scaiferw]

I've covered this by adding a reference to my own css file, overrides.css, in the index.php after all other css links. I then place css in that.

This is only partially successful, as it will only override what's already loaded, but I think it's worthwhile as it's 'minimally invasive' - and easiest to restore if the templage is updated.

YMMV.

[wardjame]

I think the original poster brings up an important issue, any changes to css files outside of your template directory have the potential to be changed by component updates or system upgrades and it is very bad form to make changes directly to those files. My solution has been to copy the sections I wish to modify out of the component or module css file to the bottom of my main template.css file and make the changes there. This will work so long as the template css file is always loaded after the component or module css file which SEEMS to always be the case.

I have been unable to find a page documenting this but it is likely something worth some attention from the Joomla! team. If there is a recommended procedure it should likely be part of the documentation at:
http://docs.joomla.org/Understanding_Output_Overrides

[jmoises]

i agree complete with wardjame, CSS have to be override too like the views, some time the CSS tags of components are name it the same as the css from the template so we need to override only for a specific template not to all the site, and not make chages to the original component.

[d3vlabs]

is there a better solution?

let's say I styled my k2 installation at 1.0 and recently upgraded to latest (2.4.1). since I modified the k2 css files directly i will lose whatever changes get override by updated css files. so yea thats that, how do I not lose my styling in the future? scripts get updated constantly...

P.S. would be awesome if css overrides could work like template overrides..

[Nick Savov]

Hi everyone,

Different browsers interpret CSS differently, however the general rule of thumb is that whichever is loaded first is the default that the browser uses. So if you want to override any of the CSS you can use !important; at the end of your rule and the browser will use that rule.

Kind regards,
Nick

[ikramniaz]

in firefox use fire bug to see the div used in that place then open css and place your own values



This is very easy method but From Administrator Passing Values to change the color and other param is difficult for this you need to 1st open the XML file create the fields and the in helper.php you need to write the function according to need.

[farnsbarns]

"the general rule of thumb is that whichever is loaded first is the default that the browser uses"

FAIL!

Ignore this. The whole point of CSS is that it is a CASCADING style sheet. This means that which ever rule is found LAST is applied. Completely the opposite of what this chump says. People answering question with no knowledge at all of the subject really wind me up.

[Nick Savov]

Yes, sorry, that was a mistake and it should be the other way around. I'm glad you caught that! Good job!

Kind regards,
Nick

[pontikos]

So what is the procedure to have our custom styles for specific modules there untouched by future extensions updates ?

[Nick Savov]

Hi pontikos,

Give this tutorial a try:
http://docs.joomla.org/Using_Class_Suffixes

Specifically, the module class suffix of the tutorial is what you want (but reading the rest should be helpful to get a context):
http://docs.joomla.org/Using_Class_Suff ... ass_Suffix

Kind regards,
Nick

[davidesamulson]

I am not an Expert But i think If you want to override css just take a deep look on the component directory definitely you will find some help.

[Nick Savov]

Hi David,

Do you mean the JED (Joomla Extension Directory)? http://extensions.joomla.org/

Kind regards,
Nick

[mrsteevj]

Okay I know how to reference the correct elements\tags via css
but I would like to put all Custom edits in a Custom.css sheet.

Yootheme does it this way.

How to I integrate a custom css into an joomla website
so that it has priority ?

Any help or suggestion would be appreciated,
thanks in advance.

Regards
Steev

[Nick Savov]

Hi Steev,

Just insert it into your template's index.php

Open up the index.php and around the top you'll see where the css files are called. Just copy that and change the respective file name.

Kind regards,
Nick

[adineh]

i have a problem with css that work in firefox but in IE its dont work corecctly
do you know any tools for coverting css that work in firefox to IE

[Nick Savov]

Hi Adineh,

You should probably start a new topic as you'll be a lot more likely to get an answer than posting at the end of a different topic.

Kind regards,
Nick

[corwin120]

It's a fare expectation to be able to override component's css file in the same way as a component's views. Unfortunately after looking at the Joomla's 1.5 code, it does not look possible.

So the two options mentioned earlier are probably the best ones:
1. modify css file of the component and risk loosing those changes when the component is updated or
2. use template's css to override styling in the component's css. The template's styling can be forced using !important attribute. Just be careful that !important is not used in the component's css or any other css file already for the same style.

[ciar4n]

You could also try the specifity rule where something like

Code: Select all

#header .logoheader {}

.. would be overridden by the following..

Code: Select all

html body div#all div#back div#header div.logoheader {}

This along with @Nicks suggestion of using !important should give you all the control you could need.

Example taken from beez20

[TechGuy1]

Yes, I usually create the css overrides in template.css, but usually have to use the "!important" tag. but still need to edit the components css if the original style also uses an "!important" tag. It would be great if css overrides worked like the tpl overrides

[janaf]

With the default Bezz2 template, it seems "personal.css" is loaded last. I always edit that one and it only fails if there has been an "!important" used earlier. It also means that all changes are in a single file. Nice i view of future updates...

Personally I am not fond of "!important" as it breaks the cascading idea, and can become a mess for the future, if used much. Better to find which css file is loaded last.

EDIT: Now I see this is 1.5 and I am using 1.7. Don't know 1.5 where filenames may be different, but css rules are of course the same.

[mycoolreal]

i agree complete with wardjame, CSS have to be override too like the views, some time the CSS tags of components are name it the same as the css from the template so we need to override only for a specific template not to all the site, and not make chages to the original component.

agree, working with CSS and components right now

[irandream]

there are two kinds of overrides:
1. modify Component css file Directly :
* Open The Page With FireFox Fireburg ( an open source web development tool extension for the Mozilla)
* find Component Css File and modify css file
* (in IE you can Use IE Developer Tools )

2.Override Component css in your template:
* create a Custom.css file in templates/[template_name]/css/
* Open up the Templates\[template_name]\index.php File and call your Custom.css file
* Note :in Some Templates You must call your css in templates\[template_name]\Component.php