axiumthemes

theme 03 - sea salt

Oct 11th, 2017
398
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.45 KB | None | 0 0
  1. <html>
  2.  
  3. <!----------------------------------------------------------------------
  4.  
  5. THEME #03 /// Sea Salt
  6. by AXIUMTHEMES
  7.  
  8. rules:
  9. 1. do not claim as your own
  10. 2. if you want to use any part
  11. of the code in your own theme
  12. please ask
  13. 3. don't remove the credit
  14. 4. enjoy :)
  15.  
  16.  
  17. Credit:
  18. Icons - saturnthms.com
  19. Dashboard Captions - neothm.com & magnusthemes.tumblr.com
  20. Tumblr Controls - cyantists.tumblr.com
  21.  
  22. Simple theme, helps to know basic HTML
  23.  
  24. -----------------------------------------------------------------------
  25.  
  26. ----------------------------------------------------------------------->
  27.  
  28. <head>
  29. <title>{Title}</title>
  30. <link rel="shortcut icon" href="{Favicon}">
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  32. {block:Description}
  33. <meta name="description" content="{MetaDescription}" />
  34. {/block:Description}
  35.  
  36. <meta name="image: Icon" content=""/>
  37.  
  38. <meta name="if: Show Captions" content="1"/>
  39. <meta name="if: Show Tags" content="1"/>
  40. <meta name="if: Mini Cursor" content="1"/>
  41. <meta name="if: Rounded Edges" content="1"/>
  42. <meta name="if: Circular Icons" content="1"/>
  43. <meta name="if: Large Sidebar" content="1"/>
  44. <meta name="if: Hidden Description" content="1"/>
  45. <meta name="if: Description On Hover" content="1"/>
  46. <meta name="if: Post Links on Hover" content="1"/>
  47. <meta name="if: No Post Links" content="1"/>
  48.  
  49. <meta name="select: Post Width" content="500" title="500px" />
  50. <meta name="select: Post Width" content="450" title="450px" />
  51. <meta name="select: Post Width" content="400" title="400px" />
  52. <meta name="select: Post Width" content="375" title="375px" />
  53. <meta name="select: Post Width" content="350" title="350px" />
  54. <meta name="select: Post Width" content="325" title="325px" />
  55. <meta name="select: Post Width" content="300" title="300px" />
  56. <meta name="select: Post Width" content="200" title="200px" />
  57.  
  58. <meta name="select: Post Margin" content="10" title="10px" />
  59. <meta name="select: Post Margin" content="20" title="20px" />
  60. <meta name="select: Post Margin" content="30" title="30px" />
  61. <meta name="select: Post Margin" content="40" title="40px" />
  62. <meta name="select: Post Margin" content="50" title="50px" />
  63. <meta name="select: Post Margin" content="60" title="60px" />
  64. <meta name="select: Post Margin" content="70" title="70px" />
  65. <meta name="select: Post Margin" content="80" title="80px" />
  66. <meta name="select: Post Margin" content="90" title="90px" />
  67. <meta name="select: Post Margin" content="100" title="100px" />
  68.  
  69. <meta name="select: Font Size" content="10" title="10px" />
  70. <meta name="select: Font Size" content="11" title="11px" />
  71. <meta name="select: Font Size" content="12" title="12px" />
  72.  
  73. <meta name="select: Font" content="'Lato'" title="Lato">
  74. <meta name="select: Font" content="'Montserrat'" title="Montserrat">
  75. <meta name="select: Font" content="'Raleway'" title="Raleway">
  76. <meta name="select: Font" content="'Source Sans Pro'" title="Source Sans Pro">
  77. <meta name="select: Font" content="'PT Sans'" title="PT Sans">
  78. <meta name="select: Font" content="'Ubuntu'" title="Ubuntu">
  79. <meta name="select: Font" content="'Titillium Web'" title="Titillium Web">
  80. <meta name="select: Font" content="'Encode Sans Expanded'" title="Encode Sans Expanded">
  81. <meta name="select: Font" content="'Work Sans'" title="Work Sans">
  82. <meta name="select: Font" content="'Ubuntu Condensed'" title="Ubuntu Condensed">
  83. <meta name="select: Font" content="'Varela Round'" title="Varela Round">
  84.  
  85. <meta name="select: Post Font" content="'Lato'" title="Lato">
  86. <meta name="select: Post Font" content="'Montserrat'" title="Montserrat">
  87. <meta name="select: Post Font" content="'Raleway'" title="Raleway">
  88. <meta name="select: Post Font" content="'Source Sans Pro'" title="Source Sans Pro">
  89. <meta name="select: Post Font" content="'PT Sans'" title="PT Sans">
  90. <meta name="select: Post Font" content="'Ubuntu'" title="Ubuntu">
  91. <meta name="select: Post Font" content="'Titillium Web'" title="Titillium Web">
  92. <meta name="select: Post Font" content="'Encode Sans Expanded'" title="Encode Sans Expanded">
  93. <meta name="select: Post Font" content="'Work Sans'" title="Work Sans">
  94. <meta name="select: Post Font" content="'Ubuntu Condensed'" title="Ubuntu Condensed">
  95. <meta name="select: Post Font" content="'Varela Round'" title="Varela Round">
  96.  
  97. <meta name="select: Pagination Font" content="'Lato'" title="Lato">
  98. <meta name="select: Pagination Font" content="'Montserrat'" title="Montserrat">
  99. <meta name="select: Pagination Font" content="'Raleway'" title="Raleway">
  100. <meta name="select: Pagination Font" content="'Source Sans Pro'" title="Source Sans Pro">
  101. <meta name="select: Pagination Font" content="'PT Sans'" title="PT Sans">
  102. <meta name="select: Pagination Font" content="'Ubuntu'" title="Ubuntu">
  103. <meta name="select: Pagination Font" content="'Titillium Web'" title="Titillium Web">
  104. <meta name="select: Pagination Font" content="'Encode Sans Expanded'" title="Encode Sans Expanded">
  105. <meta name="select: Pagination Font" content="'Work Sans'" title="Work Sans">
  106. <meta name="select: Pagination Font" content="'Ubuntu Condensed'" title="Ubuntu Condensed">
  107. <meta name="select: Pagination Font" content="'Varela Round'" title="Varela Round">
  108.  
  109. <meta name="color: Accent" content="#5cd9ec"/>
  110. <meta name="color: Background Color" content="#f8f8f8"/>
  111. <meta name="color: Post Background" content="#fff"/>
  112. <meta name="color: Sidebar and Links Background" content="#fff"/>
  113. <meta name="color: Font Color" content="#000"/>
  114.  
  115. <meta name="text: Link 1" content="Home">
  116. <meta name="text: Link 1 URL" content="/">
  117. <meta name="text: Icon 1" content="home-o">
  118.  
  119. <meta name="text: Link 2" content="Ask">
  120. <meta name="text: Link 2 URL" content="/ask">
  121. <meta name="text: Icon 2" content="envelope-3-o">
  122.  
  123. <meta name="text: Link 3" content="Archive">
  124. <meta name="text: Link 3 URL" content="/archive">
  125. <meta name="text: Icon 3" content="menu-o">
  126.  
  127. <meta name="text: Link 4" content="Link One">
  128. <meta name="text: Link 4 URL" content="/">
  129. <meta name="text: Icon 4" content="user-o">
  130.  
  131. <meta name="text: Link 5" content="Link Two">
  132. <meta name="text: Link 5 URL" content="/">
  133. <meta name="text: Icon 5" content="chat-o">
  134.  
  135. <meta name="text: Link 6" content="Link Three">
  136. <meta name="text: Link 6 URL" content="/">
  137. <meta name="text: Icon 6" content="cog-o">
  138.  
  139.  
  140.  
  141. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  142.  
  143. <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded|Lato|Montserrat|PT+Sans|Raleway|Source+Sans+Pro|Titillium+Web|Ubuntu|Ubuntu+Condensed|Varela+Round|Work+Sans" rel="stylesheet">
  144. <script src="https://use.fontawesome.com/b6489d7002.js"></script>
  145. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  146. <link rel="stylesheet" href="path/to/pe-icon-7-stroke/css/pe-icon-7-stroke.css">
  147. <!-- Optional - Adds useful class to manipulate icon font display -->
  148. <link rel="stylesheet" href="path/to/pe-icon-7-stroke/css/helper.css">
  149.  
  150. <script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  151. <script>
  152. !function(a){a.fn.unnest=function(b){var d,e,f,g,h,c=a.extend({yourCaption:".cap",wrapName:".rebloguser",newCaptionUsername:!1,originalPostCaptionUsername:!1,tumblrAvatarClass:".avtar",tumblrAvatars:!0,usernameColon:!0},b),i=c.wrapName.slice(1,c.wrapName.length),j=c.tumblrAvatarClass.slice(1,c.tumblrAvatarClass.length);a(c.yourCaption,this).each(function(){var b=!1,k=!1;a("a.tumblr_blog",this).length<=0&&(b=!0),a(this).find("blockquote").each(function(){a(this).prev().children(".tumblr_blog").length>0&&(a(this).addClass(i),d=a(this).parent().find("a.tumblr_blog").parent("p").html(),c.usernameColon||(d=d.slice(0,-1))),a(this).hasClass(i)&&(a(this).prepend(d),c.tumblrAvatars&&(g=a(this).prev().children("a.tumblr_blog").text(),a(this).prepend('<img src="http://api.tumblr.com/v2/blog/'+g+'.tumblr.com/avatar/30" class="'+j+'" />')))}),a(this).find("a.tumblr_blog:first-of-type").parent("p").remove(),a(c.wrapName,this).each(function(){a(this).parents(c.yourCaption).prepend(a(this))}),h=window.location.hostname;var l=a(this);a.getScript("http://"+h+"/api/read/json").complete(function(){e=l.contents(":not("+c.wrapName+")"),e.text().replace(/\s/g,"").length>0&&(k=l.clone().find(c.wrapName).remove().end().html(),e.remove(),c.newCaptionUsername||b?(f='<blockquote class="'+i+'">',c.tumblrAvatars&&(!b||b&&c.originalPostCaptionUsername)&&(f+='<img src="http://api.tumblr.com/v2/blog/'+h+'/avatar/30" class="'+j+'" />'),(!b||b&&c.originalPostCaptionUsername)&&(f+='<a class="tumblr_blog" href="/">'),(!b||b&&c.originalPostCaptionUsername)&&("undefined"!=typeof tumblr_api_read&&(h=tumblr_api_read.tumblelog.name),console.info(h),f+=h+"</a><p>"),f+=k+"</blockquote>",l.append(f)):l.append('<blockquote class="'+i+'">'+k+"</blockquote>"))})})}}(jQuery);
  153. $('.captions').unnest({
  154. yourCaption: ".cap", //your caption selector, the div wrapping
  155. wrapName: ".rebloguser", //the name of the captions’ new wrapper
  156. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  157. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  158. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  159. tumblrAvatarClass: ".avatr", //class of the avatar next to the username
  160. usernameColon: false //if turned to false, removes the colon at the end of usernames bc :) seriously :) hwy :)
  161. });
  162. $('.captions').unnest({
  163. newCaptionUsername: false,
  164. tumblrAvatars: false,
  165. usernameColon: true
  166. });
  167. </script>
  168.  
  169. </head>
  170.  
  171. <style type="text/css">
  172.  
  173.  
  174. /*-------------- SCROLLBAR ----------------*/
  175.  
  176. ::-webkit-scrollbar {
  177. width:10px;
  178. height:10px;
  179. }
  180. ::-webkit-scrollbar {
  181. background: {color: Background Color}; /* background color */
  182. }
  183. ::-webkit-scrollbar-track {
  184. border:5px solid {color: Background Color}; /* background color */
  185. background: {color: Accent}; /* light border color */
  186. }
  187. ::-webkit-scrollbar-thumb {
  188. border:2px solid {color: Background Color}; /* background color */
  189. {block:IfRoundedEdges}
  190. -moz-border-radius:5px;
  191. -webkit-border-radius:5px;
  192. border-radius: 5px;
  193. {/block:IfRoundedEdges}
  194. background: {color: Accent};
  195. min-height:24px;
  196. min-width:24px;
  197. }
  198.  
  199. /*-------------- TUMBLR CONTROLS by cyantists ----------------*/
  200.  
  201.  
  202. iframe.tmblr-iframe {
  203. z-index:99999999999999!important;
  204. top:0!important;
  205. right:0!important;
  206. opacity:0.4;
  207. /* delete invert(1) from here */
  208. filter:invert(1) contrast(150%);
  209. -webkit-filter:invert(1) contrast(150%);
  210. -o-filter:invert(1) contrast(150%);
  211. -moz-filter:invert(1) contrast(150%);
  212. -ms-filter:invert(1) contrast(150%);
  213. /* to here if your blog has a dark background */
  214. transform:scale(0.65);
  215. transform-origin:100% 0;
  216. -webkit-transform:scale(0.65);
  217. -webkit-transform-origin:100% 0;
  218. -o-transform:scale(0.65);
  219. -o-transform-origin:100% 0;
  220. -moz-transform:scale(0.65);
  221. -moz-transform-origin:100% 0;
  222. -ms-transform:scale(0.65);
  223. -ms-transform-origin:100% 0;}
  224.  
  225. iframe.tmblr-iframe:hover {
  226. opacity:0.6!important;}
  227.  
  228. /*-------------- BASIC HTML ----------------*/
  229.  
  230.  
  231. html {
  232. {block:IfMiniCursor}
  233. cursor: url(http://www.rw-designer.com/cursor-extern.php?id=27887), progress !important;
  234. {/block:IfMiniCursor}
  235. }
  236.  
  237. a {
  238. text-decoration: none;
  239. color: #555;
  240. }
  241.  
  242. a:hover, img:hover {
  243. {block:IfMiniCursor}
  244. cursor: url(http://www.rw-designer.com/cursor-extern.php?id=91283), progress !important;
  245. {/block:IfMiniCursor}
  246. }
  247.  
  248. body {
  249. background: {color: Background Color};
  250. font-size: {select: Font Size};
  251. color: {color: Font Color};
  252. font-family: {select: Font}, sans-serif;
  253. }
  254.  
  255. hr {
  256. border: none;
  257. height: 1px;
  258. background: #eee;
  259. }
  260.  
  261. a {
  262. color: #5555;
  263. }
  264.  
  265. a:hover, a:active {
  266. color: {color: Accent};
  267. transition:all 0.8s ease-in-out;
  268. -webkit-transition: all 0.8s ease-in-out;
  269. -moz-transition: all 0.8s ease-in-out;
  270. -o-transition: all 0.8s ease-in-out;
  271. }
  272.  
  273. /*-------------- CREDIT DON'T TOUCH ----------------*/
  274.  
  275. #axium a {
  276. position: fixed;
  277. bottom: 5px;
  278. right:5px;
  279. font-size: 12px;
  280. color: #333;
  281. opacity: 0.8;
  282. font-weight: bold;
  283. text-transform: lowercase;
  284. font-variant: small-caps;
  285. z-index: 99999999999999999999999;
  286. }
  287.  
  288. #axium a:hover {
  289. color: {color: Accent};
  290. transition:all 0.5s ease-out;
  291. -webkit-transition: all 0.5s ease;
  292. -moz-transition: all 0.5s ease;
  293. -o-transition: all 0.5s ease;
  294. }
  295.  
  296.  
  297.  
  298. /*-------------- SIDEBAR ----------------*/
  299.  
  300.  
  301. #sidebar {
  302. position: fixed;
  303. left: 0;
  304. top: 0;
  305. {block:ifNotLargeSidebar}
  306. width: 200px;
  307. {/block:ifNotLargeSidebar}
  308. {block:ifLargeSidebar}
  309. width: 300px;
  310. {/block:ifLargeSidebar}
  311. height: 100%;
  312. background: {color: Sidebar and Links Background};
  313. }
  314.  
  315. #boxs2 {
  316. position: absolute;
  317. left: calc(75% - 100px);
  318. top:10%;
  319. width: 300px;
  320. height: 75px;
  321. background: {color: Sidebar and Links Background};
  322. {block:IfRoundedEdges}
  323. -moz-border-radius:5px;
  324. -webkit-border-radius:5px;
  325. border-radius: 5px;
  326. {/block:IfRoundedEdges}
  327. border-right: 6px solid {color: Accent};
  328. -webkit-box-shadow:-4px 4px 4px 0px {color: Background Color};
  329. -moz-box-shadow:-4px 4px 4px 0px {color: Background Color};
  330. box-shadow:-4px 4px 4px 0px {color: Background Color};
  331. margin-bottom: 20px;
  332. padding: 5px;
  333. }
  334.  
  335. .icon img {
  336. margin-left: 10px;
  337. margin-top: 5px;
  338. width: 60px;
  339. height: 60px;
  340. {block:IfCircularIcons}
  341. -moz-border-radius:100%;
  342. -webkit-border-radius:100%;
  343. border-radius: 100%;
  344. {/block:IfCircularIcons}
  345. }
  346.  
  347. .title {
  348. position: absolute;
  349. left: calc(60px + 10px + 20px);
  350. top: 25px;
  351. font-size: 2em;
  352. text-transform: lowercase;
  353. letter-spacing: 2px;
  354. }
  355.  
  356. .desc {
  357. position: relative;
  358. margin: 10px;
  359. text-align: center;
  360. }
  361.  
  362. .links {
  363. position: absolute;
  364. left: calc(75% - 100px);
  365. top: 40%;
  366.  
  367. }
  368.  
  369. .desc {
  370. {block:ifHiddenDescription}
  371. {block:ifDescriptionOnHover}
  372. opacity: 0;
  373. {/block:ifDescriptionOnHover}
  374. {/block:ifHiddenDescription}
  375. {block:ifNotHiddenDescription}
  376. opacity:1;
  377. {/block:ifNotHiddenDescription}
  378. }
  379.  
  380. {block:ifDescriptionOnHover}
  381. #boxs2:hover .desc{
  382. opacity: 1;
  383. -webkit-transition: all 0.8s ease-in-out;
  384. -moz-transition: all 0.8s ease-in-out;
  385. -o-transition: all 0.8s ease-in-out;
  386. -ms-transition: all 0.8s ease-in-out;
  387. transition: all 0.8s ease-in-out;
  388. }
  389.  
  390. #boxs2:hover {
  391. height: auto;
  392. -webkit-transition: all 0.8s ease-in-out;
  393. -moz-transition: all 0.8s ease-in-out;
  394. -o-transition: all 0.8s ease-in-out;
  395. -ms-transition: all 0.8s ease-in-out;
  396. transition: all 0.8s ease-in-out;
  397. }
  398. {/block:ifDescriptionOnHover}
  399.  
  400. /*-------------- SIDEBAR LINKS ----------------*/
  401.  
  402.  
  403. .boxs {
  404. width: 200px;
  405. height: 30px;
  406. background: {color: Sidebar and Links Background};
  407. {block:IfRoundedEdges}
  408. -moz-border-radius:5px;
  409. -webkit-border-radius:5px;
  410. border-radius: 5px;
  411. {/block:IfRoundedEdges}
  412. border-right: 6px solid {color: Accent};
  413. -webkit-box-shadow:-4px 4px 4px 0px {color: Background Color};
  414. -moz-box-shadow:-4px 4px 4px 0px {color: Background Color};
  415. box-shadow:-4px 4px 4px 0px {color: Background Color};
  416. margin-bottom: 20px;
  417. padding: 5px;
  418. }
  419.  
  420. .boxs .sf {
  421. color: {color: Accent};
  422. position: relative;
  423. left: 170px;
  424. font-size: 14px;
  425. top: 8px;
  426. }
  427.  
  428. .boxs a {
  429. position: absolute;
  430. margin-left: 10px;
  431. margin-top: 8px;
  432. font-size: 14px;
  433. text-transform: uppercase;
  434. letter-spacing: 3px;
  435. font-weight: bold;
  436. }
  437.  
  438. .boxs:hover{
  439. margin-left: 15px;
  440. -webkit-transition: all 0.6s ease-in-out;
  441. -moz-transition: all 0.6s ease-in-out;
  442. -o-transition: all 0.6s ease-in-out;
  443. -ms-transition: all 0.6s ease-in-out;
  444. transition: all 0.6s ease-in-out;
  445. }
  446.  
  447. /*-------------- CAPTION ----------------*/
  448.  
  449.  
  450. .avatr, .cap, .rebloguser, .rebloguser.sf {
  451. {block:ifNotShowCaptions}
  452. visibility:hidden;
  453. {block:ifNotShowCaptions}
  454. {block:ifShowCaptions}
  455. visibility: initial;
  456. {block:ifShowCaptions}
  457. }
  458.  
  459.  
  460. .avatr {
  461. display: inline;
  462. margin-top: 10px;
  463. margin-right: 5px;
  464. }
  465.  
  466. .cap {
  467. margin-left: 10px;
  468. }
  469.  
  470. .rebloguser {
  471. margin: 10px;
  472. }
  473.  
  474. .rebloguser .sf {
  475. font-size: 9px;
  476. }
  477.  
  478. /*-------------- POSTS ----------------*/
  479.  
  480.  
  481. #postcontainer {
  482. position: absolute;
  483. left: calc(50% - 365px);
  484. top: 10%;
  485. width: 700px;
  486. }
  487.  
  488. #posts {
  489. position:relative;
  490. left: calc(50% - {select: Post Width}px/2 + 10px);
  491. width: 500px;
  492. background: transparent;
  493. font-family: {select: Post Font}, sans-serif;
  494. margin-bottom: 5px;
  495. background: {color: Post Background};
  496. padding: 10px;
  497. border-right: 6px solid {color: Accent};
  498. {block:IfRoundedEdges}
  499. -moz-border-radius:5px;
  500. -webkit-border-radius:5px;
  501. border-radius: 5px;
  502. {/block:IfRoundedEdges}
  503. margin-top: calc({select: Post Margin}px + 20px);
  504. font-size: {select: Font Size};
  505. }
  506.  
  507. #posts:first-child {
  508. margin-top: 0;
  509. }
  510.  
  511. {block:IfPostLinksOnHover}
  512. #posts:hover {
  513. padding-right: 50px;
  514. -webkit-transition: all 0.6s ease-in-out;
  515. -moz-transition: all 0.6s ease-in-out;
  516. -o-transition: all 0.6s ease-in-out;
  517. -ms-transition: all 0.6s ease-in-out;
  518. transition: all 0.6s ease-in-out;
  519. }
  520. {/block:IfPostLinksOnHover}
  521.  
  522. /*-------------- POST LINKS ----------------*/
  523.  
  524.  
  525. .postside {
  526. position: absolute;
  527. right: 0px;
  528. width: 30px;
  529. height: auto;
  530. {block:IfNotNoPostLinks}
  531. opacity: 1;
  532. {/block:IfNotNoPostLinks}
  533. {block:IfNotPostLinksOnHover}
  534. opacity: 1;
  535. {/block:IfNotPostLinksOnHover}
  536. {block:IfNoPostLinks}
  537. opacity: 0;
  538. {/block:IfNoPostLinks}
  539. }
  540.  
  541. .like_button{
  542. display:inline-block;
  543. position:relative;
  544. margin-bottom: 4px;
  545. }
  546. .like_button iframe{
  547. height:100%;
  548. left:0;
  549. opacity:0;
  550. position:absolute;
  551. top:0;
  552. width:100%;}
  553.  
  554. .reblog, .permas, .notes, .source, .via {
  555. margin-bottom: 4px;
  556. }
  557.  
  558. /*-------------- TAGS ----------------*/
  559.  
  560.  
  561. #taglanes {
  562. position: absolute;
  563. left: calc(50% - {select: Post Width}px/2 + 10px);
  564. width: {select: Post Width}px;
  565. padding: 10px;
  566. margin-top:-5px;
  567. {block:IfShowTags}
  568. display:initial;
  569. {/block:IfShowTags}
  570. {block:IfNotShowTags}
  571. display:none;
  572. {/block:IfNotShowTags}
  573. }
  574.  
  575. #taglanes a{
  576. margin-right: 15px;
  577. color: #888;
  578. }
  579.  
  580. #taglanes a:hover {
  581. color: {color: Accent};
  582. -webkit-transition: all 0.6s ease-in-out;
  583. -moz-transition: all 0.6s ease-in-out;
  584. -o-transition: all 0.6s ease-in-out;
  585. -ms-transition: all 0.6s ease-in-out;
  586. transition: all 0.6s ease-in-out;
  587. }
  588.  
  589. /*-------------- POSTSIDE ON HOVER ----------------*/
  590.  
  591.  
  592. {block:IfPostLinksOnHover}
  593. .postside {
  594. opacity: 0;
  595. }
  596.  
  597. #posts:hover .postside{
  598. opacity: 1;
  599. -webkit-transition: all 0.8s ease-in-out;
  600. -moz-transition: all 0.8s ease-in-out;
  601. -o-transition: all 0.8s ease-in-out;
  602. -ms-transition: all 0.8s ease-in-out;
  603. transition: all 0.8s ease-in-out;
  604. }
  605. {/block:IfPostLinksOnHover}
  606.  
  607.  
  608. /*-------------- PAGINATION ----------------*/
  609.  
  610.  
  611. #pagination {
  612. left: calc(50% - {select: Post Width}px/2);
  613. width: {select: Post Width}px;
  614. text-align: center;
  615. margin-top: 80px;
  616. margin-bottom: 80px;
  617. font-family: {select: Pagination Font}, sans-serif;
  618. font-size: calc({select: Font Size}px + 1px);
  619. text-transform: uppercase;
  620. color: #888;
  621. opacity: 0.7;
  622. word-spacing: 10px;
  623. }
  624.  
  625. #pagination .current {
  626. color: {color: Accent};
  627. }
  628.  
  629. /*-------------- Q&As ----------------*/
  630.  
  631.  
  632. .question {
  633. margin-left: 12px;
  634. margin-right: 13px;
  635. width: 450px;
  636. background: #f8f8f8;
  637. padding: 10px;
  638. {block:IfRoundedEdges}
  639. -moz-border-radius:5px;
  640. -webkit-border-radius:5px;
  641. border-radius:5px;
  642. {/block:IfRoundedEdges}
  643. text-align: left;
  644. margin-bottom: 10px;
  645. }
  646.  
  647. .ask {
  648. text-align: left;
  649. text-transform: uppercase;
  650. padding: 10px;
  651. }
  652.  
  653. .ask a {
  654. color: {color: Accent};
  655. padding: 5px;
  656. border: 1px solid {color: Accent};
  657. {block:IfRoundedEdges}
  658. -moz-border-radius:5px;
  659. -webkit-border-radius:5px;
  660. border-radius:5px;
  661. {/block:IfRoundedEdges}
  662. }
  663.  
  664. .answerer {
  665. text-align: center;
  666. word-spacing: 5px;
  667. padding-bottom: 10px;
  668. border-bottom: 1px solid #eee;
  669. }
  670.  
  671. .answer {
  672. text-align: left;
  673. }
  674.  
  675. .answer img {
  676. {block:IfCircularIcons}
  677. -moz-border-radius:100%;
  678. -webkit-border-radius:100%;
  679. border-radius:100%;
  680. {/block:IfCircularIcons}
  681. float: right;
  682. }
  683.  
  684. .question img {
  685. {block:IfCircularIcons}
  686. -moz-border-radius:100%;
  687. -webkit-border-radius:100%;
  688. border-radius:100%;
  689. {/block:IfCircularIcons}
  690. float: left;
  691. }
  692.  
  693. /*-------------- HEADER ----------------*/
  694.  
  695. .sourceq {
  696. text-align: right;
  697. }
  698.  
  699. </style>
  700.  
  701. <body>
  702.  
  703.  
  704. <div id="sidebar">
  705. <div id="boxs2">
  706. <div class="icon"><img src="{image: Icon}"></div>
  707. <div class="title">{Title}</div>
  708. <div class="desc">{Description}</div>
  709. </div>
  710. <div class="links">
  711. <div class="boxs"><a href="{text: Link 1 URL}">{text: Link 1} </a><span class="sf sf-{text: Icon 1}"></span></div>
  712. <div class="boxs"><a href="{text: Link 2 URL}">{text: Link 2} </a><span class="sf sf-{text: Icon 2}"></span></div>
  713. <div class="boxs"><a href="{text: Link 3 URL}">{text: Link 3} </a><span class="sf sf-{text: Icon 3}"></span></div>
  714. <div class="boxs"><a href="{text: Link 4 URL}">{text: Link 4} </a><span class="sf sf-{text: Icon 4}"></span></div>
  715. <div class="boxs"><a href="{text: Link 5 URL}">{text: Link 5} </a><span class="sf sf-{text: Icon 5}"></span></div>
  716. <div class="boxs"><a href="{text: Link 6 URL}">{text: Link 6} </a><span class="sf sf-{text: Icon 6}"></span></div>
  717. </div>
  718. </div>
  719.  
  720.  
  721.  
  722. <div id="postcontainer">
  723.  
  724. {block:TagPage}<div class="tagsearchhead"><div class="tagsearchtitle">Posts Filed Under #{Tag}</div></div> {/block:TagPage}
  725.  
  726. {block:SearchPage}<div class="tagsearchhead"><div class="tagsearchtitle">Posts Featuring {SearchQuery}</div></div>{/block:SearchPage}
  727.  
  728. {block:Posts}
  729.  
  730. <div id="posts">
  731.  
  732. <div class="postside">
  733. <div class="like_button">{LikeButton}</div>
  734. <div class="reblog"><a href="{ReblogURL}" title="reblog"><span class="sf sf-reblog"></span></a></div>
  735. <div class="permas"><a href="{Permalink}" title="permalink"><span class="sf sf-link-1"></span></a></div>
  736. {block:NoteCount}<div class="notes"><a href="{Permalink}" title="{NoteCountWithLabel}"><span class="sf sf-star"></span></a></div>{/block:NoteCount}
  737. {block:RebloggedFrom}
  738. {block:ContentSource}<div class="source"><a href="{ReblogRootURL}" title="source {ReblogRootName}"><span class="sf sf-push-pin"></span></a></div> {/block:ContentSource}
  739. <div class="via"><a href="{ReblogParentURL}" title="via {ReblogParentName}"><span class="sf sf-refresh"></span></a></div>
  740. {/block:RebloggedFrom}
  741. </div>
  742.  
  743. {block:Answer}
  744. <div class="question"><img src="{AskerPortraitURL-24}"><div class="ask"> {Asker} asked:</div> {Question}</div>
  745. <div class="answer"><img src="{AnswererPortraitURL-24}">{block:Answerer}{Answerer} said: {/block:Answerer}{Answer}</div>
  746. {/block:Answer}
  747.  
  748.  
  749.  
  750. {block:Text}{block:Title}<div class="posttitle">{Title}</div>{/block:Title}{block:Reblogs}
  751. <div class="rebloguser">
  752. {block:IsNotOriginalEntry}
  753. <a href="{Permalink}"><div class="avatr"><span class="sf sf-user"></span></div>{Username}</a>
  754. {/block:IsNotOriginalEntry}
  755. {block:IsOriginalEntry}
  756. <a href="{Permalink}"><div class="avatr"><span class="sf sf-user"></span></div>{Username}</a>{/block:IsOriginalEntry}
  757. </div>
  758. <div class="cap">
  759. {Body}
  760. </div>
  761. {/block:Reblogs}
  762. {block:NotReblog}
  763. <div class="cap">
  764. {Body}
  765. </div>
  766. {/block:NotReblog}
  767. {/block:Text}
  768.  
  769.  
  770.  
  771. {block:Photo}<img src="{PhotoURL-500}" width="{select: Post Width}" height="auto">{block:Reblogs}
  772. <div class="rebloguser">
  773. {block:IsNotOriginalEntry}
  774. <a href="{Permalink}"><div class="avatr"><span class="sf sf-user"></span></div>{Username}</a>
  775. {/block:IsNotOriginalEntry}
  776. {block:IsOriginalEntry}
  777. <a href="{Permalink}"><div class="avatr"><span class="sf sf-user"></span></div>{Username}</a>{/block:IsOriginalEntry}
  778. </div>
  779. <div class="cap">
  780. {Body}
  781. </div>
  782. {/block:Reblogs}
  783. {block:NotReblog}
  784. {block:Caption}
  785. <div class="cap">
  786. {Caption}
  787. </div>
  788. {/block:Caption}
  789. {/block:NotReblog}
  790. {/block:Photo}
  791.  
  792.  
  793.  
  794. {block:Photoset}{Photoset}{block:Reblogs}
  795. <div class="rebloguser">
  796. {block:IsNotOriginalEntry}
  797. <a href="{Permalink}"><div class="avatr"><span class="sf sf-user"></span></div>{Username}</a>
  798. {/block:IsNotOriginalEntry}
  799. {block:IsOriginalEntry}
  800. <a href="{Permalink}"><div class="avatr"><span class="sf sf-user"></span></div>{Username}</a>{/block:IsOriginalEntry}
  801. </div>
  802. <div class="cap">
  803. {Body}
  804. </div>
  805. {/block:Reblogs}
  806. {block:NotReblog}
  807. {block:Caption}
  808. <div class="cap">
  809. {Caption}
  810. </div>
  811. {/block:Caption}
  812. {/block:NotReblog}
  813. {/block:Photoset}
  814.  
  815. {block:Quote}<div class="quotes"><span class="sf sf-chat-o"></span> <I>{Quote}</I></div>{block:Source}<div class="sourceq">{Source}</div>{/block:Source}{/block:Quote}
  816.  
  817. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  818.  
  819. {block:Chat}{block:Title}<div class="posttitle">{Title}</div></a>{/block:Title}
  820. {block:Lines}<div class="chitchat"><li>{block:Label}<div class="label">{Label}</div>{/block:Label}<div class="line">{Line}</div></li></div>{/block:Lines}{/block:Chat}
  821.  
  822. {block:Video}<div class="video">{Video-500}</div>{block:Reblogs}
  823. <div class="rebloguser">
  824. {block:IsNotOriginalEntry}
  825. <a href="{Permalink}"><div class="avatr"><span class="sf sf-user"></span></div>{Username}</a>
  826. {/block:IsNotOriginalEntry}
  827. {block:IsOriginalEntry}
  828. <a href="{Permalink}"><div class="avatr"><span class="sf sf-user"></span></div>{Username}</a>{/block:IsOriginalEntry}
  829. </div>
  830. <div class="cap">
  831. {Body}
  832. </div>
  833. {/block:Reblogs}
  834. {block:NotReblog}
  835. {block:Caption}
  836. <div class="cap">
  837. {Caption}
  838. </div>
  839. {/block:Caption}
  840. {/block:NotReblog}
  841. {/block:Video}
  842.  
  843. {block:Audio}{AudioEmbed}{block:Reblogs}
  844. <div class="rebloguser">
  845. {block:IsNotOriginalEntry}
  846. <a href="{Permalink}"><div class="avatr"><span class="sf sf-user"></span></div>{Username}</a>
  847. {/block:IsNotOriginalEntry}
  848. {block:IsOriginalEntry}
  849. <a href="{Permalink}"><div class="avatr"><span class="sf sf-user"></span></div>{Username}</a>{/block:IsOriginalEntry}
  850. </div>
  851. <div class="cap">
  852. {Body}
  853. </div>
  854. {/block:Reblogs}
  855. {block:NotReblog}
  856. {block:Caption}
  857. <div class="cap">
  858. {Caption}
  859. </div>
  860. {/block:Caption}
  861. {/block:NotReblog}
  862. {/block:Audio}
  863.  
  864.  
  865.  
  866. </div>
  867.  
  868. {block:HasTags}<div id="taglanes">{block:Tags}<a href="{TagUrl}" title="{Tag}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}
  869.  
  870.  
  871. {/block:Posts}
  872.  
  873. <div id="pagination">
  874. {block:Pagination}
  875. {block:PreviousPage}<a href="{PreviousPage}" class="nextprev">back</a>{/block:PreviousPage}
  876. {block:JumpPagination length="5"}
  877. {block:CurrentPage}<span class="current">{PageNumber}</span>{/block:CurrentPage}
  878. {block:JumpPage}<a class="jump" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  879. {block:NextPage}<a href="{NextPage}" class="nextprev">next</span></a>{/block:NextPage}
  880. {/block:Pagination}
  881. </div>
  882.  
  883. </div>
  884.  
  885.  
  886.  
  887.  
  888. <!------------------------------ CREDIT ------------------------------->
  889. <div id="axium"><a href="http://wolfthemes.tumblr.com">wolf</a></div>
  890. <!-------- PLEASE DO NOT TOUCH OR EDIT WITHOUT PERMISSION!!!! --------->
  891.  
  892.  
  893. </body>
  894. </html>
Advertisement
Add Comment
Please, Sign In to add comment