how to place an image in button on fullwidth slider - Support

Viewing 19 posts - 1 through 19 (of 19 total)

Author

Posts
November 29, 2016 at 7:25 pm #718455

Angelo
Participant

Hi Guys,

I know i am asking a lot, but i am really curious to learn everything about enfold!

My situation:
I need an image in my button in the fullwidth slider; this is the result i need; http://imgur.com/a/g3rOO

This is my current code in the slider; [av_button label='Download onze assortimentslijst ' link='manually,http://google.nl' link_target='' size='x-large' position='left' icon_select='no' icon='ue800' font='entypo-fontello' color='custom' custom_bg='#b7c84b' custom_font='#ffffff' custom_class='']

And see private content for the link; thats my current situation

I have tried a few codes but i feel like i am missing an custon class or sumthin. It doenst work right. And if almost have fixed it, my whole button is getting white and small.

November 29, 2016 at 8:27 pm #718489
Guenni007
Participant
the situation is that you have an image (that little excel icon) this is not part of a fontello iconset ( there are some alternatives with black and white excel icons))

give a custom class to the fullwidth-slider (for example: “customclass”) – (i have tested it on a enfold playground and page id was 3437)
```
.page-id-3437 .customclass .avia-slideshow-button::after {
    content: url("/wp-content/uploads/excell-icon.png");
    display: inline-table;
    height: auto;
    padding: 0 0 0 10px;
    width: 30px;
}
#top.page-id-3437 .customclass .avia-slideshow-button {
    display: inline;
    height: 50px;
    top: 30px;
}
```
webers-testseite.de/ikom/image-in-slider-button

but than the button stops moving

we only can reach the moving if your excel icon is in that frame!

if you let this at inline-block the animation is ok:
```
#top.page-id-3437 .customclass .avia-slideshow-button {
    display: inline-block;
}
```
November 29, 2016 at 8:32 pm #718491

Guenni007
Participant

by the way did you choose the sliding or fading?
on fading i think the animation is not so important.

November 29, 2016 at 8:38 pm #718497

Angelo
Participant

right now i have placed the code u sended me so

.page-id-3437 .customclass .avia-slideshow-button::after {
content: url("/wp-content/uploads/excell-icon.png");
display: inline-table;
height: auto;
padding: 0 0 0 10px;
width: 30px;
}
#top.page-id-3437 .customclass .avia-slideshow-button {
display: inline;
height: 50px;
top: 30px;
}

In my custom css. I also gave my fullwidth slider a customclass name ‘ customclass’ but it doesnt work with me. What am i doin wrong?

i am using the sliding. It will only be 1 image that will be used.

November 29, 2016 at 8:40 pm #718498

Guenni007
Participant

well you will have a different page id !!!
i can not see your site !

November 29, 2016 at 8:41 pm #718500

Angelo
Participant

http://www.testuweigenwebsite.com/lodders/informatie/ This is the page i have used i also changed the page id too 16

November 29, 2016 at 8:42 pm #718502

Guenni007
Participant

but neverthe less this will be on responsive case difficult to obtain a button that stayes in the slider.

November 29, 2016 at 8:48 pm #718505

Angelo
Participant

yeah i know, someone else made this design. I am only responsible for making a psd a responsive wordpress website

November 29, 2016 at 8:50 pm #718509

Guenni007
Participant

what kind of slider did you take – because where does the span come from?
And why are you using 2 buttons i thought the image was your need – not a second button.

can you please only insert in that buttonfield the text and remove the img tag.

November 29, 2016 at 8:51 pm #718510

Basilis
Inactive Moderator

Hey!

Let us know if that solution works out or you would need something else.
Thanks a lot

Best regards,
Basilis

November 29, 2016 at 8:55 pm #718512
Guenni007
Participant
first of all
take the one button option.
insert only that text into the button text: Download onze assortimentslijst
give the slider that class and look to your page-id
```
.page-id-16 .customclass .avia-slideshow-button::after {
content: url("/wp-content/uploads/excell-icon.png");
display: inline-table;
height: auto;
padding: 0 0 0 10px;
width: 30px;
}
#top.page-id-16 .customclass .avia-slideshow-button {
display: inline;
height: 50px;
top: 30px;
}
```
and than we have a look
November 29, 2016 at 9:05 pm #718516

Angelo
Participant

I am using the fullwidth slider. This is what is as description now in my fullwidth slider: http://imgur.com/a/aYjhP
The slider is having the customcode: customclass

Than i added the code you gave me but now you dont see the icon anymore

November 29, 2016 at 9:09 pm #718518
Guenni007
Participant
so you have the installation too here in a subfolder.
so link to your image must be different

/lodders/wp-content/uploads/2016/11/excell-icon.png
```
.page-id-16 .customclass .avia-slideshow-button::after {
content: url("/lodders/wp-content/uploads/2016/11/excell-icon.png");
display: inline-table;
height: auto;
padding: 0 0 0 10px;
width: 30px;
}
#top.page-id-16 .customclass .avia-slideshow-button {
display: inline;
height: 50px;
top: 30px;
}

.avia-button.avia-size-x-large {
    font-size: 15px;
    text-align: left
}
```
but there are strange things in that slider – where can i choose an x-large button on that sliders ?
i think here is the place a mod must help you with admin account .
no chance to see from outside what you have done there – sorry
- This reply was modified 8 years ago by Guenni007.
November 29, 2016 at 9:18 pm #718524

Angelo
Participant

As far as i know you cant choose an button in the slider. I added it custom in it

November 30, 2016 at 3:19 pm #718806

Guenni007
Participant

see here my solution: http://webers-testseite.de/ikom/image-in-slider-button/

if you like it – say it.

November 30, 2016 at 3:21 pm #718809

Angelo
Participant

thats perfect! i Have asked an college if he could help me out, he did fixed it for me but i am curious how you have fixed that. easy or hard?

November 30, 2016 at 4:23 pm #718860
Guenni007
Participant
well as i said
just a fullwidth slider with custom-class (in my case: customclass)
and only your text in one button (from slider dialog)
the rest is css: (the last three rules are to setup your font and other stiles ):
```
.customclass .avia-slideshow-button::after {
    content: url("/lodders/wp-content/uploads/2016/11/excell-icon.png");
    display: inline-block;
    height: auto;
    padding: 0 0 0 10px;
    position: absolute;
    top: -30px;
    width: 40px;
}

#top .customclass .avia-slideshow-button.avia-color-light {
    background-color: #b7c84b !important;
    font-size: 15px;
    font-weight: normal;
    padding: 12px 80px 12px 16px !important;
}

.customclass div .slideshow_caption h2 {
    font-style: italic;
    font-weight: bold !important;
    text-transform: none;
}

.customclass .slideshow_caption {
    width: 100%;
}

.customclass .avia-caption-content {
    font-weight: bold;
}
```
November 30, 2016 at 5:43 pm #718908

Angelo
Participant

thanks!

December 1, 2016 at 5:54 am #719085

Rikard
Keymaster

Hi,

Thanks @guenni007 for helping out!

Best regards,
Rikard
Author

Posts

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.