Ippo theme, change caption, right sidebar alignment & spacing…

  • Unknown's avatar
    erickuns · Member ·

    Hi:

    The captions under the photos are center aligned and not as wide as the photos. I’d like to make them left aligned and as wide as the photos.

    Within an individual post, the right sidebar is not all the way to the right of the page (as it is on the homepage). If possible, I’d like to move it over further, flush right, and make it right aligned or center aligned.

    I’d like to create more room on individual posts for the main body of text.

    I’d also like to make my quotes wider, and the quote icon a little darker.

    Thanks so much. I’ve looked through the forum and my eyes are bugging out, so I decided to ask directly.

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

  • staff-mckluskey · Staff ·

    Hi there!

    It sounds like you’d like quite a few modifications to your theme. They may be done with some custom CSS.

    The captions under the photos are center aligned and not as wide as the photos. I’d like to make them left aligned and as wide as the photos.

    Try adding this code to My Site>Design>Customize>CSS:

    /*Center aligns the image captions*/
.aligncenter .wp-caption-text {
    margin-right: 0;
    margin-left: 0;
    text-align: left;
    max-width: 100%;
}

    I’d also like to make my quotes wider, and the quote icon a little darker.

    /*Make the blockquote wider*/
blockquote::before, q::before {
    color: grey;
}
blockquote {
    max-width: 600px;
}

    You can adjust the width according to your needs, the current width is 400px. You can also replace the word grey with any RGB color code.

    As for the rest of the changes you’d like to do, they are quite big ones and it’s never a good idea to do this directly on the theme as the code we add may break other parts of the site. In those cases, if you do not wish to change your theme, it may be best to create a child theme and upload it to your site. This, however, would require plan Business.
    If you’d like more help with that, please reach out via https://wordpress.com/help/contact and we’ll see what can be done.

    I hope that helps :)

  • Unknown's avatar
    erickuns · Member ·

    Thanks Fresaotomica!

    I had no idea you responded. I must have not clicked “email notification” or missed it, or something. I bookmarked this page, and just checked it on a whim. Voila, you’d responded the day after I asked my question. Thanks fo much. I inserted the CSS and it worled splendidly.

    I understand about the other more dramatic changes. I’ll just not worry about those.

    One more thing that I think can be changed. When I insert a video, there’s no space beneath it and the next paragraph of text. Can I change that, so it’s similar to the spaced after pics?

    Thanks, so much.

  • fstat · Staff ·

    Hi there,

    One more thing that I think can be changed. When I insert a video, there’s no space beneath it and the next paragraph of text. Can I change that, so it’s similar to the spaced after pics?

    Can you point me to a page where you’ve embeded a video so I can see how it can be done?

  • Unknown's avatar
    erickuns · Member ·

    Sure. In my last post, there’s a video at the bottom. There’s no space between the video and the next line of text, which says, “~ Ends” (as in the post ends there). I could put in a manual return, but I think I had problems with that actually appearing.

    Robert Williams and the Art Documentary, “Mr. Bitchin'”

  • staff-mckluskey · Staff ·

    In this case, I’d rather suggest using the new Block Editor. There, you shouldn’t have issues with spacing, you won’t need shortcodes to embed videos and, if needed, you can also add the Spacer Block:

    https://wordpress.com/support/wordpress-editor/blocks/spacer-block/

  • Unknown's avatar
    erickuns · Member ·

    Hi:

    I’ll look into the block editor, but that won’t help the formatting over over 700 posts on my blog where the spacing after videos is non-existent. Can I get CSS to put some spacing after videos?

    Thanks.

  • staff-mckluskey · Staff ·

    Try modifying the number you see here:

    /*Adds space below videos*/
.jetpack-video-wrapper {
    margin-bottom: 1.6em;
}

    You can increase or decrease it to your liking.

  • Unknown's avatar
    erickuns · Member ·

    Thanks, but it didn’t work. Maybe it’s because of some of the other CSS I already have.

    /*
    Welcome to Custom CSS!

    To learn how this works, see https://wp.me/PEmnE-Bt
    */
    div.jetpack-likes-widget-wrapper {
    width: 100% !important;
    }

    input[type=checkbox], input[type=radio], .woocommerce form .form-row .input-checkbox {
    display: block;
    }

    a {
    color: #191970;
    }

    /*Center aligns the image captions*/
    .aligncenter .wp-caption-text {
    margin-right: 0;
    margin-left: 0;
    text-align: left;
    max-width: 100%;
    }

    /*Make the blockquote wider*/
    blockquote::before, q::before {
    color: grey;
    }

    blockquote {
    max-width: 600px;
    }

    /*Adds space below videos*/
    .jetpack-video-wrapper {
    margin-bottom: 2.6em;
    }

    Note that I have switched to the block editor.

  • staff-zinnia · Staff ·

    That CSS works when I test it in the Inspector Browser View. What size are you trying to change the number to on this bit? 

    /*Adds space below videos*/
.jetpack-video-wrapper {
    margin-bottom: 1.6em;
}

    Is it ok if I try to add it directly to the site?

  • The topic ‘Ippo theme, change caption, right sidebar alignment & spacing…’ is closed to new replies.