pocqueenjeyne - Tumblr blog

pocqueenjeyne · 8 years ago

Text

apparently i have written quite a few guides/tutorials - O_O - here’s a list of the code tutorials so far… no doubt, this will be added to - make sure to check the ‘resources & tutorials’ page for more…

g d o e s a t h i n g - how to make a tumblr theme from scratch;

theme 101 part 1 - basic html, styling body, styling and positioning posts

theme 101 part 2 - the padding function, the margin function, permalinks, tags and styling

theme 101 part 3 - styling general links, styling bold and italic, styling blockquotes, images

theme 101 part 4 - styling sidebar, navigation links, headings and pagination

theme 101 part 5 - index and permalink pages, float, post info, styling asks and quotes.

theme 101 part 6 - adding images, backgrounds, sidebar graphics, etc.

theme 101 part 7 - container theme, scrollbar, overflow, hover effects.

[ parts 6 & 7 come with full base codes… ]

c o d i n g & t h e m e s

popups;

how to add ‘popups’ - a detailed tutorial

how to style popups - adding link styles and info etc.

how to style popups - styling & moving the text/images/title within a popup.

custom fonts and text effects;

how to add custom fonts to your theme

how to add a ‘glow’ or ‘shadow’ effect to text on your blog

editing links and permalinks;

how to make ‘scattered’ links

how to add ‘hover links’ ( using symbols and tooltips )

how to rotate/spin links ( or other objects )

how to change your ‘like/reblog/via/source’ etc to hover symbols

how to add font-awesome icons to your theme

how to make internal links/menus/internal navigation on a page

theme backgrounds;

theme backgrounds - how to position them

how to add a background to other parts of your theme

how to make a container theme background ( photoshop + code )

making a background for a container theme & making sure it doesn’t ‘slip’…

other and misc;

basic html + theme stuff - adding links/images/music players, changing text styles etc.

billyplayer & dropbox tutorial - music players for blogs…

billyplayer & kiwi6 tutorial - music players for blogs…

greyscale fix for firefox

adding ‘particles’ to your theme

the lazy coders guide

how to add images/gifs up to 5mb to your theme

how to add borders to theme objects, e.g. curved blockquotes etc.

how to change post sizes to something other than the tumblr defaults

2K notes · View notes

pocqueenjeyne · 8 years ago

Photo

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

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

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.

part 5 will be coming soon!

139 notes · View notes