my TinyMCE keeps adding a ul tag cant figure it out, if I paste the following code into TinyMCE it will add ul tags and break my slider script. I'm using the latest version. and its just the ul tag.
Paste In:
<div class="bxslider">
<li><img style="border-radius: 0;" src="pics/slider/Image1.jpg" /></li>
<li><img style="border-radius: 0;" src="pics/slider/Image2.jpg" /></li>
<li><img style="border-radius: 0;" src="pics/slider/Image3.jpg" /></li>
<li><img style="border-radius: 0;" src="pics/slider/Image4.jpg" /></li>
</div>
Tiny Output:
<div class="bxslider">
<ul>
<li><img style="border-radius: 0;" src="pics/slider/Image1.jpg" /></li>
<li><img style="border-radius: 0;" src="pics/slider/Image2.jpg" /></li>
<li><img style="border-radius: 0;" src="pics/slider/Image3.jpg" /></li>
<li><img style="border-radius: 0;" src="pics/slider/Image4.jpg" /></li>
</ul>
</div>
This is because your HTML (without a <ul> or <ol> tag) is invalid HTML and TinyMCE will try to create valid, well-formed HTML.
Related
I am trying to sort a list of images - allowing to drag and drop the images as is.
With the following code, i see the dom elements being reordered when i try drag and drop, however, actual drag and drop is not visible and it is a very jarred experience.
Could you tell me what I am missing here?
<html>
<head>
<style>
li {
display: inline-block;
}
img{
margin:10px;
}
</style>
</head>
<body>
<div>
<ul class="sort-photos">
<li><img src="http://via.placeholder.com/50x100" /></li>
<li><img src="http://via.placeholder.com/60x100" /></li>
<li><img src="http://via.placeholder.com/70x100" /></li>
<li><img src="http://via.placeholder.com/80x100" /></li>
<li><img src="http://via.placeholder.com/90x100" /></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".sort-photos").sortable();
});
</script>
</body>
</html>
https://jsfiddle.net/unodurga/tn8kuzab/
I was creating a bootstrap website as a challenge when I encountered a problem which I can't find a fix for.
In the jumbotron I have a form with a textfield and a submit button.
The textfield also has an addon (input-group-addon)
Without any images The addon is placed perfectly where it should be but When I add an image the Addon moves away a pixel from the text field.
.bg {
background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg");
text-align: center;
color: white;
}
.jumbotron form {
text-align: none;
}
.jumbotron hr {
background-color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<body style="position: relative;" data-spy="scroll" data-target="#navBar">
<nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My App</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron bg">
<h1 class="display-3">My Amazing App!</h1>
<p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p>
<hr class="my-4">
<p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p>
<form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">#</div>
<input style="width: 350px;" type="email" class="form-control" id="email" placeholder="Your Email">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
Bootstrap 4, still in beta release, applies a highly-transparent border for the .form-control class. Your example highlights how this may produce unexpected results when using an input element against a container with a dark background. Bootstrap 4's default style is this:
.form-control {
border-color: rgba(0, 0, 0, 0.15);
}
That's a black border with near-maximum transparency. Rendering that over a dark background will not achieve the expected look, as you've discovered.
I've appended a custom class to override Bootstrap 4's default border-color for the .form-control class. Applied to your example, it's in effect only when the class .bg has also been applied to the jumbotron.
.bg .form-control.solid-gray-border {
border-color: rgb(222,222,222);
}
.bg {
background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg");
text-align: center;
color: white;
}
.jumbotron form {
text-align: none;
}
.jumbotron hr {
background-color: white;
}
.bg .form-control.solid-gray-border {
border-color: rgb(222,222,222);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<body style="position: relative;" data-spy="scroll" data-target="#navBar">
<nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My App</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron bg">
<h1 class="display-3">My Amazing App!</h1>
<p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p>
<hr class="my-4">
<p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p>
<form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">#</div>
<input style="width: 350px;" type="email" class="form-control solid-gray-border" id="email" placeholder="Your Email">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
I'm some issues launching certain menu items.
The menu DOM below contains <ul> items:
Uploads
Reports
Downloads
Admin
Here's a DOM sample of the menu structure:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="TheMenu">
<ul class="rmRootGroup rmHorizontal">
<li class="rmItem rmSelected" style="z-index: 0;">
<span class="rmLink rmRootLink rmExpand rmExpandDown" tabindex="0">Bal Sheet)</span><div class="rmSlide" style="display: none; visibility: visible; width: 141px; height: 126px; left: 0px; top: 28px; z-index: 9; overflow: hidden;">
<ul class="rmVertical rmGroup rmLevel1" style="top: -126px; left: 0px; display: block; visibility: visible; transition: none;">
<li class="rmItem rmFirst" style="z-index: 0;">
<span class="rmLink rmExpand rmExpandRight" " style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Uploads</span></span><div class="rmSlide" style="display: none; visibility: visible; width: 144px; height: 126px; left: 135px; top: 0px; z-index: 5; overflow: hidden;">
<ul class="rmVertical rmGroup rmLevel2">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0" ><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Upload List</span></span></li>
<li class="rmItem ">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" ><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Adj123</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel3">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">BLAH Adjustment This</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">BLAH2 Adjustment That</span></span></li>
</ul>
</div>
</li>
<li class="rmItem ">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 72px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Targets</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel3">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Target1 BLAH1</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Target2 BLAH2</span></span></li>
</ul>
</div>
</li>
<li class="rmItem rmLast">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 72px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Actuals</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel3">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Actual This</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Actual That</span></span></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="rmItem ">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Reports</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel2">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">REPT 1</span></span></li>
<li class="rmItem "><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">REPT 2</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">REPT 2</span></span></li>
</ul>
</div>
</li>
<li class="rmItem ">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Administration</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel2">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">Sub123 List Admin</span></span></li>
<li class="rmItem "><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">THIS MENU</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">THAT MENU</span></span></li>
</ul>
</div>
</li>
<li class="rmItem rmLast">
<span class="rmLink rmExpand rmExpandRight" tabindex="0" style="width: 69px;"><img alt="" src="images/foldericon.gif" class="rmLeftImage"><span class="rmText">Downloads</span></span><div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel2">
<li class="rmItem rmFirst"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">FIRST DOWNLOAD THING</span></span></li>
<li class="rmItem rmLast"><span class="rmLink" tabindex="0"><img alt="" src="images/document.gif" class="rmLeftImage"><span class="rmText">SECOND DOWNLOAD THING</span></span></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
And my Protractor script below...
FYI: My first elem.click() does work, and successfully enters the .Then() section; and the dropdown menu opens.
Now, I can use '.rmItem .rmFirst' to open the "Uploads" sub menu, but what if I want to open the "Reports" menu ? Which selector should I use ? 'ul li:nth-child(2)' only goes to the siblings which goes back to the top menu bar again (not what I want).
this.launchUploadsMenu = function () {
var sel = '#RadMenu1 > ul > li:nth-child(3)';
var elem = element(by.css(sel));
elem.click().then(function () {
//var elem2 = element.all(by.cssContainingText('.rmLink', 'Uploads')).first(); // THIS STILL NOT WORKING
var elem2 = element.all(by.css('.rmItem .rmFirst')); //
elem2.click();
});
}
Help is appreciated.
regards,
Bob
You want to use first() method in order to get first element from the array. But element() returns single element, you should use element.all() to return ElementArrayFinder and then you can apply first() .
Instead of using cssContaingText I would prefer to create some structure of levels in your menu and then just walking inside each level.
Also, why have you decided to waitForAngular ? Protractor is waiting by default, I don't understand why you use browser.sleep in that case. Most thing you can achive by chaning then promises.
Can you specify on which element exactly you want to click ?
EDIT:
Also, there is no such element with rmLink class and containing text Adjust This, I think that you should look for rmText.
Due to the fact that we have encountered so many road blocks traversing the DOM in this environment, we decided to go with a combination of browser.actions() and 'cssByText()` instead.
It's not ideal, but it does work.
For example, this will accomplish the menu clicks that are required to get to the required Angular page (fyi: the nav menus are NOT an Angular application; only the final landing page is where the Angular app loads within an iframe element).
var sel = '#RadMenu1 > ul > li:nth-child(3)'; // top-level menu
var elem = element(by.css(sel));
elem.click().then(function () {
var elem2 = element(by.css(sel));
browser.sleep(2000);
// OPENS SUBMENUS
browser.actions()
.mouseMove(elem2, { x: 25, y: 50 }) // an offset relative to the top-left corner of elem2
.click()
.perform()
.then(function () {
browser.sleep(1000);
browser.actions()
.mouseMove({ x: 150, y: 20 }) // opens next menu option
.click()
.perform()
.then(function () {
var elem = element(by.cssContainingText('.rmText', 'Menu Item To Click'));
elem.click();
});
});
});
}
I have tweets and commenting system like this
This is the code block for one set of tweet and its comments and commenting box:
<li class="storyBlock">
<div>
<div class="grid userImageBlockL">
<div class="imgMedium"> <img width="44" height="44" alt="image" src="/bakasura1/files/images/medium/1288170363aca595cabb50.jpg"> </div>
</div>
<div class="grid userContentBlockL">
<div class="userContentHeader">
<h5> Harsha Vantagudi <span class="storyMessage">Testing the Seconds</span></h5>
<span class="user-status-time">6 hours ago</span> <span>Comment Delete</span> </div>
<ul class="commentList">
<li class="commentBlock">
<div>
<div class="grid userImageBlockS">
<div class="imgSmall"> <img width="35" height="35" alt="image" src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg"> </div>
</div>
<div class="grid userContentBlockS alpha omega">
<h5> Harsha Vantagudi <span class="storyMessage">Write your comment...</span></h5>
<span class="user-status-time">27 minutes ago</span> <span>Comment Delete</span></div>
<div class="clear"></div>
</div>
</li>
<li class="commentBlock">
<div>
<div class="grid userImageBlockS">
<div class="imgSmall"> <img width="35" height="35" alt="image" src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg"> </div>
</div>
<div class="grid userContentBlockS alpha omega">
<form accept-charset="utf-8" action="/bakasura1/account/saveComment" method="post">
<div style="display: none;">
<input type="hidden" value="POST" name="_method">
</div>
<input type="hidden" id="StatusMessageReplyPid" value="67" name="data[StatusMessageReply][pid]">
<input type="hidden" id="StatusMessageReplyItemId" value="1" name="data[StatusMessageReply][item_id]">
<input type="hidden" id="StatusMessageReplyCommentersItemId" value="1" name="data[StatusMessageReply][commenters_item_id]">
<textarea id="StatusMessageReplyMessage" name="data[StatusMessageReply][message]">Write your comment...</textarea>
<input type="submit" name="" value="Comment">
</form>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</li>
I am a little confused as to how to create an Ajax from submit when the comment is saved the new comment should stack top to bottom. Since there is no unique tweet identifier. I am not sure how to address this problem.
Can some one recommend an easy solution for the same?
http://demos.99points.info/facebook_wallpost_system/
nice demo and tutorial there
Did you try this plugin ,
http://timeago.yarp.com/
this should help
Below part of a tumblr theme I'm working on and you will notice that I use the {block:PostType} syntax to declare the opening tag of each post, which is a <li> element in an Ordered List. This allows me to not only dynamicly set the li's class based on the type of post but cuts down on the number of times I'm calling the ShareThis JS which was really bogging down the page. This creates a new issue though which I believe is a flaw in Tumblr's parser. Each post is an ordered list with one <li> element in it. I know I could solve this by having each post as a <div> but I really like the control and semantics of using a list. Tumblr gurus? Suggestions?
Sample of code:
{block:Posts}
<ol class="posts">
{block:Text}
<li class="post type_text" id="{PostID}">
{block:Title}
<h2>{Title}</h2>
{/block:Title}
{Body}
{/block:Text}
{block:Photo}
<li class="post type_photo" id="{PostID}">
<div class="image">
<img src="{PhotoURL-500}" alt="{PhotoAlt}">
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}
{block:Photoset}
<li class="post type_photoset" id="{PostID}">
{Photoset-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}
{block:Quote}
<li class="post type_quote" id="{PostID}">
<blockquote>
<div class="quote_symbol">“</div>
{Quote}
</blockquote>
{block:Source}
<div class="quote_source">{Source}</div>
{/block:Source}
{/block:Quote}
{block:Link}
<li class="post type_link" id="{PostID}">
<h2>{Name}</h2>
{block:Description}
{Description}
{/block:Description}
{/block:Link}
{block:Chat}
<li class="post type_chat" id="{PostID}">
{block:Title}
<h2>{Title}</h2>
{/block:Title}
<table class="chat_log">
{block:Lines}
<tr class="{Alt} user_{UserNumber}">
<td class="person">{block:Label}{Label}{/block:Label}</td>
<td class="message">{Line}</td>
</tr>
{/block:Lines}
</table>
{/block:Chat}
{block:Video}
<li class="post type_video" id="{PostID}">
{Video-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}
{block:Audio}
<li class="post type_audio" id="{PostID}">
{AudioPlayerWhite}
{block:Caption}
{Caption}
{/block:Caption}
{block:ExternalAudio}
<p>Download</p>
{/block:ExternalAudio}
{/block:Audio}
<div class="post_footer">
<p class="post_date">Posted on {ShortMonth} {DayOfMonth}, {Year} at {12hour}:{Minutes} {AmPm}</p>
<ul>
<li><a class="comment_link" href="{Permalink}#disqus_thread">Comments</a></li>
<li><script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=722e181d-1d8a-4363-9ebe-82d5263aea94&type=website"></script></li>
</ul>
{block:PermalinkPage}
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/kyleetilley/embed.js"></script>
<noscript>View the discussion thread.</noscript>
{/block:PermalinkPage}
</div>
</li>
</ol>
{/block:Posts}
The Posts block is executed once for each post, thus the markup for the container should go outside this block.
Just put the <ol> right before {block:Posts} and the </ol> directly after the {/block:Posts}
Try this, it worked for me when I put it into the Theme Parser. I've modified your code a little bit:
overhauled your syntax to be intended. Please don't take offense, I only did it for clarity's sake!
move the <ol> element outside of the {block:Posts} as everything inside it is rendered once for each type of post.
moved and modified your <li> element so that's no longer specific to the type of post, Tumblr provide a neat little {PostType} variable that will print each post's type (except for photoset; for which it prints "photo", but I've added a little bit more in there to account for that.) This is faster to render and simpler to read.
swapped your {AudioPlayerWhite} to {AudioPlayer}, this is just because Tumblr sometimes gets upset if you define the audio player's colour, and a message is displayed on tumblr.com/new/audio saying "Your theme does not support proper audio players". Probably not connected to the problem but it's a good practice
Working example: stackoverflow-theme-test-1.tumblr.com - ignore how it looks because I didn't apply any styling, but the code is all perfectly valid.
<ol class="posts">
{block:Posts}
<li class="post type_{PostType}{block:Photoset}set{/block:Photoset}" id="{PostID}"> <!--Saves you from having to manually define each type of post-->
{block:Text}
{block:Title}
<h2>{Title}</h2>
{/block:Title}
{Body}
{/block:Text}
{block:Photo}
<div class="image">
<img src="{PhotoURL-500}" alt="{PhotoAlt}">
</div>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}
{block:Photoset}
{Photoset-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}
{block:Quote}
<blockquote>
<div class="quote_symbol">“</div>
{Quote}
</blockquote>
{block:Source}
<div class="quote_source">{Source}</div>
{/block:Source}
{/block:Quote}
{block:Link}
<h2>{Name}</h2>
{block:Description}
{Description}
{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}
<h2>{Title}</h2>
{/block:Title}
<table class="chat_log">
{block:Lines}
<tr class="{Alt} user_{UserNumber}">
<td class="person">{block:Label}{Label}{/block:Label}</td>
<td class="message">{Line}</td>
</tr>
{/block:Lines}
</table>
{/block:Chat}
{block:Video}
{Video-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}
{block:Audio}
{AudioPlayer} <!--Tumblr don't like you to specify a colour for the {AudioPlayer}, you could do anyway, but in the interests of minimising parsing errors I havent-->
{block:Caption}
{Caption}
{/block:Caption}
{block:ExternalAudio}
<p>Download</p>
{/block:ExternalAudio}
{/block:Audio}
<div class="post_footer">
<p class="post_date">Posted on {ShortMonth} {DayOfMonth}, {Year} at {12hour}:{Minutes} {AmPm}</p>
<ul>
<li><a class="comment_link" href="{Permalink}#disqus_thread">Comments</a></li>
<li><script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=722e181d-1d8a-4363-9ebe-82d5263aea94&type=website"></script></li>
</ul>
{block:PermalinkPage}
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/kyleetilley/embed.js"></script>
<noscript>View the discussion thread.</noscript>
{/block:PermalinkPage}
</div>
</li>
{/block:Posts}
</ol>