Overriding CSS for modules
By Jaymz Yates on Wednesday, 05 February 2014
Posted in Technical Issues
Replies 8
Likes 0
Views 855
Votes 0
Hello,

For some reason, most of the font families and sizes don't jive with my theme, so I am having to override most of easysocial theme so that they inherit my theme's font classes. I've successfully done this for the component styles but can't seem to make the module overrides work. I've tried saving my style.css sheet in both theme/html/com_easysocial/styles and theme/html/module_easysocial_stream/styles to no avail. PLease let me know the correct way to do this.
Hello Jaymz,

Currently it is not possible to override the css files from the modules but you don't really need to override the css if you want to reset the font size. You should just add the necessary css codes to reset the fonts.
Mark
·
Wednesday, 05 February 2014 10:18
·
0 Likes
·
0 Votes
·
0 Comments
·
Are you saying I should be able to override the font class for the module? For example, to override the "Keep me logged in" font size, I would just need to add something like this to my css override file?

body div.es-mod.mod-es-login label {
font-size: WHATEVERpx;
}

Also, the font in the modules is really small.. im concerned I have something else wrong, I wouldn't think by default it would look this way. can you check and see if everything looks normal?

http://screencast.com/t/SigQ6FSP4
Jaymz Yates
·
Wednesday, 14 May 2014 10:52
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Jaymz,

Yes, that's correct. I believe it's more of a letter spacing issue but I can't really tell unless you could provide us with the link to the site.
Mark
·
Wednesday, 14 May 2014 11:17
·
0 Likes
·
0 Votes
·
0 Comments
·
The link is in the URL section of the reply. http://www.texasoutdoorexchange.com
Jaymz Yates
·
Wednesday, 14 May 2014 12:49
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Jaymz,

You can try adding the css codes into this file, /templates/rt_hexeris/css/rt_hexeris-custom.css
Mark
·
Thursday, 15 May 2014 00:13
·
0 Likes
·
0 Votes
·
0 Comments
·
I'm not sure that is working. I know where the override file is. I have added the following with no change. See http://www.texasoutdoorexchange.com/classifieds

Just odd to me that the module fonts are forced as absolutes and not inherited, however I do see it's that way on the demo. I guess I just need to figure out why he overrides are not working?


/* Activity Stream */
body div.es-mod.mod-es-stream .es-stream-content {
font-size: inherit;
padding: 10px 10px 0;
word-break: break-word;
color: rgba(0,0,0,0.8);
Jaymz Yates
·
Thursday, 15 May 2014 10:55
·
0 Likes
·
0 Votes
·
0 Comments
·
Found the issue... it's a cascading problem. When I add !important declarative to the selector it works. Why is this required?
Jaymz Yates
·
Thursday, 15 May 2014 11:00
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Jaymz,

Glad to hear your issue now resolved. The reason it work when there is !important is because when browser render the css, the css selector that has the !important will always supersede the other css and hence it worked

Hope this help and have a nice day
Sam
·
Thursday, 15 May 2014 14:03
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post