[Solved] Need help adjusting blog width

[daisybelle]

First of all, thanks to Paulie D and Skirarg for helping me yesterday. I feel like I’m imposing on you, but I just have a few more tweaks and my blogskin will be finished.

Skirarg helped me make the post area 600px, and Paulie gave me the code to center the post. That works great, but now here are my other issues.

My sidebar is not centered, the images are left aligned and I need code to center that area.

I also want my centered sidebar size to be changed to 300px wide.

And finally I want to change the width of the body of the template, so that it is more narrow, and then i will have more background showing. I want it to be 1140 px.

The way this template is built is not what I’m used to, and I can’t go in and change widths like I have in the past, that’s whats giving me problems.

Again, thank you so much for the help. I’ve struggled so much trying to do this without asking for help, but it is just beyond me.

Here’s the link to Jan’s Daily Dish

[Paulie_D]

The sidebar seems to contain ‘widget divs`

Assuming they all have a class of .widget you can use this

.widget img {
display:block;
margin:0 auto;
}

That should center just the images in elements with class of .widget.

[Paulie_D]

At the moment the sidebar is 31.33% wide (based on .grid-4) and adjusting the sidebar to a fixed width would really mean breaking the grid currently being used so it’s, perhaps, not the optimal option.

[Paulie_D]

However, if you are determined to limit the width of the page, this would probably do it

#container {
background: #FFFFFF;
width: 88%; /* I think this is the grid default */

max-width: 1140px; /* this is the maximum you wanted */

padding: 2%;
margin-top: 25px; 
margin-bottom: 25px;

margin-right:auto; /* this, and the left property will center the page */
margin-left:auto; /* this, and the right property will center the page */

-webkit-border-top-right-radius: 18px;
-moz-border-radius-topright: 18px;
border-top-right-radius: 18px;
-webkit-box-shadow: 0px 0px 6px #C1BFBF;
-moz-box-shadow: 0px 0px 6px #C1BFBF;
box-shadow: 0px 0px 6px #C1BFBF;
}

This should reduce the sidebar to c. 357px at max-width.

[Paulie_D]

Forgot to mention.

ALWAYS keep a copy of the previous CSS (or template) just in case something goes horribly wrong.

Blogger will let you download a copy and you can save multiple versions to re-upload in case of emergencies (or bad advice).

:)

[daisybelle]

Paulie, thank you so much. My body is now reduced, my photo in the sidebar is centered,

You have gotten me farther with this than I ever thought I could get. People say just learn to code, and trust me, if I could comprehend it I would. HTML isn’t so bad, but CSS and I just aren’t compatible. Unfortunately, I’m an old dog, and it’s hard to learn new tricks.

There is one other thing, my header titles in my posts are left aligned to the body, I would like them to align with the image and the text, so that they are aligned directly even with the beginning of the pictures and the posts but I don’t know how to move the title over.

I posted a new blog entry just to see if it changed, but it hasn’t.

Thanks again for helping me, you have no idea of how much time you’ve saved me. I probably would have just thrown in the towel had it not been for this forum. ~ Jan

[Paulie_D]

<center></center>

This element has been removed from HTML5…you have to use a centered div instead.

I’ll take a look at the rest when I get back to my desk….but that could be a few hours.

There is one other thing, my header titles in my posts are left aligned to the body, I would like them to align with the image and the text, so that they are aligned directly even with the beginning of the pictures and the posts but I don’t know how to move the title over.

We’ll probably have to limit the width there but, to be honest, you might want to think about centering those headings…I think it would be more in keeping with the rest being centered.

[daisybelle]

Paulie, I thought I replied to you, but apparently I didn’t.

It’s fine to keep the Title left aligned. It’s looking good now, I have my sidebar widgets centered, the only thing I want to do is to move the body down 150px from the top so that more of the background shows. If you could give me that code, I think I can take it from here.

Thank you again for all the help. I would have never gotten this accomplished without this board. ~ Jan

Jan’s Daily Dish

[Paulie_D]

Apologies…I got called away for a day or so.

More space at the Top

This is controlled by the margin-top value on your #container div

#container {
    /* other properties not shown for clarify */
margin-top: 150px; /* change this to suit */
}

Post titles

If you want these to be left-aligned ‘in line’ with the paragraphs etc. it can be achieved bu restricting the width to 600px and centering.

BUT this may cause longer titles to break on to two lines…

However, if you decide to proceed..

h3.post-title {
   /* other properties removed for clarity */
max-width: 600px; /* add this */
margin: 0 auto /* and this */
}

[daisybelle]

Paulie, that worked exactly the way I wanted it to! I have one more alignment issue and I’m finished!

I went ahead and aligned the title posts with the paragraphs, I really like it that way, but now at the bottom of the posts, my “Posted by Jan, etc. and all my social icons need to move over as well to align with the paragraphs, as they are still let aligned to the left of the page body. If you could help me with this I think I’m finished.

Thank you once again for giving your time to do this. Everything you’ve told me to do has worked perfectly! ~ Jan

Jan’s Daily Dish

[Paulie_D]

It’s much the same procedure as before

.post-header, .post-footer {
     /* properties deleted for clarity */
max-width: 600px;
margin: 0 auto;
}

TBH, If I was starting over I might have found a more elegant way of making all those adjustments at once but I’m pleased that it’s to your liking.

[daisybelle]

I don’t care about how it’s inserted, Paulie, I’m just absolutely thrilled that it WORKS!

I’ve done okay until now, when I used templates that gave actual pixel numbers, I could fidget with the numbers and make adjustments, but this css just threw me.

The only thing I ever use coding for is my blog templates, which I like to change often. I do have an ecommerce site, which I built using Zen Cart, and that’s a whole other beast.

But anyway, I realize I do need to know more about CSS so I can do it myself. Can you steer me to some type of CSS tutorial that is specific for Blogger, or is there such a thing?

WordPress seems to be where it’s at these days, and they have wonderful templates, but I’ve used Blogger for ten years now, and I’m afraid to switch, I don’t want to lose my archives.

You do a wonderful job as moderator, I mean that sincerely. Those of us who don’t understand coding get so frustrated, spending hours and days sometimes just trying to make it work to no avail, and it is such a relief when someone gives you their time, stepping in to help you accomplish the end product.

Thank you so much!

[Paulie_D]

Can you steer me to some type of CSS tutorial that is specific for Blogger, or is there such a thing?

I wish I could but Blogger is pretty user-unfriendly when it comes to proper customising their basic options.

I know that there are places where you can get templates that can be uploaded by the Blogger interface but (from what I recall) isn’t particularly accepting of how it’s widgets interact with them.

I do know that you can download all the content / templates from Blogger (at least you used to be able to…it’s been a while).

Whether there is a method of transferring that content to WP, I do not know.

[daisybelle]

Thanks for the info, Paulie, I somehow need to try and figure this all out. I live a few blocks from a university, maybe I should think about a class in the fall.

[Author]

Posts