Tutorial Stats
I can't find The CSS file in my Weebly site
Tutorial Description
You're following a Weebly Tricks' tutorial and one of the steps requires you to add CSS coding to the CSS file. In the tutorial, the CSS file is identified as "main_style.css", but you can't find this file after accessing Weebly's HTML/CSS Editor. Or the CSS file is identified as "main.less", but you can't find this file in the Weebly HTML/CSS Editor. What do you do?
SHOW MORE
Tutorial
The answer
The answer is that "main_style.css" and "main.less" are both CSS files from different generations of Weebly, and if you can't find one, you can use the other.
"main.less" is a new and improved CSS file
With the introducing of Weebly 4, Weebly did away with its themes' old CSS file type "main_style.css" and replaced it with a new type of CSS file, "main.less".
"main.less" is still a CSS file, so you can add CSS coding to it just as you did to the old CSS file type "main_style.css". The difference is that "main.less" is able to interpret new types of CSS coding that "main_style.css" could not, which, according to lesscss.org, "make[s] CSS that is more maintainable, themeable and extendable".
It's also important to note that all CSS codes that worked in "main_style.css" will work in "main.less", but not all CSS codes that work in "main.less" will work in "main_style.css".
"main.less" is still a CSS file, so you can add CSS coding to it just as you did to the old CSS file type "main_style.css". The difference is that "main.less" is able to interpret new types of CSS coding that "main_style.css" could not, which, according to lesscss.org, "make[s] CSS that is more maintainable, themeable and extendable".
It's also important to note that all CSS codes that worked in "main_style.css" will work in "main.less", but not all CSS codes that work in "main.less" will work in "main_style.css".
My "Main.less" CSS file is empty
A Weebly Tricks' tutorial step requires adding CSS codes to a specific area of your CSS file, but after locating your theme's CSS file, "main.less", it's completely empty of CSS coding except for a couple lines of CSS codes at the top.
No worries! The "@import" lines of CSS code at the top are just importing CSS codes from other CSS files (e.g., blog.less, fonts.less, etc). The few "@import" lines of CSS code at the top of your "main.less" file represent all of the CSS coding that would have been in this file.
So where do you put the CSS codes you need to add to your CSS file if your CSS file looks like the CSS file below? Directly beneath the "@import" lines of CSS code. The space is yours to occupy!
No worries! The "@import" lines of CSS code at the top are just importing CSS codes from other CSS files (e.g., blog.less, fonts.less, etc). The few "@import" lines of CSS code at the top of your "main.less" file represent all of the CSS coding that would have been in this file.
So where do you put the CSS codes you need to add to your CSS file if your CSS file looks like the CSS file below? Directly beneath the "@import" lines of CSS code. The space is yours to occupy!
There are so many other CSS files alongside "Main.less"
Weebly has setup the "main.less" CSS to be the main CSS file that all other CSS files channel through. Browser's read the "main.less" CSS file first, and are then directed to other CSS files (e.g., blog.less, fonts.less, etc) via the "@import" lines of CSS code at top of "main.less".
The purpose of this type of setup is organization. Instead of sifting through one CSS file, it's much easier to find the CSS codes you're looking for from a list.
If you really wanted to, you could delete all of the "@import" lines of CSS at the top of the "main.less" file, copy all of the CSS codes from all of the other CSS files in your theme, paste them into the "main.less" file, delete all of the other CSS files, and your theme's styling would be unaffected.
We don't recommend doing this, but understanding that this can be done should help you understand a little bit better how "main.less" works.
The purpose of this type of setup is organization. Instead of sifting through one CSS file, it's much easier to find the CSS codes you're looking for from a list.
If you really wanted to, you could delete all of the "@import" lines of CSS at the top of the "main.less" file, copy all of the CSS codes from all of the other CSS files in your theme, paste them into the "main.less" file, delete all of the other CSS files, and your theme's styling would be unaffected.
We don't recommend doing this, but understanding that this can be done should help you understand a little bit better how "main.less" works.
Creating your own CSS file with "Main.less"
Now since you understand a little bit more of how "main.less" works in Weebly sites, and that part of its purpose is organization, you can create your own CSS file.
Maybe you're installing a third-party widget's CSS codes, or you've created a new page in Weebly that you want to have its own styling, whatever your situation is, you want to create a new CSS file to house specific CSS codes.
To create a new CSS file in a Weebly theme that uses "main.less":
Note: You can name your CSS file "_filename.less" if you want. There's no significance to the "_". It's just a character that the developer of this particular Weebly theme chose to precede all of the CSS file names with.
Maybe you're installing a third-party widget's CSS codes, or you've created a new page in Weebly that you want to have its own styling, whatever your situation is, you want to create a new CSS file to house specific CSS codes.
To create a new CSS file in a Weebly theme that uses "main.less":
- Go to "Theme" at the top and then select "Edit HTML/CSS" on the bottom left.
- Under "STYLES", click the "+" icon and select "New File".
- Name your new CSS file (e.g., "filename.less"). You can name your CSS whatever you want, but it's an imperative that it end with ".less".
- Add your CSS codes to your new CSS file.
- Go to "main.less", and at the very top, but directly beneath the last "@import" line of CSS code, add: @import 'filename';
Note: You can name your CSS file "_filename.less" if you want. There's no significance to the "_". It's just a character that the developer of this particular Weebly theme chose to precede all of the CSS file names with.
That's how to find the CSS file for your Weebly theme, with an overview of Weebly's latest CSS file type, "main.less". Did you find this guide helpful? Do you have other questions or opinions surrounding Weebly's adoption of LESS for its CSS? Let us know your thoughts or questions in the comments below!
-Editor Tricks
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
