Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

December 2019

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

Fast & Easy Layout Enhancements


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! ♡