Customising Windows 7 logon screen. Ever wonder what to do with the tons of pictures taken of your daughters other than setting them as wallpapers? =) With Windows 7 you can set custom images as your logon background. original article. For the not so technically inclined, graphical instructions are available at my journal. Else, here’s a really quick 10minutes run through. start the group policy editor (gpedit.msc) using your favourite method. go to the following branch: Computer Configuration > Administrative Templates > System > Logon set “Always use custom logon background” to enabled. select the image you want to use as your background. it must be of the same dimensions as your primary monitor’s desktop resolution. the filesize must be less than 256kb, must be of jpg format, and must be saved as “backgroundDefault.jpg”. take note of the case! Enjoy your new logon screen =)
13 Awesome Javascript CSS Menus - Noupe Design Blog Oct 31 2007 Every web designer tries to be creative when it comes to designing the main navigation of the website. Now we present you with 13 awesome Javascript CSS menus that will be very handy and easy to modify to suit your needs. Lets take a look at recent examples of these … 1) Sexy Sliding Menu – Andrew Sellick decided to use mootools due to the smoothness of their effects, however, he developed a sliding menu using script.aculo.us . Demo: Mootols Version Demo: Script.aculo.usVersion 2) FastFind Menu Script – This script allows for nested menus, based on dynamic “AJAX” responses. Demo: FastFind Menu 3) Webber 2.0 Dock Menu – Great example of a dock type navigation. Demo: Webber 2.0 Dock Menu 4) Phatfusion- Image Menu – Image menu using javascript, onClick event keeps selected item open and to close it again. Demo: Phatfusion- Image Menu Demo: Mootools version with XML parser 5) Drag and Drop ordering in a TreePanel – This example shows basic drag and drop node moving in a tree. Homepage
A Guide To Using Custom Scrollbars On Your Site [tweetmeme]“Don’t play with the defaults”, people say. It confuses the users by adding complexity, where simplicity will do just fine. But then, there’s “Think Different”. In this crowded internet space, your site needs to stand out from the mundane. When I first saw Tim Van Damme’s blog, the scrollbar immediately got my attention. So how does Tim do it then? The second thing, and I don’t know why this happens, but you need to alter the style for html as well. I don’t know why one needs to set the overflow-y to auto, but without it the new scrollbar doesn’t work properly, or at all. That should take care of your scrollbar, but wait, it looks the same?! This is your entire scrollbar unit. This is the little button at the start and end of the scrollbar. This is the thin background upon which your scrollbar moves in. This will style the scrollbar thumb itself. That’s pretty much all you need to do to style the scrollbar, and it should work. I hope this guide helped in the least.
Styling Scrollbars WebKit now supports styling of the scrollbars in overflow sections, listboxes, dropdown menus and textareas. For those who want to skip the article and just go right to the source, here is an example: Scrollbar Example Here is a screenshot for those not running a recent enough WebKit: The scrollbar pseudo-element indicates that an object should use a custom scrollbar. When this pseudo element is present, WebKit will turn off its built-in scrollbar rendering and just use the information provided in CSS. The width and height properties on the scrollbar element indicate the width of the vertical scrollbar and the height of the horizontal scrollbar. A scrollbar consists of scrollbar buttons and a track. In addition the scrollbar corner can now be styled, as well as the resizer used by resizable textareas. Here is a complete list of all the new pseudo-elements. scrollbar scrollbar-button scrollbar-track scrollbar-track-piece scrollbar-thumb scrollbar-corner resizer
Build a Dynamic Menu in JavaScript Article Here, we’re not talking about DHTML drop-down/pull-down menus. Here, we’re talking about a simple navigation menu using Javascript. It identifies the active page, and accordingly displays that link differently from the other links, making it easy for the user to navigate. Here we’ll employ a single .js file that will be used for all the pages under the navigation menu. For example, consider these 3 navigation links: Link 1 is active. Link 2 is active. Link 3 is active. As you can see, these are shots of how the navigation menu appears at different pages depending on which links is active. It’s possible to create such a menu using only Cascading Style Sheets (CSS), by defining a class (say .links) for the menus, and assigning different properties for .links:active. Though this is perfect, there is an advantage to using Javascript here. Implementation To implement this type of menu, first of all you will need is a CSS file, say links_style.css, to define the styles for the links.
Limit Your DIVS | That Css Guy! During the years of honing my HTML skills I have been tempted and often required to serve up the cleanest code I possibly can. I quickly learned that all elements within my document – everything from a <p> to a <ul> to a <h5>– can accept the same style rules as a div. This got me thinking, why even use a div for styling when you can apply the style directly to your elements? I started to explore this concept further and over time noticed one repeating outcome when limiting my div use: consistent cross browser rendering! When I limited the use of my divs all the major browser including both IE6 and IE7 would render the sites nearly perfectly. So, this obviously brings me to the point of this article, what if you build a site without any divs at all? It’s possible and I’ve done it- not that it’s magic but proves divs nor tables are necessary for layout www.nodivs.com is a proof of concept site that I’ve put together to show how a typical website can be built without divs. No div Contact Box
Who needs 'em anyway? CSS Sprites: What They Are, Why They're Cool, and How To Use Them By Chris Coyier On This article has been revised and re-written several times since its very first publication in 2007, to keep the information current. The most recent revision was done by Flip Stewart in January 2015. #What are CSS Sprites? Spoiler alert: they aren't fairies that write your stylesheets for you. To summarize: the term "sprites" comes from a technique in computer graphics, most often used in video games. CSS Sprites is pretty much the exact same theory: get the image once, and shift it around and only display parts of it. #Why use CSS Sprites? It may seem counterintuitive to cram smaller images into a larger image. Let's look at some numbers on an actual example: That adds up to a total of 14.38KB to load the three images. While the total image size (sometimes) goes up with sprites, several images are loaded with a single HTTP request. Thus, sprites are important for the same reasons that minifying and concatinating CSS and JavaScript are important. $ npm install sprity -g