Edit Font Color, style and size in Image Widget

You can customize the font  color, style, and size of your image widget.  Here we will show you how.

If you haven’t log into your Weebly Account yet, Click here to open your Weebly Editor and to open up the W Theme Editor.

 

 

 

Once you are in your Weebly account, open the W Theme editor by clicking on “Design” and into “Edit html/css”. Please see the screenshot below for detail reference.

Step1: Locate CSS

In the main_style.css, locate these set of codes. The Image widget have an area clearly marked as customizable area.

Click to Enlarge

 

Step2: Choose Your Tutorial

You can choose to edit the Font Style, Size and Color. Please the change of the font properties will affect all image widgets in your website. To access the tutorial, click on the tab below with the name of the edit you want to make.

Change Font Style

The default font style is set as Arial. You can change this to any font style you like. Simply change the section highlighted in yellow.

 

For example, if I want to change the font to Broadway, the code will look like this:

 

Once you have set the font style you like, you can save your change and publish your new change.

 

Change Font Size

The default font size is 12px. You can change the numerical number to any number you like. Simply change the number highlighted in yellow.

 

Once you have set the font style you like, you can save your change and publish your new change.

Change Font Color

The default font color is white (#ffffff). You can change the font color by adding a this css code:

 

Copy Code Here:
/* CHANGE FONT COLOR */
.divtaggallery p,
.divtaggallery-content p {
color: #ffffff;
}

 

When added, this is how the code will look like:

 

To change the color of your font, simply change the hex color code highlighted below. You can click here to access the hex color selector.

Tags: