I’ve sorted through comments and emails to comprise another list of your questions and their answers. Let’s get right to it!
The first question pertains to my Calla Lily Tank post from last week.
If you enjoyed this post, subscribe to Positively Splendid to receive updates, and join us on Facebook and Twitter!
Jessica from Jessabells asks…
Where do you find the magnets [for the back of the brooch]?
Those are the magnets generally used for business name badges. I purchased mine at a local office supply store. It is possible they carry them at some craft stores, but the last time I looked, they didn’t carry them at my local Hobby Lobby.
***
Teresa from Blooming on Bainbridge asks…
Do you resize your HUGE pics (which I love by the way!) in blogger or somewhere else? And what size is that pic?
For resizing my pics, I let Blogger do all of the work for me. I used to have to go in and manually adjust my picture size in HTML to override the old editor and allow me to post those extra-large photos (what a pain!), but when I switched to the new editor, I was very pleased to see they had added an “X-Large” sizing option to the menu. So, all I do is upload my photo as usual, and when I place it in my post, I choose that “X-Large” option. Easy peasy! In using this method, photos are 640 pixels, which means they will be too wide to show up properly in any of the default (non-stretch) Blogger templates. It is necessary to manually adjust the code in your template to accommodate photos of this larger size. (By the way, any time I refer to Blogger templates, I am talking about the old-school templates and none of the new ones Blogger introduced a few weeks ago. I haven’t even begun to work with those yet! All of the steps I am about to describe I have tested in the old Minima template.)
NOTE: Before you do any tinkering with your template, I strongly urge you to back it up by downloading a copy of it to your hard drive! Blogger makes this extremely simple, providing a link to do so right at the top of the Edit HTML page.
Log into your Blogger account and click on the Design tab. From there, choose Edit HTML. Now, search for the section of code under the following heading (use Ctrl + F to do this easily):
/* Outer-Wrapper
Just below that heading, you will see something that looks like this:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
The value I have highlighted in red above is the overall width of the content area of your blog. In order to be able to widen our main posts area, we first need to widen that. 1000 pixels is a safe value to replace that number with, since it will generally show up well across the spectrum of screen sizes and in different browsers.
So, your new code should now look like this:
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Very good! Now, scroll down a wee bit until you see the following:
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
The highlighted area above is the width of your main posts column. In the Minima template, you can see the default setting for the width of the main posts column is 410 pixels. Because 410 pixels is obviously not as wide as the 640 pixels of our photos, therein lies our problem in having them display properly. Rectifying that issue is actually quite simple. Replace 410 above with 700, so your code looks like this:
#main-wrapper {
width: 700px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Now, let’s adjust our sidebar so that it is a bit wider, too. Scroll down until you see:
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Let’s increase the width of our sidebar to 250 pixels by replacing 220 above with 250. Your code will now look like this:
#sidebar-wrapper {
width: 250px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Excellent! Now, you need to adjust your header so it will reflect the increased width of the rest of your blog. Use Ctrl + F to locate the section of code that begins with this:
/* Header
Under that heading, you will see a section of code that looks like this:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Replace 660 with 1000, so your code looks like this:
#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Now, do a PREVIEW to make sure you are satisfied with your changes. If you are happy with the overall look you’ve achieved, click Save Template. Your blog is now wider and ready and raring to display all of your oversized photos!
***
From Malia of Yesterday on Tuesday…
What is VBS?
VBS stands for Vacation Bible School. It’s basically a little 5-day evening camp we hold at our church for kiddos in the community to come and play games, do crafts, sing songs, and – most importantly – learn about Jesus and how much He loves each and every one of us. I have such fond memories of the VBS’s I took part in when I was a little girl, and it is so much fun to see my kiddos now participating!
Happy Hump Day!
Having grown up in a home brimming with sewing notions and paintbrushes, Amy has a deep love for all things creative. On any given day, you’ll find her knee-deep in her latest creative endeavor, with projects ranging from sewing and crafts to home decor and kid-friendly ideas. Amy believes that everyone, regardless of skill level or experience, possesses the ability to create something beautiful, and Positively Splendid was born of her passion for helping others harness their innate creative potential.
Thanks for the info on making a wider template!
I also have such fond memories of VBS as a kid! I can’t wait until next year when my daughter is old enough to attend!
I am super excited about the ideas for widening my template!! This is absolutely fabulous…. thanks, Amy!
I am super excited about the ideas for widening my template!! This is absolutely fabulous…. thanks, Amy!
You are so good with the tech stuff too…I am amazed!
I’m back I have a question – your tutorial page looks AMAZING!!!! How did you do that!?
If you want to resize your blogger blog, it is way easy now! Just log on and under Design use the new Template Designer. You just slide the button to the right to increase your blog width to 1000px and then do the same thing to resize your sidebars and maind post area!!
Thank you so much for answering my question.
I think the magnet idea is fantastic. It give you the option of changing styles without ruining your shirt.
Jessica
Lol, VBS sounds like some kind of disease. Glad to know that you don’t have some syndrome and are enjoying the Bible, lol.
I finally got a chance to use your template widening tutorial. Not quite as wide as 1000, but a little bigger than what I had. Worked like a dream! Thanks so much, Amy! Hope you’re doing well!
It also goes too far to say the least and causes many serious side effects that go beyond the expected dry skin
[url=http://www.clearskin.net/viewtopic.php?t=670&highlight=accutane ]accutane other names [/url]
[url=http://www.clearskin.net/viewtopic.php?t=651&highlight=accutane ]accutane works [/url]
http://www.clearskin.net/viewtopic.php?t=4838&highlight=accutane
http://www.clearskin.net/viewtopic.php?t=670&highlight=accutane
http://www.clearskin.net/viewtopic.php?t=5425&highlight=accutane