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 this is already done. So I ‘ve chosen to make a theme with lots of screws! 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.7
DOWNLOAD
from WordPress repository
theme for WordPress 2.7.X
Demo: ScrewDriver’s PageSCREWDRIVER WB 1.0
DOWNLOAD
from this site
static html template
Demo: Static Page LinkLast Update @ 12 March 2009
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 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, 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 inside Screwdriver’s folder already adjusted to match Screwdriver’s colors. DO NOT FORGET to install it!
- Usage – Customization
- Post area is 460px wide and images max-width is 440px. 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).
- You can now use the new WP 2.6.X caption which also makes a 10px white space around the image and above it the description you want.
- 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.7: A fix for paged comments link
v1.6: Added PAGED comments (not threaded) and new functions for WP 2.7.X.
v1.5: Fix for WordPress repository.
v1.4: Fixes for closed comments image caption.
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 General Public License and that means you can use it wherever you like and the way you want for free BUT you CANNOT claim it as your own. 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!
13-04-2009 @ 15:39 [ID:10475]
Hi to put my logo in header i replace the text with what? if i put the name of my file, go to header and replace the lines you said for the name of my file but in screwdriver it apears the name of my file, how i put a image there?
I already have the image, i know what the text in header to replace, but i don´t know how to identify the image.
Some advise please
Thank´s
13-04-2009 @ 16:12 [ID:10476]
Open header.php with a text editor (notepad) and find the following lines:
Anything you put inside the DIV with class=”logo” is gonna be put in the left side of the header area. My header has something like this instead of the default:
So check your image URL and put it inside that DIV and you are done!
20-04-2009 @ 23:38 [ID:10492]
Hi deuced i can´t enter in forum so i put my doubt here.
I had a problem with screwdriver, the widget pass the left to the end of the site, i don´t do anything, sudently the widgets pass to the end of the site, help please…
Look for yourself XXXXXXXXXXXX
thank´s
20-04-2009 @ 23:51 [ID:10493]
it´s because a post, i deleted and the widgets back to the right place, i don´t know way
21-04-2009 @ 07:32 [ID:10496]
I think that you probably had trouble with align elements on your post. I suggest you preview them before posting.
24-04-2009 @ 19:47 [ID:10504]
hi deuce, if you make me a favour, delete all my comments that show my site url, because my doubts appear in ask search, and i dont want that. Thank´s, i´m loving your theme
25-04-2009 @ 07:13 [ID:10510]
Your URL was deleted from any recent comment u made. Wait a few days till site will be reindex from google and you should have no problem.
If you also wish to erase all your comments please let me know and i ll do it.
Thx.
28-04-2009 @ 17:25 [ID:10522]
hi deuce again, i can´t find your comment were you put your code of your image in the header, i´m understand a little more now and i won´t to experiment and see if i know now, could you put again the code? Thank´s
28-04-2009 @ 17:33 [ID:10523]
One more time here is what you gonna do:
Open header.php with a text editor (notepad) and find the following lines:
Anything you put inside the DIV with class=”logo” is gonna be put in the left side of the header area. My header has something like this instead of the default:
So check your image URL and put it inside that DIV and you are done!
28-04-2009 @ 17:45 [ID:10524]
thank´s, just a question, i upload my logo in media(images) in wordpress, and then click the image and put “copy adress of the image” and then replace your ”http://deuced.net/logo.png” by adrees of my logo?
‹img src=”http://deuced.net/logo.png” border=”0″ alt=”” /›
Thank´s and sory for ignorance…
28-04-2009 @ 21:25 [ID:10525]
You image URL should be something like http://DOMAIN/wp-content/uploads/YOURIMAGE and that should replace the example URL i gave you (as you said). I don’t know your exact path and it may be different but it sure looks like above.
15-05-2009 @ 20:54 [ID:10627]
hi deuced i finnaly put the image but the code was this:
Another question, it is possible to make big to left and right the screwdiver theme ? i want a lot of space for ads
Thank´s
15-05-2009 @ 21:15 [ID:10631]
Raw code cannot appear here if you dont use special characters. It doesnt matter since you made it work. To change the width of Screwdriver theme is very painful for you since you have to edit all images that are used as background in photoshop and also tweak CSS file. That means NO. IMHO either use what u got or change to a theme more suitable for ads.
15-05-2009 @ 22:13 [ID:10632]
thank´s maybe i will talk to a web designer.
Thank´s
13-06-2009 @ 04:00 [ID:10730]
DeUCeD,
Do you have time for a guy who barely can down load a picture? (I just keep on hacking.)
I really like the “Screwdriver” theme. Have been working it with wordpress. I’m hoping you can help me take care of a couple of issues.
I would like to remove the “widgets- side bars” so I can expand the post page. Is this possible?
Also I tried to remove the comment, edit tag in the post page by editing the single.php. A window came up saying…”you can’t create the index.php file. Make sure path and file name are correct.”
I have a feeling that this is something pretty simple to fix, I’m just clueless.
Any advice you may have will be most appreciated,
Tom B.
P.S. Keep on putting out those great themes!
18-06-2009 @ 08:44 [ID:10737]
Hi Tom, i posted an answer that may help you here…
03-07-2009 @ 22:06 [ID:10761]
Hello,
I would like to know.. is it possible to add another sidebar on the right side ?
So the format will be 3 columns in this order:
left sidebar
post in the middle
right sidebar
If yes, could you please tell me how to do that?
Thank you for your time
07-07-2009 @ 21:18 [ID:10765]
Hi Hanks
It s possible to tweak it and add a third column to the right side but definitely NOT for novice. You must change lots of the CSS and also lots of testing needed. But most important is that adding a third column requires 280 pixels more width and this is gonna make it more than 1160 pixels width and then lots of small screen resolutions (like netbooks or older computers) will have horizontal scrolling which is unacceptable to the webdesign standards. So i do not recommend it.
Generally speaking, adding a second sidebar is easy if you are familiar on WP themes and there s a lot of help in Codex. But unfortunately i cannot go into details as this needs lots of explains.
09-07-2009 @ 18:33 [ID:10768]
i am having trouble putting my logo in the header… i did everything right… but only the text/code appears on the area that the logo is suppose to be…
‹a href=”http://jessaster.net/”›
‹img src=”http://jessaster.net/public_html/wp-content/themes/screwdriver/images/logo.gif” border=”0″ alt=”logo” /›
‹/a›
this is what i put in the codes.. and it doesn’t work!!!
09-07-2009 @ 20:40 [ID:10769]
This is image source and that is what you gonna put at src=”http://jessaster.net/wp-content/themes/screwdriver/images/logo.gif”