I have a new installation of Joomla 3.2, JomSocial with the Socialize template. I created an override folder for JomSocial per the directions on your site, however Firebug shows that the overrides are being overwritten by the original file (style.css). When I switch to the Protostar template, everything works as it should. What am I doing wrong?

Thanks,
Devin

Hi, Devin Pixel.

Could you update information about your domain and link to administration panel?
thekarmasociety.com and dev.thekarmasociety.com/administrator seems not working any more.

Sorry about that Michal, I installed the site on another dev server but there was a typo in the DNS records. It works now, but the error still persists, even with a brand new install.

Thanks,

Devin.

Hi, Devin Pixel.

Ok, so let's do it in other way. It's great that you're using Socialize. We can use its customization feature :)
I checked it via FTP. In your Socialize there was no custom.css. So I added it (look for it in templates/socialize/css).
It's visible now: <link rel="stylesheet" href="/templates/socialize/css/custom.css" type="text/css" />
Now you can place your custom code to that file.
Just like I did to turn logo/slogan into red :)

.logo-text h1 a {
	color: red;	
	font-family: ‘Courier New’, Courier, monospace !important;
	}

The custom.css changes the Socialize template just fine, but the JomSocial styles added in custom.css are still being overwritten by style.css in the com_community folder.

Hi, Devin Pixel.

Ok, so this is css styling issue rather than JomSocial itself.
Try to use "!important" or create a string of classes like ".main_class #community-wrap .cAlert".
I added "background-color: #D8A9E4 !important;" does it do the thing?

Yes, !important does it, but I plan on making significant changes and thought there must be a more elegant solution. I've never experienced this with template overrides before (T3, Gantry, etc.) and it works fine when I switch it over to Protostar or Beez3. I'm starting to feel that my $99 could have been better spent on something else.

Thanks,
Devin

I figured it out... it's the top-header toolbar that's causing the weird overrides. When I unpublish it, the JomSocial custom.css changes work. I'll just keep it off while I'm designing it, which is a reasonable workaround, though I hope that it gets sorted out in time for the next planned release date.

Hi, Devin Pixel.

Please be aware that this is not an issue related to JomSocial or Socialize template. This is just how css works.
Use "!important" or wrap divs in new div with your own classes. Then use strings of class names to set their new values.

When I disable the new Socialize community toolbar module, all of the overrides work just fine! It *is* the toolbar, not a normal css issue. You have my credentials, so please feel free to verify my claims for yourself.

Frustrated,

Devin

Hi, Devin Pixel.

I think it's solved now :)

You forgot to delete or disable: /templates/socialize/html/com_community/css/style.css
I just added -old to name folder and now even if toolbar is enabled you can modify custom.css without !important.

Please confirm.

That was it, Michal! It makes perfect sense to me now. The @import rule in html/com_community/style.css caused the site to go bonkers. Removing that file makes the overrides in custom.css works like a charm. Incidentally, .php overrides work fine in html/com_community too.

Thank you for your time and patience.

- Devin