Fix on theme IV

I somehow forgot to put the metas for the links so you could edit them on your appearance options; I just fixed that. I am sorry for the inconvenience. The code has been updated.

04. Sweet, sweet life

live preview, pastebin

Features:

Everything is pretty geometric. 

As usual, do not copy, reproduce or claim any of this coding as your own. 

03. Radioactive; (revamped)

live preview, pastebin

Features:
Carousel code by codrops
Sidebar image: 280 x 100
Optional captions on index page
Option between 2 or 3 sidebar panels
Up to 5 sidebar links
Nothing has been changed, really. Just some minor fixes. This is my last revamp, so there are new themes coming up! 

03. Radioactive; (revamped)

live preview, pastebin

Features:

Nothing has been changed, really. Just some minor fixes. This is my last revamp, so there are new themes coming up! 

02. Our Deal; (revamped)

 live preview, pastebin

Here it is! One more improved theme. I decided not to revamp the other two (2nd & 3rd) since they were too simple and crappy.  
This version has:
More concise coding
New audio / answer posts
Minor changes in some features
Characteristics:
Sidebar image: 270px (width)
Main links appear when img is hovered
Optional subtitle and captions
5 additional links
I tried to make it as friendly as possible, so you’ll find tons of appearance options (excuse my horrible choice of colors). 
As usual, do not copy, redistribute or claim as your own any piece of coding. New themes will be coming your way soon, as well as one more revamp! I promise to get better and more creative as I advance in my web design career. xo

02. Our Deal; (revamped)

 live preview, pastebin

Here it is! One more improved theme. I decided not to revamp the other two (2nd & 3rd) since they were too simple and crappy.  

This version has:

Characteristics:

I tried to make it as friendly as possible, so you’ll find tons of appearance options (excuse my horrible choice of colors). 

As usual, do not copy, redistribute or claim as your own any piece of coding. New themes will be coming your way soon, as well as one more revamp! I promise to get better and more creative as I advance in my web design career. xo

01. Always; (revamped version of Beneath Anubis)

Revamped: live preview, pastebin

Original: live preview, pastebin

It’s been an extremely long while! Since I still do not have the time to make themes from scratch, I decided to renew and improve my already published themes. So, here you go. 

This version has:

Variables:

The gist is the same, though. This is a very plain and simple theme. As usual, do not copy, redistribute or claim as your own any piece of coding.

Hope to be more themes soon! Stay tuned.

benizora:

For those of you that are interested in learning about cool CSS transitions, make sure you check out this “Animatable” created by Lea Verou!
As quoted from her blog:

“It’s essentially a gallery of basic transitions. It aims to show how different animatable properties look when they transition and to broaden our horizons about which properties can be animated. Hover over the demos to see the animation in action, or click “Animate All” to see all of them. 
You can also click on it to see more details and get a permalink. Instead of clicking, you can also navigate with the arrow keys and press Esc to return to the main listing.”

benizora:

For those of you that are interested in learning about cool CSS transitions, make sure you check out this “Animatable” created by Lea Verou!

As quoted from her blog:

“It’s essentially a gallery of basic transitions. It aims to show how different animatable properties look when they transition and to broaden our horizons about which properties can be animated. Hover over the demos to see the animation in action, or click “Animate All” to see all of them.

You can also click on it to see more details and get a permalink. Instead of clicking, you can also navigate with the arrow keys and press Esc to return to the main listing.”

CSS basics: fonts

pscs5:

In this series of tutorials I’ll try to explain some css basics, maybe not to the extent of being able to make themes after reading this tutorial, but definetely not having a hard time when editing some minimal things in a theme.

I’ve planned so far to make three parts of css, and another extra one for html codes.

This first part I’ll talk about fonts in css. But first,

Basic of CSS: 

font-family: trebuchet ms; 

First comes the property, in this case: font-family.
And then the value, in this case the font name: trebuchet ms.

The (:) and (;) are essentials. Why? just because that’s how css works, if you forget to put them, the code won’t work.
 

font-family

It defines the font, there are plenty of fonts you can use in your html, the ones I use the most are: (monospace) corier new, lucida console, consolas. (sans-serif) arial, trebuchet ms. (serif) georgia. 

Here are some fonts names you can use in your html (remember the fonts must be the ones that come in the windows/mac pack, you cannot put the name of a font you have downloaded here, unless you’re using font-face, which I’ll talk about later…well, if I not forget…).

arial / courier new / georgia / lucida console/ lucida sans unicode / palatino linotype -palatino-/ tahoma / times new roman / trebuchet ms / verdana / geneva / ms sans serif / consolas / Sylfaen / Tunga / Gautami / Vrinda / Garamond / Book Antiqua/ Bookman Old Style / Constantia / Segoe UI Light / cambria

The code should be something like this:

font-family: trebuchet ms; 


font-size

It defines the size of the font, I usually use pixels as value to almost everything in css, since is easier for me. I believe you want to make your text in a resonable size that isn’t too big/small. Don’t even try to use size less than 7px it’s illegible. Normally 8px until 14px to body texts. Well personally I consider 13 and 14px already big, but there are people who like so…Remember the size of a font vary depending of the font, for example, 8px for trebuchet ms is almost illegible while for georgia is a good size. Anyways, the code should be something like this:
 

font-size: 11px; 


line-height

It defines the height between the font base line, See the images bellow for example. Well, I’ve learned that the line-height value should be 2px more than the font size value by a not that reliable teacher. (example: if the font size is 9px the line height I’d put would be 11px). I still use her rules, but feel free to add a value that you think is good for reading. Note the space between the pink lines.

line-height: 11px;


text-transform

It defines if the font will be in:
uppercase (the famous capslock, all your text will be in uppercase);
none (will have no changes in your original text, if you wrote something LiKe THiS will appear like that);
capitalize (All of the first letter of each word will be in uppercase),
lowercase (all the letters will be in lowercase)

(respectively, uppercase, none, capitalize, lowecase)

text-transform: uppercase;
text-transform: none;
text-transform: capitalize;
text-transform: lowercase;

important! only use one code. 


letter-spacing

It defines the space between the letters, you can use this feature for titles, mostly. You can use negative values as well. If you put it in a body text it may cause problems to read. See the images bellow for examples.

(Respectively values: 0px. 1px. 2px. -1px. -2px)
 

letter-spacing: 0px;


text-align

I think everyone who is reading this uses microsoft word right? so I won’t explain in details (There’s not much to explain anyway) I’ll just use some examples: 

justify

left

right

center

text-align:justify;
text-align:left;
text-align:right;
text-align:center;

important! only use one code.


font-weight

Well, for me there are only normal and bold. I’ve seen some codes with values or lighter, bolder, but to be honest I’ve never used this, I prefer the good and old <b>bold text</b>

font-weight: normal;
font-weight: bold; 


font-style

It defines the italic for fonts.

font-style: italic;


color

It defines the color for the text, you should put the hex code to the color, Always put the # before the code, like this:

color: #9C003E;

useful color hex code genarete site: colorpicker.com

The code you’re going to use is the one above the square gradient.

With this I finished the font propriety, I may be forgetting something, I don’t know. Sorry for that. Next one (If there is one ~laziness is screaming in my head~ it will be about div)

Excuse my poor grammar/english and my laziness to double check the tutorial to find mistakes.

(Source: nunmurithemes)