WordPress.com

1. tarinoel
   Member
   Apr 25, 2012, 1:34 AM

   I am trying to narrow the page slightly. I know I could widen the background but then it doesn't show on all machines. If you look the text is flowing into the side. I looked up several suggestions but nothing seemed to change it.

   http://tarifaris.wordpress.com/

   The blog I need help with is tarinoel.wordpress.com.

2. timethief
   Member
   Apr 25, 2012, 4:14 AM

   Hello there,
   The blog linked to your username is an empty free hosted WordPress.com blog wearing the Kubrick theme. All CSS editing is theme specific. If that's not the blog you purchased the custom deisgn upgfrade for then please post an active link starting with http:// to the blog in question.

3. jackiedana
   Happiness Engineer
   Apr 25, 2012, 4:18 AM

   If you have the custom design upgrade, you can change your CSS file as follows:

   #wrapper {
        margin: 0pt auto;
        width: 900px;
   }

   The original width was 980px; making it 900px looked good to me, but you could play around with it a bit to make sure that works for you.

4. designsimply
   Staff
   Apr 25, 2012, 3:29 PM

   Excellent start here!

   If you squish the main wrapper, you'll also want to adjust the widths for the content, posts, and sidebar in this theme so the sidebar doesn't fall to the bottom. Here's how and you can adjust the widths to your liking. Note that the "#content .hentry" width and padding should add up to the "#content" width value, and the "#content" and "#sidebar" widths should add up to less than or equal to the "#wrapper" width value.

   #wrapper {
   	width: 820px;
   }
   
   #content {
   	width: 607px;
   }
   
   #content .hentry {
   	padding-left: 107px;
   	width: 500px !important;
   }
   
   #sidebar {
   	width: 200px;
   }

   If you adjust the width, your header image will no longer fit. You can adjust it by replacing the image manually. Here is an example:

   #custom-header-img img {
   	display: none;
   }
   
   #custom-header-img {
   	display: block;
   	background: url(http://tarifaris.files.wordpress.com/2012/04/banner3.png?w=820) no-repeat;
   	width: 820px;
   	height: 167px;
   }

   If you want to use a different image, change out the url() value and adjust the width and heigh accordingly.

5. tarinoel
   Member
   Apr 25, 2012, 9:53 PM

   This has been great thanks so much.

   One more thing. My other pages follow the same format only they don't have the date thing on the side so it runs into my background. If I make it narrow enough for my Other pages to work then it looks too narrow for the first page. Any ideas?

   Main Page: http://tarifaris.com/
   Other Page: http://tarifaris.com/who-is-tari-faris/

6. designsimply
   Staff
   Apr 26, 2012, 3:19 PM

   Try adding a separate rule to move the content area on pages a little to the right and widen it, like this:

   #content .hentry.page {
   	padding-left: 20px;
   	width:600px!important;
   }

7. designsimply
   Staff
   Apr 26, 2012, 3:24 PM

   Couple other suggestions:

   To make the line for the date info on the left smaller, adjust these numbers:

   .post-date {
   	margin-left: -77px;
   	width: 65px;
   }

   To make the search box on the right smaller so it doesn't stick out:

   #searchform {
   	width: 200px;
   }
   
   #searchform #s {
   	width: 104px;
   }
   
   #searchform #searchsubmit {
   	width: 70px;
   }

8. tarinoel
   Member
   Apr 27, 2012, 12:35 AM

   Thanks so much - you are awesome!!!

Topic Closed

This topic has been closed to new replies.