Please tell me how I can change the font on the portfolio icons when a
user hovers over them. Also, the font that is shown when an icon in
"recent works" is hovered it has an entirely different font. I need
these both to be a different font.
To add the custom CSS, please go to "Style Customizer > Others".
In case you would like to use custom CSS for other elements, I would recommend "Developer Tools" on Chrome or "Firebug" on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.
Thank you! I did try everything to figure out the code, but couldn't get it. With the info you sent I could achieve the following:
Portfolio hover - uppercase but wrong font still
Recent works hover - worked totally!
What do you think could be preventing the portfolio hover? The font I used for headings & such is illegible as the hover. Here's the custom CSS I'm using:
Please tell me how I can change the font on the portfolio icons when a user hovers over them. Also, the font that is shown when an icon in "recent works" is hovered it has an entirely different font. I need these both to be a different font.
Thank you
Hi,
For normal portfolio items, please try using this custom CSS:
#content-container .uxb-port-root-element-wrapper .uxb-port-element-item-hover h3, #content-container .uxb-port-root-element-wrapper .uxb-port-element-item-hover h4 { font-family: Arial; }
For recent work items, you can try using this:
#content-container .uxb-port-root-element-wrapper.related-items .uxb-port-element-item-hover h3, #content-container .uxb-port-root-element-wrapper.related-items .uxb-port-element-item-hover h4 { font-family: Tahoma; }
To add the custom CSS, please go to "Style Customizer > Others".
In case you would like to use custom CSS for other elements, I would recommend "Developer Tools" on Chrome or "Firebug" on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.
Cheers,
Paul
Paul,
Thank you! I did try everything to figure out the code, but couldn't get it. With the info you sent I could achieve the following:
Portfolio hover - uppercase but wrong font still
Recent works hover - worked totally!
What do you think could be preventing the portfolio hover? The font I used for headings & such is illegible as the hover. Here's the custom CSS I'm using:
#intro h1, #intro h2 { text-transform: lowercase; letter-spacing: -1px; }
#uxb-layerslider-container h1, #uxb-layerslider-container h1, #uxb-layerslider-container h2, #uxb-layerslider-container h3, #uxb-layerslider-container h4, #uxb-layerslider-container h5, #content-container h1, #content-container h2, #content-container h3, #content-container h4, #content-container h5, #content-container h6 { text-transform: lowercase; font-weight: 200; letter-spacing: -1px; }
#uxb-layerslider-container h3, #content-container h3, #content-container h2.smaller { font-size: 25px; }
#content-container .columns { font-size: 14px; }
#logo-wrapper.horizontal-menu { margin-top: -20px; }
element { font-family: "Quicksand", sans-serif; }
#uxb-port-images-type { margin-bottom: 0; }
#uxb-port-images-type .uxb-port-box { display: none; }
#root-container .wp-caption-text { font-size: 18px; margin: 0px; }
#content-container .gallery .gallery-item .gallery-caption { margin-bottom: 0px; margin-top: 12px; padding-bottom: 5px; }
#content-container, #content-container p, #content-container address, #content-container pre, #uxb-layerslider-container p, .cta-box-content, .cta-box-content p, #content-container .blog-item .excerpt { line-height: 1.75; margin-bottom: 0px; }
.wc-image-links .gallery-caption, .wc-gallery-captions-onhover .gallery-caption, .wc-gallery-captions-showon .gallery-caption { background: none repeat scroll 0% 0% #ededed; }
.image-caption, .wp-caption-text { font-style: normal; }
#content-container .uxb-port-root-element-wrapper .uxb-port-element-item-hover h3,
#content-container .uxb-port-root-element-wrapper .uxb-port-element-item-hover h4 { font-family: "Quicksand", sans-serif; text-transform: uppercase; }
#content-container .uxb-port-root-element-wrapper.related-items .uxb-port-element-item-hover h3,
#content-container .uxb-port-root-element-wrapper.related-items .uxb-port-element-item-hover h4 { font-family: "Quicksand", sans-serif; text-transform: uppercase; }
Hmm. Did you already add "Quicksand" font into the list of "Theme Options > Google Fonts" ?
If so, please try adding "!important" for the font-family to set the priority. See if this helps.
Also, could you send me your site URL so I could check that?
It's totally working now! I had tried the !important but for some reason it is now working! Thank you!