WordPress.com

1. senhorasdanossaidade
   Member
   Oct 3, 2012, 1:35 PM

   Hi, I have Yoko theme. I managed to do some changes with widgets and css (I have Custom Design). But there's a few things I can't figure out (I'm new at this css stuff).

   http:senhorasdanossaidade.com

   1. I want posts to look exactly the same once you open them as they look once they are displayed on homepage. They turn a lot wider once you enter them and that messes up the look.

   2. And, this is important, the text from the posts almost enters the sidebar, so close they are to one another. So, if I could put every post (the ones in the homepage and the ones opened) in the same homepage format, and pull them a little more to the left, closer to tha date and author, that would be perfect.

   3. Is there any way that I can make only the newest post totally visible on the homepage, and the rest just with a little bit of text visible?

   Thank you so much, I really apreciate any help you can give me.

   Best,
   Blog url: http://senhorasdanossaidadedotcom.wordpress.com/

2. designsimply
   Staff
   Oct 10, 2012, 8:36 PM

   1. I want posts to look exactly the same once you open them as they look once they are displayed on homepage. They turn a lot wider once you enter them and that messes up the look.

   To figure this out, I looked at the original CSS for the Yoko theme, and I found the CSS used to set the content area width. I noticed that a different class is purposely used in Yoko for single posts so they could style them differently. On the home page, .entry-header is used in the selectors but on single posts, .single-entry-header is used:
   https://s1.wp.com/wp-content/themes/pub/yoko/style.css?m=1349282437g&minify=false

   I copied some of the CSS, updated the selectors and added a little. Now you can work with the CSS to move those page elements around or adjust it until it looks good to you.

   Here is a CSS example to get you started:

   #content .single-entry-header, #content .single-entry-content {
   	position: relative;
   	float: right;
   	margin: 0;
   	width: 74.5%;
   }
   
   #content .single-entry-header > p {
   	position: absolute;
   	left: -210px;
   	top: 5px;
   	padding: 2px 18px 0 0;
   	width: 22.507%;
   }
   
   #content .single-entry-header p .byline {
   	display: block;
   }

   Another tool you should also definitely check out, if you haven't already, is the web inspector built into the latest browsers. You should be able to right-click something on a page and select "Inspect Element" to see the HTML and the CSS that applies to it.

3. designsimply
   Staff
   Oct 10, 2012, 8:39 PM

   2. And, this is important, the text from the posts almost enters the sidebar, so close they are to one another. So, if I could put every post (the ones in the homepage and the ones opened) in the same homepage format, and pull them a little more to the left, closer to tha date and author, that would be perfect.

   Try making the container element smaller, like this:

   .one-sidebar #content {
   	width: 98%;
   }

   Adjust the number to your liking.

4. designsimply
   Staff
   Oct 10, 2012, 8:41 PM

   3. Is there any way that I can make only the newest post totally visible on the homepage, and the rest just with a little bit of text visible?

   There is not a way to do that with CSS only.

   One thing you might do is use the more tag on your posts:
   http://en.support.wordpress.com/more-tag/

   Leave it off of your latest post. Then when you add a new post, edit the previous post and add the more tag.

5. foldyouso
   Member
   Oct 17, 2012, 7:45 PM

   Hi!
   Thanks for asking very relevant questions for us Yoko-users, senhorasdanossaidade! I managed to figure out the sidebar-problem on my own (yey!), only to discover that it totally messed up how the website looks in mobile version. (when you view it on the phone). So I changed it back in the stylesheet, but it's still messed up on the phone.

   I also wondered how you're able to change the colors on the posts when you open them. By some sort of luck I've managed to change the color on the homepage, but I can't seem to find out how I change it when you open it.

   Best,
   Vera, http://www.foldyouso.com

Topic Closed

This topic has been closed to new replies.