Tessisamess

Four ways to spruce up
any layout!

Quick, stress-free layout enhancements!

Below are some common elements that are quick and easy to put into your layout, and are some of the most common 'little things' I see people using to really polish off their journals. If you've ever wondered how to do any of the following, here's how!

Custom cursors

You can replace your custom cursor with any of the base cursors, but typically what I see a desire for is replacing your mouse cursor with images, so here's the code for that. You'll want to add this to body and a:hover if you have a custom image for link hover. Example:

body{cursor:url(body_cursor_image_url), auto;}
a:hover{cursor:url(link_hover_cursor_image_url), auto;}


Add your image and plug it in where you want it!

cursor:url(cursor_url), auto;

Page Highlight

The background and text color when you select content on the page by clicking and dragging, double-clicking, or using select all.

::selection{background:#000;color:#fff;}
::-moz-selection{background:#000;color:#fff;}

Custom Scrollbar

A custom page scrollbar is a great way to add a little extra finish! Be sure to try out border-radius and inset box-shadow for an extra polished look. RGBA color values with transparency will also work on these! You can also add :hover selectors.

::-webkit-scrollbar{width:5px;background:transparent;} /* sets the width of your scrollbar */
::-webkit-scrollbar-track{background:#000;} /* sets the background of the entire track */
::-webkit-scrollbar-thumb{background:#555;} /* sets the background of the scrollbar */

Hover Transitions

The way an element's hover function behaves; usually seen in links or image tags. You'll want to put this in the NON-hover state for a seamless transition and not the :hover element. For example:

a, a:active, a:visited, a:link{color:#000;transition:all 0.5s ease-in-out;}
a:hover{color:#ddd;}

This can be used for more than just colors. Try out opacity or a CSS filter on your images! You can find more transition options in this generator under Transitions, but for brevity's sake I've just added the one I use in most of my layouts for link hovers.

-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;

♡ You're Done! ♡