Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Moving the title from the side to the top

  1. notchangingmyname
    Member

    Hello. I just bought the CSS customization. On my home page it has previews of my posts, with a thumbnail of the featured image all the way left, and then the title and preview to the right. I would like to change so that the title comes first, like this:

    TITLE

    (image) Blah blah blah, here is the first paragraph of my post...etc.

    Any help would be greatly appreciated.

    The blog I need help with is notchangingmyname.com.

  2. notchangingmyname
    Member

    While I'm at it, I'd also like to change the size of that thumbnail. :-) thanks!

  3. jarretcade
    Member

    Did you still need help with this?

  4. notchangingmyname
    Member

    Yes please!

  5. jarretcade
    Member

    Unfortunately you can't really get the image to display how you want without editing the theme files which isn't an option. You can however get the image to display to the right of the title/post text by using

    .entry-thumbnail {
    float: right;
    margin: auto -15px auto 10px;
}

    in your custom CSS. Also due to the way the theme is coded, changing the image thumbnail size isn't an option.

  6. notchangingmyname
    Member

    Thank you for you help. But what I'm looking for is actually this, with the title on a separate line and the image to the left:

    http://notchangingmyname.files.wordpress.com/2012/06/css-request.jpg

    I created that in photoshop. If only I could do it for real I'd be set! haha

  7. designsimply
    Staff

    This actually isn't a simple change because of how the HTML elements happened to be ordered. I tried testing out a few things and I came up with the following CSS which you can use as a starting point:

    #content article {
	position: relative;
}
.entry-title {
	display: block;
	position: absolute;
	left: 0;
	overflow: hidden;
	height: 30px;
	width: 550px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.entry-thumbnail,
.entry-content {
	display: block;
	padding-top: 43px;
}

    Test it out and see if it does what you want.

  8. notchangingmyname
    Member

    Thanks! That worked perfectly. It did create a new problem (when I went to the actual post, the title overlapped with the part where it says "this entry was posted in etc. etc."). But - shocker - I was actually able to fix it myself!

    Again, thanks for your help :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags