API tools faq
paste
Advertisement
jhxy

theme 002; cogito

jhxy
Aug 6th, 2014
169
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.38 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <!-- jordyn's first theme yo
  4. any questions do not hesitate
  5. don't remove creddy cred
  6. thank u love bugs
  7. -->
  8.  
  9. <script type="text/javascript"
  10. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  11. <!-- variables -->
  12. <meta name="color:Background" content="#ffffff"/>
  13. <meta name="color:Text" content="#000000"/>
  14. <meta name="color:Link" content="#cccccc"/>
  15. <meta name="color:Circle" content="#000000"/>
  16. <meta name="color:Borders" content="#cccccc"/>
  17. <meta name="color:Accent 1" content="#cccccc"/>
  18. <meta name="color:Accent 2" content="#888888"/>
  19. <meta name="text:blog URL" content="/"/>
  20. <meta name="text:Link 2 URL" content="/"/>
  21. <meta name="text:Link 3 URL" content="/"/>
  22. <meta name="text:Link 4 URL" content="/"/>
  23. <meta name="text:Link 5 URL" content="/"/>
  24.  
  25.  
  26.  
  27. <!-- pop up script -->
  28. <script>
  29.  
  30.  
  31.  
  32. $(document).ready(function() {
  33.  
  34. //
  35.  
  36.  
  37.  
  38. //When you click on a link with class of poplight and the href starts with a #
  39.  
  40. $('a.poplight[href^=#]').click(function() {
  41.  
  42. var popID = $(this).attr('rel'); //Get Popup Name
  43.  
  44. var popURL = $(this).attr('href'); //Get Popup href to define size
  45.  
  46.  
  47.  
  48. //Pull Query & Variables from href URL
  49.  
  50. var query= popURL.split('?');
  51.  
  52. var dim= query[1].split('&');
  53.  
  54. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  55.  
  56.  
  57.  
  58. //Fade in the Popup and add close button
  59.  
  60. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend();
  61.  
  62.  
  63. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  64.  
  65. var popMargTop = ($('#' + popID).height() + 80) / 2;
  66.  
  67. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  68.  
  69.  
  70.  
  71. //Apply Margin to Popup
  72.  
  73. $('#' + popID).css({
  74.  
  75. 'margin-top' : -popMargTop,
  76.  
  77. 'margin-left' : -popMargLeft
  78.  
  79. });
  80.  
  81.  
  82.  
  83. //Fade in Background
  84.  
  85. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  86.  
  87. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  88.  
  89.  
  90.  
  91. return false;
  92.  
  93. });
  94.  
  95.  
  96.  
  97. //Close Popups and Fade Layer
  98.  
  99. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  100.  
  101. $('#fade , .popup_block').fadeOut(function() {
  102.  
  103. $('#fade, a.close').remove(); //fade them both out
  104.  
  105. });
  106.  
  107. return false;
  108.  
  109. });
  110.  
  111.  
  112.  
  113.  
  114.  
  115. });
  116.  
  117. </script>
  118.  
  119. <!-- end pop up script -->
  120.  
  121. <style type="text/css">
  122. body {
  123. font-family:Didot, serif;
  124. font-size:10px;
  125. letter-spacing:1px;
  126. background-color:{color:Background};
  127. color:{color:Text};
  128. }
  129.  
  130. .topbar {
  131. margin-left:auto;
  132. margin-right:auto;
  133. margin-top:20px;
  134. background-color:{color:Background};
  135. }
  136. .circle{
  137. font-family:Didot, serif;
  138. text-align:center;
  139. letter-spacing:2px;
  140. border:1px solid {color:Circle};
  141. height:200px;
  142. width:200px;
  143. border-radius:50%;
  144. margin-left:auto;
  145. margin-right:auto;
  146. background-color:{color:Background};
  147. }
  148. #title {
  149. vertical-align:center;
  150. color:{color:Text};
  151. font-size:16px;
  152. padding-top:92px;
  153. padding-left:50px;
  154. padding-right:50px;
  155. -moz-transition-duration: 0.5s;
  156. -o-transition-duration: 0.5s;
  157. -webkit-transition-duration: 0.5s;
  158. transition-duration: 0.5s;
  159. }
  160. #title a {
  161. color:{color:Text};
  162. }
  163. #title a:hover {
  164. color:{color:Accent 2};
  165. }
  166. a {
  167. text-decoration:none;
  168. color:{color:Link};
  169. }
  170. a:hover {
  171. color: transparent;
  172. text-shadow: {color:Accent 2} 0 0 5px;
  173. text-decoration:none;
  174. -moz-transition-duration: 0.5s;
  175. -o-transition-duration: 0.5s;
  176. -webkit-transition-duration: 0.5s;
  177. transition-duration: 0.5s;
  178. }
  179. #links {
  180. opacity:0;
  181. padding-top:10px;
  182. margin-left:auto;
  183. margin-right:auto;
  184. -moz-transition-duration: 0.5s;
  185. -o-transition-duration: 0.5s;
  186. -webkit-transition-duration: 0.5s;
  187. transition-duration: 0.5s;
  188. }
  189. .circle:hover #links{
  190. opacity:1;
  191. z-index:9999999;
  192. -moz-transition-duration: 0.5s;
  193. -o-transition-duration: 0.5s;
  194. -webkit-transition-duration: 0.5s;
  195. transition-duration: 0.5s;
  196. }
  197. #description {
  198. font-family: Didot;
  199. text-align:center;
  200. font-size:10px;
  201. letter-spacing:2px;
  202. padding-top:35px;
  203. }
  204.  
  205.  
  206. .block {
  207. text-align: center;
  208. width: 100%;
  209. height: auto;
  210. }
  211.  
  212. /* The ghost, nudged to maintain perfect centering */
  213. .block:before {
  214. content: '';
  215. display: block;
  216. height: 100%;
  217. margin-right: -0.25em; /* Adjusts for spacing */
  218. }
  219. .container {
  220. display: block;
  221. width: 600px;
  222. margin-left:auto;
  223. margin-right:auto;
  224. margin-top:90px;
  225.  
  226. }
  227. .posts {
  228. padding:40px;
  229. }
  230.  
  231. .posts .hovcap {
  232. opacity: 0;
  233. text-align:center;
  234. padding:10px;
  235. margin-left:auto;
  236. margin-right:auto;
  237. -moz-transition-duration: 0.5s;
  238. -o-transition-duration: 0.5s;
  239. -webkit-transition-duration: 0.5s;
  240. transition-duration: 0.5s;
  241. }
  242. .posts:hover .hovcap {
  243. opacity:1;
  244. -moz-transition-duration: 0.5s;
  245. -o-transition-duration: 0.5s;
  246. -webkit-transition-duration: 0.5s;
  247. transition-duration: 0.5s;
  248. }
  249.  
  250. .quote {
  251. margin-left:auto;
  252. margin-right:auto;
  253. border:1px solid {color:Borders};
  254. letter-spacing:2px;
  255. text-transform:lowercase;
  256. padding:20px;
  257. width:400px;
  258. }
  259. li:nth-child(odd) {
  260. background-color:#F6F6F6;
  261. color:{color:Accent 1};
  262. padding:5px;
  263. }
  264. li:nth-child(even) {
  265. background-color: {color:Background} ;
  266. color:{color:Accent 2};
  267. padding:5px;
  268. }
  269.  
  270. ol {
  271. list-style:decimal-leading-zero;
  272. text-align:left;
  273. }
  274. ul {
  275. list-style:square;
  276. text-align:left;
  277. }
  278. .notes li: {
  279. list-style:none;
  280. padding:10px;
  281. }
  282.  
  283. #bottom {
  284. width:600px;
  285. margin-left:-70px;
  286. }
  287. .divider {
  288. width:200px;
  289. border-bottom:1px solid {color:Borders};
  290. padding-top:5px;
  291. padding-bottom:10px;
  292. }
  293. .nav {
  294. width:400px;
  295. font-size:15px;
  296. letter-spacing:5px;
  297. text-transform:lowercase;
  298. text-align:center;
  299. padding-top:51px;
  300. padding-bottom:10px;
  301. }
  302.  
  303. /* popup css */
  304. #fade {
  305. display: none;
  306. background: #000; /* background colour */
  307. position: fixed;
  308. left: 0;
  309. top: 0;
  310. width: 100%;
  311. height: 100%;
  312. opacity: .70; /* background opacity; 0.70 would go for 70% */
  313. z-index: 9999;
  314. }
  315.  
  316. .popup_block{
  317. display: none;
  318. background:none; /* square colour; if you don't want one write none*/
  319. opacity:1;
  320. padding: 20px;
  321. float: left;
  322. height: auto; /* if you want the square to fit to the text you write keep it like this if not change auto for the px you want; example: 400px */
  323. position: fixed;
  324. top: 50%;
  325. left: 50%;
  326. z-index: 99999;
  327. }
  328.  
  329. img.btn_close {
  330. float: right;
  331. margin: -55px -55px 0 0;
  332. }
  333.  
  334. *html #fade {
  335. position: absolute;
  336. }
  337.  
  338. *html .popup_block {
  339. position: absolute;
  340. }
  341. </style>
  342.  
  343. </head>
  344.  
  345. <body>
  346.  
  347.  
  348. <div class="topbar">
  349. <div class="circle">
  350. <div id="title"><a href="/">{Title}</a></div>
  351. <div id="links">
  352. <a href="#?w=500" rel="popup2" class="poplight">I</a>
  353. <a href="{text:Link 2 URL}">II</a>
  354. <a href="{text:Link 3 URL}">III</a>
  355. <a href="{text:Link 4 URL}">IV</a>
  356. <a href="{text:Link 5 URL}">V</a>
  357. </div>
  358. </div>
  359. <div id="description">{Description}</div>
  360.  
  361. </div>
  362.  
  363. <!-- pop up ask -->
  364. <div id="popup2" class="popup_block">
  365. <iframe frameborder="0"
  366. height="200"
  367. id="ask_form"
  368. scrolling="no"
  369. src="http://www.tumblr.com/ask_form/{text:blog URL}.tumblr.com"
  370. width="100%">
  371. </iframe>
  372. </div>
  373.  
  374. <!-- end popup ask -->
  375. <div class="block">
  376. <div class="container">
  377. {block:Posts}
  378.  
  379.  
  380.  
  381. <div class="posts">
  382.  
  383.  
  384. {block:Text}
  385. {block:Title}<h2>{Title}</h2>{/block:Title}
  386. {Body}
  387. <div class="hovcap">
  388. {block:HasTags}
  389. <div class="tags">
  390. {block:Tags}
  391. <a href="{TagURL}">#{Tag}</a>
  392. {/block:Tags}
  393. </div>
  394. {/block:HasTags}</p>
  395. <a href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  396. </div>
  397. {/block:Text}
  398.  
  399. {block:Answer}
  400. <div class="question">
  401. <h2>{Asker} whispered: {Question}</h2>
  402. </div>
  403. <div class="quest">
  404. {Answer}
  405. </div>
  406. <div class="hovcap">
  407. {block:HasTags}
  408. <div class="tags">
  409. {block:Tags}
  410. <a href="{TagURL}">#{Tag}</a>
  411. {/block:Tags}
  412. </div>
  413. {/block:HasTags}</p>
  414. <a href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  415. </div>
  416. {/block:Answer}
  417.  
  418. {block:Quote}
  419. <div class="quote">
  420. <div class="quotetext_{Length}"><h1>"{Quote}"</h1></div>
  421. {block:Source}<div class="source"> - {Source}</div>{/block:Source}
  422. </div>
  423. <div class="hovcap">
  424. {block:HasTags}
  425. <div class="tags">
  426. {block:Tags}
  427. <a href="{TagURL}">#{Tag}</a>
  428. {/block:Tags}
  429. </div>
  430. {/block:HasTags}</p>
  431. <a href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  432. </div>
  433. {/block:Quote}
  434.  
  435. {block:Photoset}
  436. {Photoset-400}
  437. <div class="hovcap">
  438. {block:Caption}<div class="postinfo"><div class="photocap">{Caption}</div>{/block:Caption}
  439. {block:HasTags}
  440. <div class="tags">
  441. {block:Tags}
  442. <a href="{TagURL}">#{Tag}</a>
  443. {/block:Tags}
  444. </div>
  445. {/block:HasTags}
  446. <a href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  447. </div>
  448. {/block:Photoset}
  449.  
  450. {block:Photo}
  451. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="400px">{LinkCloseTag}
  452. <div class="hovcap">
  453. {block:Caption}<div class="postinfo"><div class="photocap">{Caption}
  454. {block:HasTags}
  455. <div class="tags">
  456. {block:Tags}
  457. <a href="{TagURL}">#{Tag}</a>
  458. {/block:Tags}
  459. </div>
  460. {/block:HasTags}
  461. </p>
  462. <a href="{Permalink}">{block:Date} {MonthNumberWithZero} {DayOfMonthWithZero} {Year}{/block:Date}</a>
  463. </div>
  464. </div>{/block:Caption}
  465. </div>
  466. {/block:Photo}
  467.  
  468. {block:AudioPlayer}{AudioPlayerWhite} {/block:AudioPlayer}
  469. {block:PlayCount} {PlayCountWithLabel} {/block:PlayCount}
  470. {block:AlbumArt}{AlbumArtURL}{/block:AlbumArt}
  471. {block:Artist}{Artist}{/block:Artist}
  472. {block:Album}{Album}{/block:Album}
  473. {block:TrackName}{TrackName}{/block:TrackName}
  474.  
  475. {block:Video}
  476. {Video-400}
  477. {block:Caption}{Caption}{/block:Caption}
  478. {/block:Video}
  479.  
  480. </div>
  481.  
  482. <div class="permalink">
  483. {block:PermalinkPage}
  484. {Post}
  485. {block:PostNotes}
  486. <div class"notes">
  487. {PostNotes}
  488. </div>
  489. {/block:PostNotes}
  490. {/block:PermalinkPage}
  491. </div>
  492.  
  493.  
  494.  
  495. {/block:Posts}
  496. <div align ="center"id="bottom">
  497. <div class="nav">
  498. {block:PreviousPage}<a href="{PreviousPage}">aft</a>{/block:PreviousPage}
  499. {block:NextPage}<a href="{NextPage}">fore</a>{/block:NextPage}
  500. </div>
  501. {/block:Pagination}
  502. </div>
  503.  
  504.  
  505. </div>
  506. </div>
  507.  
  508. </div>
  509. <div class="credit">
  510. <a href="http://jhxythemes.tumblr.com"><img style="height:50px;width:50px; margin-bottom:10px;margin-right:10px; float:right" src="https://38.media.tumblr.com/690d59d5b30ad0628ab75ac7794c6ab9/tumblr_n9vk8a9IHR1r1bumeo1_100.png"></a></div>
  511. </body>
  512. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!