Archived

This topic is now archived and is closed to further replies.

  • 0

quickslider overlay

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

18 answers to this question

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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. http://d.pr/i/ECzX You also have multiple options for text position: http://d.pr/i/6wTD

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Not working!

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

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

 

http://support.pagelines.me/docs/customization/custom-css/

 

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

 

http://www.w3schools.com/cssref/css_colors_legal.asp

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

a

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

No problem. Cheap hosting highly likely.Thanks again!

Share this post


Link to post
Share on other sites

Posted · Report post

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

#page .fslider .fcontent

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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..

Share this post


Link to post
Share on other sites