Jump to content

That Vista Blog for WordPress v1.5.x


gtn

Recommended Posts

@ReidMedia: Remember that there's 5 color schemes to play with!

@Raul Montana: Uh... yeah. Right back at ya buddy :)

@DomFel: The widths are dependant on the images, so you'll need to resize them. Also, as it gets wider, the header section starts to look too short. Make the header taller and it just looks weird. I'll see if I can come up with a nice balance over the next week and make it a point release.

Link to post

Here is a little guide to change the width of this theme:

Open up the .css file in the folder of the colour you want and then modify these values:

#header

#content

#main

#side

input#s

#footer

#comments

#comments form

#comments input

For the Main Page:

First of all choose the width of "side", let's say 220px; multiply it by 3 and subtract 40 and use the result in "main" (620px). From the "side" widht subtract 40 and use the value in "input#s" (180px). Now to calculate the "content" side you must add "side"+"main"+80 and you'll get the "content" width (920px). The "header" value is "content"+40 (960px). The "footer" value is "header"+40 (1000px).

For the Comments:

First choose the width of "comments input" (i.e.: 200px). Multiply it by 3 and use the value in "comments form" (600px). Add 20px to "comments form" and you'll get the width of "comments".

Image editing:

Open up any image editing software and modify the following images:

comments.png - The width must be "comments"x3 (i.e.: 620*3=1860)

content.png - Width of "header" (i.e.: 960)

footer.png - Width of "header" (ie.: 960)

header.png - Width of "header" (ie: 960)

pre.pgn - Height of "header" (ie: 960)

Please note: except for pre.png, please DON'T modify the height of the other images, just edit the WIDTH.

Last note: to make the sidebar show up correctly, I modified #side like the following:

#side { float:right; margin-right:+40px; width:220px; }

Feel free to edit margin-right to move the sidebar left or right (you can use + or - values).

Before uploading the theme on the website, you can use preview.html to preview in real-time your mod.

I spent about 1 hour to figure out some simple maths to change the default theme width, I hope this little guide will help you out.

All the credits go to gtn for creating this great theme!

Link to post

Uhm... Looks like that "margin-right:+40px" I added to #side causes the main content to shift to the left if using IE6. This problem doesn't occur if using Firefox, Safari or Konqueror.

Actually that code is the only way to move the sidebar. If I delete that line, the sidebar will move too much to the right.

Any help to fix this bug in IE would be appreciated.

Link to post

@DomFel: IE has a bug known as "double-float-margin". That's causing your problem.

I'm sure the sidebar doesn't need margin - It looks out of place beacuse the background image is stretched (causing margins to increase).

Try making #content narrower, then increasing the side padding values (40px).

You'll end up with something like:

#content { width:910px; padding:0 45px 20px 45px; }

Playing with these values will let you adjust the side margins evenly on both sides.

Wait a few days and I'll redo the images using my original source files.

Then I can make a proper release out of this with the exact dimensions you've requested.

Link to post
  • 2 weeks later...
  • 2 weeks later...
  • 2 months later...

The connection has timed out

The server at www.sedoparking.com is taking too long to respond.

* The site could be temporarily unavailable or too busy. Try again in a few

moments.

* If you are unable to load any pages, check your computer's network

connection.

* If your computer or network is protected by a firewall or proxy, make sure

that Deer Park is permitted to access the Web.

O_o

Link to post
  • 1 month later...
  • 2 weeks later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...