The Minimalist Minima Photoblog Template. ~ The Blog Doctor.
Loading...

The Minimalist Minima Photoblog Template.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

The Minima Template or Layout is used whenever you want to customize your blog any which way you want. There are no graphics used in the template as are used in the Rounders template. The Rounders and other templates with graphics are more difficult to customize as the images have to be resized to the new dimension.


Here I have attempted to simplify the Minima template further by making it a single-column template. This will enable bloggers to upload large photos or wide videos in their blog without worrying about the sidebar falling down!




This template is useful to bloggers who wish to show off their content without any distracting sidebars. The first step was to increase the width of the template :


This was done by simply getting rid of the sidebar code in the Template Code box :

  <div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


Then I increased the width of the main-wrapper in this code in the Template Code box :

#main-wrapper {
width: 660px;
....
}


This is the column containing the posts. If you want you can increase the width further depending on your monitor resolution. (Start button on Windows Taskbar---->Control Panel------>Display Properties----->Settings tab----->Lower left Screen Resolution in pixels).


Since the outer-wrapper contains the main-wrapper you have to increase width of former by same amount :

#outer-wrapper {
width: 660px;
...
}




The next step was to put in widgets in the footer. I have made three columns in the footer and you can add your widgets there. See picture below :





To outline the main column I have used a yellow color. If you wish to change the color you can change it in this code :

#main-wrapper {
width: 660px;
......
background:#ffff00 !important;
}

Change 'ffff00' to the hex number of the color you want and save template.


You can download the template here. Right click the link and choose "Save Link as" and save the XML template file to your desktop. Then upload template to blog.

This is a Layout template and cannot be used if you have a Classic template blog unless you upgrade blog to Layouts.



25 comments:

DocH said...

Good advice. One additional input. Instead of playing the "pixel" game - trying converting to "percentage". My blogger templates are set to maximize the screen, regardless of the width each viewer is utilizing. "660px" is changed to "100%", or there about, and whoever views gets to use their entire screen. Not just a narrow 800px strip of blog down the middle.

Obviously if you desire to keep the sidebar, then you need to split the 100% (75%-25%) between the main and sidebar. If large margins are desired around the wrapper, the total percentage for the main/side has to drop somewhat (95%-ish). With three columns, you can tailor as required too.

DocH said...

Good advice. One additional input. Instead of playing the "pixel" game - try converting to "percentage". My blogger templates are set to maximize the screen, regardless of the width each viewer is utilizing. "660px" is changed to "100%", or there about, and whoever views gets to use their entire screen. Not just a narrow 800px strip of blog down the middle.

Obviously if you desire to keep the sidebar, then you need to split the 100% (75%-25%) between the main and sidebar. If large margins are desired around the wrapper, the total percentage for the main/side has to drop somewhat (95%-ish). With three columns, you can tailor as required too.

Vin said...

Doch,

This can be done by loading the Minima Stretch Blogger template and then customizing it as above.

All the stretch templates available at Blogger use percentages to maximize the width.

PJ said...

I like Minima but want a much large header. Can you direct me to any instructions on how to do that

Vin said...

PJ,

In your Template Code box add height line to the header-wrapper code :

#header-wrapper {
width:660px;
height:200px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Increase 660 in the width line. You will also need to increase width of outer-wrapper as it contains the header-wrapper :

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Preview and save template.

PJ said...

Vin,
I'm looking at my html and looking at your instructions. To me my template looks like what you're telling me to do. I understand having to add to the outer wrapper and about changing the height and width but it already says 660 in the height. Do I add 660 to that to make 1320? Sorry to be so dense. I relly appreciate what you're doing here.

Vin said...

PJ,

What is the blog address?

PJ said...

I got it! Thanks!

PJ said...

Vin,
What I want is a fairly large header with the text centered in the middle. I want so much more than that but I'm on the learn-as you-go program. My blog is http://underatinroofsky.blogspot.com
Thanks for your help.

Vin said...

PJ,

Just a matter of changing the numbers here :

#header-wrapper {
width:1320px;
height 200px;
...
}

Click Preview after every change and save when satisfied.

PJ said...

How do I center the header?

Vin said...

PJ,

Have a look at the header tip in this post : 10 Quick Tips for Smarter Blogging.

ukreal1 said...

Hi,
I just want to make my images larger. I think I have the minima template. Could you tell me how to do that in the SIMPLEST way possible. I don't know anything about html, codes and all that. Sorry :o(
Pam

Vin said...

ukreal1,

Have a look at How to upload pictures without changing their size?

ukreal1 said...

Hi Vin,
I tried but it didn't work, obviously I am doing something wrong :o0
I see the codes, but when you say "paste the second link in code as shown below" what does that exactly mean?
Do I keep the 2 original codes and paste the img code at the end or do I replace one of the other codes with this new image code. Thanks you for any and all help :o)
Pam

Vin said...

ukreal1,

Here is another method :

First resize image in an image editor to the size you want it to show.

Make sure that it is smaller than width of posts column in your blog or it will break the template.

Then upload picture to Photobucket.com and copy the DIRECT LINK of the picture. Paste that in code below :

<img src="DIRECT_LINK"/>

Paste the modified code in Edit Html tab of post editor and publish.

ukreal1 said...

Thanks Vin,
I finally got the other way o work too (wasn't putting the space b4 the src!) So now I can do it both ways, but wish blogger would make a photoblog template!

bonnie. said...

hi vin.
i'm using this template it's great!
but i have just added a blog roll and it pushes the 'view my profile' link and my picture below the bottom black line, is there any way i can lower the black line to underneath my details?
thanks
bonnie

Elsie N Lopez said...

is there a way to make the minima stratch template black?

Vin said...

Elsie N Lopez,

See how to change the color of the columns.

i.am.my.new.favaddiction said...

Hi there,
I'm using Minima stretch lefty , I changed it so that I have the header alligned left, but I want to change the main wrapper (the part with the entry info) to about 3 times the current width so that it creates a horizontal scrolling bar in order to view the photos in the entry horizontally.
It's in percentages, and when I try to increase the percentage, the sidebar gets pushed to the bottom
Any help?
Thanks!! You're tutorials are very helpful btw:)

Vin said...

i.am.my.new.favaddiction,

The main wrapper width is already 67% of total in the stretch template. It cannot be increased beyond 100%.

The stretch template resizes according to monitor width. Hence there will be no scrollbar horizontally.

Try doing it in a normal Minima template.

K said...

Hi! I'm in the process of re-doing my blog and your tips and tricks have been amazing! I really appreciate what you're doing here. However, there is one thing I haven't found that you might be able to help with...

I want to create an image gallery of my paintings, laid out in table format (three cells wide across the page and however high) with each cell representing one Blog Post (they would get pushed over and down each time I add a new post). Is this something you've seen before or could help me figure out?

Thanks for any info!
- K

Vin said...

K,

Can you give address of blog where you have seen this?

Fatma Dwi said...

nice

CLICK TO LEAVE A COMMENT..... :-)



Skip to top of post.

Search Blog Before Commenting

Loading...

Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,

Vin.

The Blog Doctor The Blog Doctor2 Blog Doctor Home

SUGGESTED READING

Tips On Blogger and Latest News.



Skip to top of post.