Docs

[Olianna P]

Hi, my site is http://www.fincaniza.com/home/

Few questions:

1. How do I make my 3 Thumbnails Hover to darker on my homepage?
2. How do I remove the frame from the Hover Images?
3. I uploaded Instagram Feed Plugin, but it doesn’t show up in my Widgets. How would I apply it to my homepage, bottom-right?
4. Navbar Line Hover- is there a way to change that to a circle instead of a line, or a little custom icon, that would appear on hover for Navbar menu?

Please advise, thanks in advance.

[Lely]

Hi Olianna,

1.) There’s no hover effect on those 3 images when I check. Please clarify what you want to achieve. Screenshot would help.
2.) Add no-border-img on the image class field. Then also add this CSS on Appearance > Customize > Custom > Edit global CSS:

.no-border-img:hover {
    border: none;
}

3.) Unfortunately, if it’s a third party plugin, please use their provided shortcode instead to apply it on the page.

4.)Please add this:

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 4px 4px 0 0 #21418e, inset -4px -4px 0 0 #21418e, inset 4px -4px 0 0 #21418e, inset -4px 4px 0 0 #21418e;
    border-radius: 20px;
}

What kind of icon you want to add? Please note that icon will occupy space.
Feel free to update values.

Hope this helps.

[Olianna P]

Thanks, the image hover worked perfectly! Is there a way to change the hover color to #21418e?

Also,how can I decrease the space between the 3 images (between columns) on my homepage?

For 4) I would like to add the following image (http://www.fincaniza.com/wp-content/uploads/2016/06/droplogo.png) instead of the line hover on navbar, if possible?

Instagram Feed: Where do I put the shortcode if I want it to appear on the bottom right of my homepage?

And, finally, how do I delete the underline that appears on the bottom of my slider in my homepage?

Thanks a bunch!!

[Rue Nel]

Hello There,

Thanks for the updates!

To change the hover color to #21418e, you can make use of this code:

a.x-img:not(.x-img-thumbnail):hover {
    opacity: 1;
    background-color: #21418e;
}

a.x-img:not(.x-img-thumbnail):hover img{
    opacity: 0.35
}

And to decrease the spacing of the 3 images, please edit your page in Cornerstone and in the row settings, you need to enable the marginless columns. Once marginless columns is enabled, there will be no spaces in between. You can adjust the space by adding an inline css margin: 10px; to each of your image element. Hope this make sense.

To change the line hover with an image, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
    background: url(http://www.fincaniza.com/wp-content/uploads/2016/06/droplogo.png) top center no-repeat;
    background-size: 15px auto;
}

For your Instagram feed, please enable the footer widgets in your customizer, Appearance > Customize > Footer > Footer Widget Areas. You can then insert a text widget in one of the footer widget areas and place the shortcode in it.

To delete the line under your slider, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-slider-container.below {
    border: none;
}

Hope this helps. Please let us know how it goes.

[Olianna P]

Awesome! Thanks, everything worked! 🙂

* I put the 3 images (on homepage) in the container, but they are not centered for some reason (more blank space on the right). How do I adjust that?

[Friech]

Hi There,

You can add this on your Custom > CSS.

.home #x-section-1 .x-img-link {
	margin-left: auto;
	margin-right: auto;
}

Hope it helps, Cheers!

[Olianna P]

Awesome, thank you!

One more thing- My right widget area on homepage (Instagram) is 650 in height. How do I change my left image Widget to be the same height?

[Christopher]

Hi there,

Please add this :

#text-4 .textwidget img {
    height: 641px;
}

Hope it helps.

[Olianna P]

It works, however, now the image is stretched. Is there a way to increase height while keeping the proportions?

[Jade]

Hi Olianna,

If we use CSS to alter the height of the image so that it will equal to the height of the widget next to it, it is inevitable for the image appearance to be stretched since the width can’t extend further than its container when the height is adjusted. What you can to have the image in proper display is to produce a copy of the image file with dimensions 570px x 615px.

[Olianna P]

Thanks!

[Nico]

Feel free to ask us again.

Thanks.

[Author]

Posts