Hi Maureen Dunlap,

You can place your less variables in /less/themes/vif/variables.less
and add your style to /less/themes/vif/template.less or /less/themes/vif/style.less

Regards

Hi there!

I have somewhat the same question and I wanted to know if it was really possible to override others files than template.less and variables.less into the custom theme folder.
For example I would override japurty 3's less files like components.less, core.less, forms.less etc... Is that possible? Is that really useful? Is that a best practise?

Thanks a lot!

Hi Charles,

You can override any .less file for a theme. That means you can add any .less file to the theme folder then customize. But there are 2 notes you should know:

1. Turn dev mode on so that your site will load .less file and it's easy for you to customize your theme.
2. After customizing, please compile LESS to CSS so that what you have done with .less files in the theme folder will be compiled to CSS. After compiling, you can check the "css/theme/theme_name", you would see many .css files, not the same as in "less/theme/theme_folder" as when compiling, all .less files related to the theme will be compiled and add to the "css/theme/theme_name". This is to improve your site performance.

Gardner.

@Gardner,

Based on this post, and a tutorial on using the theme .less files for customization, I have been able to move most of my .less custom code and variables into the theme subfolder, on a localhost copy of my live site. However, it doesn't seem like a fully robust solution, and I have a couple of questions.

First some background. The site a is simple business brochure type site, only four pages, for my local business, so the code is relatively simple. I read somewhere in the documentation that customizations to the .less code could be added to one of the .less files in the /templates/t3_bs3_blank/less subfolder, preferably style.less. I can't seem to find that reference at the moment. So I developed the site originally by customizing the .less in bs3 style.less and the variables in bs3 variables.less. There is no custom css code and no custom.css file. The site contains one theme that applies to all pages, which was put there originally to adjust the font size from 14 point to 15 point, an make a couple of color adjustments.

When I initially attempted to move the code by following the tutorial, I split the code between template.less, template-responsive.less and variables.less in the theme subfolder. The site completely broke, and badly. So I gave up for a while. But this weekend I found some time to play around with it, and experiment some, and I found that I can successfully move the majority of the code to the template.less file, and the variables to the variables.less file in the theme subfolder.

But I encountered these problems:

My site has a background image in the t3-header, and a fixed repeating background image in the body. I was unable to move the url declarations to the template.less file, or any other file, and had to keep it in the original style.less file for it to work. The code is

.t3-header {

  background: url(@header-image) center center;

}



body {

  background-image: url(@outside-background-image);

  //background-attachment: fixed;

}

The interesting thing about the body declaration is that the background-attachment: fixed; declaration does work in the theme's template.less file but the url declaration does not.

Secondly, since there is an assignment in the bs3 variables.less file that assigns

@t3-border-color: @hr-border;

I adjusted the color for the borders with the following

@hr-border: darken(@navbar-default-bg, 6.5%);

When this code is placed in the theme's variables.less file, it causes the font size adjustment to be overridden and go back to the 14 point default size. I could solve that by changing the declaration to

@t3-border-color: darken(@navbar-default-bg, 6.5%);

Further, I experimented with creating a style.less file in the theme folder as suggested earlier in this thread, but I was unable to get any code to be recognized when placed in this file.

1.) Is there a way of getting the images into the theme folder?

2.) Is the second issue I mentioned a bug in the compiler? Is it likely that other issues like this exist?

3.) Is there a way to get user created files to be recognized by the compiler?

By the way, I didn't test any of this with the less-to-css compiler, only the on-the-fly development mode compiler. But for this to be a robust solution, all code would need to work with development mode turned on during development.

Hi Michael.

1. If you don't see the custom.css file, just create such file then add your style to the file. For more detail, check it out at:
http://t3-framework.org/documentation/bs3-customization#custom-css

2. There are 3 .less file in the theme folder (e.g: templates/t3_bs3_blank/less/themes/dark): template.less, variables.less, variables-custom.less. Those files includes your customized style only. So when you clone a new folder, normally you have to delete everything in those files and add new styles.

3. When you add new .less files to a theme folder, the new file will be auto recognized by compiler so it will be compiled to CSS.

P/S: I can only show you the workflow of the framework.

Gardner.

Hi Gardner,

1. If you don't see the custom.css file, just create such file...

Yes, I know. Actually, the intent was to customize the website completely in LESS without using any custom CSS. That's why the site has no custom.css file.

The desire is to have a fully robust way to customize LESS without losing the edits when the site is upgraded. If it is not possible, then okay, I'll live with it. But I'd like to know.

2. There are 3 .less file in the theme folder (e.g: templates/t3_bs3_blank/less/themes/dark): template.less, variables.less, variables-custom.less. Those files includes your customized style only. So when you clone a new folder, normally you have to delete everything in those files and add new styles.

Actually, when a new user-created theme is created, the template.less and variables.less file are already completely empty. But, so what is the answer to my question? For instance, why do all my customizations work here except for the setting of a background image using, for instance, url(@outside-background-image)? (see my previous post) And is there some way, perhaps that I am missing, to get them to work here?

3. When you add new .less files to a theme folder, the new file will be auto recognized by compiler so it will be compiled to CSS.

I can not get the newly added file to be recognized by the on-the-fly compiler when development mode is turned on. Are you sure this is correct? Or does it only apply to the Less-to-CSS compiler? I may have some time to play around with it this weekend.

P/S: I can only show you the workflow of the framework.

I'm not clear what you mean here. I'm not asking for any proprietory information. I just want to know how the framework actually works, what I can and can't do with it.

Regards,
Michael