One of the best features of Weaver II WordPress Theme is the large number of Layout Options it offers. The term Layouts in web design includes design features such as, the number of sidebars you have, the location of sidebars (right or left), the width of sidebars, single or double sidebars, and the width of your Content Areas (where you write your stuff).
You probably know what Fonts are already, but anyway: Fonts are the style of the letters of your text, and also the Size of the text. I’ll cover Weaver Font Options after I’ve covered Weaver Layouts.
Here is a screenshot from Weaver’s Help files to show the Layout options available.
The sidebars support three widget areas (Primary, Upper/Right, and Lower/Left). There are other widget areas supported, and will be described in upcoming posts.
My Second Million is using a single sidebar located on the right hand side.
How To Customize The Width of Content Areas and sidebars
These are controlled in Dashboard>Appearance>Weaver Admin>Main Options>Layouts: see screenshot below:
Here is how I have customized my Layout Settings for My Second Million.
I have set my Theme width to 1060px which is slightly wider than the Weaver Theme default width of 940 pixels.
In the case of My Second Million the Theme width is also the width of the Header Image. If you change the Theme Width here, the Header Image width is automatically changed as well.
Theme Width Fixed
I have left this check box unchecked…because I didn’t understand the instructions explaining what it does, and I didn’t need it.
Good news friends! The nice guys over at the Weaver Forum have just explained this function to me.
The Admin Panel>Layouts>Theme Width Fixed check box instructions says:
Force the theme width to be fixed (use CSS “width” instead of “max-width”). Using this option is not recommended. This setting will also “break” the Mobile View, so you should disable Mobile Support as well.
Translated for beginners, this means:
Theme width fixed means that the site will not scale down and adapt to the browser width, it will always stay the same width. As the browser window gets smaller, the site will therefore get clipped and you will get a horizontal scrollbar.
So I did the right thing originally after all. Did I mention how great the Weaver Support Forum is? It’s great. Login is next to ‘Discussions’, and Start a New Discussion is half way down on the right, at the bottom of the red banner: Posting Guidelines and Vanilla Help.
I kept the default Theme Margins: (Top and Bottom, and Left and Right) with a width of 20px because it looked OK. These Theme margins check boxes control the width of the outside areas which happen to be a dark blue color in My Second Million. Theme Margins surround the Theme width Content areas.
This dark blue surrounding Background color was chosen in Main Options>General Appearance, and was covered in the previous article: Unofficial User Guide: Weaver II Installing Weaver.
I reduced the Wrapper Padding from the Default width of 10px to 5 px because I thought it looked better.
But what is the Wrapper Padding, I hear you say….I found that out by changing the width in that Wrapper Padding Check box and seeing what effect it had on the website design. Here is a screenshot with arrows showing you the wrapper padding of My Second Million:
On My Second Million. it’s that white margin around the whole Theme. And on My Second Million, it is best seen between the Background dark blue, and the Header image at the top of the Page. (Sydney skyline image plus Text added and size changed to fit Header area, using Mac Preview).
My Sydney skyline image was initially not quite wide enough, and did not fill the header image space I’d set by using the Site Width in Admin Options>Main Options>General Appearance. So I made it wider in Mac Preview app. Now it fits with no space around it when uploaded into my Header area.
To see how to do that, check out:
- How to Make Logos with Mac Preview App and
- How To Resize & Shrink Photos in iPhoto & Mac Preview App
My Second Million has Single Column Sidebar on Right:
Blog Page Post Default:
This is where you choose the type of Content area and sidebar location. My Second Million uses Single Column, sidebar right.
this setting controls the layout of the Pages that are not the Home Page and Single Post Pages etc.
For example: Archive Pages, and Search result Pages. If you type something into the Search Box at the top of this page, and search, you will see what a One Column Content, no sidebar Page looks like with this setting.
There are other Weaver Pro options in this Layout Admin area. From my experience of 9 month’s use of Weaver free, I have not needed to have, or know about these extra options to set up My Second Million. But you can always upgrade to Weaver Pro if you want to get some more options to experiment with.
I will probably be upgrading soon, mainly to have more options for Fonts, but first I have to get this User Guide done and dusted.
The only other option to be chosen in this Layout section of Weaver Admin Options, is
Sidebar Wrappers Properties
Default Width for Sidebars:
I have mine set at 30%
To be honest I can’t remember what the default setting was, but I think I increased it to get to 30%. Increasing this option increases the width of the sidebar. You will notice that the width is in Percentages. This does make life tricky if you want to know how wide your sidebar is in pixels, which is what you need to know if you are going to upload Banner Ads and Subscribe Forms into your sidebar.
I worked out the width I needed by uploading a Google Ad into a widget in the sidebar and then I could see if the Banner ad was chopped off by a too-narrow sidebar.
By experimenting, I found that with a Theme Width of 1060 px, and the Default Width for Sidebars set at 30%, I could fit in a Medium Rectangle sized Google Adsense banner ad (300 x 250 px) into the sidebar with a slight margin to spare.
I assume that if you choose a narrower Theme Width in Dashboard>Appearance>Weaver II Admin>Main Options>General Appearance>Theme Width, you will have to increase the Percentage settings here in Main Options>Layout for your Sidebar width, if you want to have an Adsense Medium Sized ad in your sidebar.
The best way is by Trial and Error using a separate open Tab (with your Home Page visible), so you can make changes in one tab screen (showing Admin Options), Save Settings there, and then check the results on the second open tab screen (showing Home Page) by refreshing it, and seeing the results of your tweaking.
Once again, there are more options available for sidebars if you upgrade to Weaver II Pro, which are greyed out for the Free version that I am using. Their use is not covered in this article. So we can move on to……Fonts! Yes!
these are located next along the Admin Main Options Menu after Layouts, at
Dashboard>Appearance>Weaver Admin>Main Options>Fonts:
The Weaver default Font size is 12 px and that is what My Second Million uses. It’s easy to experiment – just change the font size, save settings and see how it looks. If you don’t like it, just change it back again. It’s easy, and a personal choice.
The same goes for the Content Font and Titles Font choices. There are lots of Fonts to choose from. I sometimes change the Titles font on the individual Post’s Edit Page if I think that my default Font is not looking quite how I want it. But I always stick with Ariel for the Content font – like 99% of all other bloggers.
Alright! Layouts and Fonts are done! And today, I will not reward myself with some well earned chips…..No, tonight I’m going for… a Chocolate Tim Tam! Yes! (Besides, I already had some chips earlier, but don’t tell anyone).
Disclaimer: Please do not take my reward choices as personal advice…and if you do…don’t blame me, it’s not my fault, and I am in no way liable for the outcome. Just to be clear.
Why not Subscribe to our you-beaut Newsletter – it’s easy and it’s free! To keep in touch with the latest at My Second Million, just click on the Subscribe Button below, and check your Spam folder if you don’t get a Confirmation Email within a couple of minutes.