Hiya! I was looking at your custom theme #3, and it has this thing where if you hover over big Hover sign, then the description becomes visible. Could I please ask how you did that? Is it jQuery or something? (If you'd rather not tell, then that's absolutely fine, and thanks anyway!)
hi there,no jquery involved, itâs all just css... Â thereâs already a tutorial for making a hover description over on my tutorials page;
how to add a hover updates/description
there are also other tutorials out there that you could also check out;
How to make a description box that fades in when you hover over it.
And how to add some cool customizations that I see pretty often such as rotating the âhoverâ text, changing the size of the box, and giving the box a background image or color.
Rules: No need to credit me as its a very simple tutorial.Â
To view it in action go here.
Go to your blogâs code and find the CSS section. It will sayÂ
<style type="text/css">
Take this code and paste it right under that.
Now find the HTML section. Look for the following (note: sometimes there is additional text between < / style > and < body > just make sure you are underneath < body >)
< / style >
< body >
Paste this code there.
Now you just need to replace âHere's your content.â with whatever you want your box to say. In the code Iâve included some basic information for repositioning it and styling your text. Below Iâll add some things that I see pretty commonly.
Rotate the âHoverâ text.
For this you need the CSS transform property, which you can read more about on w3schools.
Find the #updatetitle part of your code.Â
Now you add in the rotate code which I will paste below. Youâve presumably been in enough math classes to understand how rotate things by degree works, just change the (90deg) to something else, and see what happens. JUST MAKE SURE YOU CHANGE ALL THREE TO THE SAME THING!!!
You can use anything from -180 to 180 degrees.
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
Give the box a background color
This is particularly helpful if you have a busy background.
Scroll farther to give it an image as a background.
To give it a colored background, youâll need a hex code for whatever color you want to make it appear as. There are a lot of great online resources you can use, and Iâll throw out hexcolorcode.com just to give you an easy one.
Once youâve played on the website (lets be real, you just spent a few minutes playing, did you?), you need to get your color code. The one weâll need should be six digits with a # in front of it.
Mine is bright blue and looks like this:Â #a5d9ee
Go into your code and find the highlighted section.
Now replace the word transparent with your color code!!
Give the box a defined size & scroll bar
This gives it a set height and width, and a scroll bar.Â
Note: the scroll bar will match the scroll bar on your theme, so if you donât want that Iâd recommend changing the scrollbar (you should be able to google it, fyi, but if you canât figure it out let me know).
This is great if you want to put a lot of information in your box. Why? Here, Iâll show you. See how I put in a lot of information and now it just runs off the bottom of the page? Yeah, trust me, you donât want that. (and ignore the text itself, its what I had handy while making this).
You know the drill by now, find the highlighted chunks of code:
As youâll notice it already has a defined width of 200px, but the height is set to auto, which, as I said in the code, means that it will make itself as long as it needs to be to fit the content.
So lets give it a height, you can use whatever height and width you want (feel free to play around), but Iâll be making the height 200px so its a square. 400x200 would make a nice rectangle, just make sure it doesnât go off the bottom of the page.
If youâre like me and you have a lot of text, you probably canât see all of it, in fact, all the text I had copied and pasted there doesnât show any more. So we need to tell it to scroll.
Go in your code and find âoverflow:hidden;â which should be right below the size code we just edited.
Delete that line of code and replace it with this:
   overflow-y:scroll;
Ta-da!! Youâre done!!
Give the box a background image
This is very similar to the âGive the box a background colorâ tutorial above, but for this one, Iâd also recommend giving it a defined size which I just showed.
The really nice thing is that the image will automatically fit the box youâre putting it in (provided it is bigger than said box).
I used a really cute image of Remy LeBeau/Gambit that I had laying around from when I made icons.
Go back to the #updates section weâve been using and find this again:
Delete that line and replace it with the following:
   background-image:url();/* --- box background image --- */
Now you just need to upload the photo somewhere - you can use tumblrâs photo uploader which youâll find under the gear (settings icon) on the top left of your screen if youâre looking at your code. Click âtheme assetsâ and then âupload a fileâ
Put your cursor where you want the url to go which is between the two parenthesis:Â
background-image:url(PUT YOUR URL HERE OR FIGHT ME);/* --- box background image --- */
You can move the image around to where ever youâd like with in the box, but for that Iâll send you to w3schools page on background-position property. (or you can google it).
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.
you will need to have two essential parts to create your hover box - the css to style the box, and the html to include it in your themeâŚ
hereâs our basic theme - complete with a visible description -
the first thing we need to do is remove the description from the theme! Â in your theme, go down to the html part ( below the tag ) and find where the description is in your theme - it might look a little something like this -
{description}
( you can also do a âfindâ and look for â{description} ) the only thing we need to remove is {description} so delete that part
refresh your page and it should have disappeared -
now weâre ready to pop in your hover -
first of all we need to position the element on our page â so in your css add;
#hoverbox {Â Â position:fixed;Â Â top:30px;Â Â margin-left:30px;}
then we need to style the area for the content
#hovercontent {Â Â margin-top:10px;Â Â width:150px;Â Â color:#fff;}
and add in the html - just put this immediately below the tag.
  {description}
weâve added back in the code to show your description, however, if you want something different, you can just add text there instead!
update your preview!
and you can now see your description again!
why do it this way?  because itâs very difficult to position an invisible element.  now i can tweak my positioning to get it in the right place while itâs still visible - all i need to do is change my âtopâ and âmargin-leftâ values to put it where iâd like it to appear.
iâm just going to change the positioning in my âhoverboxâ css to move itâ
#hoverbox { Â position:fixed; Â top:250px; Â margin-left:850px;}
now we can add in the opacity.  we want the content to be invisible, so we give it an opacity of â0â˛
#hovercontent { Â margin-top:10px; Â width:150px; Â color:#fff;Â opacity:0;}
update your preview and your description will disappear. Â however, we want it to reappear when we hover over it - so we need another css section.
#hoverbox:hover #hovercontent {Â Â opacity:1;Â Â -webkit-transition: all 0.7s ease;Â Â -moz-transition: all 0.7s ease;Â Â -o-transition: all 0.7s ease;}
this piece of css informs that when we hover over the hoverbox, the hovercontent will have an opacity of â1Ⲡ( fully visible ) - and weâve also included a transition here which weâll also add to the original hovercontent so it fades in and out nicely.
#hovercontent { Â margin-top:10px; Â width:150px; Â color:#fff; Â opacity:0; Â -webkit-transition: all 0.7s ease; Â -moz-transition: all 0.7s ease; Â -o-transition: all 0.7s ease;}
update your preview and when you hover over the area, your description will appear! Â
this is basically what we want, but it also helps if you indicate to your friends where they can hover for extra info with an icon or a word, otherwise they might not know the box is there at all!
weâre just going to add in a title, inside our hoverbox, but outside of our hovercontent. Â you can style the title however you like, or even use an image;
#hovertitle { Â Â font-size: 10px; Â Â line-height: 15px; Â Â letter-spacing:2px; Â Â font-weight:normal; Â Â color:#fff;}
then add it into the html - again, inside the box, but outside of the content!
hover ( put whatever you like here! )
{description}
you can style these elements however you like - but thatâs about it for the basics!
have fun hovering :3
if you found this useful, a like or reblog is always appreciated - thanks!