Advertisement
jhxy

theme 002; cogito

Aug 6th, 2014
169
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.38 KB | None | 0 0
  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