hover updates tab

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


Keep reading



CODE ONLY ———- $10

You provide me with the graphics & specifications, I’ll code it.


You provide me with nothing but descriptions of how you wanted things, I’ll do the rest.


*The base code I made myself includes popups with one text space on each, a music player, & a sidebar. If you request something like multitabbed popups, a hover update tab, or the blobs in a jar effect, I will add an additional $5 for each.

If the requested task is removing something from the base code, no additional charge will be applied.


100x100, unedited* raw icons start at $5/50 icons. (E.G. - 100 flat icons would be $10.)
*I automatically clean all the caps. By unedited I mean no filters or anything fancy.

An icon PSD itself is $5, as well.

For a PSD to be applied to a set of icons, it is $2/50 icons. (E.G. - 100 formatted icons would be $4.)
*You can commission for a batch of icons to have a PSD that isn’t mine applied. It would be the same price.

Thank you for taking the time to read this, & thank you even more if you consider commissioning me! You can contact me for a commission via any blog that you know me on. If you’re unsure if I’m around on that blog at that time since I do blog hop, then just message me on oopheliac.

                                      – Andrew


Theme #16 Alya by Riverbell themes 

ver 1.0.1
» live preview and code


  • 400/250px wide posts with one or two columns (grid)
  • sidebar with description scrollbox and tumblr icon
  • sidebar slides out on hover - optional
  • updates tab
  • tooltips on navigation and permalinks
  • like and reblog buttons
  • 10 custom links (and pages) with a navigation pop up box for your links
  • infinite scrolling option

Terms of usage Please, do not steal, redistribute, remove credit or claim as your own. Alterations are ok! If there are any questions/problems please send me a message!

anonymous asked:

hi there! I really like your battery matter but I was wondering if you could make one like softeur's? it's in her updates tab (hover over the rubix cube)?

Sure, I can make you an HP bar. I’ve made one of these before, actually, but didn’t think that it would be popular enough to post.

btw softeur’s HP bar is a set of images, but I’m going to make mine CSS if that’s okay–I like it being easier to customise.

Here’s a really basic HP bar:

It’s 8px high and 90px wide. You can change the width to whatever you want (I used percentages for how full it is–in the picture it’s at 43%). You can also change the height, but you’ll have to adjust some things like the font size and padding.

Here’s what you should put in between the <style></style> tags

    margin:10px; /*change around the margins if you want*/

    width:90px; /*adjust width*/
    border:1px solid {color:hp bar border};
    background-color:{color:hp bar bg}

    width:{text:hp percent}%;


And what you should put in the <body> section–

<div id=“health”>
<span class=“text”>hp</span>
<span class=“bar”>
<span class=“hp”>

Finally, these are the options that you should put in between <head> and <style>..

<meta name=“color:hp bar border” content=“#230f2b”/>
<meta name=“color:hp” content=“#f21d41”/>
<meta name=“color:hp bar bg” content=“transparent”/>

<meta name=“text:hp percent” content=“43”/>


anonymous asked:

hi! i'm just wondering how you get your bio to appear on the side next to the entries? i've been trying to get one to appear on my theme but can't figure it out ):

By ‘bio,’ you mean my sidebar description, I’m assuming? It’s really easy, especially if you know how to add a hover / updates tab to your blog. 

First, follow LTTLEBIRDS’ HOVER UPDATE TUTORIAL. It doesn’t have to be that specific tutorial as there are tons of other update tab tutorials out there. It’s just the one I like the best. If you don’t want to use it for one reason or the other, check out this UPDATES TAB MASTERPOST. But I’m going to use littlebirds’ tutorial, and I’m just going to copy and paste the steps here, except the very last step, which we don’t need.

Keep reading

jinyoungslover-archive  asked:

Hello:) i'm incredibly sorry to bother you omg you must be annoyed with these repetitive questions again, i was wondering about the update tab like is it possible to adjust the image to the other side? B.c when i paste in the code and everything the image is on the top right and when i hover over the photo the box drops down on the opposite side..? like what lol.

no love trust me when i say i always love to help as much as i can :)

okay so heres what apart of the first code that you shouldve copied under <style type=”text/css”>

okay so under this you need to check where it says

margin-left: 0px under #thekey img.

so if that number where it say 0px is anything other than 0 change it to zero.

if this doesnt work i recommend that you fix it in the code before you paste it to make sure its at 0px, if you need any other help, please come and ask! :)

(p.s. i hope you dont mind me posting this, this is just for anyone else who needs it too x)

sunbeamhighlighter  asked:

hey c: , im using the hover update tab, but its not working :c, the picture wont come out fully, and the announcement are all bunched up :c can you please help me !

ok so for the picture, to make it bigger or smaller you’re gonna go here (this is the first code that you paste under:

<style type=“text/css>)

****notice that it say #thekey img {      not #thekey ****

okay so to change the size of the picture that you’re using, you’re going to just change the part that says width: (…)px. To make the image bigger make the number bigger, and vice versa.

for the actual announcement box is a little trickier.

look for this part in the first code as well

then locate where it says:

margin-left: (blah blag blah) px

margin-top: (….) px

okay so to make the position of the box appear more to the right, your going to want to make the px on the margin-left a bigger number, and vice versa. (smaller number = box more to the left)

to make the box appear farther down, make the px on the margin-top a higher number, and vice versa as well. (lower # = box is higher)

also to make breaks or spaces between each line your gonna want to put <p> in the middle of each line, for example:

okay so i really hope this helped, if you have any questions, feel free to ask :)