Hi Mist,

For EasySocial 1.2, simply create a style.css file at JOOMLA/templates/_template_/html/com_easysocial/styles/style.css with the following content to get started:

@import "../../../../../components/com_easysocial/themes/wireframe/styles/style.css";

@import "../../../../../components/com_easysocial/themes/wireframe/styles/more.css";



/* Add customization here */

body div#fd.es.es-main {

    background: yellow;

}

Thanks for replying Jensen. So, let me better understand this.

In EasySocial 1.2 if there is a file style.css in the template override, this will basically override everything. Script will basically "cancel" any other styles and will load only this one file located in the override, right ?

Yes. :-)

(Internally there are 3 modes of stylesheet (CSS/LESS/ATS) you can work with for your template override "styles" folder but they are still being tested before we lay out the documentation for it. Well there are more explanation on my reply on your other post.)

This is a cool new approach.
How do you recommend i should get started on this new approach ?

On my joomla template, i already use bootstrap 3, i already have the styling needed for the entire bootstrap 3 interface elements.

Should i go with a full template override (style.css) and include into this only the css for the "sections" i use ?
I don't use all EasySocial stuff, but few things like:

1. profiles and everything related to it (including small profile popbox),
2. notifications and conversations
3. account setup page and notifications setup page
4. Login Page and Registration page (including lost username and lost password pages)
5. Email Notifications.

That's pretty much everything i use from EasySocial in my project.
Your new approach is logical and really cool if i can use a general override style.css file and include into this file only the stuff i need ("sections" i need) and modify those so i don't get conflicts with my current bootstrap 3 template.

This way i think i can minimize also the css files and code down to the bare minimum i need so i don't have to load all the easysocial stuff i don't use.

What's your advice ?

Hello Mist,

It's really entirely up to you BUT if you do plan / are ambitious to "re-interface" entire EasySocial, then go ahead by all means start a fresh new css file. Otherwise, try to keep your css changes within your template's css file. It's much easier for you to manage in the future too as you know that there's only a single place that keeps all of your customizations.

When building sites or even on our very own http://stackideas.com site we try to keep everything in a central location (css that is), so that in the future, or maybe a year down the road later we know where we kept things and can quickly work around it.

So, if my template's index.php file will call a custom file located somewhere in the template folder, let's name this file "custom.css".
EasySocial will pick-ul first the styling inserted here, in the custom.css file, right ?

Also, how to proceed in order to remove (not customize but remove totally) some EasySocial styles declarations ? Some of them are conflicting with ones from my template bootstrap.

Hello Mist,

If it's just minor changes, you don't have to remove you just add your own css blocks to overrule it Either via an !important tag or through a more specific css selector.

Hi Jensen,

Thank you for the good example. Just want to add that I also had to include base.css to make it work.

BTW, when I created style.css, Joomla assumed that base.css and more.css were also in the same directory and included links to them into the HTML file. It's a shame to waste HTTP requests on non-existing files. I can create all 3 files (or symlinks) which it expects, but is it the best solution?

Regards,
Vlad

Hello Vladimir,

If you have a style.css already in your override folder, it would only load the style.css file.

Hi Mark,

It loads style.css all right, no problems here, but it also tries to load two more files. It doesn't affect functionality, but it may impact performance. Anyway, it's not high priority for me, at least now

Hello Vladimir,

Hm, it will only load other css files if you add those @import tags in your css file. Anyway it's actually fine to break down the css files because in IE, there's a limit on how many css selectors can exist in a single file