Home / Forums / ePix Support / Move the Title/Caption

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts

  • RachelCollingwood
    Participant

    Hi, I’ve been trying to work out how to move the title/caption when using a gallery in grid form, though it does seem to be the same for other gallery layouts.

    The problem is that when using vimeo videos in a 3×3 grid, the caption covers up the fullscreen button. I worked out the CSS to move the caption to the top right – but then the container for the caption(though invisible) blocked the central play button.

    Examining the code using firebug in firefox I worked out a bit of a way to have the caption come in from the left instead of right(title on hover) but it was always up against the right side of the container, changing the CSS for caption-wrap to left etc instead of right made no difference.

    It should be really obvious what is needed to move the caption to hug the left of the container but for the life of me I can’t work it out.

    Any help would be appreciated.

    Thanks.

    EDIT: I should point out the site is not live currently it’s running on MAMP on my computer while I get it worked out


    RachelCollingwood
    Participant

    Hi,
    I may have solved it – I’m posting the bit of css needed here. This will put the caption in the bottom left(the right 10% is there to make sure that the fullscreen button on vimeo is not blocked by transparent container, you may not need that bit).

    .caption-wrap {
    right:10%;
    text-align:left;
    left:0;
    }
    .caption.content {
    float:left;
    }
    .caption.title {
    float:left;
    }

    .caption-wrap .caption, .caption-wrap .caption-hover, .custom-layer .caption-wrap.active .caption-hover, .nextItem .caption-wrap .caption, .prevItem .caption-wrap .caption {
    -moz-transform: translateX(-200%);
    -o-transform: translateX(-200%);
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
    }


    RachelCollingwood
    Participant

    Hi.

    well all was looking rosy til I looked at it on a phone. The title/caption covers up the central play button of the video. (or at least it does if you make the description long enough). It even seems to do this with just original css, ie no custom css. So there may be an issue with the theme in general.

    In case anyone else wants to check, it’s a gallery with a 3 column grid, with video embedded from vimeo with embed settings(set at vimeo) to only show fullscreen button(everything else not selected). With the gallery set to title & text on hover and image, and a caption set in the slideset manager(data source for the gallery) to

    Test Description of some stuff that may be long enough to muck things up if it overlaps the play button

    It does the same if the title and text are set to show always. It’s like the caption etc doesn’t respond to min width(what I’ve seen other repsonsive css do) I may be wrong though.


    Tom ( Support)
    Keymaster

    Hi,

    Unfortunately it is very difficult to cater for all different types of embed Vimeo, YouTube, JW Player etc and still have the captions showing up so they do not interfere. There are so many different combinations that the video hosting companies use that one has to suffer over the other if the box in which the video is in is not large enough for the caption to not affect it.

    If you are using a 3 column grid with Vimeo videos, it may cause the videos to show up quite small so the captions may go over the video. I can provide some CSS to change the position of the caption but apart from this, I cannot really go much further customizing wise.

    Try adding the following CSS to Appearance > Theme Options > Customize > Custom CSS.

    .caption-high .caption-wrap {bottom:40px;}

    You can add a class to the gallery and it will adjust the caption wrap. e.g. If you add caption-high to the group gallery Extra CSS Class it will adjust the position of the caption.

    Hope this helps.

    Kind regards,
    Tom

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

You must be logged in to reply to this topic.