JoomlArt's Blog

Joomla Tutorials, info, Discussions and much more...

Customizing style for a website is important to work and should be done in the proper process. Today, we will guide you how to customize CSS and SCSS for T4 Framework based websites.

T4 Framework is our new Joomla template framework built with new technologies, ready for Joomla 3 and Joomla 4, advanced features and optimized for performance.

T4 Joomla template framework CSS and SCSS customization

CSS and SCSS customization tools

Your custom CSS & SCSS is safe.

The purpose of the CSS and SCSS customization tools is to help you customize style easier and faster, more important, it keeps your custom work safe by storing all those work in "local" folder that is not overridden from upgrading process.

CSS Customization

T4 Framework integrates Bootstrap 4, built with SCSS, the SCSS is compiled to .css files. For minor customization, you should customize style using CSS, instead of SCSS, it is easier and faster. You can either use the custom.css file or using Custom CSS feature.

#1: Using custom.css file

T4 Framework allows user to add their custom CSS in the custom.css file:

templates/t4_blank/local/css/custom.css

By default, the file is not included in the template folder so you will need to create the file by yourself. The file is not overridden when upgrading template to new version.

#2: Using inbuilt Custom CSS editor

Customizing style for your site is even more simple with the inbuilt custom CSS Editor. In the Tools panel, hit the Edit Custom CSS button and you can add your own custom CSS rules to the editor.

t4 joomla template framework css customization

After you save, the CSS code will be also stored in the custom.css file. If the file is not created, the system will auto-generate the file.

Custom SCSS variables and style

The easiest way to customize SCSS is using the SCSS Custom built-in tool. From working panel of T4 template, access the Tools menu and select Edit Custom SCSS.

1. Custom SCSS variables

You can override the default variables in the Variables customization editor.

t4 joomla template scss customization tool

By default, you can view the default variables in the file:

templates/t4_blank/scss/_variables.scss

Find the variables you want to override and add to the editor. You can also define new variables.

The override SCSS variables are stored in the file:

templates/t4_blank/local/scss/variables.scss

Custom SCSS style

You can customize SCSS in the CUSTOMIZE STYLE editor.

t4 joomla template scss customization tool

The custom SCSS style is stored in the file:

templates/t4_blank/local/scss/custom.scss

t4 joomla template scss customization files

Once done, hit the Save & Compile, the custom SCSS will be saved and also compiled to CSS and it will be stored in the file:

templates/t4_blank/local/css/template.css

Remove Local CSS

When click on the button Remove Local CSS, the compiled CSS file templates/t4_blank/local/css/template.css will be completely removed.


Download and support

Free Download  Forum  Documentation

BLOG COMMENTS POWERED BY DISQUS

Get update via email:

Delivered by FeedBurner

Facebook Fan Box