The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Editing Tumblr Post Appearance, How to custom tumblr post with html
Deargfolt
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies(1 - 5)
Frederiek
post May 13 2015, 11:28 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Deargfolt
post May 13 2015, 11:51 AM
Post #3





Group: Members
Posts: 3
Joined: 13-May 15
Member No.: 22,584



QUOTE(Frederiek @ May 13 2015, 06:28 PM) *

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.



I'm truly sorry for being so confusing! I read the pinned post thus I'll try to be much clearer now (English is not my native language).

First of all here is the link to the blog in question:

http://storyofalazyassartist.tumblr.com/

Secondly, what I meant to say is that I want to change the color, the size and if possible the position of the posts on my tumblr page, like in certain tumblr themes where posts are much smaller, of a different color and so on and so forth. I don't know if there is a specific tutorial somewhere on the Internet but up till now my research has been fruitless.
If by any chance you know how to sort this type of thing out, it would be very helpful.
I hope my message is a bit less messy.

Again I'm very sorry I posted without really thinking it through. And thank you for letting me know about it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 14 2015, 03:43 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Deargfolt
post May 16 2015, 08:12 AM
Post #5





Group: Members
Posts: 3
Joined: 13-May 15
Member No.: 22,584



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 16 2015, 10:58 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You're welcome.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 07:39 AM