How to override css for a component?
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
-
- Joomla! Apprentice
- Posts: 40
- Joined: Sun Aug 16, 2009 9:22 am
How to override css for a component?
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
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
- Joomla! Hero
- Posts: 2755
- Joined: Wed Apr 04, 2007 8:54 pm
- Location: Driggs, Idaho
Re: How to override css for a component?
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.
to change the css, look in the component's directory for the css file. that's all it takes.
Joomla Website Design / CS-Cart Website Design
http://writenowdesign.com
http://writenowdesign.com
-
- Joomla! Apprentice
- Posts: 40
- Joined: Sun Aug 16, 2009 9:22 am
Re: How to override css for a component?
Thanks for your reply,
Can't I override it in my template?
Can't I override it in my template?
- pxforti
- Joomla! Hero
- Posts: 2755
- Joined: Wed Apr 04, 2007 8:54 pm
- Location: Driggs, Idaho
Re: How to override css for a component?
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.
Joomla Website Design / CS-Cart Website Design
http://writenowdesign.com
http://writenowdesign.com
-
- Joomla! Apprentice
- Posts: 40
- Joined: Sun Aug 16, 2009 9:22 am
Re: How to override css for a component?
Yes!!! Got it.
Thanks a lot Guru!!!
Thanks a lot Guru!!!
-
- Joomla! Apprentice
- Posts: 9
- Joined: Sun Mar 22, 2009 8:42 pm
Re: How to override css for a component?
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.
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.
-
- Joomla! Apprentice
- Posts: 11
- Joined: Thu Dec 10, 2009 6:15 am
- Location: Hamilton, Ontario
- Contact:
Re: How to override css for a component?
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
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
- Joomla! Enthusiast
- Posts: 132
- Joined: Tue Mar 28, 2006 3:05 am
- Location: Tijuana
- Contact:
Re: How to override css for a component?
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.
-
- Joomla! Explorer
- Posts: 426
- Joined: Thu Aug 18, 2005 10:41 am
- Contact:
Re: How to override css for a component?
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..
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
- Joomla! Ace
- Posts: 1076
- Joined: Tue Apr 13, 2010 7:40 pm
Re: How to override css for a component?
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
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
Joomla Templates created by the Wright Framework.
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
- ikramniaz
- Joomla! Apprentice
- Posts: 10
- Joined: Sat Jan 01, 2011 10:01 pm
- Location: Dubai UAE
- Contact:
Re: How to override css for a component?
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.
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.
-
- Joomla! Apprentice
- Posts: 7
- Joined: Wed Oct 06, 2010 2:28 pm
Re: How to override css for a component?
"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.
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
- Joomla! Ace
- Posts: 1076
- Joined: Tue Apr 13, 2010 7:40 pm
Re: How to override css for a component?
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
Kind regards,
Nick
Joomla Templates created by the Wright Framework.
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
- pontikos
- Joomla! Enthusiast
- Posts: 214
- Joined: Sat Jan 30, 2010 11:59 pm
Re: How to override css for a component?
So what is the procedure to have our custom styles for specific modules there untouched by future extensions updates ?
- Nick Savov
- Joomla! Ace
- Posts: 1076
- Joined: Tue Apr 13, 2010 7:40 pm
Re: How to override css for a component?
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
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
Joomla Templates created by the Wright Framework.
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
-
- Joomla! Fledgling
- Posts: 4
- Joined: Wed Aug 10, 2011 2:17 pm
Re: How to override css for a component?
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.
Please read forum rules regarding the use of signatures: http://forum.joomla.org/viewtopic.php?f=8&t=65
- Nick Savov
- Joomla! Ace
- Posts: 1076
- Joined: Tue Apr 13, 2010 7:40 pm
Re: How to override css for a component?
Hi David,
Do you mean the JED (Joomla Extension Directory)? http://extensions.joomla.org/
Kind regards,
Nick
Do you mean the JED (Joomla Extension Directory)? http://extensions.joomla.org/
Kind regards,
Nick
Joomla Templates created by the Wright Framework.
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
-
- Joomla! Apprentice
- Posts: 7
- Joined: Tue Mar 22, 2011 11:44 pm
Re: How to override css for a component?
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
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
- Joomla! Ace
- Posts: 1076
- Joined: Tue Apr 13, 2010 7:40 pm
Re: How to override css for a component?
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
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
Joomla Templates created by the Wright Framework.
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
-
- I've been banned!
- Posts: 21
- Joined: Sat Sep 17, 2011 4:05 pm
Re: How to override css for a component?
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
do you know any tools for coverting css that work in firefox to IE
- Nick Savov
- Joomla! Ace
- Posts: 1076
- Joined: Tue Apr 13, 2010 7:40 pm
Re: How to override css for a component?
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
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
Joomla Templates created by the Wright Framework.
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
"God is most glorified in us, when we are most satisfied in Him" - http://www.desiringgod.org/
-
- Joomla! Apprentice
- Posts: 17
- Joined: Sat Apr 26, 2008 11:06 am
Re: How to override css for a component?
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.
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.
-
- Joomla! Intern
- Posts: 67
- Joined: Tue Jun 03, 2008 6:03 pm
- Location: Strandhill, Ireland
Re: How to override css for a component?
You could also try the specifity rule where something like
.. would be overridden by the following..
This along with @Nicks suggestion of using !important should give you all the control you could need.
Example taken from beez20
Code: Select all
#header .logoheader {}
Code: Select all
html body div#all div#back div#header div.logoheader {}
Example taken from beez20
-
- Joomla! Intern
- Posts: 59
- Joined: Thu Jun 04, 2009 2:40 pm
- Location: MASS
- Contact:
Re: How to override css for a component?
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
Joomla Web Design & Development - http://www.techguywebsolutions.com
Quality Joomla Extensions - http://joomdigi.com
Quality Joomla Extensions - http://joomdigi.com
-
- Joomla! Explorer
- Posts: 411
- Joined: Fri Nov 04, 2011 6:30 pm
- Location: Stockholm
- Contact:
Re: How to override css for a component?
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.
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.
You want replies? Search the forum. Most questions have been anserd many times. If not; what have you done, what do you want to do, what have you tried? Be clear and explicit!
----
ToolGeeks, handicrafts and tools community: http://www.toolgeeks.net
----
ToolGeeks, handicrafts and tools community: http://www.toolgeeks.net
-
- Joomla! Fledgling
- Posts: 1
- Joined: Fri Feb 24, 2012 2:38 am
- Location: Tijuana/San Diego
- Contact:
Re: How to override css for a component?
agree, working with CSS and components right nowjmoises wrote: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.
-
- Joomla! Intern
- Posts: 52
- Joined: Fri Mar 25, 2011 7:06 pm
- Contact:
Re: How to override css for a component?
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
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