Editing Tumblr Post Appearance, How to custom tumblr post with html |
Editing Tumblr Post Appearance, How to custom tumblr post with html |
Deargfolt |
May 13 2015, 09:51 AM
Post
#1
|
Group: Members Posts: 3 Joined: 13-May 15 Member No.: 22,584 |
Hi guys!
I've checked the forum topics a bit and there doesn't seem to be an answer to my problem yet so here we go: I'm a bit new to the whole html thing on tumblr and I was wondering if anyone knwe how to custom posts on tumblr. In fact, I would like to edit the appearance of my tumblr post according to the theme I'm working on. The problem is that I have no idea how to do that, and after checking a hundred various websites, I still have no solution. Anyway here's my html (sorry if it's messy and incomplete but as I said, I'm completely new to this): <section id="posts" class="content clearfix {block:HideTitle}{block:HideDescription}no-title-desc {/block:HideDescription}{/block:HideTitle}{block:HideHeaderImage}no-image {/block:HideHeaderImage} {block:ShowAvatar}avatar-style-{AvatarShape}{/block:ShowAvatar} {block:HideAvatar}avatar-hidden{/block:HideAvatar} {block:IfNotCollapseNavigation}exposed-nav{/block:IfNotCollapseNavigation}"> <div data-page-id="{CurrentPage}"> {block:Posts inlineMediaWidth="400" inlineNestedMediaWidth="700" width="700"} <div id="contents" class="{block:Text}text {/block:Text}{block:Photoset}photoset {/block:Photoset}{block:Photo}photo {/block:Photo}{block:RebloggedFrom}reblogged {/block:RebloggedFrom}{block:Quote}quote {/block:Quote}{block:Link}link {/block:Link}{block:Chat}chat {/block:Chat}{block:Audio}audio {/block:Audio}{block:Video}video {/block:Video}{block:Answer}answer {/block:Answer}{block:Date}not-page post-{PostID}{/block:Date} {block:PermalinkPage} active exposed{/block:PermalinkPage}" {block:Date}data-post-id="post_{PostID}"{/block:Date}> <div class="post-wrapper clearfix"> {block:RebloggedFrom} <header class="reblog-header"> <a class="reblog-link" href="{ReblogParentURL}"><i class="icon-reblog"></i>{ReblogParentName}</a> </header> {/block:RebloggedFrom} <section class="post"> {block:Text} <div class="post-content"> {block:Title}<h2 class="title"><a href="{Permalink}">{Title}</a></h2>{/block:Title} {block:Body} <div class="body-text"> {Body} </div> {/block:Body} </div> {/block:Text} {block:Photo} <figure class="post-content {block:Caption} with-caption{/block:Caption}" data-photo-width="{PhotoWidth-HighRes}"> <div class="photo-wrapper"> <div class="photo-wrapper-inner"> {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-400}" height="{PhotoHeight-HighRes}">{LinkCloseTag} </div> </div> {block:Caption} <figcaption class="caption"> {Caption} </figcaption> {/block:Caption} </figure> {/block:Photo} {block:Photoset} <figure class="post-content photoset {block:Caption}with-caption{/block:Caption}"> {Photoset} {block:Caption} <figcaption class="caption"> {Caption} </figcaption> {/block:Caption} </figure> {/block:Photoset} {block:Quote} <div class="post-content"> <blockquote class="{Length}"> {Quote} </blockquote> {block:Source} <div class="source">{Source}</div> {/block:Source} </div> {/block:Quote} {block:Link} <div class="post-content{block:Description} with-caption{/block:Description}{block:Thumbnail} with-thumbnail{/block:Thumbnail}"> <div class="link-wrapper"> <a {Target} href="{URL}" class="link"> {block:Thumbnail} <div class="link-thumbnail"><img src="{Thumbnail-HighRes}" alt="" /></div> {/block:Thumbnail} <div class="link-text-wrapper clearfix"> <div class="link-text"> {block:Host} <div class="link-host">{Host}</div> {/block:Host} <h2 class="link-title">{Name}</h2> {block:Excerpt} <div class="link-excerpt">{Excerpt}</div> {/block:Excerpt} {block:Author} <div class="link-author">{Author}</div> {/block:Author} </div> </div> </a> </div> {block:Description} <div class="caption"> {Description} </div> {/block:Description} </div> {/block:Link} {block:Chat} <div class="post-content"> {block:Title}<h2 class="title"><a href="{Permalink}">{Title}</a></h2>{/block:Title} <ul class="conversation"> {block:Lines} <li class="chat-{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li> {/block:Lines} </ul> </div> {/block:Chat} {block:Audio} <div class="post-content {block:Caption}with-caption{/block:Caption}"> <div class="audio_container"> {block:AudioEmbed} {AudioEmbed color="white"} {/block:AudioEmbed} </div> {block:Caption} <div class="caption"> {Caption} </div> {/block:Caption} </div> {/block:Audio} {block:Video} <figure class="post-content {block:Caption}with-caption{/block:Caption}"> <div class="video-wrapper"> {Video-700} </div> {block:Caption} <figcaption class="caption"> {Caption} </figcaption> {/block:Caption} </figure> {/block:Video} {block:Answer} <div class="post-content"> <div class="note-item note-item-asker"> <div class="text"> <p class="asker"><strong>{Asker}</strong> asked:</p> <div class="asker-question"> {Question} </div> </div> <div class="avatar"> <img class="asker-avatar" src="{AskerPortraitURL-96}" alt=""> </div> </div> {block:Answerer} <div class="note-item note-item-answerer"> <div class="text"> <p class="answerer"><strong>{Answerer}</strong> answered:</p> <div class="answerer-answer"> {Answer} </div> </div> <div class="avatar"> <img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt=""> </div> </div> {/block:Answerer} <div class="replies"> {Replies} </div> </div> {/block:Answer} <section class="inline-meta post-extra{block:RebloggedFrom} has-reblog{/block:RebloggedFrom}{block:ContentSource} has-source{/block:ContentSource}{block:HasTags} has-tags{/block:HasTags}"> {block:RebloggedFrom} <a class="meta-item reblog-link" href="{ReblogParentURL}"><i class="icon-reblog"></i>{ReblogParentName}</a> {/block:RebloggedFrom} {block:ContentSource} <a class="meta-item source-link" href="{SourceURL}">{lang:Source}: {SourceTitle}</a> {/block:ContentSource} {block:HasTags} {block:Tags} <a class="meta-item tag-link" href="{TagURL}">{Tag}</a> {/block:Tags} {/block:HasTags} </section> </section> {block:Date} <section class="panel"> <footer class="post-footer"> <section class="inline-meta date-notes"> <div class="date-note-wrapper"> {block:NoteCount} <a href="{Permalink}#notes" class="meta-item post-notes">{NoteCountWithLabel}</a> {/block:NoteCount} <a href="{Permalink}" title="{TimeAgo}" class="meta-item post-date">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a> </div> </section> <section class="post-controls"> <div class="controls-wrapper"> <div class="control share-control"> <nav class="pop"> <a href="#" class="share selector icon-export"></a> <div class="pop-menu share-menu south" id="share_{PostID}"> <ul> <li class="open-in-app"><a href="#" class="share-item open-in-app" data-post="{PostID}">Open in app</a></li> <li><a href="http://facebook.com/sharer.php?u={URLEncodedPermalink}&t={URLEncodedTitle}" class="share-item facebook" target="_blank">Facebook</a></li> <li><a href="https://twitter.com/intent/tweet?text={URLEncodedTweetSummary}" class="share-item twitter" target="_blank">Tweet</a></li> {block:Photo} <li><a href="//www.pinterest.com/pin/create/button/?url={URLEncodedPermalink}&media={PhotoURL-500}" class="share-item pinterest" target="_blank">Pinterest</a></li> {/block:Photo} {block:Video}{block:VideoThumbnail} <li><a href="//www.pinterest.com/pin/create/button/?url={URLEncodedPermalink}&media={VideoThumbnailURL}&is_video=true" class="share-item pinterest" target="_blank">Pinterest</a></li> {/block:VideoThumbnail}{/block:Video} <li><a href="mailto:?subject={URLEncodedShareString}&body={URLEncodedMailSummary}" class="share-item mail">Mail</a></li> <li><a href="{Permalink}/embed" class="share-item permalink">Embed</a></li> <li><a href="{Permalink}" class="share-item permalink">{lang:Permalink} <i class="icon-arrow_carrot_right"></i></a></li> </ul> </div> </nav> </div> <div class="control reblog-control">{ReblogButton size="21" color="black"}</div> <div class="control like-control">{LikeButton size="20" color="black"}</div> </div> </section> </footer> </section> {/block:Date} {block:PermalinkPage} {block:PostNotes} <section id="notes" class="notes-wrapper clearfix"> {PostNotes-64} </section> {/block:PostNotes} {block:Date} {block:IfDisqusShortname} <section class="comments"> <div id="disqus_thread"></div> <script type="text/javascript"> (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = 'http://{text:Disqus Shortname}.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript={text:Disqus Shortname}">comments powered by Disqus.</a></noscript> <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a> </section> {/block:IfDisqusShortname} {/block:Date} {/block:PermalinkPage} </div> </article> {/block:Posts} I hope it's not polluting the forum and also that someone will be able to help me. Thanks in advance! |
Frederiek |
May 16 2015, 10:58 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
You're welcome.
|
Lo-Fi Version | Time is now: 31st May 2024 - 11:00 PM |