1

I'm struggling with a property that is defined in 3 stylesheets:

  1. Joomla.css
  2. My Site's Template.css
  3. Content extension using K2.css

The problem is that I need to align a toolbar to the right. The property text-align is correctly defined in the K2.css but is ignored and rather the one in the joomla.css is loaded.

I attached a screen shot that shows the issue.

Any idea what am i doing wrong and how could I override this property just for one container?

Thanks in advance.

Eyal

enter image description here

ktharsis
  • 3,160
  • 1
  • 19
  • 30
Eyal Kattan
  • 31
  • 1
  • 3

4 Answers4

2

For such special cases I used to define an style with !important and use it where ever I have to override.

CSS 

.text-align_right {
    text-align: right !important;
}

HTML

   <div class="itemToolbar text-align_right"> 
    ..
Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134
  • pretty cool. Actually all i did was to add the !important next to the property that I want to use and it worked. Thanks very much for your help! – Eyal Kattan Mar 01 '12 at 01:40
2

Also, if you view the source of the page, you'll see the order in which the style sheets get added. Evidently joomla.css is further down the source than k2.css

If there are a large number of these cases, you might like to edit your template html and put joomla.css right at the start of the head section. If that is added dynamically, though, look at the nonumber extension 'Rereplacer' which should be able to switch the order around with a bit of work.

Nathan Keen
  • 45
  • 6
1

Add your css rule to the bottom of K2.css

okcoker
  • 1,329
  • 9
  • 16
0

When you create the menu in your module manager, assign it a class. Then you can set the style for that class in your template.css file.

Best,

Cynthia

Cynthia
  • 5,273
  • 13
  • 42
  • 71