Posted at 13-05-2008 @ 13:17 by ..::DeUCeD::..
You know how things are, you wake up one morning and you feel like you ‘ve been assigned a mission! I was lucky cause I was given two choices, first was to save the planet but I thought that this is already done. So I ‘ve chosen the second, to make a theme with lots of screws! Not an easy job but someone had to do it! That’s how Screwdriver theme begun.
And this is a page for Screwdriver where I ‘ll post new releases, fix bugs and make anything to keep those screws tight! Feel free to comment about Screwdriver theme or visit the Forums if you want more extended answers about customization.
Enjoy!
SCREWDRIVER 1.3
DOWNLOAD
theme for WordPress 2.5.X
Demo: ScrewDriver’s PageSCREWDRIVER WB 1.0
DOWNLOAD
static html template
Demo: Static Page LinkLast Update @ 21 July 2008
I always hear people saying that they need web 2.0 templates that don’t look like a blog, need a third column etc. Well, Screwdriver proudly looks like a blog! It’s a rather dark and dirty metal design which i prefer (as an old hard rock biker)!
As you can see there are two releases, a widget ready theme for Wordpress 2.5.X and a html template for anyone wanna built a static website full of screws! Screwdriver theme for Wordpress and Screwdriver WB are validated XHTML 1.0 Transitional with CSS level 2.1 and you can check it by clicking the buttons at the top left sidebar box!
- Important Notes
Screwdriver template has a main “disadvantage”, it uses PNG images as a background, which have transparency. IE 7, Firefox, Opera and Safari show the shadows BUT NOT IE 6 which cannot read them correct and it’s replacing the shadows with an ugly color. There are a couple of solutions but either doesn’t work for repeated backgrounds or work but destroy any links over them. That’s why I chose to have a small separate CSS file, which IE 6 reads and replace the PNG’s with GIF’s without the nice shadow effect that background images have. At first I thought that was a pitty but then I though “Hey, it’s 2008! we cannot always have IE 6 in mind! enough is enough!”, so I gave IE 6 some GIF’s to make the website readable and that’s all! Here some screenshots for IE6 and other browsers to compare.
Internet Explorer 6
Internet Explorer 7, Firefox, Opera, Safari
One important thing to have in mind is that Screwdriver theme for Wordpress requires WP-PageNavi plugin to fill the bottom bar after the main content. It has it’s own CSS file and you can adjust it to match Screwdriver’s colors. DO NOT FORGET to install it!
- Usage - Customization
- Post area is 460px wide so don’t put images with a larger width cause you ‘ll break the design. You can also assign the class=”image” in your image code which makes a 10px white space with a border around the photo but that’s gonna make you limit the max width to 440px so you choose (like the screenshots above).
- Each widget/box is 200px wide. Putting small pics or ads is great but I advise you to limit the max width to 180px to leave a space around them (as i do).
- There ‘s also a small search bar if you choose to enable the default search widget.
- How about changing the background? I have a second image for testing. Open style.css, find the line: background: #333333 url(’images/iron.jpg’); and change iron.jpg to wood.jpg and then check your site with a wooden background. Not a very clear image but you will notice the difference. Find one of your own, upload it to images folder and just change the name in style.css!
- There is also space on the left top place in the header and there’s where you are gonna put your LOGO image. Make an image about 220px X 80px (transparent GIF would be great) and upload it in your image folder. Then open header.php and replace the logo.png inside the DIV class=”logo” with the name of your own image!
- I have also include a screw.png in images folder which is used for blockquotes but you can use it use it in your posts too. Get it, rotate it and save it again with different names and use lots of screws!
- One more thing you could do is add a bar at the top of the main content like the one I have in static demo website. Open index.php and write the following code right after div id=”content”. Do the same for single.php and/or page.php if u want it there too replacing with links and text of your own.
For those that wanna dive in photoshop and make deeper changes, just ask and I will provide you the source PSD template to play with and make better screws!
- Changelog
v1.3: Fix for native avatars WP2.6
v1.2: Security fix in searchform.
v1.1: Small bug fixed for password protected pages/posts.
v1.0: First release.
- Licence
Screwdriver is released under Creative Commons Licence and that means you can use it wherever you like and the way you want for free BUT you CANNOT sell it, claim as your own or make profit from it without my permission. I would also be happy if you keep the footer with a link back but that’s not necessary, do as you like.
- Credits
Credits go to Photoshopcafe which helped me design a simple screw with it’s great tutorial and to Texto which made a precious article about designing your own WordPress theme. Hey, thx guys!
16-05-2008 @ 22:25
[...] Name : Screw Driver Theme Author : Deuced This Theme Best For : Personal [...]
25-05-2008 @ 00:05
[...] du thème : chez Deuced Démonstration : la VO, ma VF Téléchargement : Screwdriver-fr.zip [ 1 [...]
25-05-2008 @ 06:55
[...] ScrewDriver [...]
25-05-2008 @ 07:57
[...] ScrewDriver [...]
25-05-2008 @ 09:35
[...] ScrewDriver [...]
25-05-2008 @ 12:46
I hope no one got screwed during the production of this theme
Corny, but I wanted to say it, heh. Good job though as I have yet to see a WP theme heavily laden with images and yet, still look good.
26-05-2008 @ 06:49
[...] ScrewDriver [...]
26-05-2008 @ 07:42
Hey Jeff,
i hope noone will get screwed during the installation of this theme!
BTW, that’s why i named it SCREWDRIVER, if u havent one then do not try to install it!
26-05-2008 @ 17:41
Thank you! Your blog is very cool!
28-05-2008 @ 22:44
[...] ..:: Author’s Website :: Preview Theme :: Download ::.. ~ (No Ratings Yet) Loading [...]
30-05-2008 @ 17:34
Cool!
30-05-2008 @ 18:25
Yet can be cooler!
But maybe in my next theme.
Thx Webtager and Dan.
01-06-2008 @ 07:04
Hello,
Is there a way to adjust the top banner where the site name goes? The name of my site goes off the right side of the page and I think if I were able to delete your logo and the orange graphics and then center my site name I would be okay. Can this be done? Please advise.
Thank you. This is the coolest template ever, you did a great job on it! I hope I can get it to work!
01-06-2008 @ 07:05
Seems my top banner is out of alignment too, a couple positions too far to the right. How do I adjust this?
01-06-2008 @ 16:19
Hey David
I’ ll tell you a few things and then it’s up to you to decide te best customization for your wordpress installation. As you can see there ’s a background image as a HEADER and over that image it goes a logo (left top) and a title or image (top right).
Easiest solution is open style.css file which is inside screwdriver’s folder and (with a NOTEPAD) scroll down and find these lines:
.title {
border: 0px;
width: 400px;
font-size: 50px;
font-family: Georgia, Verdana;
font-weight: bold;
margin: 35px 0px 0px 0px;
float: left;
text-align: center;
}
.description {
font-size: 10px;
font-family: “Lucida Sans Unicode”, Verdana;
font-weight: bold;
color: #574B06;
margin-top: -5px;
}
.logo {
border: 0px;
width: 220px;
height: 80px;
font-size: 10px;
font-family: “Lucida Sans Unicode”, Verdana;
font-weight: bold;
margin: 35px 60px 0px 80px;
float: left;
text-align: center;
}
Now set the font-size of TITLE to 40px or 30px. Then your TITLE will be reduced but will also be centered (and smaller and you may have to adjust the margin, you decide). If you are pleased keep it that way finding the best size. It ’s a space of 400px width and can be replaced by a logo image of that width at your header.php (as i have done).
As for the left top logo, its an image 220X80. If you can make a logo at that size it ll fit perfectly. If you have a logo smaller then adjust CSS values. If you don’t want a logo image, you can replace it with a text at the header.php file and change values at LOGO section at your style.css file.
I wouldnt advise having ALL the header with just your title cause there s a scew in the middle which will break the design. If you need further assistance please let me know.
05-06-2008 @ 04:36
I do’nt think I will use it but it’s really beautyful!
05-06-2008 @ 07:16
Well CiNNeR, it’s not a generic theme that can easily be used by everyone but, at least, it’s not boring!
12-06-2008 @ 23:13
special, but with a great look!
16-07-2008 @ 11:37
[...] ScrewDriver [...]