Wednesday, 22. July 2009, 13:36:28
After the recent (and still ongoing) redesign of my page I have got some feedback in the initial redesign post, but I thought I'd push out some of the tips and tricks I used and learned by doing the redesign.
Don't be afraid to mess around with the design :) CSS is not that hard and changing the My Opera CSS is even easier!
Tools i used:
W3Schools.com
W3Schools.com is a site where you find most information about most CSS questions. Searching around there for a while will find you the answer you need :)
Opera Dragonfly
Dragonfly is the tool I use to find elements I want to change. Load it up, then it's click on the element you need the name of.
Notepad++
Used for backups along the way, any notepad tool will do ;)
Kuler
I use Kuler to find the colors I want to use. I don't think you can find a better tool to use if you are like me and not the best at picking out colors.
Dragonfly might require some getting used to, but the other tools are straight forward if you know some basic HTML and CSS.
Note: I'm not doing a complete this is how I did this and that, this is just a few of the simple things.
To add some shadow to your text try the following. Note that the first value "#000" is the color, the first "1px" is how much left of the original text you want it and the next 1px is how far below it you want to have it. The last value is the fuzziness of the shadow. Try it, just don't overdo it..
text-shadow: #000 1px 1px 1px;
The small + in front of the links in my posts are really simple to do. And yes, it's CSS not something I do manually for each link :) Note that this does not work in all browsers, but this layout was built to work in Opera and it somewhat works in FF and WebKit browsers.
.content a:before {
content: "+";
color: #00DBFF;
}
The ":before" tag can also be used to do a lot of other cool stuff like if you have a look at the tag cloud on this page. The "Tags" text is placed using ":before".
Feel free to add up some questions before part 2 :)
WIDGETIZE