WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Text AND image on slider panel? (5 posts)

  1. thedurl
    Member
    Posted 3 months ago #

    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.

  2. rdellconsulting
    Member
    Posted 2 months ago #

    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.

  3. thedurl
    Member
    Posted 2 months ago #

    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!

  4. ElectricFeet
    Member
    Posted 2 months ago #

    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!

  5. ElectricFeet
    Member
    Posted 2 months ago #

    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;
    }

Reply

You must log in to post.

About this Theme

About this Topic

Tags