API tools faq
paste
Advertisement
rp-schtuff

RPSchtuff Page Theme - Blog Directory

rp-schtuff
Jun 22nd, 2019
1,826
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.47 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Hello, and thanks for using this theme! I've worked hard on it and I hope you find it useful.
  4.  
  5. YOU MAY:
  6. - edit this code however you wish
  7. - use this code as a base
  8. - contact me with any questions or concerns
  9.  
  10. YOU MAY NOT:
  11. - remove or alter the credit in any way
  12. - use this code for any commissioned work
  13.  
  14. CREDITS:
  15. - filters code/tutorial is by @magnusthemes
  16. - custom tooltips code is by @htmlqueens
  17. - smaller Tumblr controls is by @cyantists
  18.  
  19. ~Jeanette (rpschtuff)
  20.  
  21. -->
  22.  
  23. <!DOCTYPE html>
  24. <html>
  25.  
  26. <head>
  27.  
  28. <title>{Title}</title>
  29. <link rel="shortcut icon" href="{Favicon}">
  30.  
  31.  
  32. <!-- FONT AWESOME SCRIPT -->
  33. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  34.  
  35.  
  36. <!-- JQUERY SCRIPT -->
  37. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  38. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  39.  
  40.  
  41. <!-- COMBO FILTERING SCRIPT - by @magnusthemes -->
  42. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  43.  
  44. <script>
  45. $(document).ready(function() {
  46. var $container = $(".grid"); // the container with all the elements to filter inside
  47. var filters = {}; //should be outside the scope of the filtering function
  48. /* --- read the documentation on isotope.metafizzy.co for more options --- */
  49. var $grid = $container.isotope({
  50. itemSelector: ".box", // the elements to filter
  51. percentPosition: true // put true if you use percentage widths, otherwise put false
  52. });
  53. $(".option-set a").click(function(e) {
  54. var $this = $(this); // cache the clicked link
  55. var filterAttr = "data-filter-value";
  56. var filterValue = $this.attr(filterAttr); // cache the filter
  57. var $optionSet = $this.parents(".option-set"); // cache the parent element
  58. var group = $optionSet.attr("data-filter-group"); // cache the parent filter group
  59. var filterGroup = filters[group];
  60. if (!filterGroup) {
  61. filterGroup = filters[group] = [];
  62. }
  63. var $selectAll = $optionSet.find('a['+filterAttr+'=""]'); // the 'select all' button in the current group
  64. var activeClass = "selected", // the class for active links
  65. exclClass = "exclusive"; // the class for exclusive groups
  66. comboFiltering($this,filters,filterAttr,filterValue,$optionSet,group,$selectAll,activeClass,exclClass);
  67. var comboFilter = getComboFilter(filters);
  68. $grid.isotope({
  69. filter: comboFilter
  70. });
  71. $this.toggleClass(activeClass);
  72. e.preventDefault();
  73. });
  74. });
  75. </script>
  76.  
  77.  
  78. <!-- TOOLTIPS SCRIPT - by @htmlqueens -->
  79. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  80. <script>
  81. (function($){
  82. $(document).ready(function(){
  83. $("[title],a[title],img[title]").style_my_tooltips({
  84. tip_follows_cursor:true,
  85. tip_delay_time:90,
  86. tip_fade_speed:600,
  87. attribute:"title"
  88. });
  89. });
  90. })(jQuery);
  91. </script>
  92.  
  93.  
  94. <!-- FONT -->
  95. <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  96.  
  97.  
  98.  
  99. <style type="text/css">
  100.  
  101. /* SMALLER TUMBLR CONTROLS - by @cyantists */
  102. iframe.tmblr-iframe {
  103. z-index:99999999999999!important;
  104. top:0!important;
  105. right:0!important;
  106. opacity:0.4;
  107. /* delete invert(1) from here */
  108. filter:invert(1) contrast(150%);
  109. -webkit-filter:invert(1) contrast(150%);
  110. -o-filter:invert(1) contrast(150%);
  111. -moz-filter:invert(1) contrast(150%);
  112. -ms-filter:invert(1) contrast(150%);
  113. /* to here if your blog has a dark background */
  114. transform:scale(0.65);
  115. transform-origin:100% 0;
  116. -webkit-transform:scale(0.65);
  117. -webkit-transform-origin:100% 0;
  118. -o-transform:scale(0.65);
  119. -o-transform-origin:100% 0;
  120. -moz-transform:scale(0.65);
  121. -moz-transform-origin:100% 0;
  122. -ms-transform:scale(0.65);
  123. -ms-transform-origin:100% 0;}
  124.  
  125. iframe.tmblr-iframe:hover {
  126. opacity:0.6!important;}
  127.  
  128. .tooltip{
  129. display:inline;
  130. position:relative;
  131. }
  132.  
  133. /* CUSTOM SCROLLBAR BY @HELP-WITH-CODING */
  134. ::-webkit-scrollbar {
  135. width: 3px;
  136. background: transparent;
  137. z-index:-999999999;
  138. }
  139.  
  140. ::-webkit-scrollbar-thumb {
  141. background: #888;
  142. }
  143.  
  144. #s-m-t-tooltip{
  145. max-width:300px; /*how big the tooltip can be at most*/
  146. border-radius: 0px; /*change your border radius*/
  147. padding:3px 4px 5px 4px; /*padding inside tooltip*/
  148. margin:20px 7px -2px 20px; /*distance from word*/
  149. background-color:#ffffff;/*background color*/
  150. border:1px solid #ccc; /*border info*/
  151. font-family:'open sans'; /*tooltip font*/
  152. font-size:9px; /*tooltip font size*/
  153. letter-spacing:1px; /*tooltip letter spacing*/
  154. text-transform:uppercase; /*makes the tooltip title uppercase*/
  155. color:#000; /*tooltip font color*/
  156. z-index:99999999999999999999;
  157. box-shadow:2px 2px 5px #ccc;
  158. }
  159.  
  160. body {
  161. background-color:#eee; /* page background color */
  162. color:#222; /* general font color */
  163. font-size:11px;
  164. font-family:'open sans';
  165. overflow-x:hidden;
  166. }
  167.  
  168. a {
  169. color:#f2992e; /* link color */
  170. text-decoration:none;
  171. -webkit-transition: 0.3s ease-in-out;
  172. -moz-transition: 0.3s ease-in-out;
  173. -o-transition: 0.3s ease-in-out;
  174. transition: 0.3s ease-in-out;
  175. }
  176.  
  177. a:hover {
  178. color:#888; /* link hover color */
  179. -webkit-transition: 0.3s ease-in-out;
  180. -moz-transition: 0.3s ease-in-out;
  181. -o-transition: 0.3s ease-in-out;
  182. transition: 0.3s ease-in-out;
  183. }
  184.  
  185. .sidebar {
  186. display:block;
  187. background-color:#fff; /* sidebar background color */
  188. color:#444; /* sidebar text color */
  189. border:1px solid #ccc; /*sidebar border color */
  190. box-shadow:2px 2px 5px #ccc; /* sidebar shadow color */
  191. width:220px;
  192. padding:10px;
  193. text-align:center;
  194. margin:10px;
  195. font-size:10px;
  196. margin-left:30px;
  197. }
  198.  
  199. .sidebar:first-of-type {
  200. margin-top:50px;
  201. }
  202.  
  203. .maintitle {
  204. font-size:20px;
  205. letter-spacing:2px;
  206. text-transform:uppercase;
  207. font-weight:bold;
  208. text-align:center;
  209. color:#000; /* main title color */
  210. }
  211.  
  212. .navi {
  213. display:inline-block;
  214. text-transform:uppercase;
  215. padding-left:10px;
  216. padding-right:10px;
  217. }
  218.  
  219. .subheader {
  220. font-size:12px;
  221. letter-spacing:4px;
  222. color:#444; /* sidebar subeheader color */
  223. text-align:center;
  224. text-transform:uppercase;
  225. font-weight:bold;
  226. padding-bottom:0;
  227. }
  228.  
  229. .sidebar ul {
  230. padding:0;
  231. }
  232.  
  233. .sidebar li {
  234. list-style-type:none;
  235. text-align:center;
  236. display:inline-block;
  237. font-size:10px;
  238. font-weight:bold;
  239. text-transform:uppercase;
  240. padding:2px;
  241. margin:1px;
  242. width:100px;
  243. border:1px solid #ccc; /* filter button border color */
  244. }
  245.  
  246. .selected {
  247. color:#000; /* selected filter button color */
  248. font-weight:bold;
  249. letter-spacing:1px;
  250. }
  251.  
  252. #container {
  253. position:absolute;
  254. width:calc(100% - 300px);
  255. height:calc(100% - 25px);
  256. left:300px;
  257. top:0;
  258. overflow-y:scroll;
  259. padding-top:25px;
  260. }
  261.  
  262. .box {
  263. width:250px;
  264. background-color:#fff; /* box background color */
  265. border:1px solid #ccc; /* box border color */
  266. box-shadow:2px 2px 5px #ccc; /* box shadow color */
  267. padding:10px;
  268. margin:10px;
  269. position:relative;
  270. }
  271.  
  272. .box h1 {
  273. font-size:16px;
  274. color:#000; /* box title color */
  275. padding:0;
  276. margin:0;
  277. margin-bottom:-5px;
  278. text-align:center;
  279. text-transform:uppercase;
  280. font-weight:bold;
  281. letter-spacing:1px;
  282. }
  283.  
  284. .box h2 {
  285. font-size:11px;
  286. color:#444; /* box subtitle color */
  287. padding-bottom:5px;
  288. margin:0;
  289. text-align:center;
  290. text-transform:uppercase;
  291. letter-spacing:2px;
  292. border-bottom:1px solid #ccc; /* box subtitle underline color */
  293. margin-top:5px;
  294. }
  295.  
  296. .entry {
  297. position:relative;
  298. width:250px;
  299. height:25px;
  300. display:block;
  301. }
  302.  
  303. .entry:nth-of-type(even) {
  304. background-color:#f7f7f7; /* background color of every other entry */
  305. }
  306.  
  307. .entry:nth-of-type(odd) {
  308. background-color:#fff; /* background color of every other other entry */
  309. }
  310.  
  311. .entry img {
  312. width:15px;
  313. height:15px;
  314. padding:5px;
  315. float:left;
  316. }
  317.  
  318. .entry img:before {
  319. content: ' ';
  320. display: block;
  321. position: absolute;
  322. height: 15px;
  323. width: 15px;
  324. background-size:cover;
  325. background-image: url('URL HERE');
  326. /* this image will show in place of any broken images */
  327. }
  328.  
  329. .entry a {
  330. float:left;
  331. font-weight:bold;
  332. text-transform:uppercase;
  333. letter-spacing:1px;
  334. margin-top:6px;
  335. font-size:10px;
  336. }
  337.  
  338. .entry .denot {
  339. float:right;
  340. color:#888; /* symbols color */
  341. margin-right:10px;
  342. font-size:9px;
  343. text-transform:uppercase;
  344. text-align:right;
  345. padding-top:6px;
  346. }
  347.  
  348. /* DO NOT REMOVE - you may edit the colors, but it should remain readable */
  349. #credit {
  350. position:fixed;
  351. bottom:10px;
  352. left:10px;
  353. text-transform:uppercase;
  354. line-height:90%;
  355. text-align:center;
  356. font-size:9px;
  357. border:1px solid #ccc; /* credit box border color */
  358. box-shadow:2px 2px 5px #ccc; /* credit box shadow color */
  359. background-color:#fff; /* credit box background color */
  360. padding:5px;
  361. }
  362.  
  363. #credit a {
  364. color:#222; /* credit box text color */
  365. }
  366. /* DO NOT REMOVE */
  367.  
  368. </style>
  369. </head>
  370. <body>
  371.  
  372. <aside class="sidebar">
  373.  
  374. <div class="maintitle">main title</div>
  375.  
  376. <!-- LINKS BELOW MAIN TITLE -->
  377. <div class="navi"><a href="/link-1">link 1</a></div>
  378. <div class="navi"><a href="/link-2">link 2</a></div>
  379. <div class="navi"><a href="/link-3">link 3</a></div>
  380.  
  381. </aside>
  382.  
  383.  
  384. <aside class="sidebar">
  385.  
  386. <!-- FILTER CATEGORY LABEL -->
  387. <div class="subheader">filter category</div>
  388.  
  389. <!-- FILTERS -->
  390. <ul class="filter option-set exclusive" data-filter-group="group1">
  391. <li><a href="#" data-filter-value="" class="selected">all</a></li>
  392. <li><a href="#" data-filter-value=".filter1">filter 1</a></li>
  393. <li><a href="#" data-filter-value=".filter2">filter 2</a></li>
  394. <li><a href="#" data-filter-value=".filter3">filter 3</a></li>
  395. </ul>
  396.  
  397. <!-- TO MAKE YOUR OWN FILTERS:
  398. - change ".filter1" to anything you like (no spaces, keep the dot)
  399. - change filter 1 to what you'd like the label to say
  400. - copy and paste to add as many as you'd like
  401.  
  402. TO ADD ANOTHER FILTER CATEGORY:
  403. - copy everything in Filter Category Label and the Filters themselves
  404. - change the text in data-filter-group to something unique
  405. -->
  406.  
  407. </aside>
  408.  
  409. <!-- EXTRA SIDEBAR (delete if you don't need it) -->
  410. <aside class="sidebar">
  411. <p>Put any text you like here, a disclaimer, etc.</p>
  412. </aside>
  413.  
  414.  
  415. <!-- DO NOT REMOVE -->
  416. <div id="credit">
  417. <a href="http://rpschtuff.tumblr.com">
  418. theme by<br><b>rpschtuff</b>
  419. </a>
  420. </div>
  421. <!-- DO NOT REMOVE -->
  422.  
  423.  
  424. <section id="container">
  425. <div class="grid">
  426.  
  427.  
  428. <!-- START OF BOX -->
  429. <div class="box filter1 filter2"> <!-- always use box, add your filters -->
  430.  
  431. <h1>title</h1> <!-- box title -->
  432. <h2>subtitle</h2> <!-- box subtitle -->
  433.  
  434. <!-- START OF ENTRY WITHIN BOX, copy and paste as needed -->
  435. <div class="entry">
  436.  
  437. <!-- image link (change URL to use a blog's avatar) -->
  438. <img src="https://api.tumblr.com/v2/blog/URL.tumblr.com/avatar">
  439.  
  440. <!-- link -->
  441. <a href="http://URL.tumblr.com">URL</a>
  442.  
  443. <!-- icons, see https://fontawesome.com/icons?d=gallery for more options and change "hover text" to what you'd like it to say on hover. if you don't want any icons, delete the entire section, or simply leave it empty-->
  444. <div class="denot">
  445. <i class="fas fa-star" title="hover text"></i>
  446. </div>
  447.  
  448. </div>
  449. <!-- END OF ENTRY -->
  450.  
  451. </div>
  452. <!-- END OF BOX -->
  453.  
  454.  
  455.  
  456. <!-- for more boxes, copy and paste the template below:
  457.  
  458. <div class="box">
  459. <h1>title</h1>
  460. <h2>subtitle</h2>
  461. <div class="entry">
  462. <img src="https://api.tumblr.com/v2/blog/URL.tumblr.com/avatar">
  463. <a href="http://URL.tumblr.com">URL</a>
  464. <div class="denot">
  465. <i class="fas fa-star" title="hover text"></i>
  466. </div>
  467. </div>
  468. </div>
  469.  
  470. -->
  471.  
  472. </div>
  473. </section>
  474.  
  475.  
  476. </body>
  477. </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!