By James A. Parker on Saturday, 29 February 2020
Posted in General Issues
Replies 2
Likes 0
Views 615
Votes 0
I am trying to unify and simplify the layout css for my website using SASS. I am using variables to enable quick response for basic colors, text-size, fonts, etc as required by clients.
I am integrating all the css into one large minified template.css.
It would be great to be able to include /templates/myTemplate/html/com_easyblog/styles/custom.css in the templates/myTemplate/sass structure and being able to obtain highest specifity.
Apparently, this cannot be done unless the customized.css is located in /templates/myTemplate/html/com_easyblog/styles/custom.css
I understand that the updated customized css can be copied to the custom.css file. However, when developing a new layout for clients, the added time required to update changes as they are made adds production time that is prohibitive.
Perhaps providing your users, such as myself, with ability to direct an alternative link to /templates/myTemplate/css/template.css rather than to /templates/myTemplate/html/com_easyblog/styles/custom.css could be provided.
In the meantime, I could manually redirect the link if you could provide me with the file and line where the link to the template is.

Thanks for your attention to this.
Have a great weekend!
Jim
While doing a little bit of experimenting, I came up with the following work-around.
Perhaps the simplest and quick way to do this is to copy style-5.3.x.min.css to myTemplate/sass directory, rename the style-5.3.x.min.css that is located in the template that you choose to customize so that it is not accessed by easyBlog.
In my case, I am using the wireframe theme so I copied and rename the following css file:
/components/com_easyblog/themes/wireframe/styles/style-5.3.6.min.css to xstyle-5.3.6.min.css
and copied the same css file to my SASS directory with other css files used on my website. It goes without saying that the extension was changed to .scss but that is a different topic. If you are looking for a great introduction to how to setup and use SASS, you will find some great videos on youtube. Just search for scout app scss (Scout is the name of a sass app.)
All the templates, including those of other components, are now included in one template file, enabling me to change such variables as background-color, font-size, etc. across the entire website without having to edit individual css files.
While this approach won't work for all websites, it is one simple method that is working for me.
·
Saturday, 29 February 2020 04:36
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for sharing James.
·
Saturday, 29 February 2020 14:00
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post