hover theme

“Heart Out” theme by teentide! :)

this theme comes with:

  • 2 or 3 columns
  • one square sidebar photo
  • shrinking sidebar effect
  • 5 hover links
  • color change on link hover
  • hover links slide down effect
  • long hover description
  • lace detail
  • one short/medium length blogtitle
  • fly in permalinks

preview || message me for the code (include the name of the theme and you must have liked this post)

message me if you have any problems!

PLEASE LIKE IF USING OR THINKING OF USING!

g  d o e s  a  t h i n g - how to make a tumblr theme from scratch;

each section of these tutorials will walk you through making your own theme from scratch with instructions, images and all the code you need along the way!  links to the code as you progress are included in EVERY section!

NB/ feel free to use these codes as you please, ( part 6 & 7 include full base codes ) - credit is nice but NOT necessary!

  • theme 101 part 1 - basic html, styling body, styling and positioning posts.
  • theme 101 part 2 - the padding function, the margin function, permalinks, tags and styling.
  • theme 101 part 3 - styling general links, styling bold and italic, styling blockquotes, post images.
  • theme 101 part 4 - styling sidebar, navigation links, headings and pagination.
  • theme 101 part 5 - index and permalink pages, float, post info, styling asks and quotes.
  • theme 101 part 6 - adding images, backgrounds, sidebar graphics, etc.
  • theme 101 part 7 - container theme, scrollbar, overflow, hover effects.

from part 6 - FULL PAGE THEME with SIDEBAR + BASE CODE

preview;

from part 7 - CONTAINER THEME  with HOVER SIDEBAR + BASE CODE

preview;

GUESS WHAT

i’ve made the sideblog that i spoke of for all my anime babies so as not to annoy y'all, i’m an angel ik, NO im kidding ! link is in bio for those who care,, i’ll be deleting the anime from this blog except ghibli lol.

RPSISTERS GUIDE: EVERYTHING I (KARA) KNOW ABOUT HTML

Kara here bringing you a guide that has taken me ages. Its basically a beginners guide to pretty much everything I know how to do coding wise. Because coding is so diverse, obviously there are thousands of different ways to do things, but this is just how I do them.

FEATURES

What’s a Base Code? How do I know which one to pick?
How do I change the credit? How do I make it cute?
What does Margin mean? How is that important?
Fonts, how do they work? How do I change them? Can I put effects on them?
Pagination? What’s that? Why is it doing that?
Adding images, removing them, and renaming them.
Hover 101.
The magic of colors.

Keep reading

anonymous asked:

hello, moosey I hate to be a bother but do you know how people manage to get their post info to hover when you move over a symbol? Like when it tells you: who you reblogged the post from, if they'd like to reblog it, the date and time they posted it, etc? Thank you very much because i've been looking everywhere and can never find it ; W ;

hello there anon - 

settle in and get comfy - it’s tutorial time… XD

okay, what you’re actually using for the hover information is actually something called a ‘tooltip’.  where you can have a link as an icon or a symbol, a letter or even an image, and the information is shown on hover - it’s the exact same code people use for hoverlinks.  most people use the tooltips by malihu and that’s what i’ll be using here… 

installing the code

the jquery code for tooltips comes from the demo by malihu ( definitely check out their page! ).

1. up in the top section of your code, you will need to paste three things - make sure these go into your code ABOVE <style type=“text/css”>

<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script>

[ the minimum jquery required to run this script from google ]

<script src=“http://static.tumblr.com/uopakca/GVcnvdwbq/jquery.style-my-tooltips.js”></script>

[ the ‘style my tooltips’ js file from malihu ( which i’ve uploaded for you, so you don’t need to do it again… you can always upload your own version into the theme assets area if you like! ]

<script>
(function($){
$(document).ready(function(){
$(“a[title]”).style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:“title”
});
});
})(jQuery);
</script>

[ the script for actually calling the tooltips from malihu ]

change the delay time and the fade speed to suit your preferences… ( in milliseconds O_O )  the original code has been changed from “[title]“ to “a[title]” so that it works on links and not just text…

2. in the next section of your code ( the css bit which is mostly orange and yellow ) - between <style type=“text/css”> and </style></head> paste the next bit of code - this is how your hover information will be styled ( i’ve added some extra to help explain the styling XD )

#s-m-t-tooltip {
  max-width:300px;
  border-radius: 0px; /* you can add in a border radius here for curved corners if you like */
  padding:4px; /* space around the text */
  margin:5px 10px 5px 0px; /* positioning of your hover info in relation to the link */
  color:#fff; /* text color */
  border:1px solid #fff; /* optional border and border color */
  font-family: ‘Fjalla One’, sans-serif; /* i’ve added a custom font in here but you can remove this line if you don’t use custom fonts */
  font-size:10px; /* font size of your hover info */
  letter-spacing:2px; /* optional letter spacing */
  background:#000; /* change the background color of your hover info */
  z-index:99999;}

3. now you will need to add the tooltips to your post information. ( this is the slightly tricky part, depending on your theme! ) - post information will be coded into both your css and html, and theme makers often use a wide variety of things to refer to it - things like ‘info’ or ‘date’ or ‘perma’ - depending on how they design their code… 

basically, what you’re looking for in your theme is the information down at the bottom of the html with the code for date/via/source/notes etc.

i’ll use a sample theme to help… if i scroll down to that section in my theme you can see it’s under the css section ‘info’ - 

this is my ‘info’ css;

and this is what my post info/notes/tags look like currently

to begin, we’re going to turn each of those links into a symbol and add in the information for the tooltip to the right place…  anything that appears in the ‘title’ section of a link will be the hover information on your tooltip.  

please see below - each section of info has been moved into the ‘title’ portion of the link and the link itself has been replaced with a symbol.  ( there’s no ‘reblog’ option in this theme, but you can always add one in to yours! )

this is what my info section looks like now with the hover tooltip for each symbol;

you can move your tags into another section, below the post info or elsewhere - i wouldn’t recommend moving your tags into a tooltip though, as you can only show what tags are there, but you aren’t able to click on them…

this is with my tags moved out of the ‘info’ div ( just below ) - then some fancy schmancy stuffs like adding a background and a border to the info section in the css ( as well as making the font a little bigger for my symbols ).  you could also add a css section to style your tags if you like!

and voila!

if you find this helpful, a like or reblog is always appreciated! :3

anonymous asked:

Hey there, I have been trying to find how to do the hover descriptions on contained themes that look kind of like an updates tab and I was wondering if maybe you knew how? Thank you, even if you don't still thank you because you do so much for the rp community and you're just amazing<3

hello there nonny,

settle in, it’s tutorial time!

how to make a hover description or updates tab

e.g.

Keep reading

anonymous asked:

Same anon again, sorry. I'm just not getting it and I'm just about ready to throw my laptop out the window, I'm so frustrated! What I meant was that in your theme the colour seems to slide out from left to right versus just the whole box changing colour simultaneously as you usually see. Maybe its an effect or something, but I can't figure it out and its bugging me so much arghh. I don't even know how to ask the question properly.

hi there anon,
i do understand the frustrations of coding, believe me!!! 

tutorial time :3

how to make a ‘sliding’ background hover effect on your links!

here’s a step by step that will hopefully help and explain the parts to animate!  you can’t usually animate a background unless you’re changing the position of it, which rarely works well for a solid color change (you CAN use gradients to do this, but that’s another story for another time, i find box-shadows are the easiest way to go! ) - so what you’ll need to animate in this case is a box-shadow.

what’s a box shadow?  – usually a box shadow creates a shadow behind an item.  

example;

but in this case, what we want to do is create the box-shadow INSIDE the item - example;

what we’re going to do here, is animate the box shadow so that it doesn’t just appear around the outside of the object, but completely ‘fills’ the space - and this will give us a ‘fake’ background which we can animate!  for this we use the code ‘ box-shadow:inset’ for the shadow inside of our box!

here’s our basic css for the links…

#links {
   display:block;}  

#links a {
   padding:3px;
   margin-bottom:3px;
   display:inline-block;
   width:200px;
   background:#fff;
   box-shadow: inset 0 0 0 0 #31302B;
   -webkit-transition: all ease 0.8s;
   -moz-transition: all ease 0.8s;
   transition: all ease 0.8s;}

note that we’ve included a box shadow inset for the links - this and the inset is applied at 0 0 0 0 values (meaning we can’t see it!

now we add in the same box shadow to the link hover, but this time, we make sure it’s going to ‘fill’ the link (i.e. the same width plus any padding!) and it will animate using the ‘ease’ transition.

#links a:hover {
  box-shadow: inset 206px 0 0 0 #31302B;}

this is the effect we get

it’s very easy to change this up to have different effects!  if we alter the inset size to a minus value, then the shadow will slide in from right to left, rather than left to right…

#links a:hover {
 box-shadow: inset -206px 0 0 0 #31302B;}

or top to bottom…

#links a:hover {
  box-shadow: inset 0 30px 0 0 #31302B;}

…or diagonal, corner to corner…

#links a:hover {
  box-shadow: inset 206px 30px 0 0 #31302B;}

just change the box shadow insert to get different effects!

NB/ your box shadow doesn’t have to be grey!  just change the hex value to whatever colour you like!

that should do it!

hope this helps - if it does a like or reblog is always appreciated :3