Joomla Templates Club 406,261 posts

[roninhockley Friend roninhockleyJoin date: February 2011Posts: 18Downloads:0Uploads:1 Thanks: 7]

#160147

What is JA’s solution or method for making simple changes to template.css or another core css file? I dont see an override.css file or similar.

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#376505

What are you trying to modify? All the css is in the templates css folder but when you view it as default you will see the compressed version unless you first disable css compression in the template maager.

1 user says Thank You to Phill for this useful post

1. roninhockley

[roninhockley Friend roninhockleyJoin date: February 2011Posts: 18Downloads:0Uploads:1 Thanks: 7]

#376514

No problem modifying anything its just that I hop around several CSS files making these little changes, and it gets impossible keeping up with all the changes. I would much rather have an override file that is at the bottom of the cascade so that I can keep all my changes in order.

Is this a good method or am I missing something? As far as my understanding of CSS goes, the last file read will always override any previous files, stopping only at inline styles themselves.

Your reply is well appreciated and says a lot about JA, which I already consider to be by far the most thorough club out there.

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#376516

I agree that it would be nice to have an extra file loaded last for all your css changes but that can in itself cause problems including extra css being loaded. There are unfortunately instances of !important used in some css which could not be overridden easilly.

In my opinion the best way is to keep the css as light as possible only adding new css when explicitly required. As long as you keep good notes on what you change (I too am guilty of not doing that so often have to resort to winmerge to compare my changes) then it should not be a problem.

[willson Friend willsonJoin date: September 2010Posts: 7Downloads:0Uploads:0 Thanked: 3 times in 1 posts]

#376941

I can add a css file using the info.xml file in the /templates/ja_cloris/ folder

<stylesheets>
<file>css/typo.css</file>
<file>css/custom.css</file>
</stylesheets>

and putting the file custom.css in /templates/css/

But this puts the custom.css into the middle of the list of stylesheets and it gets over-ridden by themes (the same goes for this code example from ja_portfolio). You will also notice that the custom.css is even ahead of layout.css !

... snip ...
<link rel="stylesheet" href="/plugins/system/jat3/base-themes/default/css/menu/mega.css" type="text/css" />
<link rel="stylesheet" href="/templates/ja_portfolio/css/typo.css" type="text/css" />
<link rel="stylesheet" href="/templates/ja_portfolio/css/custom.css" type="text/css" />
<link rel="stylesheet" href="/templates/ja_portfolio/css/layout.css" type="text/css" />
<link rel="stylesheet" href="/templates/ja_portfolio/css/template.css" type="text/css" />
<link rel="stylesheet" href="/templates/ja_portfolio/css/css3.css" type="text/css" />
<link rel="stylesheet" href="/templates/ja_portfolio/css/menu/mega.css" type="text/css" />
<link rel="stylesheet" href="/templates/ja_portfolio/css/k2.css" type="text/css" />
<link rel="stylesheet" href="/templates/ja_portfolio/css/mod_jaslideshow2.css" type="text/css" />
<link rel="stylesheet" href="/templates/ja_portfolio/core/themes/red-color/css/color.css" type="text/css" />
... snip ...

There needs to be a way to override css at the color/theme level.

[manuel2011 Friend manuel2011Join date: March 2011Posts: 3Downloads:4Uploads:0 Thanks: 2]

#384923

Has anyone a solution?

[willson Friend willsonJoin date: September 2010Posts: 7Downloads:0Uploads:0 Thanked: 3 times in 1 posts]

#384926

What I did was figure out how to do custom profiles & sub-theming correctly. At the botom of the following snippit you’ll see lines that read “/ja_portfolio/local/themes/custom-red/” where my “custom-red” theme overrides the regular Portfolio theme and has its own css files.
It amounted to putting a duplicate of the portfolio theme in the /local/ subfolder under wher the themes are and then change the XML files’ content.

Look in the area of http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides#Profiles

<link rel=”stylesheet” href=”http://example.com//plugins/system/jatypo/typo/typo.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/system/css/system.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/system/css/general.css” type=”text/css” />
<link rel=”stylesheet” href=”/media/system/css/modal.css” type=”text/css” />
…snip…
<link rel=”stylesheet” href=”/plugins/system/jat3/base-themes/default/css/addons.css” type=”text/css” />
<link rel=”stylesheet” href=”/plugins/system/jat3/base-themes/default/css/layout.css” type=”text/css” />
…snip…
<link rel=”stylesheet” href=”/plugins/system/jat3/base-themes/default/css/menu/mega.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_portfolio/css/typo.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_portfolio/css/custom.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_portfolio/css/layout.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_portfolio/css/template.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_portfolio/css/css3.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_portfolio/css/menu/mega.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_portfolio/css/k2.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_portfolio/css/mod_jaslideshow2.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_portfolio/local/themes/custom-red/css/custom.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_portfolio/local/themes/custom-red/css/color.css” type=”text/css” />
<link rel=”stylesheet” href=”/templates/ja_portfolio/local/themes/custom-red/css/menu/mega.css” type=”text/css” />

1 user says Thank You to willson for this useful post

1. Phill

[Author]

Posts