Design Shack Relaunched  0

Post Categories   Post Time 1 year ago

Design Shack

As the popularity of Design Shack grows month on month, we have decided to expand it further and increase it’s functionality. As well as offering the same great CSS designs as before, Design Shack now contains tutorials, news articles and a whole new way of looking at our gallery.

You now search by how you would like to be inspired - by Colour, Layout or Category. This opens up a new realm of functionality for CSS gallery websites and enhances navigation greatly. It’s much easier to submit your website to us, and navigating around is a breeze. Designs load faster and are much more optimised than before.

We hope you enjoy it, and feel free to send us your feedback!

Design Shack

Post Tags , , , , ,



Design Shack Re-Design  0

Post Categories   Post Time 2 years, 2 months ago

Design Shack PreviewDesign Shack has been a phemonemal success since it’s launch, with over 1 million visits, and a quarter of a million clicks to our various featured designs. The current design and layout has been perfect for us so far, but not it’s time for a change. We aren’t looking to offer anything different - just integrate a couple of new features and make the whole experience easier to use. We’re adding a lot more AJAX and JavaScript for some fancy visual effects.

We’ll now have news snippets, and an easier method of submitting your site for listing. It’ll be a piece of cake to browse designs by views, clicks, type, colour scheme and more and we’ll have a wider array of RSS feeds to keep you up to date.

It’s almost ready to go, with some graphics courtesy of Veerle who has been really helpful. There’s a sneak preview on the right, but you’ll have to wait a couple more weeks for the unveiling. I’m looking forward to it, and I hope it receives a good response!

Post Tags , ,



CSS Tabs Rollover Menu  18

Post Categories   Post Time 3 years, 7 months ago

Tab Header

Using a tabbed rollover menu in the header of your website can add functionality, as well as making the navigation look good. Doing this in CSS means that you can use it to it’s greatest capacity, easily add or remove tabs and change the colour in different styles.

The purpose of this tutorial is to show how this can be done, in a similar way to how it has been achieved on this website. Just follow the steps below and you should be fine:

Step 1 - Decide on the Navigational Elements and Colours

  • It is initially important to decide on which tabs you will want to place on your site, and what the colour scheme will be. You need to have an idea of how many tabs there will be, and what the default background and rollover background colour will be. Make a note of these!

Step 2 - How It Works

  • The tab area is set as a layer, to hover over a specific part of the page - you set this manually, based on where you would like it to be located.
  • Simply take the CSS code, and simply change the commented values to fit in with the colour scheme of your website
  • You can go deeper and change elements such as the height, width and position of the menu bar if you want
  • The code works with Firefox by default, slight alterations must be made to work in IE (see CSS code)

(more…)

Post Tags , , , ,



CSS Style Switcher Tutorial  21

Post Categories   Post Time 3 years, 7 months ago

CSS Style Switcher Header

Placing multiple colour or font schemes on your blog is often an excellent addition to your website, and it can help to customise your look and feel. After implementing this on my site, I recieved several requests from people wanting to see how it is done.

I have put together this simple tutorial to show how easy it is to add multiple stylesheets to your blog, and ensure that the user’s selection is stored on their computer so the style remains the same on each page. Please click ‘Read More’, or go to the tutorials page in order to view step by step instructions.

Step 1 - Download the styleswitcher javascript file

Step 2 - Link to the javascript file in your blog’s <head> area

  • Go to the area in your index.php source code, just before the </head> tag
  • Enter <script type="text/javascript" src="styleswitcher.js"></script>
  • This links the functions required for switching the styles to the main index.php page

(more…)

Post Tags , ,