The Joomla! Forum ™

Download

Demo


Board index » Joomla! Older Version Support » Joomla! 1.5 » Templates for Joomla! 1.5 » Template overrides for Joomla! 1.5

Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.



Post new topic Reply to topic  Page 1 of 1
  [ 27 posts ] 
  Print view Previous topic | Next topic 
Author Message
indevo
PostPosted: Wed Sep 09, 2009 11:48 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Aug 16, 2009 9:22 am
Posts: 40
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
Top
 Profile  
 
pxforti
PostPosted: Wed Sep 09, 2009 3:14 pm 
User avatar
Joomla! Hero
Joomla! Hero

Joined: Wed Apr 04, 2007 8:54 pm
Posts: 2578
Location: Driggs, Idaho
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.

_________________
Joomla Website Design / CS-Cart Website Design
http://writenowdesign.com
Top
 Profile  
 
indevo
PostPosted: Sat Sep 12, 2009 7:30 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Aug 16, 2009 9:22 am
Posts: 40
Thanks for your reply,
Can't I override it in my template?
Top
 Profile  
 
pxforti
PostPosted: Sat Sep 12, 2009 1:27 pm 
User avatar
Joomla! Hero
Joomla! Hero

Joined: Wed Apr 04, 2007 8:54 pm
Posts: 2578
Location: Driggs, Idaho
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
Top
 Profile  
 
indevo
PostPosted: Sun Sep 13, 2009 9:28 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Aug 16, 2009 9:22 am
Posts: 40
Yes!!! Got it.

Thanks a lot Guru!!! :)
Top
 Profile  
 
scaiferw
PostPosted: Thu Sep 17, 2009 12:14 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sun Mar 22, 2009 8:42 pm
Posts: 9
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.
Top
 Profile  
 
wardjame
PostPosted: Sun Feb 21, 2010 3:41 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Dec 10, 2009 6:15 am
Posts: 11
Location: Hamilton, Ontario
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
Top
 Profile  
 
jmoises
PostPosted: Tue Oct 12, 2010 2:50 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Tue Mar 28, 2006 3:05 am
Posts: 128
Location: Tijuana
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.

_________________
Jorge Moises
Grupo123.Net - Creando Ideas
http://www.123Hospedaje.com
Top
 Profile  
 
d3vlabs
PostPosted: Fri Oct 15, 2010 8:15 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Thu Aug 18, 2005 10:41 am
Posts: 426
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..:)
Top
 Profile  
 
Nick Savov
PostPosted: Fri Dec 31, 2010 10:50 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Tue Apr 13, 2010 7:40 pm
Posts: 1027
Location: Iowa
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

_________________
To God through Jesus Christ be the glory forever and ever!
---------------
Online Joomla Training at http://www.ostraining.com/online/
Sell your templates at https://www.templatecapitol.com/
Top
 Profile  
 
ikramniaz
PostPosted: Mon Feb 07, 2011 11:10 pm 
User avatar
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Jan 01, 2011 10:01 pm
Posts: 10
Location: Dubai UAE
in firefox use fire bug to see the div used in that place then open css and place your own values

Image

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.
Top
 Profile  
 
farnsbarns
PostPosted: Tue Aug 02, 2011 2:11 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Oct 06, 2010 2:28 pm
Posts: 7
"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.
Top
 Profile  
 
Nick Savov
PostPosted: Tue Aug 02, 2011 5:31 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Tue Apr 13, 2010 7:40 pm
Posts: 1027
Location: Iowa
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

_________________
To God through Jesus Christ be the glory forever and ever!
---------------
Online Joomla Training at http://www.ostraining.com/online/
Sell your templates at https://www.templatecapitol.com/
Top
 Profile  
 
pontikos
PostPosted: Fri Aug 12, 2011 2:21 pm 
User avatar
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Sat Jan 30, 2010 11:59 pm
Posts: 205
So what is the procedure to have our custom styles for specific modules there untouched by future extensions updates ?

_________________
Make the best out of it...
http://www.news.935radio.gr
Top
 Profile  
 
Nick Savov
PostPosted: Fri Aug 12, 2011 4:21 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Tue Apr 13, 2010 7:40 pm
Posts: 1027
Location: Iowa
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

_________________
To God through Jesus Christ be the glory forever and ever!
---------------
Online Joomla Training at http://www.ostraining.com/online/
Sell your templates at https://www.templatecapitol.com/
Top
 Profile  
 
davidesamulson
PostPosted: Fri Aug 12, 2011 8:41 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Wed Aug 10, 2011 2:17 pm
Posts: 4
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: viewtopic.php?f=8&t=65
Top
 Profile  
 
Nick Savov
PostPosted: Fri Aug 12, 2011 8:53 pm 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Tue Apr 13, 2010 7:40 pm
Posts: 1027
Location: Iowa
Hi David,

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

Kind regards,
Nick

_________________
To God through Jesus Christ be the glory forever and ever!
---------------
Online Joomla Training at http://www.ostraining.com/online/
Sell your templates at https://www.templatecapitol.com/
Top
 Profile  
 
mrsteevj
PostPosted: Wed Sep 28, 2011 2:48 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Mar 22, 2011 11:44 pm
Posts: 6
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
Top
 Profile  
 
Nick Savov
PostPosted: Wed Sep 28, 2011 5:24 am 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Tue Apr 13, 2010 7:40 pm
Posts: 1027
Location: Iowa
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

_________________
To God through Jesus Christ be the glory forever and ever!
---------------
Online Joomla Training at http://www.ostraining.com/online/
Sell your templates at https://www.templatecapitol.com/
Top
 Profile  
 
adineh
PostPosted: Wed Sep 28, 2011 6:16 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Sep 17, 2011 4:05 pm
Posts: 22
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

_________________
http://en.adinehsanat.ir
http://www.tomweb.ir
Top
 Profile  
 
Nick Savov
PostPosted: Thu Sep 29, 2011 5:20 am 
User avatar
Joomla! Ace
Joomla! Ace

Joined: Tue Apr 13, 2010 7:40 pm
Posts: 1027
Location: Iowa
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

_________________
To God through Jesus Christ be the glory forever and ever!
---------------
Online Joomla Training at http://www.ostraining.com/online/
Sell your templates at https://www.templatecapitol.com/
Top
 Profile  
 
corwin120
PostPosted: Thu Dec 01, 2011 8:47 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Sat Apr 26, 2008 11:06 am
Posts: 17
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.
Top
 Profile  
 
ciar4n
PostPosted: Sat Dec 03, 2011 4:33 pm 
Joomla! Intern
Joomla! Intern

Joined: Tue Jun 03, 2008 6:03 pm
Posts: 64
Location: Strandhill, Ireland
You could also try the specifity rule where something like

Code:
#header .logoheader {}


.. would be overridden by the following..

Code:
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
Top
 Profile  
 
TechGuy1
PostPosted: Mon Dec 19, 2011 1:59 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Jun 04, 2009 2:40 pm
Posts: 44
Location: MASS
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 - http://www.techguywebsolutions.com
Top
 Profile  
 
janaf
PostPosted: Mon Jan 09, 2012 7:25 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Fri Nov 04, 2011 6:30 pm
Posts: 410
Location: Stockholm
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.

_________________
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
Top
 Profile  
 
mycoolreal
PostPosted: Fri Feb 24, 2012 2:44 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Fri Feb 24, 2012 2:38 am
Posts: 1
Location: Tijuana/San Diego
jmoises 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.


agree, working with CSS and components right now
Top
 Profile  
 
irandream
PostPosted: Sun May 06, 2012 7:47 pm 
Joomla! Intern
Joomla! Intern

Joined: Fri Mar 25, 2011 7:06 pm
Posts: 52
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

_________________
http://www.irandream.com
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 27 posts ] 


Board index » Joomla! Older Version Support » Joomla! 1.5 » Templates for Joomla! 1.5 » Template overrides for Joomla! 1.5

Who is online

Users browsing this forum: No registered users and 4 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group