Joomla Templates Club 406,261 posts

[adamlopuch Friend adamlopuchJoin date: April 2011Posts: 30Downloads:0Uploads:14 Thanks: 10 Thanked: 5 times in 1 posts]

#173437

Hi — I am trying to override the CSS in JA_Nex using a custom theme, however the theme CSS is not overriding the template CSS. Does anyone have any tips?

Setup:
* Created a custom theme (“EXAMPLE_THEME”)
* Applied custom theme to JA_Nex template (all pages)
* JA template Enable Development Mode = Yes
* JA template Optimize CSS = Join & Minify

K2 styling:
* Default (JA_Nex) location: …/ja_nex/css/k2.css
* Custom (theme) location: …/ja_nex/themes/EXAMPLE_THEME/css/k2.css

Issue:
* When I add styling to the Custom k2.css, it does not override styling in the Default k2.css (the default k2.css is used)

Example:

In Default k2.css:

div.catItemBlogView div.catItemImageBlock { margin: 0 0 20px; }

In Custom k2.css, I add one line:

div.catItemBlogView div.catItemImageBlock { margin: 13px; }

Expected outcome is that the Custom k2.css will be used (margin = 13 on all sides).

Observed outcome is that the Default k2.css is used (margin = 20 on bottom only). Firebug shows that the Custom K2.css is acknowledged, but it is overridden by the Default k2.css (see image for Firebug screenshot)

Any thoughts? I’d like to be able to add my styling to the Custom k2.css rather than modify the template’s Default k2.css.

---

Attachments:

1. 

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#436665

You can use !important in your custom k2.css like this:

div.catItemBlogView div.catItemImageBlock { margin: 13px !important; }
Could you give me a link to your page has problem? And you need to turn css optimization off, I will check it.

1 user says Thank You to khoand for this useful post

1. adamlopuch

[adamlopuch Friend adamlopuchJoin date: April 2011Posts: 30Downloads:0Uploads:14 Thanks: 10 Thanked: 5 times in 1 posts]

#436688

Hi khoand — thanks so much for pointing me toward the !important flag. (Obviously I am very much a beginner in CSS… many thanks for donating you time and expertise!)

I was able to resolve this issue by applying the !important flag to the specific CSS properties that had issues overwriting the template. I’ll close this thread because the !important flag solves my issue.

I also understand that the !important flag can cause many, many problems with layered CSS, so I am only using this where needed.

[Author]

Posts