Jump to content


Photo
- - - - -

quickslider overlay


Best Answer tamarpostma , 31 January 2013 - 12:39 PM

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

Go to the full post


  • Please log in to reply
18 replies to this topic

#1 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 30 January 2013 - 04:28 PM

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



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 30 January 2013 - 04:50 PM

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



#3 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 30 January 2013 - 06:55 PM

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



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 30 January 2013 - 07:31 PM

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.



#5 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 30 January 2013 - 08:17 PM

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



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 13019 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 30 January 2013 - 09:53 PM

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



#7 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 31 January 2013 - 10:31 AM

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



#8 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 31 January 2013 - 10:39 AM

Not working!



#9 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 31 January 2013 - 10:43 AM

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!



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 13019 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 31 January 2013 - 10:53 AM

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



#11 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 31 January 2013 - 10:54 AM

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



#12 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 31 January 2013 - 10:55 AM

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.



#13 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 31 January 2013 - 10:59 AM

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?



#14 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 31 January 2013 - 11:03 AM

a



#15 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 31 January 2013 - 11:31 AM

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



#16 Danny

Danny

    Is Awesome!

  • Moderators
  • 13019 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 31 January 2013 - 11:48 AM

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.



#17 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 31 January 2013 - 12:39 PM   Best Answer

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



#18 Danny

Danny

    Is Awesome!

  • Moderators
  • 13019 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 31 January 2013 - 12:50 PM

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.



#19 tamarpostma

tamarpostma

    Advanced Member

  • Members
  • 44 posts
  • Framework Version:the latest!
  • Country: Country Flag

Posted 31 January 2013 - 12:53 PM

No problem. Cheap hosting highly likely.Thanks again!