Hover font color in image widget is different than what I set to

When changing font styling using Weebly’s “design” setting, it override ALL theme font styling code. Weebly’s design setting always takes president over the theme styling which include widget. Here is how you can change this.

If you haven’t log into your Weebly yet, go ahead and click here

1) Click into “design” and into “edit html/css”
2) Click on “main_style.css” to open the css editing page
3) Here scroll down to the image widget codes to locate this:

/* -------------------------------------------/
IMAGE WIDGET HOVER CONTENT FONT STYLING
/ ------------------------------------------ */
/* Change hover content title color and font size */
.hover-img figcaption h3 {
color: #ffffff;
font-size: 22px;
}

/* Change hover content paragraph color and font size */
.hover-img figcaption p {
color: #ffffff;
font-size: 22px;
}

Here in the highlighted code, add !important at the end to override Weebly’s font styling. So the code will thank look like this:

/* -------------------------------------------/
IMAGE WIDGET HOVER CONTENT FONT STYLING
/ ------------------------------------------ */
/* Change hover content title color and font size */
.hover-img figcaption h3 {
color: #ffffff !important;
font-size: 22px !important;
}

/* Change hover content paragraph color and font size */
.hover-img figcaption p {
color: #ffffff !important;
font-size: 22px !important;
}

4) Save your change and re-publish your website

Tags: