Full Width Slider
  • Hi,
    I have install a full width slider on my web page using web plus x 8 i have remove text in the slider (the caption) but still shove on the screen black box in bottom left corner?... or how to place caption on center of slider,? also trite to put image on top of this full width slider ( center) but object or search bar i place on this slider, go behind the slider and is not visible - can we fix this issue.. how to make this visible.

    Thank you.
  • Hi,

    If you want to remove the captions completely from the slider and not have any black boxes with you deleting the captions text, then you need to edit each image call so it only calls the image and has no more active div commands, a typical call would then look like this

    <!--Start Slider Image-->
    <div style="background-image: url(full-width-images/1.jpg)">
    <!--End Slider Image-->

    And not the default full code of something like this

    <!--Start Slider Image-->
    <div style="background-image: url(full-width-images/01.jpg)">
    <div class="slide-desc">
    <h2>Full Width Slider</h2>
    <p>For WebPlus... It's what you've all been waiting for <a class="more" href="#">More</a></p>
    <!--End Slider Image-->

    With regards to things placed on the top of the slider and not showing, you will have to provide a link to the problematic site/page as I have just added an image directly on the page here using the full width slider and also a search box and both show ABOVE the slider.

    Hope this helps
  • Thank You Mike I will try this tonight
  • In regards to changing the placement of the caption on the slider. Would you be able to provide me with an example on how to center my caption on the middle of each image that I have within the slider? As well as the font and color? I am not 100% sure how to do so and would benefit from having a visual example.
  • The changing of the fonts and their colours can be achieved by opening the frag box you have dragged onto the page (The asset file) and then look for the code not dissimilar to the below

    .slide-container .slide-desc { background: #000; } /* Caption background colour */

    .slide-container .slide-desc > h2 {
    color: #fff; /* Caption title colour */
    font-family: Helvetica,Arial,sans-serif; /* Caption title font family */
    font-size: 25px; } /* Caption title font size */
    .slide-container .slide-desc > p {
    color: #fff; /* Caption text colour */
    font-family: Helvetica,Arial,sans-serif; /* Caption text font family */
    font-size: 16px; } /* Caption text font size */

    .slide-container .slide-desc > p a.more { color: #D3D3D3; } /* Caption hyperlink colour */

    The /* at the end of each line tells you what exactly you are about to change (change only the hex values for a colour change or the px value for a size change, DONT change anything else or you may break things)

    With regards to centralising the caption boxes, I would strongly not recommend this because the boxes cannot have specific sizes assigned to each caption and you can only set one lot of parameters, therefore, should you set a size to centralise, it will be fine for maybe one caption box, but should the next one contain more text or less text, the box then moves away from central and looks terrible, much better to leave the boxes on the left where they then span to the right, regardless of how much text each caption has.
  • Thank you Mick
  • My pleasure
This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion