Need help? Check out our Support site, then


Truly Minimal CSS: How to move sidebar down a tiny little bit?

  1. misterbaudelaire
    Member

    Hello dear friends,

    I am attempting to move the right sidebar down a little bit so that the top of the sidebar aligns exactly horizontal with the top of the content IN the post, instead of being aligned with the post title.

    The blog I need help with http://hearthehum.com

    Thanks very much for your assistance in advance.

    Take care.

    The blog I need help with is hearthehum.com.

  2. fabianapsimoes
    Staff

    Hi there!

    Give this a try:

    .widget-area {
        margin-top: 110px;
    }

    You can adjust the position of the sidebar by tweaking the "110px" value.

  3. misterbaudelaire
    Member

    Thank you very much. Your assistance is greatly appreciated.

    Many cyber hugs and smiles to you.

    Btw, should I start another thread to ask about Drop Cap for the first letter of each post?

    Thanks again, friend.

  4. fabianapsimoes
    Staff

    Sorry for the delayed response. Did you figure that one out? Right now, I'm not able to help you, since your blog is set to private.

  5. misterbaudelaire
    Member

    Hullo, that's perfectly fine my friend.

    Actually I didn't figure it out. I have now turned my blog off private and entered some dummy text if you care to have a peek.

    Thanking you in advance.

    :)

  6. fabianapsimoes
    Staff

    Hey there,

    Give this CSS a try:

    .entry-content > p:first-letter {
    font-size: 60px;
    float: left;
    margin: 5px 5px 0px 0;
    line-height: 45px;
    }

    There's an issue with this CSS code: It applies the drop cap effect to every paragraph in your post. I was trying to target only the first paragraph of your posts, but then I noticed you also have your images enclosed by paragraph (p) tags. Because of that, when I tried to target the first letter or the first paragraph in your posts, I was actually targeting the first image in your post.

    If you make sure your images are not within paragraph (p) tags, you can try the following CSS bit to apply the drop cap effect only to the first paragraph:

    .entry-content > p:first-of-type:first-letter {
    font-size: 60px;
    float: left;
    margin: 5px 5px 0px 0;
    line-height: 45px;
    }

    You can adjust all px values as you wish :) If you also want your drop cap to have a different color, just add "color: #cc0000;" to the CSS rule (replacing "#cc0000" for the color code you wish to use).

    Also, another thing: I noticed that you have inline styles for justifying the text of your posts. I don't know if you've been inserting that manually, but, if you have, you can skip that by adding the following CSS:

    .entry-content p {
    text-align: justify;
    }

    Hope that helps!

  7. misterbaudelaire
    Member

    If you make sure your images are not within paragraph (p) tags

    I'm not too sure what you mean by this comment. How do ensure the images are no within paragraph tags?

    Many thanks.

  8. fabianapsimoes
    Staff

    Oh, I'm sorry. I thought you could edit the tags out using the Text editor. However, from what I tested with my own blog, it seems you can't. Hm, it might be that there is no way to remove the paragraph tags wrapping the images.

    One hacky solution is to not use images before the first actual paragraph of your posts.

  9. misterbaudelaire
    Member

    I'll keep that in mind. Thank you for your wise counsel my friend. Your generous support is greatly appreciated.

    :)

Topic Closed

This topic has been closed to new replies.

About this Topic