Hello Mist,

The best way is to remove them in the css file. We cannot rely on the Joomla template you use simply because not everyone runs on Twitter Bootstrap 3 and there's no real way to have a proper fall back (It always comes with a penalty, especially with load times).

Alternatively, if you are dealing with less files, you should take a look at the less files.

Thanks for replying Mark.

I think i can't delete the lines right on the css files inside EasySocial installation folder because the changes it will be lost on upgrades.
I am struggling to "clean" up the bloatware from our project since a lot of stuff is being loaded that we don't actually use.

Our home page, low on photos ... has around 4MB ... wich is huge
Only the js files for EasyBlog and EasySocial (easysocial-1.2.19.static.min.js and easyblog-3.9.15790.static.min.js) hit 1,2 MB alone.


So, what i want to do regarding EasySocial css :

1. Create somehow a "replica" of the current css files of EasySocial in such a way that it will not be overwritten on upgrades.
3. Start to gradually delete from those "replicated" css files the stuff that i don't need.

Another approach i think will be this

1. Create an empty style.css file in EasySocial override folder (/templates/my_template/html/com_easysocial/styles) to make sure that EasySocial will not pick any more the styles from the installation directory.
2. Load ALL the EasySocial styles in my template css file.
3. Delete gradually the stuff i don't need. Delete + functionality test .... and so on.

Hello Mist,

If that's the case, you might want to override those less files and restyle everything from scratch again? By adding a style.css in your template override, EasySocial's css file wouldn't be rendered

No, basically i just want to work with "what we already have" and customize it to our needs
Shortly speaking, "duplicate" the entire css library of EasySocial in template override and start to remove the css that we don't need or alter the one that we need modified.

We need basically just some "core" stuff from EasySocial.

1. EasySocial Stream
2. Notifications
3. Message System
4. Emails
5. Profiles

Hm, Sorry but there's no easy work around for this unfortunately unless you tweak those less files.

So basically there is no way to override core EasySocial css ?

We can always add !important css declaration to our own template css file to overule some stuff.... but what to do in the case we want to totally remove some things from core ES css ?

If i will go to hack the core css files in the component directory ... i will loose the changes on future upgrades.
If i use your "style.css" solution in the template override folder .... i will loose all the css already available in ES core.

So ... dead end for me.

As I have mentioned earlier, the only way to override the core css files is to utilize the less files so that it doesn't re-import those bootstrap less files.

It seems that i don't have any other choice than to edit the "compiled" css files that are actually loaded.
Keep a backup of the changed files and re-upload them on each ES update.

For example, i have to edit

/components/com_easysocial/themes/wireframe/styles/base.min.css

I don't want to restyle everything by using style.css in template override folder. (i want to keep what ES already have and just alter the things i need)
There are a tone of less files ..... and i don't really know how to handle those.

Hello Mist,

Hm, if that is the case there's no work around for this really If we did separate out the css files you will eventually need to load / render multiple css files on the site. Rendering multiple css files would slow down the loading time of the site.

Use !important statements. They are extremely useful when over riding things in EasySocial and other components. So in one of your examples you had the following issue:

body div#fd .col-md-4 {

    width: 33.3333%;

}

What I would do to remove this forced percentage would be to add this to my template:

body div#fd .col-md-4 {

    width: auto !important;

}

This same method can be applied to pretty much anything. This should undo the 33.3333% sizing. So when in doubt try to over ride the existing CSS.

Unfortunately sometimes i can't use the !important statement and i have to remove the entire css declaration from core ES files.
Currently there is no way of doing this by overriding the css.

Basically, a solution will be if ES is designed to allow css override of the "compiled" style sheets. One will just copy the compiled style sheets in template override and alter the files there making sure no changes are lost on ES update.

For most of the time i have to remove the ES "proprietary" Bootstrap 3 classes because it's conflicting with my "default" version of Bootstrap 3 loaded by the template.
Currently i have boostrap 3 loaded twice, one by ES css ... and another one by the template.

I managed to just hack the css in the ES installation file and just "revert" the hacked files on each update. I see no way around it.

hey mist,
template overrides for the compiled files are working just fine in easysocial

all you need to do is copying the files into yourtemplate/html/com_easysocial/styles/

if you put the base.min.css there (as an example) and modify it this will load absolutely fine. same goes for the other files in the /styles folder of the easysocial theme.

I tried to put these files: style.min.cs , base.min.css and more.min.css in the override folder below

/templates/my_template/html/com_easysocial/styles

but for some reason ES is not picking them, it will pick the files from the component directory, below

/components/com_easysocial/themes/wireframe/styles/

hey mist,
try clearing all your cache.
this method absolutely works as I'm currently using it myself for developing a custom theme

tested on a hand-made joomla template as well as on the default protostar one.

Thanks for sharing this Mist