Search
Special patterns and chunks of style for the Search page.
Search Page
<div class="page">
<div class="wrapper">
<div class="content content-with-sidebar content-shake content-search">
<div class="sidebar">
<h2>Search!</h2>
<div class="sidebar-search-block fun-form">
<form method="GET" action="/search">
<div class="field">
<div class="field-input">
<input
autofocus=""
class="input-text"
type="search"
placeholder="Search"
name="q"
value=""
autocorrect="off"
/>
</div>
<div class="field-help">
<p>
Enter keywords or “quoted phrases”. Supports <tt>*</tt> as a
wildcard for matching. Also supports filtering by username
like this: <tt>from:<em>username</em></tt> or by shake name
(the name used in the shake site address) like this:
<tt>in:<em>shakename</em></tt> (special supported “shake”
names: <tt>mine</tt>, <tt>friends</tt>, <tt>popular</tt>).
</p>
</div>
</div>
</form>
<div class="clear"></div>
</div>
</div>
<div class="body"></div>
</div>
</div>
</div>
Search Results
<div class="page">
<div class="wrapper">
<div class="content content-with-sidebar content-shake content-search">
<div class="sidebar">
<h2>Search!</h2>
<div class="sidebar-search-block fun-form">
<form>
<div class="field">
<div class="field-input">
<input
autofocus=""
class="input-text"
type="search"
placeholder="Search"
name="q"
value="barbarella"
autocorrect="off"
/>
</div>
<div class="field-help">
<p>
Enter keywords or “quoted phrases”. Supports <tt>*</tt> as a
wildcard for matching. Also supports filtering by username
like this: <tt>from:<em>username</em></tt> or by shake name
(the name used in the shake site address) like this:
<tt>in:<em>shakename</em></tt> (special supported “shake”
names: <tt>mine</tt>, <tt>friends</tt>, <tt>popular</tt>).
</p>
</div>
</div>
</form>
<div class="clear"></div>
</div>
</div>
<div class="body">
<div class="body">
<div class="image-content-list meta hentry">
<div class="image-title image-title-with-poster">
<div class="image-poster">
<a href="#" title="joffaboy">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/6420/profile.jpg"
width="48"
height="48"
alt=""
/>
</a>
</div>
<h3>Panel from Barbarella by Jean-Claude Forest</h3>
<div class="clear"></div>
</div>
<div class="image-content">
<div class="the-image">
<a href="#"
><img
src="https://mltshp-cdn.com/r/1ITQ8"
alt="Panel from Barbarella by Jean-Claude Forest"
/></a>
</div>
<div class="image-content-footer">
<div class="description">
<div class="the-description">
source:
<a
href="#"
target="_blank"
rel="nofollow"
title="https://talesfromweirdland.tumblr.com/post/619057578102702080/panels-from-the-first-barbarella-book-by"
>https://talesfromweirdland.tumblr.com/post...</a
>
</div>
</div>
<div class="image-interactions">
<div class="like-this">
<form>
<button
type="button"
class="like-button btn btn-danger btn-small is-active"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/like-this.svg?v=b6b5d63ca476cb55e67c21965345e8db"
alt=""
/>
<span class="btn--text">Like</span>
</div>
</button>
<button
type="button"
class="unlike-button"
title="Unlike This"
aria-label="Unlike This"
>
<img
src="https://mltshp-cdn.com/static/images/liked-this.svg?v=e6f9810cfc8fa54a40073a3ddbaa90b5"
height="22"
width="25"
alt="Unlike This"
/>
</button>
</form>
</div>
<div class="save-this">
<form>
<button
type="button"
class="save-this-link save-this-link-multiple btn btn-warning btn-small"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/save-this.svg?v=5a6b71f0af47daac6eb1c038668c4b9b"
alt=""
/>
<span class="btn--text">Save</span>
<span class="btn--caret">▼</span>
</div>
</button>
</form>
</div>
</div>
<div class="inline-meta">
<span class="created-at">
<a href="#">
<time
datetime="2020-05-25 06:25:46"
title="Mon, 25 May 2020 06:25:46 "
>3 months ago</time
>
</a>
</span>
<ul class="stats">
<li class="views">170 Views</li>
<li class="saves">
<a href="#">0</a>
</li>
<li class="likes">
<a href="#">7</a>
</li>
<li class="comments selected">
<a href="#">1</a>
</li>
</ul>
</div>
<div class="inline-details">
<div class="comment">
<div class="avatar">
<a href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/101543/profile.jpg"
height="30"
width="30"
/>
</a>
</div>
<div class="comment-body">
<div class="meta">
<a class="user-name username link--primary" href="#"
>Mr_Encyclopedia</a
>
<a class="pro-badge" href="#">
<img
alt="pro"
src="https://mltshp-cdn.com/static/images/icon_plus.svg?v=dabd5508e1560e2bdcc7356c85ea8f10"
width="12"
height="12"
border="0"
valign="center"
/>
</a>
<span class="created-at">
<time
datetime="2020-05-25 12:18:23"
title="Mon, 25 May 2020 12:18:23 "
>3 months ago</time
>
</span>
<a class="reply-to" href="#">Reply</a>
</div>
<div class="comment-body-text">
Don't be shy! Let's see that robot dong!
</div>
</div>
</div>
<div class="post-comment-inline">
<form>
<textarea name="body">Write a comment…</textarea>
<div class="button">
<input
class="submit-comment-button btn btn-primary btn-small"
type="submit"
value="Post It!"
/>
</div>
</form>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="image-title image-title-with-poster">
<div class="image-poster">
<a href="#" title="BoringPostcards">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/2264/profile.jpg"
width="48"
height="48"
alt=""
/>
</a>
</div>
<h3>Miss Piggy And Kermit in Roger Vadim’s "Barbarella"</h3>
<div class="clear"></div>
</div>
<div class="image-content">
<div class="the-image">
<a href="#"
><img
src="https://mltshp-cdn.com/r/1H6VK"
alt='Miss Piggy And Kermit in Roger Vadim’s "Barbarella"'
/></a>
</div>
<div class="image-content-footer">
<div class="description">
<div class="the-description">Bruce McCorkindale</div>
</div>
<div class="image-interactions">
<div class="like-this">
<form>
<button
type="button"
class="like-button btn btn-danger btn-small is-active"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/like-this.svg?v=b6b5d63ca476cb55e67c21965345e8db"
alt=""
/>
<span class="btn--text">Like</span>
</div>
</button>
<button
type="button"
class="unlike-button"
title="Unlike This"
aria-label="Unlike This"
>
<img
src="https://mltshp-cdn.com/static/images/liked-this.svg?v=e6f9810cfc8fa54a40073a3ddbaa90b5"
height="22"
width="25"
alt="Unlike This"
/>
</button>
</form>
</div>
<div class="save-this">
<form>
<button
type="button"
class="save-this-link save-this-link-multiple btn btn-warning btn-small"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/save-this.svg?v=5a6b71f0af47daac6eb1c038668c4b9b"
alt=""
/>
<span class="btn--text">Save</span>
<span class="btn--caret">▼</span>
</div>
</button>
</form>
</div>
</div>
<div class="inline-meta">
<span class="created-at">
<a href="#">
<time
datetime="2019-10-30 10:37:54"
title="Wed, 30 Oct 2019 10:37:54 "
>10 months ago</time
>
</a>
</span>
<ul class="stats">
<li class="views">434 Views</li>
<li class="saves">
<a href="#">1</a>
</li>
<li class="likes">
<a href="#">18</a>
</li>
<li class="comments"><a href="#">0</a></li>
</ul>
</div>
<div class="inline-details" style="display: none"></div>
<div class="clear"></div>
</div>
</div>
<a name="bottom"></a>
<div class="image-title image-title-with-poster">
<div class="image-poster">
<a href="#" title="idogcow">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/277/profile.jpg"
width="48"
height="48"
alt=""
/>
</a>
</div>
<h3>Electric Barbarella (Myka Dunkle)</h3>
<div class="clear"></div>
</div>
<div class="image-content">
<div class="the-image">
<a href="#"
><img
src="https://mltshp-cdn.com/r/10HZE"
alt="Electric Barbarella (Myka Dunkle)"
/></a>
</div>
<div class="image-content-footer">
<div class="description">
<div class="the-description">
source:
<a href="#" target="_blank" rel="nofollow"
>http://img2.wikia.nocookie.net</a
>
</div>
</div>
<div class="image-interactions">
<div class="like-this">
<form>
<button
type="button"
class="like-button btn btn-danger btn-small is-active"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/like-this.svg?v=b6b5d63ca476cb55e67c21965345e8db"
alt=""
/>
<span class="btn--text">Like</span>
</div>
</button>
<button
type="button"
class="unlike-button"
title="Unlike This"
aria-label="Unlike This"
>
<img
src="https://mltshp-cdn.com/static/images/liked-this.svg?v=e6f9810cfc8fa54a40073a3ddbaa90b5"
height="22"
width="25"
alt="Unlike This"
/>
</button>
</form>
</div>
<div class="save-this">
<form>
<button
type="button"
class="save-this-link save-this-link-multiple btn btn-warning btn-small"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/save-this.svg?v=5a6b71f0af47daac6eb1c038668c4b9b"
alt=""
/>
<span class="btn--text">Save</span>
<span class="btn--caret">▼</span>
</div>
</button>
</form>
</div>
</div>
<div class="inline-meta">
<span class="created-at">
<a href="#">
<time
datetime="2014-09-08 22:07:08"
title="Mon, 08 Sep 2014 22:07:08 "
>6 years ago</time
>
</a>
</span>
<ul class="stats">
<li class="views">47 Views</li>
<li class="saves">
<a href="#">0</a>
</li>
<li class="likes">
<a href="#">1</a>
</li>
<li class="comments"><a href="#">0</a></li>
</ul>
</div>
<div class="inline-details" style="display: none"></div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="linear-navigation">
<div class="older">
<a class="btn btn-secondary btn-shadow" href="#">« Older</a>
</div>
<div class="newer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
No Results
<div class="page">
<div class="wrapper">
<div class="content content-with-sidebar content-shake content-search">
<div class="sidebar">
<h2>Search!</h2>
<div class="sidebar-search-block fun-form">
<form method="GET" action="/search">
<div class="field">
<div class="field-input">
<input
autofocus=""
class="input-text"
type="search"
placeholder="Search"
name="q"
value=""
autocorrect="off"
/>
</div>
<div class="field-help">
<p>
Enter keywords or “quoted phrases”. Supports <tt>*</tt> as a
wildcard for matching. Also supports filtering by username
like this: <tt>from:<em>username</em></tt> or by shake name
(the name used in the shake site address) like this:
<tt>in:<em>shakename</em></tt> (special supported “shake”
names: <tt>mine</tt>, <tt>friends</tt>, <tt>popular</tt>).
</p>
</div>
</div>
</form>
<div class="clear"></div>
</div>
</div>
<div class="body">
<div class="search-empty-results">
<h1 class="error-uh-oh">Couldn’t find anything like that.</h1>
</div>
</div>
</div>
</div>
</div>
Sidebar Search
<div class="sidebar-search-block fun-form">
<form action="/search">
<div class="field">
<div class="field-input">
<input
type="search"
class="input-text"
name="q"
placeholder="Search your friend shake!"
autocorrect="off"
/>
</div>
</div>
</form>
<div class="clear"></div>
</div>