Slide in styling to look like so...

If it isn't too much trouble, could someone give me some CSS to help me to make my slide in look like this?

Thanksies =)

  • Predrag Dubajic

    Hey @Meredith,

    Hope you're doing well today :slight_smile:

    This is quite different from default look so it might need a bit more work, here is something to get you started.

    First create new Slide-in, as title use "Want to learn..." text and in content add one thumbnail with your fish image and after that add your link.

    Now in Slide-in > Global Settings for "Message width" set somewhere around 350px, and for "Message style" select minimal.

    And now add this custom CSS in field below:

    .wdsi-slide-minimal .wdsi-slide-wrap {
        border-top: none;
        background: none;
        box-shadow: none;
    }
    
    .wdsi-slide-minimal.wdsi-slide-right .wdsi-slide-share {
        border: none;
    }
    
    .wdsi-slide-close {
        float: right;
        width: 31px;
        overflow: hidden;
    }
    
    .wdsi-slide-close a {
        padding: 0 9px;
        background: #A7A7A7;
        color: #fff;
        border-radius: 50%;
    }
    
    .wdsi-slide-minimal.wdsi-slide-right .wdsi-slide-close {
        left: auto;
        right: 0;
    }
    
    .wdsi-slide-minimal .wdsi-slide-content {
        border: none;
        height: 90px;
        border: 5px solid #65FF65;
        background: #fff;
    }
    
    .wdsi-slide-minimal .wdsi-slide-content img {
        border-radius: 50%;
        border: 10px solid #65FF65;
    }
    
    .wdsi-slide-minimal .wdsi-slide-content p > a:last-of-type {
        position: relative;
        bottom: 23px;
        right: -120px;
    }
    
    .wdsi-slide-minimal .wdsi-slide-content h1 {
        font-size: 15px;
        font-style: normal;
        font-weight: normal;
        position: relative;
        right: -110px;
        bottom: 10px;
    }
    
    .wdsi-slide-minimal .wdsi-slide-content p > a:first-of-type {
        position: relative;
        top: -50px;
        left: -60px;
    }

    Note that this is just a starting point since these changes could take quite some time to make so you might want to hire a developer for further assistance.

    You can post a job in our job board where you can hire a developer to assist further:
    https://premium.wpmudev.org/wpmu-jobs/
    Please note that, no WPMU official staff members are allowed to work in the job board.

    Best regards,
    Predrag

  • Adam Czajczyk

    Hello Meredith!

    I have an idea though! It should be lots easier than using CSS to style the whole thing. Can we make that picture I showed you slide in? and just link to my popup?

    This is doable I think. The steps would be as follows:

    1)

    First create new Slide-in, as title use "Want to learn..." text and in content add one thumbnail with your fish image and after that add your link.

    Instead of "fish thumbnail" just use "Add media" button to add entire image.

    2) Click on an image and make it a link to an URL of your choice (just like in case of any other WP link in post)

    3)

    Now in Slide-in > Global Settings for "Message width" set somewhere around 350px, and for "Message style" select minimal.

    4) Add following rules to the Custom CSS box below:

    .wdsi-slide-minimal .wdsi-slide-wrap {background:none!important;border:0!important;box-shadow:none!important;}
    .wdsi-slide-control {display:none;}
    .wdsi-slide-title {display:none;}
    .wdsi-slide-content {background:none!important;border:0!important;}

    This will probably require some further tweaking as well but I think it's close to what you wish to achieve and you should be able to adjust it a bit, if needed.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.