CTA Featured Threads & Portal

CTA Featured Threads & Portal [Paid] 2.17.0

No permission to buy (£40.00)
Overview FAQ Updates (36) Reviews (199) History Discussion
The slider is purposely hidden until it has fully loaded.
Otherwise you would see all the images stacked on the page.

The more images you have and the larger those images are (KB), the longer it will take to load.
 
Brogan said:
The slider is purposely hidden until it has fully loaded.
Otherwise you would see all the images stacked on the page.

The more images you have and the larger those images are (KB), the longer it will take to load.
Click to expand...
Oh, thanks for that info.
 
Brogan said:
Nice one.

Make sure you copy the two images from the default style directory to your custom style directory.
They are currently missing.
Click to expand...

Thanks. Cannot find the right place to put these to save my life. @Audentio - can you let me know where to copy these files?

Brogan said:
There are two new images for the slider: cta-featured-threads-slider-controls.png and cta-featured-threads-slider-loader.gif
You will need to copy them from styles\default\images to any custom style directories you have.
Click to expand...

I tried dropping them in styles/uix but that didnt seem to work.
 
It's probably going to be styles\uix\images.

Unless you have a different directory for the style you have in use.
 
Brogan said:
I would just like to publicly state that this has now been resolved.

I am ultra cautious with regards to who I sell to, but @Nevil has satisfied me that there's no reason why I shouldn't sell to him.
Click to expand...
Was really going to ask, because I become curious :)

Btw, is it possible to get slider controls image like you have on your site? It looks nicer to me.
 
I just created my own images.

http://cliptheapex.com/styles/cliptheapex/images/cta-featured-threads-slider-controls.png

I am currently making changes to the CSS for the slider (for 2.11).
The play/pause controls are now in the bottom right, so they don't overlap the pager if there are lots of entries, and the left/right controls change height based on the screen width.

upload_2014-7-25_22-48-31.webp

The pager and play/pause controls are also hidden now at narrow widths.
 
Like the bottom right position of play/pause controls.

I don't like those big arrows in a circle. Thanks for the image, but I guess I need to change settings after upload.
 
Yes, you will need to change the CSS to match the new sprite.

Here's mine - don't copy it all as some of it won't apply.
Just change the background positions for the sprite.
Code: 
/**
* BxSlider v4.1.2 - Fully loaded, responsive content slider
* http://bxslider.com
*
* Written by: Steven Wanderski, 2014
* http://stevenwanderski.com
* (while drinking Belgian ales and listening to jazz)
*
* CEO and founder of bxCreative, LTD
* http://bxcreative.com
*/

.ctaFtSliderWrapper
{
    visibility: hidden;
    height: 0;
}

.bx-wrapper
{
    @property "ctaFtSlider";
    margin: 8px auto;
    position: relative;
    *zoom: 1;
    @property "/ctaFtSlider";
}

.bx-wrapper img
{
    @property "ctaFtSliderImage";
    max-height: 400px;
    display: block;
    width: 100%;
    @property "/ctaFtSliderImage";
}

.bx-wrapper .bx-loading
{
    min-height: 50px;
    background: url(@imagePath/images/cta-featured-threads-slider-loader.gif) center center no-repeat @textCtrlBackground;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

.bx-wrapper .bx-viewport
{
    @property "ctaFtSliderContainer";
    background-color: @contentBackground;
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
    @property "/ctaFtSliderContainer";
}

.bx-wrapper .bx-pager
{
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.bx-wrapper:hover .bx-pager,
.Touch  .bx-wrapper .bx-pager
{
    opacity: 1;
}

.bx-wrapper .bx-controls-auto
{
    position: absolute;
    bottom: 51px;
}

.bx-wrapper .bx-pager
{
    position: absolute;
    top: 8px;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager
{
    text-align: center;
    width: 100%;
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.bx-wrapper:hover .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager,
.Touch .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager
{
    opacity: 1;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto
{
    right: 5px;
    width: 28px;
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.bx-wrapper:hover .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto,
.Touch .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto
{
    opacity: 1;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item
{
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a
{
    background: @dimmedTextColor;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 2px;
    outline: 0;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active
{
    background: #000;
}

.bx-wrapper .bx-controls-auto .bx-start
{
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 10px;
    outline: 0;
    background: url(@imagePath/images/cta-featured-threads-slider-controls.png) -63px -14px no-repeat;
    margin: 0 2px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active
{
    background-position: -63px -2px;
}

.bx-wrapper .bx-controls-auto .bx-stop
{
    display: block;
    text-indent: -9999px;
    width: 8px;
    height: 10px;
    outline: 0;
    background: url(@imagePath/images/cta-featured-threads-slider-controls.png) -75px -14px no-repeat;
    margin: 0 2px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active
{
    background-position: -75px -2px;
}

.bx-wrapper .bx-controls-direction a
{
    position: absolute;
    top: 40%;
    margin: 0 2px;
    outline: 0;
    width: 13px;
    height: 20px;
    text-indent: -9999px;
    z-index: 999;
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.bx-wrapper:hover .bx-controls-direction a,
.Touch .bx-wrapper .bx-controls-direction a
{
    opacity: 1;
}

.bx-wrapper .bx-controls-direction a.disabled
{
    display: none;
}

.bx-wrapper .bx-prev
{
    left: 6px;
    background: url(@imagePath/images/cta-featured-threads-slider-controls.png) no-repeat -32px -2px;
}

.bx-wrapper .bx-next
{
    right: 6px;
    background: url(@imagePath/images/cta-featured-threads-slider-controls.png) no-repeat -47px -2px;
}

.bx-wrapper .bx-prev:hover
{
    background-position: -2px -2px;
}

.bx-wrapper .bx-next:hover
{
    background-position: -17px -2px;
}

.ctaFtSliderFooter
{
    @property "ctaFtSliderFooter";
    font-family: Arial;
    color: rgb(255, 255, 255);
    background-color: @tooltipBackground;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    @property "/ctaFtSliderFooter";
}

.ctaFtSliderThreadTitle
{
    @property "ctaFtSliderThreadTitle";
    font-weight: bold;
    font-size: 14px;
    padding-top: 8px;
    padding-right: 8px;
    padding-left: 8px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal;
    @property "/ctaFtSliderThreadTitle";
}

.ctaFtSliderThreadSnippet
{
    @property "ctaFtSliderThreadSnippet";
    font-size: 12px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal;
    @property "/ctaFtSliderThreadSnippet";
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
    .bx-wrapper .bx-controls-auto
    {
        display: none;
    }

    .bx-wrapper .bx-pager
    {
        display: none;
    }

    .bx-wrapper .bx-controls-direction a
    {
        top: 35%;
    }
}
</xen:if>
 
You must log in or register to reply here.

Similar threads

AndyB
Featured threads lite [Paid]
Replies
1
Views
55
mrdoitnyce
M
Russ
  • Suggestion Suggestion
Featured Threads widget should use featured image if one is set
Replies
0
Views
114
Russ
Russ
A
Which featured thread addon do you use?
Replies
3
Views
414
Matthew S
Matthew S
DTS
  • Question Question
XF 2.2 Thread Title Background Image for Featured Threads?
Replies
2
Views
871
DTS
DTS
P
  • Locked
Add-on Trouble using the [TH] Featured Threads and Content
Replies
1
Views
1K
Paul B
Paul B
Top Bottom