Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #23141

    Hi there

    I was wondering if it was possible (and if so how) to make changes to the border and background of the secondary images in the main slider on the homepage. I want to try and use a customised border that is more in keeping with the rest of the site, and change the background of these images.

    Ideally, what we would like to do is create a customised border that looks the same for all three images, except it’s a slightly different colour for the one that is ‘active’ in the main part of the slider. Is it possible and which files would I need to edit? I’ve attached an image to give you a better idea of what I’m looking to achieve.

    http://img826.imageshack.us/img826/2660/sliderscreenshot.jpg

    Thanks

    #118694

    Hi,

    This is not perfect but this will get you started. Add this on your custom.css.

    .slideThumb {
    background: transparent url(../images/background/background.jpg) center no-repeat !important;
    padding: 15px 15px;
    border: none;
    margin-bottom: 0;
    }

    .style_border {
    display: none !important;
    }

    .thumbnail_wrap_vert .thumbnails_container .slideThumb {
    margin-bottom: 0;
    }

    You need to create your own background file.

    Regards,

    Ismael

    #118695

    Hi Ismael

    After being away on holiday I’ve finally managed to have a look at the code you sent through and it’s certainly got me a lot closer than I was. The only issue now is that the active thumbnail doesn’t have a border at all (I’d ideally like to be able to set it to have a different border to the other two thumbnails), and try as I might I can’t get a border around the main image.

    This is the code I’m using for the main image:

    #top .slideshow .featured {background: transparent url(http://emzo.co.uk/wp-content/uploads/2013/06/main-slider-bg.png) center no-repeat !important;

    border: none;

    margin-bottom: 0;

    }

    It’s obviously not working, but do you know what I need to change to get a border around the main image in the slider as well.

    Also, do you know what I need to do to get a border around the active thumbnail?

    I’ve attached a link to a screenshot so you can see where I’ve got to.

    http://img829.imageshack.us/img829/9967/sliderscreenshot2.jpg

    Thanks again for your help.

    Matt

    #118696

    Hi,

    You can change the border style of the active thumbnail using this

    .slidethumb.activeslidethumb .style_border {
    background: red;
    }

    I don’t think it is possible to put a border on the active main image but you can designate a style for each of them, if you have 3 slides, you can use this respectively.

    .featured.featured_container1 {
    /*YOUR STYLE HERE */
    }

    .featured.featured_container2 {
    /*YOUR STYLE HERE */
    }

    .featured.featured_container3 {
    /*YOUR STYLE HERE */
    }

    Regards,

    Ismael

    #118697

    Hi Ismael

    I’ve been playing around with this ‘challenge’ over the last couple of months and I’ve managed to get the borders for the thumbnail sorted. Just in case you’re interested, I was able to sort the border for the active thumbnail out with the following code:

    Code:
    .activeslideThumb .style_border{
    background: transparent url(http://emzo.co.uk/wp-content/uploads/2013/06/secondary-img-border.png) center no-repeat;
    display:block;
    position: absolute;
    height:100%;
    width:100%;
    }

    I am still, however, struggling with the border around the featured image in the slider. I tried the code you suggested and it nearly works. The problem is that the image in the slider overlays the background image, so the border I’ve added is only visible at the start of the transition and then it is hidden. I tried stripping the background out of the images, but then I just get the flashes of the black background every time the image transitions. The code I’m using to try and bring the background forward using z-index is below, but it doesn’t work – I don’t know if you have any other ideas?

    Code:
    .featured.featured_container1 {
    background: url(http://emzo.co.uk/wp-content/uploads/2013/07/main-slider-border.png);
    z-index: 100;
    position: absolute;
    }

    Thanks for all your help.

    Matt

    #118698

    Hi Matt,

    We would need to see what you have now live and inspect the code a bit. Z-index is kind of a mess to use sometimes if you haven’t planned for it from the beginning.

    Regards,

    Devin

    #118699

    Hi Devin

    Thanks for getting back to me. It would be great if you could have a look at the site. It’s still in development but I’ve made it live temporarily so you can have a look and see what I’m trying to do.

    http://emzo.co.uk

    Thanks for your help and any advice on how to add a permanent border/background to the main image in the slider would be appreciated.

    Matt

    #118700

    Hi,

    Please add this on your custom.css or Quick CSS

    .slideshow .featured {
    border: 1px solid black;
    height: 99% !important;
    width: 99% !important;
    }

    Regards,

    Ismael

    #118701

    Hi Ismael

    Thanks for taking another look at it but I tried the code you suggested and it still doesn’t seem to work. It adds a black border, which we don’t want, and the image that I want to be shown as the border (which flashes up before the image loads) is still being pushed behind the actual image of the product. I’ve changed the border colour to white as I’ve kept the site live so you can have another look at it and I don’t want the black border showing, but it’s the same code as above.

    Is there any thing else you’d suggest?

    Thanks again for all your help.

    Matt

    #118702

    Hi,

    You can apply the border background on this selector.

    #top .slideshow {
    background: #f8f8f8 url(IMAGE URL HERE) center center no-repeat;
    }

    The size of the border background image should be 690x337px.

    Or you can add a simple border with this:

    #top .slideshow {
    border: 1px dotted black;
    }

    Please hire a freelance developer to do the modifications for you.

    Regards,

    Ismael

    #118703

    Thanks Ismael

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Customising the Slider Background and Borders’ is closed to new replies.