Riverbell themes

Introduction

Hi there! Welcome to my corner of the internet. I am Emma, a 21 year old student from Sweden and this is my theme and resource blog. I've been into web design since I was about 12-14 years old and I still love it. You are very welcome to use my themes, just as long as you follow the rules and don't be afraid to send me a message!

Updates

  • 28.07.2014 Theme #20 Blanco II released
  • 25.07.2014 Theme #19 Odd updated
  • 22.07.2014 Theme #19 Odd released
  • 16.07.2014 My first tutorial released
  • 15.07.2014 New main blog theme!
  • 7.07.2014 Theme #18 Octans released

Riverbell themes

keepcalmandprogram:

Do you know the difference between margin and padding?

To summarize:

Padding is the space inside a box
Margin is the space outside a box
Given that info:

Use padding when you want space between the contents of the box and the box’s edges
Use margin when you want space between the box and other boxes
Or, in other words, I’d say…

Do I want more space, aka “breathing room” inside this box? Use padding.
Do I want more space between this box and other elements on the page? Use margins.
When you have a background color or a border turned on for your box (i.e. a distinguishing edge), it’s easier to visually see why you would want to use padding or margin.

It’s just trickier when you don’t have some distinguishing edge to your box, because then padding and margin appear to be behaving in the same way.

In those cases, either one can get the job done. I.e. it’s not always necessarily a “you have to use padding* or “you have to use margin” situation.

Here’s a couple more points that distinguish margin and padding from one another:

When you use padding it adds to the overall width of your elements. Ex, if you set the width of a box to be 100px but have 10px padding, you actually will have an element that is 120px wide (10px padding on either side).
Margins collapse. This means if I have two boxes next to one another, each with a 10px margin…The distance between them will not be 20px (10px + 10px). Instead, the margins will collapse so the margin is for realz 10px.

keepcalmandprogram:

Do you know the difference between margin and padding?

To summarize:

  • Padding is the space inside a box

  • Margin is the space outside a box

Given that info:

  • Use padding when you want space between the contents of the box and the box’s edges

  • Use margin when you want space between the box and other boxes

Or, in other words, I’d say…

  1. Do I want more space, aka “breathing room” inside this box? Use padding.

  2. Do I want more space between this box and other elements on the page? Use margins.

When you have a background color or a border turned on for your box (i.e. a distinguishing edge), it’s easier to visually see why you would want to use padding or margin.

It’s just trickier when you don’t have some distinguishing edge to your box, because then padding and margin appear to be behaving in the same way.

In those cases, either one can get the job done. I.e. it’s not always necessarily a “you have to use padding* or “you have to use margin” situation.

Here’s a couple more points that distinguish margin and padding from one another:

  1. When you use padding it adds to the overall width of your elements. Ex, if you set the width of a box to be 100px but have 10px padding, you actually will have an element that is 120px wide (10px padding on either side).

  2. Margins collapse. This means if I have two boxes next to one another, each with a 10px margin…The distance between them will not be 20px (10px + 10px). Instead, the margins will collapse so the margin is for realz 10px.

Customizing your lists

etrothemes:

Another CSS tutorial! Now, we’ll be learning how to customize your lists. Wait, what do you mean, you can wonder. You know when you’re creating a post and you do a list like this:

  1. One
  2. Two
  3. Three

Or like this:

  • Paper
  • Ink
  • Sanduich

Know that you can customize it! First, let’s start with the numeral one. Put this on your CSS, or <style> section:

ol { }

Inside of it, we will first customize the numerals type. Add on list-style-type as your property, and then add a value: It can be upper-roman ( roman numerals ) or lower alpha ( normal numbers ).

ol { list-style-type:upper-roman; }

On this case, I used the roman ones. That means that when you post a ordered list, on your theme it will be displayed with roman numerals. See, the property, list-style-type, is bolded, and the value, on this case, upper-roman, is italic.

Now, let’s go to the unordered lists, with the bullets. You’ll add this on your <style> section:

li { }

Our property will be the same: list-style-type. But now, the values are square and circle, and the circle would be the bullets. See:

li { list-style-type:square; }

On this case, I’m using the squares instead of the bullets. There are other properties besides the list-styles: There is list-style-position, that defines if the list-item markers will appear inside or outside of the content. The values would be inside, outside and unherit, but we won’t go futher on this one. A nice thing is to customize the colors of the list-item markers. The property for it would be list-style-color, and it can be used on any styles of lists ( that means, you can use it both inside of the ol{ } or li{ } ). See an example with li{ }:

li { list-style-type:square;list-style-color:#f7f7f7; }

Property bolded, and value in italic, as you can see. Other thing you can do is substitute one of the default markers for your own image! You’ll use the list-style-image property and the value will be url(the url of your image) An example with ol{ }:

ol { list-style-image:url(bullet.gif); }

I don’t know if the bullet.gif really exist, it is just an example after all. So, that’s it, you already can customize the lists on your blog!

Changing a one columned theme into a grid theme (WITH MASONRY)

themesbyzsu:

I’ve seen tutorials on how to make a multi-columed theme, but it never really includes masonry or infinite scroll so I’m going to try fill that void!

Making a two-columned theme is really basic, it’s just when you edit other people’s themes where it becomes a little bit more complicated, because you have to find things. I’m going to be using my base code as an example theme and editing it to make it multi-columned.

Difficulty:  ★ ★ ☆ ☆ 
Requested By: anonymous
Note: This tutorial may not work on all themes, and if it doesn’t I highly recommend either finding a theme that has multiple columns already installed!

Next Tutorial: Moving things on-click with javascript. (Example)

Feel free to request a tutorial! 

Read More

limesthemes:

Tutorial requested by Nery and Sophia
TRANSITION DELAYS
The Basics
Transition delays are a cross-browser animation element which allows you to, as you may assume, delay transitions in CSS. Depending on where you put them, they can delay the transition on and off hover, just the transition on, or just the transition off. 
The standard transition-delay command is supported by Internet Explorer (9 and later), Google Chrome, Mozilla Firefox, and Opera. You need the -webkit-transition-duration to include Safari. 
This is what transition delay would look like in your code. If you placed it here, any transition would be delayed both on hover and off hover. As an example, I’ll use the properties scale, background color, and rotate.
Example 1

#item {
…
transition-delay:Xs;
-webkit-transition-delay:Xs;

[[full code for example 1]]
I used 2 as X, so the transition was delayed for 2 seconds both on and off hover. Suppose, though, that I only want it delayed ON hover?
Example 2
To make the transition delay ON hover, but not OFF hover, this is the basic structure you would use:

#item {
…
transition-delay:0s;
-webkit-transition-delay:0s;
}
#item:hover {
…
transition-delay:Xs;
-webkit-transition-delay:Xs;
}

Essentially, I deny the transition delay OFF hover by setting the standard transition delay on the item to 0s. This makes the transition delay when you hover over it, but not when you mouse off.
[[full code for example 2]]
The last main way to use transition delays is to make transitions immediate ON hover, and only affect a delay when you mouse off.
Example 3
To do this, you basically do the reverse of example 2:

#item {
…
transition-delay:Xs;
-webkit-transition-delay:Xs;
}
#item:hover {
…
transition-delay:0s;
-webkit-transition-delay:0s;
}

[[full code for example 3]]
And there you have it! Those are all the basic uses I can think of for transition delays. Once you’re comfortable with them, you can combine them with transition durations and make really cool little animations, like this one:
Example 4
[[full code for example 4]]
Please like or reblog if you found this tutorial helpful!

limesthemes:

Tutorial requested by Nery and Sophia

TRANSITION DELAYS

The Basics

Transition delays are a cross-browser animation element which allows you to, as you may assume, delay transitions in CSS. Depending on where you put them, they can delay the transition on and off hover, just the transition on, or just the transition off. 

The standard transition-delay command is supported by Internet Explorer (9 and later), Google Chrome, Mozilla Firefox, and Opera. You need the -webkit-transition-duration to include Safari. 

This is what transition delay would look like in your code. If you placed it here, any transition would be delayed both on hover and off hover. As an example, I’ll use the properties scale, background color, and rotate.

Example 1

#item {

transition-delay:Xs;

-webkit-transition-delay:Xs;

[[full code for example 1]]

I used 2 as X, so the transition was delayed for 2 seconds both on and off hover. Suppose, though, that I only want it delayed ON hover?

Example 2

To make the transition delay ON hover, but not OFF hover, this is the basic structure you would use:

#item {

transition-delay:0s;

-webkit-transition-delay:0s;

}

#item:hover {

transition-delay:Xs;

-webkit-transition-delay:Xs;

}

Essentially, I deny the transition delay OFF hover by setting the standard transition delay on the item to 0s. This makes the transition delay when you hover over it, but not when you mouse off.

[[full code for example 2]]

The last main way to use transition delays is to make transitions immediate ON hover, and only affect a delay when you mouse off.

Example 3

To do this, you basically do the reverse of example 2:

#item {

transition-delay:Xs;

-webkit-transition-delay:Xs;

}

#item:hover {

transition-delay:0s;

-webkit-transition-delay:0s;

}

[[full code for example 3]]

And there you have it! Those are all the basic uses I can think of for transition delays. Once you’re comfortable with them, you can combine them with transition durations and make really cool little animations, like this one:

Example 4

[[full code for example 4]]

Please like or reblog if you found this tutorial helpful!

pack #2 - contains 20 random textures. like/reblog if taking ;) [mf] [box