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!
I hope you also read the pinned posts at the top of this forum section.
You don't say what you want changed and besides, for that, we'd need to see the online page.
Also because the code you posted is Tumblr specific and can't be used outside Tumblr and thus is of no use to us to help you.
Now I understand better, which doesn't mean I can help as I'm not familiar with Tumblr. All I know is that there is some editor (through the dashboard?) and you can make (CSS) changes there. I don't think you should try to change the HTML (as most isn't plain HTML) or your page might not work anymore.
Try searching like this:
"change post color tumblr"
"change post size tumblr"
Just add tumblr to your search query.
Or maybe someone with knowledge of Tumblr will join in. Though I'm afraid that's wishful thinking.
I'm glad I was more understandable.
I indeed found a CSS editor in the editing section of my tumblr blog. And somehow I managed to find how to do it.
Thank you very much for the advice!
You're welcome.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)