How to load custom css file after template css in joomla

fornandakishore

unread,

Dec 14, 2012, 1:59:21 AM12/14/12

to joomla-de...@googlegroups.com, joomla-...@googlegroups.com

Hello to all,

I am writing a custom component..and I have a component.css file..

I used the below code to load the css file in to my component.

In my component.php file I written like this :
$document = JFactory::getDocument();
$document -> addStyleSheet(JURI::base() . 'components/com_imixtix/assets/css/imixtix.css');

But here my problem is it is loading this file first and not after the template.css file ( at admin and front end sides ). Due to this my css has been overwritten by the template.css

How to load my css file before the template.css, so that my css has not overwritten by template.css at any more. or Is there any other way to take my css as first priority....except keeping !important to each line in my css code.

Thanks & Regards

Nanda Kishore. M

Senior PHP Developer

http://php-desk.blogspot.com

Mobile: + 91 98499 71144

Olivier Nolbert

unread,

Dec 14, 2012, 3:19:15 AM12/14/12

to joomla-de...@googlegroups.com

Hi Nanda,

Let's say you have this in your HTML page :

<body>

<p>Hello</p>

</div>

</body>

In your template css file :

div { font-size: 1em;}

p {line-height: 1.2em;}

.myClass {border:1px solid #ccc;}

In your component css, these lines would have priority :

body div {....}

body p {...}

body .myClass {...}

div.myClass {...}

div p {...}

Olivier

2012/12/14 fornandakishore <fornand...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To post to this group, send an email to joomla-de...@googlegroups.com.
To unsubscribe from this group, send email to joomla-dev-gene...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/joomla-dev-general?hl=en-GB.

--

Olivier Nolbert, Jiliko

14 passage Lecroisey 76600 Le Havre, France

(+33)6 48 09 46 25

SIREN : 517 564 365

www.jiliko.net - Newsletter subscription - Twitter - Google + - Facebook

fornandakishore

unread,

Dec 14, 2012, 3:37:17 AM12/14/12

to joomla-de...@googlegroups.com

Hi Olivier,

Thanks for your reply..but

in template.css I have css like this :

div.current input, div.current textarea, div.current select {

clear: none;

float: left;

margin: 3px 0 0 2px;

}

In my component.css I have written like this :

div.current input, div.current textarea, div.current select {

float: none;

margin: 0;

}

The above css in not at all applied and even it is not showing in firebug also..

Thanks & Regards

Nanda Kishore. M

Senior PHP Developer

http://php-desk.blogspot.com

Mobile: + 91 98499 71144

Olivier Nolbert

unread,

Dec 14, 2012, 3:46:59 AM12/14/12

to joomla-de...@googlegroups.com

You could write this:

body div.current input, body div.current textarea, body div.current select {

float: none;

margin: 0;

}

'body' could be another parent container but you need at least to add a parent container for your css to have priority (or !important but it's not what you want to do)...

2012/12/14 fornandakishore <fornand...@gmail.com>

fornandakishore

unread,

Dec 14, 2012, 5:38:09 AM12/14/12

to joomla-de...@googlegroups.com

Hi,

After using body to all the classes and ids in mycomponent.css then only it is working...thanks..but don't we have any other way to load our css after the template css file ?

Thanks & Regards

Nanda Kishore. M

Senior PHP Developer

http://php-desk.blogspot.com

Mobile: + 91 98499 71144

Olivier Nolbert

unread,

Dec 14, 2012, 5:47:58 AM12/14/12

to joomla-de...@googlegroups.com

What is your template ? Is it based on a specific Framework ?

2012/12/14 fornandakishore <fornand...@gmail.com>

fornandakishore

unread,

Dec 14, 2012, 6:10:45 AM12/14/12

to joomla-de...@googlegroups.com

No no, I am using Joomla 2.5 Default Admin Template....it's in admin area not in front end..

Thanks & Regards

Nanda Kishore. M

Senior PHP Developer

http://php-desk.blogspot.com

Mobile: + 91 98499 71144

Maciej Wołpiuk

unread,

Dec 14, 2012, 2:38:57 AM12/14/12

to joomla-de...@googlegroups.com

Hello

Try this way.

On file view.html.php in views function display after "parent::display($tpl);" add

$document = JFactory::getDocument();
$document -> addStyleSheet(JURI::base() . 'components/com_imixtix/assets/css/imixtix.css');

It should be work like you want.

Mac

Marco Dings

unread,

Dec 14, 2012, 9:14:46 AM12/14/12

to joomla-de...@googlegroups.com

I would say body should be another parent container, more specifically on associated with your component, i.e. a unique one defined by yourself. By being specific potential problems in layout of other parts of the page is averted

On Friday, 14 December 2012 09:46:59 UTC+1, Olivier Nolbert wrote:

You could write this:

body div.current input, body div.current textarea, body div.current select {
float: none;
margin: 0;
}

'body' could be another parent container but you need at least to add a parent container for your css to have priority (or !important but it's not what you want to do)...

....

Filipe Torres

unread,

Mar 8, 2014, 9:05:01 AM3/8/14

to joomla-de...@googlegroups.com

Hi Mac,
unfortunately this method do not work. Any other ideas?
Thanks.

Viper

unread,

Mar 8, 2014, 11:45:31 AM3/8/14

to joomla-de...@googlegroups.com

Of course not working, because component processing before template.

Something like this
JFactory -> JDocument -> render: component, template -> output.

So output of any script/css/etc in component will always be before template output(doesn't matter in which order/place they written in component).

Troy

unread,

Mar 8, 2014, 2:52:42 PM3/8/14

to joomla-de...@googlegroups.com

http://extensions.joomla.org/extensions/style-a-design/templating/21408 will solve the problem.

Bear

--

You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To post to this group, send email to joomla-de...@googlegroups.com.
Visit this group at http://groups.google.com/group/joomla-dev-general.
For more options, visit https://groups.google.com/d/optout.

Troy

unread,

Mar 8, 2014, 2:54:48 PM3/8/14

to joomla-de...@googlegroups.com

A extension that overrides the template is an extremely poorly written extension. overrides followed by template should always be the order

Bear

On 3/8/2014 10:45, Viper wrote:

--

Viper

unread,

Mar 8, 2014, 3:40:36 PM3/8/14

to joomla-de...@googlegroups.com

And yes and no. In some situation component can have own template which is not in the template folder(for overrides). Example. User bought commercial template which doesn't have an overrides for component templates. What the user must to do? He must write own template?

To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-general+unsub...@googlegroups.com.

Troy

unread,

Mar 9, 2014, 3:17:04 PM3/9/14

to joomla-de...@googlegroups.com

no, if the component ( like kunena ) has its own template then it is subservient to the main template and both are subservient to the custom.css
This is the natural order of things.

Bear

To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.

Viper

unread,

Mar 9, 2014, 4:18:29 PM3/9/14

to joomla-de...@googlegroups.com

Yes, but component template stores in the component folder(like an com_content).
Custom.css?? 15 components? each have own css... 15 custom.css?

Message has been deleted

Troy

unread,

Mar 10, 2014, 12:19:49 PM3/10/14

to joomla-de...@googlegroups.com

no no, you would override the component in the template.css so for example if you used my extension listed.. you might have your custom.css file in /templates/mytemplate/custom.css
then your css overrides for the extension would go there.
when I'm designing I will use several .css files ( one per extension ) to help organize my changes. makes it a heck of a lot easier to track. Yes I know its ugly.

Bear

To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.

Viper

unread,

Mar 10, 2014, 12:44:44 PM3/10/14

to joomla-de...@googlegroups.com

Yep, now I understand.

Robert G Mears

unread,

Mar 10, 2014, 3:24:06 PM3/10/14

to joomla-de...@googlegroups.com

in template.css I have css like this :

div.current input, div.current textarea, div.current select {

    clear: none;
    float: left;

    margin: 3px 0 0 2px;

}

In my component.css I have written like this :

div.current input, div.current textarea, div.current select {
float: none;
margin: 0;
}

@Nanda

All you need to do is add a component specific tag to your CSS:

div.current.mycomponent input, div.current.mycomponent textarea, div.current.mycomponent select {

float: none;

margin: 0;

}

Then in your HTML :

<div class="current mycomponent input">

Robert

Seth Warburton

unread,

Mar 11, 2014, 8:16:32 AM3/11/14

to joomla-de...@googlegroups.com, joomla-...@googlegroups.com

That is exactly what should happen. In the event there is conflict then the template should define the styles for the output, not your extension.

If the template is already styling those elements then you don't need any css, just let the template do its thing. Then the user gets the appearance they are expecting (they choose the template remember).

Best,

Seth

Youjoomla.com

unread,

Mar 11, 2014, 8:36:46 AM3/11/14

to joomla-de...@googlegroups.com

Template should control the frontend files order, js or css, not extension , not plugin not joomla core, what ever files you call from template index.php, they should always load last.

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.

To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.

To post to this group, send email to joomla-de...@googlegroups.com.
Visit this group at http://groups.google.com/group/joomla-dev-general.
For more options, visit https://groups.google.com/d/optout.

--

Best Regards
Dan Casky
Youjoomla Customer Service
1670 Southgate Mill DR NW
Duluth ,GA
30096
-------------------------------
www.youjoomla.com
Professional Joomla Web Design Services

Keith Mountifield

unread,

Mar 11, 2014, 9:16:27 AM3/11/14

to joomla-de...@googlegroups.com

Yup, for me it’s one of the most irritating things when developing a template for a client.

Personally I would prefer that components didn’t provide any styling, just raw semantic HTML (or maybe nowadays some Bootstrap classes) and a blank stylesheet that could be either copied and pasted or imported into the template’s CSS. But I’m a control freak… and I understand that some people prefer to start from a component template.

Either way, the final word should always be given to the template, not the component.

Robert G Mears

unread,

Mar 11, 2014, 11:35:05 AM3/11/14

to joomla-de...@googlegroups.com

I think it should be mandatory amongst extension developers that their CSS files can be turned off in Joomla's backend.

Many extensions I use have this option. And when selecting it I then save the corresponding CSS as LESS and add it to the files to be compiled into the template.css file. This allows for easily altering or removing built-in styling (primarily colours and borders, et cetera) instead of having to add more CSS to first unwrite things I don't want in a custom design.

Bakual

unread,

Mar 11, 2014, 11:43:29 AM3/11/14

to joomla-de...@googlegroups.com

You can use the review and vote functions on JED for that. Just mention it in your review and I'm sure the developer will take care.
Of course using their support and contact channels first wouldn't be wrong neither :)

Reply all

Reply to author

Forward