Please check out the new Help Developer forum
Users of Help Developer may have noticed that the design of the site changed a couple of days ago, I have had some excellent feedback and am really pleased with how it has worked out. I am aware that some of you would like to know how I created some of the effects and new features that you see on the site so I am going to produce a few tutorials showing you how to create these effects yourself with jQuery over the coming weeks.
Today I am going to show you how to create a sliding sidebar, if you want an example of what I mean then just click the button in the top right of the sidebar that says “Hide Sidebar” and you’ll notice a nice sliding action to the right and the content area expanding the full width of the page, clicking “Show Sidebar” slides everything back. This was created using the jQuery Javascript library which I must say is excellent.
Right so lets get started. I am going to use the popular template from the tutorial that was a huge success here on HD here to produce this.
If your are experienced with CSS or have coded a website before, you have probably heard of CSS resets CSS resets are chunks of CSS code designed to make life easier on the coder/designer when coding the website. CSS resets are an extremely useful tool in making your site cross browser comptaible. Today, we [...]
It is a common site now to see a widget ready footer on a wordpress powered site, it adds some extra areas to add widgets that would maybe look out of place in the sidebar. It is good to have widgets at the bottom of the blog for links to other posts and maybe some details about yourself. In this tutorial I am going to show you how to create 3 footer widget areas which can be edited from the admin area of your wordpress installation. I am going to use the default Kubrick theme for this tutorial.
Today we are going to create a pure CSS image gallery, including a description of each image, from scratch. There are many advantages to using a CSS image gallery as opposed to a JavaScript gallery. For one, you need not worry about learning JavaScript or finding a quality script, and you also needn’t worry if the user has JavaScript Disabled. One of the original pure CSS image galleries may be found at CSS Play, which features a CSS gallery with the images on the bottom and no descriptions.
For this gallery, we will build a gallery with images on the left and text that describes the photo on hover. You may view the final outcome here.
As if Internet Explorer 6 doesn’t have enough issues, it also doesn’t support full PNG alpha channel transparency. While many would like to ignore IE 6, it is still being used by millions of internet users, thus we as designers still need to keep them in mind. This can make designing a website to work with IE 6 even more difficult than it already is. However, thanks to some creative and skilled minds and a few scripts, the problem can be resolved.
-
The Problem with IE 6 and Transparent PNG’s
Unlike GIFs’s, images in PNG format carry a seperate alpha channel for each pixel. This allows each pixel in a PNG image to be opaque, not opaque, and most importantly, anywhere in between the two. This is much different from than GIF images, which do support transparency, but each pixel is either transparent or a solid color.
Luckily, with the release of IE 7, the issue was resolved. Unluckily, this means earlier versions of Internet Explorer before will need to “hacked”.
A couple of days ago I released version 2.0 of my premium news wordpress template - Simify, one of the templates main features is the tabbed area for the featured posts. In this tutorial I am going to show you how to produce a tabbed area for your featured posts on your blog complete with thumbnail support. This has become common in many premium wordpress templates so if you are wanting to go into this field then this is a must. I am going to use the Default Wordpress Template for this tutorial, but you can add it to pretty much any wordpress template you like.
Hello and welcome to my 4 part tutorial on how to design a website in the Gimp, then slice it and code it into HTML and CSS without using tables or Dreamweaver/Frontpage, instead we will use Notepad.
The final result will look like this:
The tutorial will teach how to create and style CSS divs and classes as well as teaching you how to create menu rollovers, it is perfect if you are new to coding websites.
The tutorial comes in four parts as detailed below:
Part 1 teaches you how to design the site in the Gimp
Part 2 teaches you how to slice the design ready for coding
Part 3 teaches you how to code the layout and add the content
Part 4 teaches you how to style the links, headings and menu buttons
Welcome to the fourth and final part of my series on designing and coding a website in the Gimp, HTML and CSS. At this point I would like to thank everyone who has been following this series and I hope that you continue to use Help Developer. In this part I am going to show you how to finish off the template we have been creating, we are going to style the textual elements such as the h1, h2 and hyperlink tags and we are going to also create the long awaited rollover menu.
Welcome to part 3 of my series on designing and coding a website with the Gimp, HTML and CSS. In this part I am going to show you how to start coding the site.
In this tutorial I will show you how to add thumbnails to your posts in the very popular Wordpress. I never really knew how to do this till about a week ago when I released Simify, but now I do I am happy to show you how I did it.
