Joomla Administrator Styles

[lcdweb]

Does anyone else find that when browsing within any of the CiviCRM admin pages, the main Joomla Administrator menu styles get messed up? It looks like the CiviCRM styles are removing the left/right borders in the Admin menu. Doesn't impact functionality, but it's a little annoying because the menu jumps around a little on rollover.

[speleo]

This is so small an effect that I never noticed it before but you are correct.

From my investigation using firebug it appears to be that the css for

         <span class="ThemeOfficeMainFolderLeft"/>
          ....
         <span class="ThemeOfficeMainFolderRight"/>

is not being picked up. I suspect that this is because there are two theme.css files being called to render the page

http://www.bec-cave.org.uk/administrator/templates/joomla_admin/css/theme.css
http://www.bec-cave.org.uk/administrator/components/com_civicrm/civicrm/css/skins/aqua/theme.css

I'm not too hot on css inheritance so am ducking out here. Its really very minor but I suppose a fix might help..

[lcdweb]

I took a closer look and couldn't find the problem. This style:
td.ThemeOfficeMainItemHover,td.ThemeOfficeMainItemActive

controls the main menu bar hover state. The styles you listed affect the drop down items. It's only affecting the hover state -- canceling out the border, which causes the menu items to bump slightly as you roll over.

Not a big deal. I'm building a site with CiviCRM to hand over to a client, so I would rather have the admin tool not have any visible bugs. But it doesn't impact functionality so I'll live with it.

-Brian

[mcsmom]

Yeah, it's odd--the menus switch from flush left to flush right.

[lcdweb]

The following css changes should be made to fix CiviCRM issues in Joomla 1.5 (haven't checked if they fix on 1.0.13):

In administrator\components\com_civicrm\civicrm\css\joomla.css

• remove/comment out line 246 (font-family in body tag -- not necessary and throws everything off)
• change line 329 padding to 0 for top (0 0.5em 0 0.5em)
• remove/comment out line 330 (text-align: right;)

Brian

[Dave Greenberg]

Brian - Thx for working through this to find "the fix". I'm happy to implement them for 1.9 - BUT it would be great if we could get confirmation that these changes don't cause problems in 1.0.13. Also wondering if you've tried it out on multiple browsers (at least FF and IE).

[lcdweb]

There are a few more edits that need to be made to the joomla.css file:

• 329: padding: 0; (this was noted earlier; but the left/right padding should also be zeroed)
• 242: delete/comment out
• 22: delete/comment out

Add the following to the end of joomla.css

Code: [Select]

#module-status, .version {
font-size:11px;
}
#module-status a {
font-weight: normal;
}
.main {
text-align:left;
}
I tested this on both Firefox and IE7, with Joomla 1.5 and 1.0.13, and think this fixes the more prominent issues, though I suspect there are more things to be tweaked. It addresses the Joomla menu, which was annoyingly thrown off when on the CiviCRM pages, both in 1.5 and 1.0.13. It would be good if someone else using Joomla made the changes in the joomla.css file to confirm that it fixes things with no problem.

Also note that the changes bring the CiviCRM pages in line with the default administrator templates. They may not fix everything if people have installed custom administrator templates.

-Brian

[speleo]

Brian, I've made the changes as you listed below. Wanted to make sure I zapped the right lines (when you delete one it renumbers the rest ). So i did this:

Line 22 remove           border-collapse: collapse;
Line 242 remove         margin: 0;
Line 246 remove         font: 76% Verdana, Arial, Helvetica, sans-serif;
Line 329 replace with  padding: 0 0 0 0;
Line 330 remove         text-align: right;

and add this at the end:

Code: [Select]

#module-status, .version {
font-size:11px;
}
#module-status a {
font-weight: normal;
}
.main {
text-align:left;
}

Sorry for repeating your post but want to make sure. I've uploaded my modified joomla.css too.

My initial view is that this fixes the jumping menu issue (many thanks) and I'll keep an eye out to see if anything else looks odd.

Nice one!

[lcdweb]

Thanks for summarizing. One minor edit --
For the line 246 edit, just remove the font-family style, not the 76% font-size. I had separated those onto different lines, and forgot they were originally written in shorthand.

It won't hurt to remove the font-size style too. But it removing it actually makes the base font size throughout smaller.

Thanks!
Brian

[speleo]

Have updated the attached joomla.css to reflect this. Line 245 now reads   

        font: 76%;

[Dave Greenberg]

Brian / Henry - Thx for getting this resolved. I've created an issue for this (fix for 1.9) at:
http://issues.civicrm.org/jira/browse/CRM-2325

... and committed the version attached by Henry in his last post w/ one more change. I removed these lines entirely as they are an empty directive:

Code: [Select]

// lines 21-23
table {

}