Move Button OR link to picture

I assume you mean the 3xFPs on Front Page?

The zooming image is already linked.

This Snippet shows how to align the 3 buttons. Change the max-height value to what you want to move them down.

I’ve started to remove the buttons altogether and leave the link on the zooming image.

If you need more, give us a link to your site.

Hi,

I’m actually having a few issues. This is a link to my homepage. https://www.safetyneteducation.com/

The first issue is the one I was referring to above. I would like to link the “learn more’ icon on my slider. I have uploaded my slider and it is therefore just a media image. If I can link it to a page that will solve my problems. If that’s too hard, I would be happy with the original button but need to be able to move it around on the slider so that it doesn’t obstruct the text. Hopefully this is a bit clearer?

My second problem is with the 3FPs, I need to be able to choose the image that displays here. I thought it was just the image at the top of each corresponding page but that doesn’t seem to be the case. Any tips you can give me would be much appreciated.

Thank you for your help!

Alana

– Linking the whole slider: https://www.themesandco.com/snippet/linking-the-whole-slides-picture-to-a-pagepost-in-customizr/
– Moving the buttons: https://www.themesandco.com/snippet/move-the-slider-titles-button-with-css/
– Featured page images: go to the corresponding page and add the featured image in the bottom right of the screen.

Hi Electric Feet,

Thank you for your reply. I have had a look at the links you posted but I’m a beginner at WP and don’t really understand how all of this works. Can you please break it down for me? I have installed a child theme but don’t know how to use it.

With the featured page images – is adding to the bottom right of my page the only way to get them to show up on the homepage? The pictures will look stupid at the bottom of the pages….

Thank you
Alana

Featured Images is a misunderstanding. What @ef meant is for you to go to the Page (Dashboard>Pages>Edit). At the bottom right of that screen is a panel that enables you to ‘Set Featured Image’

Here’s a couple of articles to start with.

Article 1

Article2

Digest those and then come back with further questions.

Hi rdell,

Thank you so much for your help. The featured pictures was an easy fix. ??

I have been able to move the button position with the code you provided for me which is great.

I now need to make the button background transparent. I tried this code but it didn’t work https://www.themesandco.com/snippet/changing-transparency-of-the-slider-text-background/.

This is the code I have in my custom CSS area atm

.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;}
.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px ;
-moz-box-shadow: 0px 0px 0px ;
box-shadow: 0px 0px 0px transparent;
background:none
}

.page h1.format-icon:before {
content: none;
}

.carousel-caption {
position: relative;
top: 110px; /* 0px is top of element */
left: -13%; /* 0% is left of element */
}

I would like to copy it into the child theme (so that I know how to use it) but the only folder in my child theme is style.css, do I just copy and paste it into this?

Thank you for your help.
Alana

That’s exactly all you have to do!

The CustomCSS panel is great for helping you play with CSS to get it right before moving it to the CT style.css.

As you get better, you may try to design your style.css. As code is executed inline, then you could organise it like this for example:

/* Sitewide */
[css here]
/* Header */
[css here]
/* Slider */
[css here]
/* Featured Pages */
[css here]
/* Pages */
[css here]
/* Posts */
[css here]
/* Sidebars */
[css here]
/* Footer */
[css here]
/* Responsive @media */
[css here]

It makes it much easier to diagnose & fix problems in your CSS

Hi rdell,

Thank you for your help. Can you please give me the code to make the background of the learn more button on the slider transparent?
https://www.safetyneteducation.com

Obviously the ‘Learn More’ that is part of the image will be removed.

Thank you
Alana

The Twitter Bootstrap button is quite a complex beast. I’d like to know a bit more about what you want to achieve.

Add this to your CustomCSS:

.carousel-caption .btn {
    background-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(top bottom, #0088CC, #005580);
}

As you can see there is a before/after effect, so when you say you want a transparent button, how do you see that working in normal/hover states?

Hi Rdell,

I don’t think I explained myself properly above. When you originally clicked on my link there would have been 2 ‘learn more’ displayed on the one slider. One learn more was part of the image that I uploaded and that has since been removed so that now the only ‘learn more’ that remains is the button that is linked via customizr theme.

What I want to do is remove the dark grey square that surrounds the button, not make the button transparent as I think I originally implied.

Thank you,
Alana
https://www.safetyneteducation.com/

You have overwritten Customizr’s dark caption background with your own light caption background. You need to remove it altogether with:

.carousel-caption {
    background: none;
}

(BTW, you still have 2 “learn more”s on the second slide.)

Thankyou!!! ?? All fixed. Yes I realize that there is still 2 learn more’s on the 2nd slider. Will sort that out today.

Appreciate your help.

?? Alana