Hint 1 - take advantage of browser capabilities

Whoa, what gives? Yes, you are absolutely reading about a Wordpress-based photography site on a blog that is no longer based on Wordpress. I seemed to get a fair bit of traffic on my site from people wondering how to do this, so I am leaving these posts here for posterity. That said, the internet world has evolved quite a bit in the last four years, so I now use a system that is simpler in some ways, but immensely flexible. So read about this newer flat-file CMS approach as I document it over the next few months.

Hey Rip Van Winkle, it’s 2010 dude!

Safari, Chrome and Firefox are all browsers that have implemented many of the features of the upcoming HTML5 and CSS3 specifications. So you can do some very easy styling customizations for getting things like nifty Web 2.0 rounded corners and cool gradients for many of your html elements. No need to go to the trouble of making some slick mockup in photoshop and then slicing it into nine pieces so your shiny button will scale properly. Just add a custom style to your Thesis custom.css file.

If your are browsing this site with a capable browser such as the Webkit-based Safari or Chrome, or the Mozilla Firefox browser, you will notice that when the mouse hovers over my menu choices, they all have that sculpted, 3D, rounded lozenge look that is a sad cultural reference to the increasing infantilization of society. But I digress. If you are using MS Explorer, you are shit out of luck and will just see a plain dark background as your mouse hovers over the menu selections. Download Firefox 3.6 or Google Chrome and check out what they can do. I understand that the upcoming MS Internet Explorer 9.0 will support gradients and rounded corners, but until IE 9 is released, Internet Explorer is the uninspiring saltine cracker of the browser world, while Safari, Chrome and Firefox are the kick-ass box of Cheez-its.

So this is probably the easiest hack for thesis. Open your Wordpress Admin page and on the Thesis sidebar menu, select Custom File Editor. The Thesis Custom File Editor menu selection in the Admin panel

Select the custom.css file from the drop-down list and then click on Edit selected file. Your custom.css file will open and you can now add a line to get sculpted 3D menu lozenges.

Add the following to the custom.css file and then click the Big Ass Save Button:


    /*=====CUSTOM MENU STUFF BELOW: =========== */
    .custom .menu a:hover, .menu a:active {
    border-left-style:solid;color:#a61427;
    background-image: -webkit-gradient(linear, 0% 30%, 0% 100%, from(#E0DACE),to(#A6A298), color-stop(.3,#F0ECE6),color-stop(.4,#F0ECE6)); 
    -webkit-border-radius: 0.75em; 
    background-image: 
    -moz-linear-gradient(19% 100% 90deg,#A6A298, #F0ECE6, #E0DACE 100%,#F0ECE6 100%); 
    -moz-border-radius:0.75em;
    }

What this does is use the advanced features of the Mozilla and Webkit-based browsers to make the menu items attain that 3D ‘pop’ that you see all over the web on professionally designed sites.

Of course, you may not like my colors or gradients, and the code for making the gradients does look a little, well, dense. Lest you think I am some sort of graphics genius who can just snap my fingers and create a hexadecimal color coded gradient description out of thin air, I will admit to using a fantastic cheat. Go here and play with the buttons on the left and make your own. Then cut and paste the code string in place of the code you see above.

The gotcha on this nifty little tool is that there are two buttons, one for Webkit (Safari and Chrome) and the other for Firefox. To accurately preview the look of the gradient you are making, make sure the appropriate button is selected while using the appropriate browser. In short, design the Webkit gradients using a Webkit browser and copy the code string, and then fire up Firefox and do the same thing in that browser with the Firefox button selected. You will notice that the Start, End and Stops work differently between the two browsers, so you will have to experiment. I guess they couldn’t make it too easy.

The other thing that is interesting is that the custom css for doing this repeats the background image property : value pair, once for Webkit and once for Firefox. The reason this works is that the Webkit browser will ignore the Firefox-based values and vice versa.

One final note: make sure that you have specified a decent looking fallback hover/active menu link background color in case some poor person happens upon your site while using an older browser either by choice or because of corporate-IT-based coercion. This can be set using the interactive selections in the Thesis Design Options menu page.


categories:  css, presentation, programming, web design   tags:  css, tips