WordPress.org

Support

Support » Themes and Templates » Text AND image on slider panel?

Text AND image on slider panel?

  • Not referring to slider images that are behind the text, I’m curious if it’s possible to add an image (a CD or book cover) along WITH the text above the slider image.

    The idea is to highlight products on the slider itself.

Viewing 4 replies - 1 through 4 (of 4 total)
  • If you had 3 slider images, would you want 3 extra/different images appended to the 3 slider Titles? Or the same image on all 3 slider images?

    Link to your website would help.

    Unique text/images on top of unique slider images. Example: slider image of a guitar; then CD cover art with text describing the CD. Next slider image would be Captain America’s shield; then DVD cover and text describing the DVD.

    My website is still “in progress” and I’ve not made it live at this point.

    Thanks!

    Well, I’ve just learned another neat trick today 🙂

    If you just want one image next to the main title, for example, you can use the pseudo element :before to add content before the h1.

    Luckily for you, the latest version of Customizr has a different class for each slide, so if you can use Firebug or Chrome/Safari developer tools, you can get the slide number (slide-###) to target each slide.

    Then in your Custom CSS / stylesheet you can add the following:

    .slide-243 .carousel-caption h1:before {
        content: "";
        /* Substitute your image url on next line*/
        background: url(http://lorempixel.com/40/40/);
        position: absolute;
        height:40px; /* Change to image height */
        width:40px; /* Change to image width */
        margin: 0;
        left: 79px;
    }
    .carousel-caption h1 {
        /* Change to image width + some extra space between image and title*/
        padding-left: 50px;
    }

    Neat!

    Except it’s not responsive. You’ll need to play around with the CSS, using ems, rather than pxs. Also using media queries for the smaller viewports.

    This is nearer for a 3-slide slider:

    .slide-123 .carousel-caption h1:before,
    .slide-159 .carousel-caption h1:before,
    .slide-10 .carousel-caption h1:before {
        content: "";
        background: url(http://lorempixel.com/40/40/) no-repeat;
        position: absolute;
        height: 1.5em;
        width: 1.5em;
        /*margin: 0 0 0 5%; 5% on desktops; */
        left: 0;
        top: 0;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Text AND image on slider panel?’ is closed to new replies.