18 replies to this topic

[tamarpostma]

Hi!

 

I'm using the quickslider on my home page:

 

www.i-english.nl

 

And I would like to put in the same overlay with text that is used on the featured slider. I am using this code but It's not working:

 

.fslider .fcontent {
    float: right;
}
.fslider .fcontent {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.35);
    color: #FFFFFF;
    display: inline;
    min-width: 220px;
    position: relative;
    text-shadow: 0 -1px 0 #000000;
    width: 33%;
}

 

 

Thanks!

 

Tamar

[catrina]

You may need to add #page to beginning of the CSS selector in order for the CSS to work. For example:

Please Login or Register to see this Hidden Content

[tamarpostma]

Thank you Catrina for the tip. Unfortunately it did not work! Any other suggestions perhaps?

[catrina]

Okay, the issue is that the fcontent selector you're using is only for feature slider, not for Quickslider, so the CSS isn't going to work. In order for you to have a text overlay, you need to use feature slider instead of Quickslider.

[tamarpostma]

I thought that might be the case! Unfortunately I need to use the quick slider since it can also be used in the wrap. So I will have to find a way around this.

 

Thanks again..

[Danny]

Hi Tamar, When you add text to your Slider in the Quick Slider setting, the text will automatically have a similar overlay for your text no custom code required.

Please Login or Register to see this Hidden Content

You also have multiple options for text position:

Please Login or Register to see this Hidden Content

[tamarpostma]

Hi Danny,

 

Thanks for your reply. The problem is I need the overlay to be transparent and the text to be black, so it fits in the box. I've been editing .flexcaption, but somehow it won't override the defaults. Is it possible this is not allowed somehow?

 

This is the code so far, I have managed to get the block partly in the black frame but the right and bottom edges are still outside and no matter what I do (margin, padding, em or px) nothing budges and in firebug the element goes back to the default settings.

 

.flex-caption {
   background:transparent;  
    zoom: 1;
       text-align: left;
        max-width: 42%;
        padding: 13px 5%;
        margin: 5px;
        position: absolute;
        right: 5;
        bottom: 5;
        background: rgba(1,1,1,.4);
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,.6);
        box-shadow: transparent;
        font-size: 15px;
        line-height: 1.5em;
}


p:before {
       content: "";
    display: block;
    height: 206px;
    overflow: hidden;
    width: 206px;
margin-right:5px;
}

 

Hope you can help!

 

Tamar

[tamarpostma]

Not working!

[tamarpostma]

Ok, so something odd is going on. I changed the slider overlay to transparent, saved the file and then all by itself the site reloaded and it was back to grey overlay. What's going on!

[Danny]

I recommend you read our custom CSS documentation, which has information on how to override the default CSS.

 

Please Login or Register to see this Hidden Content

 

Regarding your overlay transparent code is incorrect, its not valid, I recommend you read the W3Schools for the correct code with RGBA.

 

Please Login or Register to see this Hidden Content

[tamarpostma]

Hi Danny, Is it possible all this custom css is slowing down the site?

[tamarpostma]

Ok, I see. I got the code from the pagelines paste bin and just changed a few settings. I will look at the links you gave.

[tamarpostma]

One last thing. Sorry to be such a nuisance!

I have it almost the way I want it. But you say my code is a littel illegal. Is this going to be a problem, or is it so that if it works then it's ok?

[tamarpostma]

a

[tamarpostma]

I'm having really bad loading issues on the site. It's terribly slow and editing take 2 minutes to save and reload. Is this because of my code? Or is it a completely different problem. Also my code for the boxes on the other pages has gone haywire!

 

Please help!

 

Tamar

[Danny]

If your issue has been resolved, then use the resolved button, please do not ask multiple questions per post, as your topic title is related to customising the QuickSlider and not your page load time.

 

Therefore, can you create a new topic regarding your page load time issue please.

[tamarpostma]

ok! Sorry, I thought the loading of the page had to do with all the css code for the quickslider....

[Danny]

I apologise the QuickSlider shouldn't effect your page load time, this is either caused by either having a lot of plugins installed or the most likely cause is cheap web hosting.  However, create a new topic regarding this issue and we can investigate further.

[tamarpostma]

No problem. Cheap hosting highly likely.Thanks again!