Changing preset fonts and colors in themes in Weebly
I was having an ePortfolio critique session with a fellow cohort and one of the things mentioned was the color of the text in the navigation menus at the top of the page in Weebly. I had never thought about this even though I had paid special attention to make the text contrast within the webpage itself. I went to try and change the color only to find out that it is not as simple as it looks. If you have chosen a theme, there are some fonts and colors that are not changeable in the basic design tools.
I did manage to do it, but I had to do a little more advanced tinkering to get it done. Here is how I did it:
Step 1: You need to navigate to the THEME tab in your Weebly editor.
Here you have the option to do change your theme, change fonts, or change the background. You probably don’t want to change your theme if you have already built your website as it may mess up a lot of things you have already created.
Under change fonts, you can change the various fonts as well as their style (bold, italic, etc.), size, color, and whether or not you want the words all in caps or not.
However, there are some fonts in which you have fewer options to customize. One of those is the navigation bar font color.
Step 2: Warning! This step involves editing the HTML/CSS of your site and will be applied across the entire site and all pages. We are editing the default colors for some aspects of the theme. If you are not comfortable messing around in code, try creating a copy of your site and playing with that first.
Key term:
Hex color code – This is a # followed by 6 numbers, letters, or a combination thereof which identify a specific color. You will need to find out the hex code of your desired color before changing anything.
At the bottom of the theme panel is a button labeled Edit HTML/CSS. You need to click on this. This will split your screen into part code and part editor.
To change the color of hyperlinks, you need to change the default which is in the section /* Resets section. There are two lines
that say color. The first is the color of the hyperlink, the second is the color it changes to when hovered over. To change the color of your hyperlink, replace the hex code with the one you have selected. Don’t forget to leave the spacing and the semi-colon as is. The editor should refresh and you can see the results below.
To change the color of the text in the menu navigation, you need to scroll down to the section /* Navigation. Under #topnav a you will see a line that says color. Here is where you change the color of the text for your menu items. If you continue down to the end of the section, there is a line that says #topnav a:hover. Under this is a line that says color. Here you can change the color of the text when hovered over.
To change the color of the text in the flyout menus (drop down menus), you need to find the section called /******flyout menus****. Here there are two places to edit text colors. The first one is the main color, the second one is the hover color.
Once you have completed the changes to your satisfaction, click the save button in the upper right hand corner and choose a name for your edited theme.
If you like to play around, there are plenty of other things you can edit within your themes other than color.
Have fun, but proceed at your own risk. I am not responsible for anything that goes Technicolor due to messing with the theme code! Play in a safe copy first. This worked for me, but each theme might be slightly different.
I was having an ePortfolio critique session with a fellow cohort and one of the things mentioned was the color of the text in the navigation menus at the top of the page in Weebly. I had never thought about this even though I had paid special attention to make the text contrast within the webpage itself. I went to try and change the color only to find out that it is not as simple as it looks. If you have chosen a theme, there are some fonts and colors that are not changeable in the basic design tools.
I did manage to do it, but I had to do a little more advanced tinkering to get it done. Here is how I did it:
Step 1: You need to navigate to the THEME tab in your Weebly editor.
Here you have the option to do change your theme, change fonts, or change the background. You probably don’t want to change your theme if you have already built your website as it may mess up a lot of things you have already created.
Under change fonts, you can change the various fonts as well as their style (bold, italic, etc.), size, color, and whether or not you want the words all in caps or not.
However, there are some fonts in which you have fewer options to customize. One of those is the navigation bar font color.
Step 2: Warning! This step involves editing the HTML/CSS of your site and will be applied across the entire site and all pages. We are editing the default colors for some aspects of the theme. If you are not comfortable messing around in code, try creating a copy of your site and playing with that first.
Key term:
Hex color code – This is a # followed by 6 numbers, letters, or a combination thereof which identify a specific color. You will need to find out the hex code of your desired color before changing anything.
At the bottom of the theme panel is a button labeled Edit HTML/CSS. You need to click on this. This will split your screen into part code and part editor.
To change the color of hyperlinks, you need to change the default which is in the section /* Resets section. There are two lines
that say color. The first is the color of the hyperlink, the second is the color it changes to when hovered over. To change the color of your hyperlink, replace the hex code with the one you have selected. Don’t forget to leave the spacing and the semi-colon as is. The editor should refresh and you can see the results below.
To change the color of the text in the menu navigation, you need to scroll down to the section /* Navigation. Under #topnav a you will see a line that says color. Here is where you change the color of the text for your menu items. If you continue down to the end of the section, there is a line that says #topnav a:hover. Under this is a line that says color. Here you can change the color of the text when hovered over.
To change the color of the text in the flyout menus (drop down menus), you need to find the section called /******flyout menus****. Here there are two places to edit text colors. The first one is the main color, the second one is the hover color.
Once you have completed the changes to your satisfaction, click the save button in the upper right hand corner and choose a name for your edited theme.
If you like to play around, there are plenty of other things you can edit within your themes other than color.
Have fun, but proceed at your own risk. I am not responsible for anything that goes Technicolor due to messing with the theme code! Play in a safe copy first. This worked for me, but each theme might be slightly different.