How to: Add button to Accordion Slider image - Support | Kriesi.at

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

Author

Posts
December 8, 2014 at 4:42 pm #364724

truthbetoldmedia
Participant

First, let me take a second to thank everyone here at Kriesi.at! Your hard work is obvious both in the fine product you put out, and the fantastic customer service you provide. Mega-kudos, and job well done!

Onto my question: Using AdvancedLayoutEditor, I’ve added a full-width accordion slider that I’d like to use as my site’s primary navigation (Site here). Is it possible to add buttons that link to other pages on each individual slide layer?

I think it could be done using the shortcode > Accordion Slider option, since the HTML is visible there, but the shortcode doesn’t seem to allow for full width…

December 8, 2014 at 11:09 pm #365022

truthbetoldmedia
Participant

Is this a case of “no, not possible”, “we don’t know”, or “musta missed this post”?

December 9, 2014 at 2:34 pm #365332

Yigit
Keymaster

Hey!

Please click on slide image on your Accordion slider to edit it and set it manual link – http://i.imgur.com/i5FCUI1.png
P.S.: This is a case of “self posting pushed your post to the end of the queue, please keep that in mind next time to receive a quicker response” :)

Best regards,
Yigit

December 9, 2014 at 3:59 pm #365394

truthbetoldmedia
Participant

Thanks for the reply Yigit, but I am still unclear on my original question. Where i input a manual link, can I also input raw HTML? Or shortcode? My intent is to have a button on the image that links elsewhere, not the entire image being a link.

December 9, 2014 at 9:15 pm #365614

truthbetoldmedia
Participant

I know, I know – a self-reply will get the thread pushed down the page, but I wanted to be clear in my previous question. This is what we wish to be able to do (add content to slides in accordion slider):

December 10, 2014 at 4:04 am #365823
Ismael
Moderator
Hi!

You can add html codes on the image caption. Make sure that the Display Excerpt? is enabled. Edit the accordion image then add the button code on the caption text. Something like this:
```
<a href="#" class="my-accordion-button">LISTEN LIVE VIA MOBILE</a>
```
Add the style of the button on Quick CSS:
```
a.my-accordion-button {
background: blue;
padding: 10px;
border-radius: 2px;
}
```
Cheers!
Ismael
December 10, 2014 at 8:57 pm #366224
truthbetoldmedia
Participant
Afternoon Ismael –

Thank you for the advice on adding a button via CSS. Unfortunately, that’s not the entirety of my question.
1) I am able to add HTML to the Caption/excerpt section but the hyperlink does not function correctly. It insists on bypassing the added links and using the overall image link (as if the HTML wasn’t even there). The simple HTML I used:
```
<a href="http://truthbetoldmedia.com/player/truthbetoldmediaplayer5enc.html" class="my-accordion-button"> Listen Live via Mobile</a><p>
<a href="http://tunein.com/radio/Truth-Be-Told-Media-s211255/" class="my-accordion-button">Listen Live via TuneIn</a><p><p>
<a href="http://www.truthbetoldmedia.com/mobile-connection-options/" <font color="FF00CC">Mobile Connection Options Help</a>
```
2) Is it/will it be possible to move the action buttons from the Caption/excerpt section over towards the center of the slide. Probably need a div there to hold it, but I’m not particularly well-versed in that enough to do it. (Essentially, moving the greenish area over onto the orange) Would you be able to help me get this arranged, please?

Thanks again for your help.
December 10, 2014 at 10:59 pm #366306
truthbetoldmedia
Participant
oops…accidental repost. (wish there was a way to delete)
- This reply was modified 10 years ago by truthbetoldmedia.
December 11, 2014 at 5:14 am #366469
Ismael
Moderator
Hey!

You can remove the default accordion link with this on Quick CSS but it will also remove the title:
```
#top .aviaccordion-slide-link {
display: none;
}
```
Move the caption with this:
```
#top .aviaccordion-preview-title-pos {
left: 20%;
bottom: 10%;
}
```
Best regards,
Ismael
December 15, 2014 at 4:14 pm #368325

truthbetoldmedia
Participant

Hello Ismael. Thank you for your help a few days ago. Unfortunately, the solution also created another problem.

I added the “remove default link” CSS that you provided; this worked great and I am able to add HTML directly. It also threw off the spacing of the slide itself though (see screenshot below)

How can I leave the “remove default link” CSS so the links work, but not have the slide dimensions change and/or add that huge white space?

December 16, 2014 at 3:59 am #368755

Andy
Inactive Moderator

Hi!

I can’t see any white space and your buttons seem to work as well. Could you fix it?

Regards,
Andy

December 16, 2014 at 4:32 am #368762

truthbetoldmedia
Participant

Andy –
Somehow I “accidentally” fixed the issue.
I moved all of the Quick CSS to my child theme’s style.css sheet and rearranged them. My guess is the space was being generated due to the order the CSS was being read, but, honestly, I have no idea why or how it was corrected.

I do, sincerely, appreciate all the time the kriesi.at team has taken in helping me get this sorted. A+, for sure. Thanks!
Author

Posts

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

The topic ‘How to: Add button to Accordion Slider image’ is closed to new replies.