Purpose theme: removing shadow/border from gallery images

  • Unknown's avatar
    dianebeddoes · Member ·

    I want to use flat icons as links to other places on my site and have inserted these in a thumbnail gallery. But the images have an ugly border & shadow. Can I get rid of these with css? I’ve tried the suggestions made for other themes, but none of them seem to work. Thanks.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    siobhyb · Member ·

    Hi there!

    You can use the following custom CSS to remove the shadow around gallery images: 

    .gallery-icon img {
    box-shadow: none;
}

    I can see that you’ve already been experimenting and learning about CSS. :) If your interested, we also put together a workshop that’s more centred around using CSS with WordPress.com sites here:

    https://cssworkshop.wordpress.com/

    We’ll be happy to help if any extra questions come up too.

  • Unknown's avatar
    dianebeddoes · Member ·

    Brilliant – thank you. I am experimenting – I suspect not very elegantly though. The other thing I want to do is add links to the images in the galleries (the logos on the ‘Experience’ page) – I’ve played around but can’t work out how to do this to external links – only to the internal links from the icons. Any suggestions? Thanks.

  • Unknown's avatar
    siobhyb · Member ·

    Hi there,

    There isn’t a built in way to link the images in your galleries to an outside source. I have, however, added a “vote” for such functionality to our internal tracker, where we keep track of demand for different features.

    There is, however, a CSS workaround.

    I can see you’ve already added a HTML text link to the caption field for one of your images. You can next add the following CSS to reposition that link so that it covers the image:

    .wp-caption-text a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wp-caption-text a:hover {
    background: none;
}

.gallery-item {
    position: relative;
}

    Please note that the above CSS will effect any captions added to the images for all of the galleries on your site.

    If you’d like to target the galleries on certain pages only, then you can add a selector that identifies a particular page at the very beginning of each CSS snippet. For example, .page-id-142 can be added to target the Experience page.

    Let me know if that’s clear or if extra questions come up. :)

  • Unknown's avatar
    dianebeddoes · Member ·

    Hi, thanks for this. I’m fiddling around with it to see if I can get it to work on the Experience page – so far no luck. My other links are internal – to other places on my site – but the ones I wanted to put in are external. I’ve tried putting in the href etc in the same way, using Academy of Medical Sciences, for example – but that doesn’t seem to work. I thought I could set the caption to white font so it didn’t show – is that possible? (But the link doesn’t work yet anyway….). It would be good if this feature could be added as an option in the gallery – otherwise I’ll have to work out another way of including logos in the site! Thanks.

  • Unknown's avatar
    siobhyb · Member ·

    Hi there,

    The following would work with the Experience page:

    .page-id-142 .wp-caption-text a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.page-id-142 .wp-caption-text a:hover {
    background: none;
}

.page-id-142 .gallery-item {
    position: relative;
}

    Can you enter some HTML text links to the caption area of images on that page and then try the above CSS? If it doesn’t work, reply back here and I can take a look.

  • The topic ‘Purpose theme: removing shadow/border from gallery images’ is closed to new replies.