my coding blog

Random Fonts  

 Please Like or reblog if you download it  

Amazing Books

 Guld script color

 Mikhaella 

Baby boomer

 Aliva Brush

(fansite) theme 04: alina by @mistletoe

― preview | github | pastebin

features

full page header

navigation button + full screen navigation

footer that includes 10 additional links, additional text area, and affiliates section

500px posts

space for over 20 links

separate section icons

three different sections with the ability to add more.

matching navigation page: starkov

credits

cappuccicons by @suiomi

do not use as a base code, repost, claim as your own, frankenstein, or remove the credit. like or reblog if you intend to use or if you just want to share! ✧

What is Cappuccicons?

Cappuccicons is a merge of my previous two fonts, Honeybee and SaturnIcons. It came to replace these fonts with new and upgraded icons, and it has most icons from both fonts (except repeated ones, of course).

Using Honeybee or Saturnicons? Both fonts will remain working, though the icons lists will be gone. You can use Cappuccicons’ list for reference, as most icon names have remained the same.

Download and Install

www.cappuccicons.com

All instructions are available on the page.

Available for graphic design!

You can now download all 1078 icons in PNG and SVG formats.

Download links are available on the page.

Font information

CORNERSTONE by melancholytown

click the source link to access the theme preview & code !

FEATURES

a simple, responsive minimalist muse page. intended for writing and indie blogs. 

each muse section contains three links and an information section. instructions on how to add new muses are present in the code itself. 

this page includes filters that can be edited easily to suit user preference. i highly recommend reading the isotope combination filtering tutorial by magnusthemes before using this theme.

CREDITS

isotope filtering tutorial: @magnusthemes 

font hosting: google fonts ( abril fatface + raleway )

honeybee icons: @suiomi

icons used for the preview: @luthien

TERMS OF USE

don’t remove / move my credit or obscure it in any way.

don’t use this theme as a base code.

don’t take parts of this code to put into other themes

do edit for personal use

do read the customization guide provided

page 21: binding ; an about page by @lollyracketcodes

live preview // pastebin // buy me a ko-fi

here’s a compact about page. i had florence + the machine stuck in my head while making this.

FEATURES

seven links

automatically resizing images

page 20: lols ; a story page by @lollyracketcodes

live preview // pastebin // buy me a ko-fi

the first code of the new year! it’s actually a kinda old post that i never posted on here. it’s a story page that includes link to characters. i hope to start sharing more codes soon. life has just been a lot…

FEATURES

small about area for you story

char images with links to character tags

page 20: lols ; a story page by @lollyracketcodes

live preview // pastebin // buy me a ko-fi

the first code of the new year! it’s actually a kinda old post that i never posted on here. it’s a story page that includes link to characters. i hope to start sharing more codes soon. life has just been a lot…

FEATURES

small about area for you story

char images with links to character tags

theme #60: green tea by pirateskinned ↳ check the source link for the preview + code

contained theme with 400px or 500px posts

sidebar with an image ( 240 x 360 ), title, description and up to four links

custom font sizes ( 11px - 15px )

toggle option for the background image to be pattern or cover size

toggle option for image wrap within text posts — this feature is only for roleplaying blogs with a lot of text. does not work well with one liners!

lots of colour options

page 06 — showcase a theme for codingcabin’s gridmania challenge

preview, code (alt.), more info

features:

15 color options

filters for projects

optional lightbox for project images

credits:

isotope.js and imagesLoaded by Metafizzy

minimal themes / basecodes… 

as i released my original basecode 4 years ago ( !!! ) i thought i’d publish updated ( and slightly tidier ) versions.  all sections in the code are labelled for ease of editing - no further instructions are included in the code, but for help with editing, please see my theme 101 tutorials & other coding tutorials.

these codes are very basic but are fully functional themes in their own right.  they are html and css based codes ( with the exception of the tooltips script ).  there are also examples of ‘calc’ functions and ‘if’ options in the themes as well as different post block sizes.

they’re also pretty much where i start when i make my own themes ♥

all codes feature:

metatags to change colours/font size etc.

user portrait

3 extra links

optional show/hide tags

optional show/hide captions

post width options for 400px or 500px

includes tooltips script

includes linearicons

theme 1 / base code 1 - a simple centered theme with sidebar: preview + code 

theme 2 / base code 2 - a simple centered theme with header: preview + code

theme 3 / base code 3 - a simple centered container theme with sidebar: preview + code

terms of use: 

if you alter the themes for either ( free ) public release or personal use and would like to include your own credit, feel free to change the bottom credit url.  if using the theme ‘as is’ or with minimal changes, then please leave this credit in tact.  credit at the top of the code will not be visible but must remain in all public/personal themes.  please do not repost unedited as your own theme/base code.  please reblog or like this post if using!

welcome back friends, here’s part 3 in the series.  this time we’re going to look at more basic styles that will be applied across your posts!

theme 101 part 3 - more basic styles

styling general links

styling bold and italic

styling blockquotes

images

don’t forget to pick up the code from the end of part 2 - this will be our starting point for this tutorial!

welcome back friends, here’s part 4 in the series.  this time we’re going to step away from post styling for a little bit and look at making a sidebar!

THEME 101 PART 4 - Sidebar, Navigation, Description, Pagination

STYLING SIDEBAR & NAVIGATION LINKS

STYLING HEADINGS AND DESCRIPTION

STYLING PAGINATION

don’t forget to pick up the code from the end of part 3 - this will be our starting point for this tutorial!

here’s a quick snapshot of where we’re at - 

basic posts and no navigation which isn’t all that helpful :\ again we’re going to be using the basic tumblr reference sheet for a few things, so it’s useful to have this open or bookmarked somewhere…

okay, lets make a sidebar for the theme, this will be where we can put our title, links, description and maybe even an image or two!

at the bottom of your css section, ( around line 95 ) make a couple of line breaks and add in a new bit of css called ‘sidebar’.  we want to make sure that our sidebar doesn’t move when we scroll through our posts, so we have to give it fixed positioning.  we also need to tell the theme where to place it so we need to include postions from the top and left. and for the purpose of these tutorials, we’re going to make it the full height of our theme and we need to give it a width too…

#sidebar {    position:fixed;    left:0px;    top:0px;    height:100%;    width:270px;    background:#000; }

things to note - you can use percentages to size and position things on your theme as well as pixels.  using a height of 100% means that our sidebar will always be the full height of the screen, no matter the monitor size or screen resolution of anyone viewing it!

also add in a background color ( this just makes it easier to see when you’re working on your theme! )

now we need to add in the reference to our html.

if you look just at the beginning of your html, below your <body> tag - you will see that we have some basics in there for ‘title’ and ‘description’ already.

we’re going to make sure that the title and description sit INSIDE our sidebar - so we add the div id and end div AROUND this piece of code.

add in your reference

<div id=“sidebar”>

and make sure to close the div after the end of the description block!

now preview and save and you should see something like this! - note; i’ve added some sample text into my description ( on the basic editor ) just so i can see where it is

styling your heading…

you can see that our title is enclosed in heading tags - <h1>{title}</h1>

this will pull through tumblrs standard heading style - but we can change that by adding another style to our css.  again it’s just my personal preference to keep all standard styles together up near the top of the css, so i’m going to add in a new style between the css for images and the css for container ( up on line 53 ).

we’re going to make a new style for ‘h1’

h1 {    font-size:30px;    line-height:30px;    text-align:right;    padding:10px; }

we’ve added in a font size - and it’s a good idea when making something larger than your standard body font, to add in information to make the line height bigger too!  just so that if something runs onto more than one line, it doesn’t overlap the one above.  you can align your text in any way you like - text-align left, right, center, justify.  i’ve chosen right just for the demo.  and add in some padding so that the title isn’t right up against the side of your sidebar and it has a little space!

you can also add in a new color here, or even a different font.

things to note; any heading with the tags <h1></h1> will pick up this style on your theme.

save and preview and you should now have something like this…

which is looking a little better, but our description is all smushed up against the left hand side. so again, we need to add in a style… underneath your ‘sidebar css’ ( around line 111 ), make some space and add in a new div id…

#description {    font-size:10px;    color:#fff;    text-align:justify;    padding:10px; }

here we’ve just changed the font size, added in a different color, aligned the text and added some padding so we have that nice spacing around our section.

we need to add the reference to the html - this time, we only want to apply this style to our description block INSIDE the sidebar div.  so add in your

<div id=“description”>

before the description block and remember to move the end div to the end of the description block…

preview and save and you should have something like this…

now to add in some navigation!

things to note; because we’re adding in navigation below our description, we won’t need to add in a positioning for it… any elements which follow one after another within a div ( in this case, inside our sidebar - the title, then the description then the links ) don’t need that extra positioning info.  if you want to move the links elsewhere on the page you’d need to code in another ‘fixed/absolute/relative’ position.  but for now, we’ll keep it simple…

in our css, when we added in our first ‘generic’ links styling ( in part 3 of the tutorial ) we added 3 sections.  one for the links style and position, one for the links specific style and one for the links hover style.  we need to do the same here.

below your description in your css section, add in three new sections;

#links {

}

#links a {

}

#links a:hover {

}

now to add in some basic info-

#links {    font-size:16px; }

#links a {    display:inline-block;    color:#006f94; }

#links a:hover {    color:#dddddd; }

in the ‘general’ styling, we’ve set a new font size.  in the ‘active links’ ( links a ) we’ve changed the color.  and in the links hover, we’ve added another color.

things to note; there are two generic link display styles that you can use - ‘display:block;’ and ‘display:inline-block’.  ‘block’ will align your links in a vertical list - like so…

‘inline-block’ will align your links in a horizontal list - like so…

for this demo, we’ll stick to ‘inline-block’ but try both styles on your preview to see the difference.

now we need to add our links into the html…

we want them to be after the end of the description div, but before the end of the sidebar div - so they sit BELOW the description but still INSIDE the sidebar.

i’ll also add in some basic links to my html - like so…

<div id=“links”> <a href=“/”>home</a>   <a href=“/ask”>ask</a>   <a href=“/submit”>submit</a>   <a href=“/archive”>archive</a>   </div>    

and it should be positioned like this…

…below the closing div for your description - with a closing div for your links, and then the closing div for your sidebar after that.

preview and save and you should have something like this…

if you hover over your links - you’ll see that we still have that sharp ‘snap’ between the link color and the hover color.  this is where transitions come in!

there are lots of different kinds of transitions that you can use - i’m not going to rewrite the book on them as there’s a very handy reference for transitions over at css3 

we’re going to add in a transition to our links, and we use three lines so that the transition will work in all browsers…

-webkit-transition: all 0.7s ease;  -moz-transition: all 0.7s ease;  -o-transition: all 0.7s ease;

add this into your active links css!

your links should now fade between the link color and the hover color smoothly - you can change the ‘0.7s’ to something smaller e.g. 0.3s for a faster transition, or something larger, e.g. 0.9s for a slower transition.

you can also add this transition to your ‘generic’ links style - so lets do that now - up in the generic section ( around line 20 ) - just add in the extra lines for transitions to get rid of the ‘hover snap’.

preview and save. now all links on your blog will have the smooth transition!

lets add a little more styling to our links, as again, they’re smushed up against the left-hand side of the sidebar.

we’ll add some padding to our link style to give us that space again.

#links {    font-size:16px;    padding:10px; }

and we can add more space BETWEEN our links by using padding in the active links section-

#links a {    display:inline-block;    color:#006f94;    padding-right:10px;    -webkit-transition: all 0.7s ease;    -moz-transition: all 0.7s ease;    -o-transition: all 0.7s ease; }

notice, we’ve only added padding to one side of the links - padding-right means there will be a space of 10px to the right of each link.

you can continue adding more styles to these sections till you’re happy with them ( but i’ll cover more styling in later tutorials! )

let’s go ahead and add in some basic pagination now…

you might want to reblog a few more posts at this point, as you will not be able to preview your pagination unless you have more than 10 posts on your blog.  try to reblog a selection of posts including a quote and a music post as we’ll be styling these in a later tutorial!

we’ll do something a little different and add our pagination somewhere else on the page - so we’ll need another set of css styling for it…

#pagination {    position:fixed;    bottom:30px;    left:850px; }

use fixed positioning so that it won’t scroll when you view your posts.  you can also set the positioning relative to the BOTTOM of the page, rather than the top!  we’ll also add in a left positioning to take into account the width of our sidebar and posts - it’ll appear to the right of our posts at the bottom of the page…

we’re going to refer to the ‘navigation’ section of the tumblr standard coding here.  you can include basic navigation ( next and previous ) or ‘jump’ pagination which shows a number of links to page numbers.  there are also different styles you can include, but for the sake of simplicity, we’ll stick to the ‘next’ and ‘prev’.

in our html we need to add in another div - this time it needs to sit OUTSIDE of our sidebar as we’re giving it it’s own positioning.  so below the sidebar end div, we add in our new section with a reference to the css we’ve just created… and we’re just using the tumblr standard code.

<div id=“pagination”>{block:Pagination} {block:PreviousPage}<a href=“{PreviousPage}”>prev</a>{/block:PreviousPage} {block:NextPage}<a href=“{NextPage}”>next</a> {/block:NextPage} {/block:Pagination}</div>

unfortunately - the tumblr preview will not show you your new pagination - you need to preview and save and then go to your live blog to see this.

right down there at the bottom, we have our ‘next’ page link!

because we haven’t added in extra styling, it’s picking up our ‘standard’ link style - so we can go ahead and add in some more styling to the pagination style.

remember, because these are LINKS we need to make sure to add an active link section and a link hover section to style them.

#pagination a {    color:#006f94;    font-size:20px;    -webkit-transition: all 0.7s ease;    -moz-transition: all 0.7s ease;    -o-transition: all 0.7s ease; }

#pagination a:hover {    color:#ffffff; }

we’ve changed the font size and color and added in our link transition, as well as a hover color

preview and save.

what you have now is actually a functional basic theme.  it has all of the elements you need to be able to use it ‘as is’ - but in the next tutorials we’ll look at ‘fancying that shizz up!’

you can ( as ever ) - review the up to date code - HERE.  and the test blog over HERE.

welcome back friends, here’s part 5 in the series.  this time we’re going to look at some more positioning tricks and what you chose to display on your main blog and what you can show only on an individual post page.

THEME 101 PART 5 - Permalink & Index, adding via/source/reblog to your post info, using ‘float’,  more post styling.

MOVING FEATURES TO A PERMALINK PAGE

MORE OPTIONS IN POST INFO & USING ‘FLOAT’

STYLING ASK AND QUOTE POSTS

don’t forget to pick up the code from the end of part 4 - this will be our starting point for this tutorial!

welcome back friends, here’s part 6 in the series.  this time we’re going to look at adding in some fancy stuffs; in this case,  images that you can apply to different parts of your theme!

THEME 101 PART 5 - Adding images, backgrounds, sidebar, ec..

ADDING A BACKGROUND IMAGE

ADDING INDIVIDUAL IMAGES

ADDING SIDEBAR IMAGES