Addition to forum entry ?hide link icon“

[christinab1004]

Hi! I‘m really new to WordPress, building my own website and customising css.
I‘m using the SA slider on my website and found this Forum entry on how to hide the link icon.
I would like to add this css however unfortunately I really don’t know where.
Can you please be so kind and help me.

Sorry for the beginner question.
Thank you in advance!

Christina

[christinab1004]

This is the css code I’m referring to

#SLIDER_ID .sa_hover_buttons {
top:0px !important;
left:0px !important;
margin-top:0px !important;
margin-left:0px !important;
width:100% !important;
height:100% !important;
}
#SLIDER_ID .sa_hover_buttons a {
display:block !important;
width:100% !important;
height:100% !important;
background:transparent !important;
}`

[simonpedge]

To Add custom CSS to your theme, within the WordPress Dashboard click:
– Appearance -> Customize
– Then Click on the “Additional CSS” Tab
Enter your custom CSS in here.

[christinab1004]

Hey ??
Woohoo it worked ??

But only one slider at the time.

If I copy the code paste it below the First and change the iD to another one, only the first link icons are gone

Thanks a lot!!!!!!

Christina

[simonpedge]

Good to hear you got it sorted out ??

[christinab1004]

Hey ??

Is there an option that it works for more than one slider?

[simonpedge]

You are trying to make the entire area of each slide a clickable link?

I added as a new option to SA at some point. Look under “Link/Popup Icons” (right-hand sidebar). Tick the checkbox option called “Full Slide Links“.

[christinab1004]

No, i have 6 sliders on my landingpage, each with 5 or more ?pictures“.

Every picture refers to another site.

[simonpedge]

Sorry, but I’m not sure what you are asking?
Please clarify.

[christinab1004]

Oh sorry

I have 6 sliders on my page.
Every slider contains 5 or more slides.

Every single slide should be a link another page.

If i use this code

… #SLIDER_ID .sa_hover_buttons {
top:0px !important;
left:0px !important;
margin-top:0px !important;
margin-left:0px !important;
width:100% !important;
height:100% !important;
}
#SLIDER_ID .sa_hover_buttons a {
display:block !important;
width:100% !important;
height:100% !important;
background:transparent !important;
}`…

multiple times with the different slider ids
At only one slider the link icon is hidden

[simonpedge]

Can you provide me with a link to look at?

[christinab1004]

yes sure!

phillippbusch.de

[simonpedge]

Ok, try this CSS:

.white .sa_owl_theme .owl-item .sa_hover_container .sa_hover_buttons {
   top:0px !important;
   left:0px !important;
   margin-top:0px !important;
   margin-left:0px !important;
   width:100% !important;
   height:100% !important;
}
.white .sa_owl_theme .owl-item .sa_hover_container .sa_hover_buttons a {
   display:block !important;
   width:100% !important;
   height:100% !important;
   background:transparent !important;
}

[christinab1004]

I tried,
But it doesn’t work.

The icon is visible and the picture now gets darker when hovering it.