codingcafe

[codingcafe]

Somebody asked once if we could make a list of tiny HTML codes. I thought it was a great idea, and I almost forgot! So this is a small guide, or well, a set of codes you can use in your themes and also in your description and your pages. Most of the times all you have to do is copy and paste, so it’s not very complicated, I promise.

Read More

[codingcafe]

I am a computer tech assistant at my high school. The other computer tech assistants and I have been tasked with redesigning and rewriting the whole school website from scratch. Any suggestions on style and such?

omg ummm I personally like minimalistic styles like this blog :))

[codingcafe]

Hi this is probably a simple thing to do but Im literally clueless and still trying to figure out your tutorials but I wanted to ask if it was possible to make a banner bigger in size?

yeah no problem just do this:

[codingcafe]

I've decided to organise all the answered questions so you'll easily find tutorials. I'll be doing these more often btw :)

Contents of this navigation so far:

(corner) Hover Tab

Inserting a corner tab x

Move tab to top x

Image background x

Double (or any type of) border x

Pop Up Box

Image background x

Double border x

Change font colour x

Banner

Replacing the title with a banner x

[codingcafe]

hi ella, i was wondering how i could get my hover tab to have a picture background after you hover? and thank you c:

use this tutorial right here :)

[codingcafe]

Hi Ella! I need your help! I've been trying all day to make a pop up ask box (using the tutorial from html-tutorials) and I've tried fixing it a million times but all I can get to show up is the picture that I want to use for the back round and no actual ask box. Help please? :) xx

That's because you haven't put the image in properly, here I've already explained it here. I hope this helps!

[codingcafe]

Hi! About that bubble tab, I can't get it to work! I want it to be in the bottom, and I usually manage to fix html problems myself, but I am really struggling! Also, I don't want the cross, I want my own little image, but I don't know how! I'd be lovely if you could help me out x

I would use this coding it’s the original one so in my personal opinion it’s the better quality (I don’t even know how that’s possible).

So that should sort out your main issues and it already has a little image meaning you can just replace it with whatever one you want. :))

[codingcafe]

hello:) may i know if you have the code for a corner hover tab like the one here fahlse(.)tumblr(.)com/ or anything similar? thankyou! xx

Okay so I’ve been asked this a lot, but I’ve never really answered it so it's about time I did.

Firstly get this hover tab coding. Then make the height edits, so you can edit the placement of the hover tab.

Find the coding section under #cornerplayer and this line of coding:

bottom:0px; 

Change it to this:

top:0px;

Then under the same coding section find this coding:

border-radius:0px 40px 0px 0px; -moz-border-radius:0px 40px 0px 0px;

Change it to this:

border-radius:0px 0px 40px 0px; -moz-border-radius:0px 0px 40px 0px;

And you have now successfully edited your hover tab to be on the left top corner instead of the bottom corner! :))

[codingcafe]

I saw this being used by someone for her tumblr blog dedicated to a story she's in the middle of creating (it was really good tbh).

page no. 3 | character by hellmouths ⌊ live preview — code

Includes 5 customizable “tabs", examples of how to use them are shown in the live preview. Tabs for a quote, bio, navigation, para list and other are included. Please read this page if you are unfamiliar with how to install a custom page. This page is dedicated to all the wonderful people I’ve met while roleplaying here on tumblr, you guys are the best!

— Read the terms of use and the FAQ. — Please like this post if you are installing the page.

[codingcafe]

How do you get that corner tab? Like theres an image in the corner and u scroll over it, so it stretches and displays information (like the blog refres-hed)

This is where I got mine, I just edited the hover height like so:

#cornerplayer:hover {width:250px; height:340px;

[codingcafe]

when you click on the notes of a photo on my theme (to view it bigger or whatever) the photo and the notes all slide to the right and overlap my sidebar :/ do you know how to fix it? x

I would have to take a look at it, ask me again off anon and I'll see what I can do :))

[codingcafe]

hi! i just installed a new theme on my blog (same as yours on starberry) and i managed to install a header even though there was no option for it (woo hoo!) but now how do i bring it down a bit so that it fits with the rest of the theme? xxx

Okay I know you said you figured it out but I'll just post the answer to this for other people :)

This isn't just for my theme, if you ever want to have a banner instead of a title then this way I'm showing you now will pretty much work every time.

What you do is fin your "header" or "title" section under

it will look something like this:

{Title}

All you do is replace the {Title} with your banner image (the bolded text). P.S. you may have to edit the sizing a little.

[codingcafe]

Hey Ella i was wondering if you have a tutorial on for your ask pop up on your starrbery blog? sorry if you've already been asked this! And also would it be possible to add a box behind my banner and description and links and stuff? Thanks xx

No problem! This is how you get a background, and go to the coding section .popup_block{ and copy in this code for the border:

border: 7px double #fff;

About the 'box' behind your description and links that's pretty much a theme based coding. Here's what I've got for my theme but you'll have to tweak it to fit into your theme you know?

.header { margin-top:20px;margin-bottom:50px; padding:10px;width:780px;margin-left:auto;margin-right:auto; text-align:center; background-color:{color:Header}; }

And obviously don't for get to place the:

*your description/links/etc.*

Just send me and ask if you need any help!

[codingcafe]

Same back to top tutorial I referred to the anon, just reblogging it for everyone :)

Back to top tutorial | by ramyeons

This is a very simple tutorial on how to add a back to top button on your blog ~ Click the picture to go on to the tutorial, the title or here.

[codingcafe]

how do i add a back to top? thank ya

Hey try using this tutorial. (Cause it's a really quick and easy one!)

[codingcafe]

hey, so i was just wondering how i can make the font in my hover tab smaller? x

I've looked around and tried some html on my own hover tab but the only thing that works and doesn't include css coding is this:

You can actually just place your whole hover tab content in between this coding. I hope this is what you wanted, or would you prefer some css stuff?

[codingcafe]

ok im probably getting annoying by now aha but is there a way to give my hover tab a border?

No! Not at all! So find this section in your hover tab coding:

#cornerplayer {z-index:999; background-image:url(image url); background-color:#94e29b; border: 7px double #fff;

And copy in the bolded text and if you don't want a double border then replace it with 'single' or 'dashed' there's so much you can do!