HomeAboutGlossaryTales

GUESS WHAT

WE GOT FROZEN!!!!! I'M SO EXCITED!!!!!!!!!!! YEEK!!!!!!!!!!!

If you haven't watched it yet, I would SO recommend Frozen. It's just SO AWESOME!!!!! :)

Have a great day! :)
~Anna

Tutorial: Backgrounds

Hey! :)

So I was asked how I made a background on my sidebar. Like this:

(from Rubberboot Girl)
This is a really simple code that revolves around all backgrounds. So I've decided to do all backgrounds, focusing on sidebar because that's what I was asked about. :)

So, I've briefly mentioned CSS selectors before here with a few examples. Most of the CSS selectors that you would want for background would be (CSS on left, real names on right):

.sidebar = sidebar
.post-body = the post's body
h3.post-title = post title
.sidebar .widget h2 = sidebar gadget name
.main-outer = the post body & sidebar (pretty sure... either that or .main)

So, let's dig in.

1. Log in to your account.
2. Click on the blog you want to edit.
3. Go to template.
4. Click customize.
5. Go to advanced.
6. Scroll down and click CSS.
7. OK, so this is where we're going to be using our selectors and then the background code. Since I was asked about the sidebar, I'll use the sidebar. This is what a code will look like:

.sidebar {
background: #cccccc;
}

Now the sidebar is a gray color. (You can find colors by going to Template > Customize > Advanced > Links and playing with the link colors and then copying them when you like it and transferring it to your CSS code, example above.)

This might not look that great, though, because no doubt it now looks something like this:


Which... doesn't look that great. So how do we change that? It's actually very simple! :) We simply employ padding.

.sidebar {
background: #cccccc;
padding: 20px;
}

Now your sidebar should look something like this:


And if you have a picture like mine that just went off-centered? No problem. We'll just use margin! :)

So now we would have something like this:

.sidebar {
background: #cccccc;
padding: 20px;
margin-right: -30px;
}

Which makes mine look this (you'll have to play with the margin on yours, because like every single sidebar is different almost):


Here we simply made the sidebar bigger to accommodate the picture! :)

Hope this works! If you have any questions, just let me know! :) Have a great day! :)

~Anna

Let it go! =)

The amazing Britt just went and posted this, which reminded me that I had planned on doing it earlier because IT'S JUST SO AWESOME!!!!!!!!!!!!!!!!!! =)

So, here ya go - let the awesomeness begin!!!!!!! :D


Enjoy! :)

~Anna

P.S. The Piano Guys officially have their own label on here now... lol ;)

A chapter in which VERONICA FINALLY REACHES THE MOUNTAIN!! (YES!!!!!!!!)


"Veronica, I'm done. You can put that gauze on now."

Feeling dizzy with relief, I proceeded to wrap Mr. Catlong's arm. Then I looked out the window. We were about hundred feet off the ground, away from the road, traveling across the countryside of Iceland. The black car was no where in sight. And we were getting closer to the mountain.

I glanced over at Ian and he glanced over at me. Both of us gulped.


* * *

Hey, everybody. This is Veronica. I just realized that if you're turning into my story for the first time, this obviously doesn't make like... um... ANY sense. So, I thought I'd summarize what's happened so far.

So, first off, I go to like a magic spy school in Paris, France (called the Scarlet Academy - and we're called Scarlet Girls), and I have my own dragon. So, my uncle, Will, came to visit me, got himself shot, and then I found myself following his directions to his mansion in England with an annoying kid named Ian and a teacher named Mr. Catlong. From there, we found out that we were supposed to go and find the Northern Dragon Keeper who, crazily enough, lives in Iceland. So we're on our way to Iceland to speak to this dude because, yeah, hopefully he knows something about what's going on.

So. Hopefully that made some sense. ;) Now... ONWARD WITH THE STORY!!!!! =)

P.S. I think we were just picked up by some kind of dragon. (I should really tell Anna to put the labels back on...)

* * *

"We're going to die, aren't we?" Ian groaned.

I glanced out the window. "Um... yeah. Probably." I glanced at the talon prints on the top of the car that we could see from the inside. "We've got to find out what that is," I muttered, moving to unlock the door.

"Are you crazy?!" Ian yelled, holding on as the dragon... err, whatever it was, jerked suddenly. "You could fall! Or... or... or get eaten by that thing!"

"Great!" I shouted back, throwing the door open.

Immediately, I was hit by a strong wind that nearly knocked me over. I held onto the side of the car and got out, standing on the side bumper and staring up at what was holding us. Apparently we'd been a little off on our guess of a dragon.

To be precise... it was a griffin.

"Oh my word!" I shrieked.

Only because it was huge and, seriously, if you're ever faced with a huge lion/eagle thing, I'm pretty sure you would scream, too. If we were talking seriously.

The griffin's head swiveled at the sound of my voice and it screeched loudly, nearly making me fall off. I quickly jumped back into the car and slammed the door behind me, locking it quickly before holding onto the seatbelt until my knuckles turned white.

"I told you it wasn't a good idea!" Ian yelled over the sound of it screeching.

I didn't reply.

Because I was staring out the front windshield.

And realized that we were now flying through the mountains.

"Um... Ian...?" I started.

"And now we're probably going to die!" he cried. "You know that dragons without masters are really vicious and will kill anybody that they see!"

"Umm...." I tried again, starting to point at what I'd just seen ahead of us in the mountains.

"And now Mr. Catlong's really going to die!" Ian gestured towards our passed-out teacher.

"LOOK!" I yelled back, pointing ahead.

That's about when the griffin dropped us. We both screamed and, believe me, it did not feel good when we landed. Groaning, I sat up and found myself staring.

"Oh stink," I muttered.

Because, in front of us, standing in front of the huge castle that I'd seen earlier nestled in the mountains, was an old man wearing a gray robe with, seriously, the longest beard I've ever seen in my life. (It looked fake. It was that long.)

"Who's that?" whispered Ian, trying to hide on the floor in the back seats behind me and Mr. Catlong.

"I hope I'm right," I murmured.

"About what?" he hissed.

That's when I threw open the door and, feeling way more nervous then you should be when you meet people you've already met before, called out, "Hey, Uncle Herb, how's it going?"

Tutorial: Sliding Menu

OK, so, I was asked how to make like a sliding menu like I currently have on Rubberboot Girl, example below:



Then hover...



Needed for this tutorial:

A picture and its URL (web address)*

*I would suggest doing this before we start this tutorial. (A really easy way to do this is to make a new post, upload the photo you want to use like you're going to put it into the post, right click on it and select "open link in new window" and grab it from there.) This picture will be the "let's go" picture like I used above.

Okey dokey, let's go. :)

1. Log into your blogger account.
2. Click on the blog you want to add this on.
3. Go to layout.
4. Click add gadget.
5. Pick the HTML/Javascript gadget.
6. Paste this inside:


<div class="slide-main">
  <img src="slide.png" />
  <div class="slide-container">
  paste your main content code here 
  </div>
</div>


7. Replace "slide.png" with your image URL.
8. Save.
9. Go to template.
10. Click customize template.
11. Go to CSS.
12. Paste this inside:


.slide-main {
  position: fixed;
 top: 50px;
  right: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.slide-container {
  height:270px;
  width:266px;
  border:2px solid #444444;
  border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
  background:#dcdcdc;
  position: fixed;
 top: 50px;
  right: -270px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.slide-main:hover {
right:270px;
}
.slide-main:hover .slide-container{
  right: 0;
}


13. Save.
14. Viola! :)

How to customize this code:

".slide-container" has several things that I customized. You can change heights and widths, the border (explained in the post before this/a few posts before this), how big the border is etc.

Hope this works! :) If you have any questions/problems, just tell me, and I'll try my best to help! :)

Have a great day! :)

~Anna

UPDATE

OK, so, I just realized I didn't quite specify how to put things INSIDE of here. It's actually really simple.


<div class="slide-main">
  <img src="slide.png" />
  <div class="slide-container">
  paste your main content code here 
  </div>
</div>


So here's the code we used before, right? Where iti says "paste your main content code here" is where you paste everything that goes inside. But how do you do that? Like links? How does that even work? It's actually pretty easy. This is what a link in HTML looks like:

<a href="PASTE URL HERE">THE WORDS THAT WILL APPEAR</a>

Simple, right? :) Just repeat with how many you need. To center it, just add these on to your code:


<center><a href="PASTE URL HERE">THE WORDS THAT WILL APPEAR</a></center>


This centers it. :) To add an image (which I haven't tried, so... this should work, but if it doesn't, just let me know...) just add this:


<img src="IMAGE URL HERE" alt="" height="PUT THE HEIGHT HERE (ex. 20)" width="PUT THE WIDTH HERE (ex. 20)" />

And then customize it.

If you have any other questions, just let me know! :)

Tutorial: Borders & Date Underneath Post Title

So, I was asked how somebody could make their post title and date header look like this:

THIS IS A TEST POST TITLE
---------------------------------------------
Saturday, February 7th, 2014

This needs several codes, one of which is the border code.

If you want a border underneath, your post title, it would look like this:

h3.post-title {
border-bottom: #000000 1px solid;
}

Now, let's wade through this code a little bit.
1) h3.post-title: this is the CSS selector of the post title. (basically a rather confusing name for, more plainly, the name of the post title in the CSS language.)
2. { }: these brackets show where the code, whatever you want to happen to the post title, starts and ends.
3. border: this specifies a border. If just left alone, the border will go around the whole object. (in this case, the selected post title.) The added on "bottom" means that the border should be only on the bottom. (you can do border, border-bottom, border-top, border-left, or border-right.)
4. #000000: this is the color of the border. This is black. (white is #ffffff) One way to find the colors that you want is to go to, in the template customization, where you pick the colors of the links. You'll see numbers and letters like these - those are the "code names" (lol that sounds funny... =P) of the colors. That's one of the ways that I find the colors that I want for my borders.
5. 1px: this is the size of the border, the width. You can make this any size.
6. solid: this is talking about what kind of border. You can have dashed or dotted, too, and some others, but those are kind of confusing.

You can use this border rule on other things, too. Like on the sidebar gadget's name. Its selector is ".sidebar .widget h2", so if you were doing the same border up there^ underneath a sidebar gadget's name, it would look something like this:

.sidebar .widget h2 {
border-bottom: #000000 1px solid;
}

You can also use this for the bottom of posts, which would look like this:

.post-footer {
border-bottom: #000000 1px solid;
}

So, with this knowledge, we can make the border underneath the post title (and underneath others). But how on earth do we get the date title underneath it?

Well... *nervous laugh*... I don't really use what I suppose is considered the real way, going into the HTML and changing it and a lot of complicated stuff. But this way is lots easier and works really well. (Another thing about this code that I'm going to show you... it's one of my favorite codes. Ever. You can apply it to so many things and do so many things to it. It's "The Revolutionary Code." lol :D haha)

OK, so, what I do is use the margin rule.

The selector for the date header is, technically, .date-header, but it doesn't usually work unless it's put into this format:

aside .date-header, .date-header

The margin rule has different lengths, depending on the fonts and positioning. But here is an example of what your code should look like:

aside .date-header, .date-header {
margin-bottom: -100px;
margin-top: 50px;
}

(Note: it probably won't be as much as 100px, usually something like 50px.)

So, why on earth do I have a "margin-top"? We were just trying to get the date title below. Well, when we use the margin rule, like taking the date title lower, the space on top of the post title now goes smaller, too, so sometimes when you have multiple posts next to each other, your post title of one might be running into the post footer of another. That's why we use the margin-top, to kind of weigh it out and give us some more padding on the top that looks more normal.

So now we have all the information and code that we need to make the post title with the date header underneath it.

Hope this works out for you guys! If you have any problems, just let me know, and I'll try to help as much as I can! :)

Have a great day! :)

~Anna

Tutorial: Making some things italic and some not

I've seen lots of bloggers who have found out about the

a:hover {
font-style: italic;
}

CSS piece. But this CSS makes all links go italic when you hover, which is sometimes not what you want, especially if your post title, for example, is in a cursive font and you don't want it to go italic. There is actually an easy fix for this - we simply have to find the selectors for the "post body" (making all links just in the post italic) and "sidebar" (making all links just in the sidebar italic). The codes for these would be:

.post-body a:hover {
font-style: italic;
}

.sidebar a:hover {
font-style: italic;
}

Or, we can combine the code so we don't have much clutter, which would look like this:

.post-body, .sidebar a:hover {
font-style: italic;
}

Pretty easy, right? It's kind of fun to play around with. :)

I got asked about how like on pages, if you have

Home | About | Contact

How to make the | not go italic if you have the italic CSS working. This is also a pretty simple fix. Supposing that we're making the pages just as links in a text or HTML gadget, simply don't include the | in part of the link. So in the text gadget it would look like this [kind of, hopefully]:

Home | About | Contact

Instead of, for example:

Home | About | Contact

So the | aren't part of the links, if that makes any sense.

Well, I hope this was helpful! :)

Have a great day! :)
~Anna

Tutorial: How to make a Palette with PicMonkey

 Needed for this tutorial:

The use of PicMonkey
A photo

OK, let's dive in. :)

1. Go to PicMonkey [x] and click "Edit a Photo."


2. Upload the photo that you're going to use. It can, frankly, really be any photo, but you probably want it to at least be 500x100.
3. When you get to the page where everything's loaded, click "canvas color" and choose white and then apply.



4. Now, click on "crop" and crop so that it's long and thin.



5. Now, go to the little butterfly, or, more specifically, overlays.
6. Click on "geometric" and click on about five of the squares (or rectangles, both work, but rectangles will probably work better) or as many colors as you're going to want in your palette. (I used rectangles, by the way.)



7. Now, click on each of the rectangles/squares and change them to the colors that you like. I'm going to go with a pink palette, because those are more of the colors that I'm usually drawn to. Then, drag the rectangles until they're about the same size and move them right next to each other, covering all the white spaces. (They don't have to be even.)
This can be done with any colors of your choice that suit you. :)
8. Now all that's left is to simply save your project and, viola! We're done! :)



Great job, you guys! :) You did great. =) If you have any questions/problems, just let me know, and I'll try and help as best to my ability! :)

Have a great day! :)

~Anna

P.S. To go with my "2012" and "2013" labels, I just made a "2014" label. Scary.... =P ;) ;D