How to Add CSS

[tristanredstone]

Can anyone confirm that it is true that you can NOT add another .css file, that you just have to paste all your CSS into the main_style.css.

If that is true, how are people doing this?

For example, are you adding something like this to the bottom of the CSS file?

/********** custom css **********************/

/*insert custom CSS here*/

/********** custom css **********************/

[Robin12]

Hello, Tristan!

Yes, you can upload additional CSS files. We have had a number of designers do this successfully. You would just need to add the code into the HTML files to call the CSS file of your choice.  

To get it uploaded click the + symbol next to 'assets' in the html/css editor and upload the new CSS file. 

You can learn more about creating custom themes via the following link:

https://dev.weebly.com/get-started-with-themes.html

[bobafett]

Robin:

That is great resource.  The way I have been doing it was to import css files, copy html code for the page with no header and add the new html code and few other gymnastic moves (I am self taught and tinkering with weebly has become my hobby).

I will try out the your suggestion.  Can you briefly describe what those three zip files are? what are the differences?

I just did this yesterday (not my own coding just making other people's code work)

http://simpleton88.weebly.com/takeit.html

I am now struggling to hide the top of the page behind the navbar.

[Robin12]

Hi, Boba! 

You can certainly do it the way you have been. That is perfectly fine. The three zip files you mentioned are only needed if you are creating a new theme from scratch. They contain all the base components of a Weebly theme. Basically, the base theme is just a starter point for building a custom theme. It includes all the required code that you need to build on.  However if you are simply adding to a current theme and modifying it that way. You would not need to use the base theme zips.

You are welcome to download the zip files and tinker with them to learn the requirements for a Weebly theme. If you do, I recommend that you start a brand new blank site before importing the theme. Simply so you don't lose any content. 

I am not sure what you mean by "hide the top of the page behind the nav bar". Can you send a screenshot of what you are wanting to remove?

[Paddy1]

Sorry, my email is brendan@

[Bernadette3]

Hi @Paddy You shouldn't need to add custom code to insert an image to the footer. If you click on the footer area, you can edit and save the content.  

[Paddy1]

Hi Bernadette, I tried that and it doesn't go to the boundary of the web page, compare what I have attached to this web site https://www.dairygold.ie/

My site isn;'t live yet.

Rgds

[BJ5]

Something like this should work since you already customized your theme:

1. Upload your flame image to the Assets folder of your theme (let's assume for this it's called "flame.jpg"

2. Click on main.less, and search for "footer-wrap".

3. Underneath all of the footer-wrap rules, add a new one that looks like this:

footer-wrap
{
    background: url(files/theme/flame.jpg) no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover;
}

[BJ5]

No problem. Before doing any of this, I would export your theme just so you have a backup.

1. Click on "Edit HTML / CSS" to edit the theme, then click the + button on the left to upload a file. 

2. Choose your background image and upload it.

3. When that is completed, click on main.less up on the top left.

4. Press CTRL + F (or command + F on a mac) and search for "footer-wrap"

5. It should skip down in main.less to show where the CSS rules are for that.

6. Underneath the last of the rules, add a new line after the closing } of the last rule.

7. Paste in this code:

.footer-wrap
{
    background: url(files/theme/flame.jpg) no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover;
}

8. Save your changes, and then check out how it looks.

[Paddy1]

BJ, is this modifying the code of Weebly, or a half way house? I had a 'gig economy' person offer to 'alter the code', or so he said, I declined when he wanted control of the site! Ta v much for your help, we will be launching shortly and I have you down for one of our sweat shirts/tops, forward your email in your own time!

[BJ5]

This is altering the theme by inserting some additional code, but it's not actually changing any of the existing lines code within the file, if that makes sense! Thanks for the offer - I assume that the code is doing what you want?

[Paddy1]

I need the image as the background, e.g. so I can have text over it!

[BJ5]

Oh, I'm not sure whether you will see that work until the site has been published.

[Paddy1]

Hi BJ, re your last comment I can see it before it is published, I have access.

As regards your initial comment, can I ask you to be more specific with each of those steps, I am not a techie but I can follow instructions pretty well. Much appreciated.

[MB21]

Hi there can you please give some more detail on this answer.

1. Can you upload a separate css file and link it to a template file?

2. And would you upload it to the assets area?

3. And do you link it this way in the template file: <link href="/files/theme/boilerplate.css" rel="stylesheet" type="text/css">

This is the normal way to link to a css file in html. Does it work this way in Weebly?

Because a link like this that I have set up in a test template does not seem to be working.

So I need to know the right way to link it.

Thanks for any answers here.

[Sitruunaperhone]

I would also like answers to these questions.

1. Can you upload a separate css file and link it to a template file?

2. And would you upload it to the assets area?

3. And do you link it this way in the template file: <link href="/files/theme/boilerplate.css" rel="stylesheet" type="text/css">

This is the normal way to link to a css file in html. Does it work this way in Weebly?

Because a link like this that I have set up in a test template does not seem to be working.

So I need to know the right way to link it.

[BJ5]

You can upload a separate CSS file and link to it in the usual way. That path should work, although you might have to publish the site before it will work in the editor.

[Armand1]

I'm desperate. Followed all instructions given here, but it doesn't works for me.

Under Assets -> click New File, named it hamburgers-m.css.Insert my code in here.

In the header.html in head area inserted this :

<link rel="stylesheet" type="text/css" href="/files/hamburger-m.css" title="wsite-theme-css" />

Saved my changes, published my site, didn't work. Checked the published site, in the console the error message File not find!

Trying to modify the Acquire theme.

Any help would be appreciated.

Code added in main.less is fine, but not separate file. Maybe the path isn't right? But how is the right path?

[Bernadette3]

Hi Armand. If you are asking for help with your code it's helpful to post a link to your site. Also, can you explain what it is that you are trying to do? I'm not quite following, but maybe if I knew your goal I could provide a non-code work around. Thanks! 

[Armand1]

hi Bernadette,

the link to my test website is https://naturesmoments-silverton.weebly.com/

Ok, try to explain:

1. First upload hamburger-m.css file in folder Assets.

2. Now modified header.html, add in <head> section:

             <link rel="stylesheet" type="text/css" href="/files/hamburger-m.css" />

3. Save and publish the site, the site doesn't looked as should be (image01), so checked with console in firefox browser and see that the css file not loaded. (see image 02)

4. Add the code of hamburger-m.css at the end of main.less, save and publish the site, then it is working. (image03 and image04).

! Please ignore the style, site it is still under testing. !

image01:

image02:

image03:

image04:

FYI: the file hamburger-m.css is the style for the hamburger button on top left.

Another annoying issue:

Sometimes when I click on a *.js or *.css file in Assets folder, the file is gone. Later found the file in image or font folder, even I didn't moved it there and then the code (content of file) is gone. Instead just image file info box in there. This happens quite often. Looks like weebly's file and folder managing is very sensetive. Lost all my work this way, very often, very annoying.

THX Bernadette for your help.

And please excuse my German-English

[BJ5]

Try using this path for your file, @Armand:

/files/theme/hamburger-m.css

Also, you may need to publish the site after uploading the file if you haven't.