bqworks

Hi. Are you using the lite version or the full version? If it’s the full version, you can set the Link Target option from the Miscellaneous sidebar panel to Blank. If you’re using the lite version you need to add this JavaScript code somewhere in your theme:

jQuery( '.accordion-slider a' ).attr( 'target', '_blank' );

Cheers

Hi. The accordion will take the size of the container that it is in. In this case the container is the one that changes its size and becomes wider and then the accordion simply adapts. There are some CSS media queries for the ‘#header-widget-area’ element that control this size.

Hi. Try this:

echo do_shortcode( ‘[accordion_slider id=”1″]’ );

Thank you for letting me know!

I can see some
tags before and after the img elements. Those could be caused by some code from the theme. Please try to temporarily activate one of the default themes and see if the problem persists.

Hi. When you select an image from the Media Library you can select its size from the Media Library’s right column.

Hi. You need to add this PHP code in the theme’s header.php file:


<?php
if ( is_front_page() ) {
echo do_shortcode( '[accordion_slider id="1"]' );
}
?>


Sorry for the delay! I took a look at the example you provided and concluded that it’s possible to achieve with some custom CSS:


.as-panel {
transform: skewX(-20deg);
}

.as-background {
-webkit-transform: skewX(20deg);
-ms-transform: skewX(20deg);
transform: skewX(20deg);
margin-left: -80px;
}

.accordion-slider {
margin-left: -80px;
}

You might need to adjust the values above to make it pixel perfect. I depends on the rest of the configuration.

When you select an image from the Media Library, in the right columns, under ‘ATTACHMENT DISPLAY SETTINGS’, you can set the ‘Link To’ option to ‘Custom URL’ and then specify the URL in the field below.

Sorry but that’s not my plugin. Please refer to the theme author.

Cheers

Can you show me an example?

I would need a link to the page. Please post it here or email it to me.

Cheers.

There’s some obtrusive CSS in the theme that affects the styling in the slider. That’s why the problem doesn’t occur in the preview. You can correct the problem by adding this custom CSS:

.accordion-slider .as-background {
max-width: none !important;
}

The accordion will behave the same way on mobile devices as it behaves on bigger screens. However, since the images are also scaled down and sometimes more of the image is shown, the accordion might not need to open as much as it does on bigger screens.

Well, if it works well in the preview, it means it’s a problem caused by the theme. This is always important to check.

Looking at your link I can confirm that. Your theme applies some CSS to all images from the page that have a link attached. You can prevent that in the accordion by adding some custom CSS to override the theme’s CSS:

.accordion-slider img {
    opacity: 1 !important;
}

I can also see some elements being added in the accordion’s HTML markup. This is probably done by the theme as well. I can give you some CSS to prevent it as well, but for a real fix you should address the theme’s author.

.accordion-slider br {
    display: none;
}