Hello,
I’m running the free version of the vantage theme together with the page builder, upgrading to premium as soon as I sorted out some things on my local setup. And I have to say it’s a damn awesome theme :).
=====1. Question:=====
I have set up a child theme and added a hover effect for the circle icons in the style css, so it changes circle color and icon size on mouseover. But currently it only works when i hover directly over the circle. Is it possible to change it that the hover effects also apply when hovering over the title and more link or even the whole div?
/* Icon size change on hover*/
.widget_circleicon-widget .circle-icon-box.circle-icon-size-medium .circle-icon:hover [class^="icon-"] {
font-size: 46px;
line-height: 1.1em;
color: #FFFFFF;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
/* Color change on hover */
.widget_circleicon-widget .circle-icon-box .circle-icon:hover {
background-color: #2E3192;
position: absolute;
display: inline-block;
width: 81.25px;
height: 81.25px;
-webkit-border-radius: 130px;
-moz-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
=====2.Question=====
On one page I listed opening hours and i wanted to change font color to red and green (close/open) based on the time and day with javascript. Currently the text is in a text widget set up with page builder. Where can i add custom javascript? Maybe with the Black Studio TinyMCE Widget ?
=====3.Question=====
Is it possible to add a Font Awesome Icon in a text or Black Studio TinyMCE Widget? For example I want to add the phone icon infront of the phone number on the contact page.
=====4.Question=====
How do I change the color of the Previous/Next Buttons of the post carousel? Especially the orange on mouseover doesn’t fit my color scheme.
=====5.Question=====
This isn’t really that important, but i wanted to know if a hover effect like on this wordpress theme http://us-themes.com/wp/Corsa/ (scroll a bit down, that what looks like the circle icon widgets from vantage). You can see also see there what I basically want to achieve in the 1. Question that the icon changes even when you’re not directly hovering over the circle.
I thank that’s it for now ^^
Thanks and greetings.
Hi pcmr
Glad to hear you’ve been enjoying Vantage.
1. I don’t think you target one up in CSS. What you’re looking to do is target the circle icon background but when the entire div is hovered over. Perhaps possible but not as far as I know.
2. If correctly wrapped in script tags you could add a block of JS in the same Text widget.
3. Yes it’s possible. You should be able to with:
http://fontawesome.io/examples/#basic
4. The arrow hover color can be customised by inserted the following into a Custom CSS plugin and editing as required:
/* SO Carousel Button Links Hover */ a.sow-carousel-next:hover, a.sow-carousel-previous:hover { color: red; }5. Unfortunately not at this time.
Great thanks for your helpful reply.
Unfortunately I have more questions.
1. Can i add a normal ascii/unicode symbol within the circle icon? Or is is possible to modify the font files of font awesome to include the symbol there, what would i need to add there, when i have the svg code?
The symbol i need is the registered trademark symbol.
2. How would i add a hover effect to the feature widget like i’ve done it with the circle icon widget above? Just color change of circle and icon getting bigger.