2015-10-25

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!

okay, the first thing for this tutorial is to look at the difference between index and permalink.  anything in your ‘index’ page ( i.e. your main blog ) will show up on your blog home page/posts.  anything on your ‘permalink’ page, will only show up when someone goes to the individual post on your blog.

for example, you could choose to have posts displaying as250px posts on your inex, but show them at ‘full size’ of 500px on your index page.

in this example, we’re going to restyle our post information ( notes, source etc. ) and move our tags to the permalink page only.

again - we’re going to refer to the tumblr standard documentation to help us with this.

{block:PermalinkPage} {/block:PermalinkPage}
{block:IndexPage} {/block:IndexPage}

you will use these in both your css and html sections to style the object ( in css ) and then to tell your page where to display them ( in the html ).

so to move our tags to the permalink page only, we need to make a tweak to the css and html.  the css for our tags starts on line 90 - so we’re going to add in the code to make sure that the style is applied to the permalink page only.

we add the opening permalink block instruction at the beginning, and make sure to close it at the end.  if you update your preview, you’ll see that the tags are still visible in your posts, but now don’t have the styling applied as this only applies to permalink pages.

if we add the same permalink block instruction to our html - our tags are on line 210 - then the tags will only appear on the permalink page with the styling defined in our css.  again make sure to add the opening block and the closing block around your tags html.

if you refresh again, you will see that the tags disappear from the blog post, but if you click on the post itself, they are available on the individual post permalink page!

lets add a few more things to our index page permalink.

some of the options you can include are a ‘via’ link ( the person you reblogged the post from ), a ‘source’ link ( the op ( original poster ) of the post ) and a ‘reblog’ option, so that people can easily reblog the post from you without having to go via your permalink pages.  and to do this, we’re going to introduce another feature - the ‘float’ feature.

we’ll align the date/time/notes to the left of the permalinks and the source/via/reblog to the right.  to do this we need to make add some new sections to the code.  one to align the date, and one to align the reblog info.

just below your permalink styling ( around line 90 in the code ) lets add in those two sections and give them a ‘float’ value.  this will align the sections to either the left or right of the block.

.date {
float:left;
}

.reblogs {
float:right;
}

now we have to add these references to our html and add in the information for the source/reblogs etc.  down in the html on line 216, we have our permalink code… add in the ‘div class’ for date around your date and notes information.  making sure to close the div at the END of that info;

then below it, we add in our new code for our reblogs;

{block:RebloggedFrom}
via;
source;
{/block:RebloggedFrom}
reblog

again, this is from the tumblr standard documentation for reblogged from and the source or op of the post.  we need to do the same as we did for ‘date’ and surround this with our ‘reblogs’ css reference.

so now our permalinks html code in total looks like this -

it’s all sitting WITHIN the permalinks reference, and so retains the styling for the links, but now the date and reblogs sections have been separated to sit or ‘float’ at opposite ends of that block!  update and save…  our info will now appear at either side!

but - it’s a bit smushed up against the bottom of the posts now… all we need to do to fix this, is add a little more styling to the ‘permalink’ css we already have in place.

lets add in a background so we can see the positioning more clearly;

our permalinks css is up on line 76.  the positioning of text ‘centre’ is now redundant since we added in the float references, so we can get rid of that.  we’ve included a background color, and a height ( you always need to define height or width to make a background color appear! ) - the height is just a little bigger than our text size to make sure it sits centrally.  we’ve then added in some padding ( remember padding is internal to your section ) of 5px, just so that the information has a little spacing around it with our new background!

.permalinks {
background-color:#eee;
padding:5px;
height:12px;
}

refresh and save and your permalinks and reblog info should now be positioned nicely at the bottom of your posts!

okay, that’s our permalinks and tags sorted, lets look at some more post styling…

if you send yourself an ask, you’ll see that it displays in a pretty standard way -

which is fine, but you can also add styling to ask posts.  there are three different things you can style here.  the url of the asker.  the question itself.  your response.  you can style these in any way you like, but i’ll run through some basic styling here to give you an idea of what you could do…

lets add in some styling for the asker. ( adding this down at the bottom of our css on line 169 as this will define specific post styles, rather than styles applied across everything… )

here’s an example of the styling you could use.  the font size has been increased ( over the normal body text ) we’ve given it an ‘italic’ style and centered it in the post.  and just for some arbitrary styling, added a border to the bottom ( for more information about borders, please see this post ) and some padding and margin to make sure we have nice neat spacing.

.asker {
font-size:15px;
font-style: italic;
text-align:center;
border-bottom:1px solid #eee;
margin-bottom:5px;
padding-bottom:3px;
}

and again, a little more arbitrary styling for the question;

.question {
font-style: italic;
padding-left:50px;
padding-right:50px;
}

if you update and save, nothing will happen O_O.  down in your html, we don’t have a ‘question’ block, as this is not essential ( question posts will be automatically styled as shown in the first preview )  but we can add one in… i’ll add in my question block beneath audio posts and above my permalinks as it’s a post block style.  again, this code is taken from the tumblr standard documentation.  all you need to add in is -

{block:Answer}

{Asker} whispered

{Question}

{Answer}
{/block:Answer}

and you can see that the references to our new css styling is there for the asker and the question.  where the word ‘whispered’ is, you can change that to anything you like.  the default is ‘asked’ - but pop in whatever you like!

if you update and save now, you will see that your styling is applied to your new post block.

we can do the same thing with our quotes.  here there are two things you can style.  the quote itself, and the source of the quote.  ( make sure you have a quote reblogged for this part! ).  this is what my quote looks like now;

beneath our ‘answer’ css, well add in another style section for quotes, and one for quote source.  again, how you style this is entirely up to you, so here’s some arbitrary styling just so you can see how it works…

.quote {
font-size:13px;
letter-spacing:1px;
text-align:center;
border-bottom:1px solid #eee;
margin-bottom:5px;
padding-bottom:3px;
}

.quotesource {
font-size:10px;
letter-spacing:1px;
text-align:center;
margin-bottom:5px;
}

in this case, we do already have a block for quote in our html, so all we have to do is add in the references to our new css styles!

and now our reblogged quotes look like this -

and that’s it for this tutorial… next time, we’ll be adding a few more ‘fancy’ things to your theme… don’t forget to check/pick up the coding from here.  and the preview blog is available for you to see where we’re at - here.

see y’all next time

Show more