I have tried by copying the custom.css file from /components/com_easysocial/themes/wireframe/styles/custom.css and placing it in /templates/YOUR_JOOMLA_TEMPLATE/html/com_easysocial/styles/

...but nothing happens. Please help explain how I start editing a templates css files.

Andrew McDonald wrote:

I want a single file for all my custom css.

What is the best process for this? Do I create a new css file in the overrides folder?

I have now tried exactly what your documentation says:

To override the file /components/com_easysocial/themes/wireframe/styles/style.css, you need to perform the following:
Create the styles folder in /templates/YOUR_JOOMLA_TEMPLATE/html/com_easysocial/styles
Create your own style.cssin the folder that you just created above.

Doing this breaks the css on the site.

Not off to a good start with this app!

Hello Andrew,

When you override the css file, everything will be rendered from your css file. In other words, all other css files will not be rendered by EasySocial giving you full absolute control over how the style looks like.

What you could do if you only want to override minimal css codes on the site:

1. Use @import to import existing stylesheets from EasySocial. We also allow you to create a .less file in your template overrides too.

2. Placing your minimal css changes into your Joomla template's css file

I have no experience with less... not sure how it works. I'll give the Joomla template approach a go.

Thanks for the quick reply.

Andrew

No problem Andrew

IMHO the best way to do this depends upon what your particular situation is. Are you using a template from a template club or is it your own template or perhaps one of the default J! templates like Protostar? What are your priorities? For example page speed/site performance is affected by how you implement your CSS. Joomla 3 css is majorly bloated using Bootstrap. Some of the template clubs have no conscience in how they implement it either. So while a template may look really nice and have some cool effects, it may also rely upon a massive amount of CSS and css that is redundant even several times over. Bootstrap is great and there are ways to deal with the bloat but that is another issue.

Using @import is a simple solution but is considered a negative for SEO/site performance. Some of the template clubs have their own method for overrides/custom so check with them if you are using one of their templates. Otherwise, the basic process for creating a custom.css /override.css (doesn't matter what you call it but I like to use custom.css because it is pretty normative which is useful if say you are working with others) is to create the file, then define it in your template index.php

So for example if you were using J! 3 and the Protostar template you'd go to:

(your joomla root)/templates/protostar/css/
create your file e.g. "custom.css" which leaves you with:
(your joomla root)/templates/protostar/css/custom.css

then you'd edit the template's index.php file:
(your joomla root)/templates/protostar/index.php
find this line (around line 32):

 $doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

directly below that add:

$doc->addStyleSheet('templates/'.$this->template.'/css/custom.css');

you can then put any/all overrides for your site and extensions in that file. They will be in effect for any page on your site that uses that particular template. So if you are using more than one template, each template would require its own custom.css with whatever overrides you want in effect and that custom.css would need to be defined in that template's index.php

Hello Paul,

When you use @import in a less file, EasySocial will automatically compile them for you so that at the end of the day, your real css files doesn't have any "import" directives. The @import directive on a less file simply tells the compiler to include css codes from the file that you specified.