API tools faq
paste
sexycullen

theme 212 custom layout

sexycullen
Jan 1st, 2022 (edited)
132
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.76 KB | None | 0 0
raw download clone embed print report
  1. <!--------------------------------------------
  2. tylergaciaposey's theme #standard to custom
  3. theme 212 TO CUSTOM LAYOUT
  4. http://tylergaciaposey.tumblr.com/
  5.  
  6.  
  7. PLEASE DO NOT,
  8. remove the credits; claim as your own; use as a base, take parts
  9. of the theme.
  10. YOU CAN:
  11. edit as much as you want for your own personal use only.
  12.  
  13.  
  14. CREDITS,
  15. shythemes:
  16. scrollbar style
  17.  
  18. icon font by honeybee.suiomi.com
  19. --------------------------------------------->
  20.  
  21. <!DOCTYPE html>
  22. <head>
  23.  
  24. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. <title>{Title}</title>
  27. <link rel="shortcut icon" href="{Favicon}">
  28. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  29. <meta name="description" content="" />
  30. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  31.  
  32.  
  33.  
  34.  
  35. <!----- google fonts ---->
  36.  
  37. <link href="https://fonts.googleapis.com/css?family=Hind:400,700|Muli:400,400i,700,700i|Open+Sans:400,400i,700,700i|Poppins:400,400i,700,700i,900,900i|Lato:400,400i,700,700i|Roboto:400,400i,700,700i" rel="stylesheet">
  38.  
  39. <!----- google fonts ---->
  40.  
  41.  
  42.  
  43.  
  44. <!----- icons ---->
  45.  
  46. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  47.  
  48. <!----- icons ---->
  49.  
  50.  
  51.  
  52. <!----- tooltip ---->
  53. <script>
  54. (function($){
  55. $(document).ready(function(){
  56. $("a[title]").style_my_tooltips({
  57. tip_follows_cursor:true,
  58. tip_delay_time:90,
  59. tip_fade_speed:600,
  60. attribute:"title"
  61. });
  62. });
  63. })(jQuery);
  64. </script>
  65. <!----- tooltip ---->
  66.  
  67.  
  68.  
  69.  
  70. <!----- script from the 'click for more' button ---->
  71.  
  72. <script type="text/javascript" src="https://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
  73. <script type="text/javascript">
  74. $(document).ready(function(){
  75. $(".hover_body").hide();
  76. $(".hover_head").click(function(){
  77. $(this).next(".hover_body").slideToggle('fast');
  78. }); }); </script>
  79.  
  80. <!----- script from the 'click for more' button ---->
  81.  
  82.  
  83.  
  84. <style type="text/css">
  85.  
  86.  
  87. /* scrollbar */
  88.  
  89. ::-webkit-scrollbar {
  90. width:7px;
  91. height:7px;
  92. }
  93. ::-webkit-scrollbar {
  94. background-color: #FFFFFF;
  95. }
  96. ::-webkit-scrollbar-track {
  97. border:8px solid #FFFFFF;
  98. background-color: #FFFFFF;
  99. }
  100. ::-webkit-scrollbar-thumb {
  101. border:3px solid #FFFFFF;
  102. background-color:#EDEDED;
  103. min-height:24px;
  104. min-width:24px;
  105. }
  106.  
  107.  
  108. /* if you want images black and white, set the grayscale to 100% and if you want opacity, set opacity value to: 0.7 */
  109.  
  110. img {
  111. -webkit-filter: grayscale(0%);
  112. -webkit-transition: all 0.9s ease-in-out;
  113. -moz-transition: all 0.9s ease-in-out;
  114. -o-transition: all 0.9s ease-in-out;
  115. -ms-transition: all 0.9s ease-in-out;
  116. transition: all 0.9s ease-in-out;
  117. opacity:1;
  118. }
  119.  
  120.  
  121.  
  122. img:hover {
  123. -webkit-filter: grayscale(0%);
  124. -webkit-transition: all 0.9s ease-in-out;
  125. -moz-transition: all 0.9s ease-in-out;
  126. -o-transition: all 0.9s ease-in-out;
  127. -ms-transition: all 0.9s ease-in-out;
  128. transition: all 0.9s ease-in-out;
  129. }
  130.  
  131.  
  132.  
  133. /* tooltip */
  134.  
  135. #s-m-t-tooltip {
  136. max-width:300px;
  137. margin-top:-30px;
  138. margin-left:-25px;
  139. letter-spacing:1px;
  140. text-align:center;
  141. padding:3px;
  142. background-color:#FFFFFFF;
  143. border-bottom:1px solid #efefef;
  144. z-index:999999;
  145. }
  146.  
  147.  
  148. .container {
  149. width:976px;
  150. margin:30px auto;
  151. outline:0px solid #F5F5F5;
  152. }
  153.  
  154.  
  155.  
  156.  
  157.  
  158.  
  159. /* custom font size, font family and color here */
  160.  
  161. body {
  162. -webkit-font-smoothing: antialiased;
  163. -moz-osx-font-smoothing: grayscale;
  164. color:#000000;
  165. font-size: 10.5px;
  166. font-family:'Roboto', Helvetica,Arial,sans-serif;
  167. word-wrap:break-word;
  168. margin:0;
  169. line-height:1.4em;
  170. background-color:#FFFFFF;
  171. background-image:url('');
  172. background-repeat: repeat;
  173. background-attachment: fixed;
  174. background-position:center;
  175. }
  176.  
  177.  
  178.  
  179.  
  180. /* custom links */
  181.  
  182. a {
  183. color:#A7A7A7;
  184. text-decoration:none;
  185. transition:all .3s linear;
  186. -webkit-transition:all .3s linear;
  187. -o-transition:all .3s linear;
  188. -moz-transition:all .3s linear;
  189. }
  190.  
  191.  
  192. a:hover {
  193. color:#C1BAB9;
  194. text-decoration:none;
  195. }
  196.  
  197.  
  198.  
  199. /* custom bold and italic */
  200.  
  201. b, strong {
  202. font-weight:bold;
  203. color: #C3ABA6!important;
  204. }
  205.  
  206. i, italic {
  207. color: #DACCC9;
  208. }
  209.  
  210.  
  211.  
  212.  
  213.  
  214.  
  215.  
  216.  
  217.  
  218. /* PASTE THE CSS PART FROM STANDARD LAYOUT FROM HERE...... */
  219.  
  220.  
  221. /* maziekeen's theme 212
  222. css part */
  223.  
  224. /* container wrapping everything */
  225. .layout-container {
  226. margin: 0 auto;
  227. max-width: 540px;
  228. min-width: 300px;
  229. line-height: 150%;
  230. box-sizing: border-box;
  231. text-align: left;
  232. }
  233.  
  234. /* each profile box */
  235. .profile {
  236. margin-bottom: 25px;
  237. outline: 1px solid #f5f5f5; /* you'll have to change the color here, or delete this line if you don't want the border */
  238. }
  239.  
  240. /* each row wrapping the first info,
  241. ex: 1 row: full name and main aliases, 2 row: birth year and species/gender */
  242. .profile-row {
  243. display: flex;
  244. justify-content: center;
  245. }
  246.  
  247. /* each info individually (name and description), full name is an info, main aliases is an info, links is an info, birth year is an info */
  248. .profile-info {
  249. width: 100%;
  250. display: inline-block;
  251. margin: 5px 15px;
  252. }
  253.  
  254. .profile-title {
  255. font-weight: bold;
  256. padding: 0 5px 0;
  257. display: block;
  258. text-transform: uppercase;
  259. }
  260.  
  261. .profile-description {
  262. max-height: 200px;
  263. padding: 0 5px 0;
  264. display: inline-block;
  265. overflow: auto;
  266. }
  267.  
  268. /* maziekeen's theme 212
  269. css part */
  270.  
  271.  
  272. /* PASTE THE CSS PART FROM STANDARD LAYOUT TO HERE !!!! */
  273.  
  274.  
  275.  
  276.  
  277.  
  278.  
  279.  
  280.  
  281.  
  282.  
  283.  
  284. /* DO NOT REMOVE */
  285.  
  286. .credito {
  287. position:fixed;
  288. right:5px;
  289. bottom:18px;
  290. text-transform:uppercase;
  291. text-align:center;
  292. padding:5px;
  293. background-color: #FFFFFF;
  294. border:1px solid #F5F5F5;
  295. border-bottom:3px solid #F5F5F5;
  296. border-right:2px solid #F5F5F5;
  297. }
  298.  
  299. .credito .th {
  300. font-size:20px;
  301. }
  302.  
  303. .credito a {
  304. text-decoration:none;
  305. color:#C3ABA6;
  306. padding:3px;
  307. background-color: #FFFFFF;
  308. font-style:normal;
  309. padding:3px;
  310. -moz-transition-duration:0.5s;
  311. -webkit-transition-duration:0.5s;
  312. -o-transition-duration:0.5s;
  313. }
  314.  
  315.  
  316. </style>
  317. </head>
  318.  
  319.  
  320. <body>
  321. <div class="container">
  322. <!-- PASTE THE HTML PART FROM STANDARD LAYOUT FROM HERE.... --->
  323.  
  324.  
  325. <div class="museswrap">
  326. <!-- maziekeen's theme 212
  327. html part -->
  328.  
  329. <div class="layout-container">
  330. <h1>Basics</h1>
  331. <div class="profile">
  332. <div class="profile-row">
  333. <div class="profile-info">
  334. <div class="profile-title">full name</div>
  335. <div class="profile-description">full name here</div>
  336. </div> <!-- this closes the profile-info -->
  337. <div class="profile-info">
  338. <div class="profile-title">main aliases</div>
  339. <div class="profile-description">aliases here</div>
  340. </div> <!-- this closes the profile-info -->
  341. </div> <!-- this closes the profile-row -->
  342. <div class="profile-row">
  343. <div class="profile-info">
  344. <div class="profile-title">birth year</div>
  345. <div class="profile-description">11 / 22 / 3333</div>
  346. </div> <!-- this closes the profile-info -->
  347. <div class="profile-info">
  348. <div class="profile-title">age</div>
  349. <div class="profile-description">age here</div>
  350. </div> <!-- this closes the profile-info -->
  351. </div> <!-- this closes the profile-row -->
  352. <div class="profile-row">
  353. <div class="profile-info">
  354. <div class="profile-title">pronouns</div>
  355. <div class="profile-description">pronouns here</div>
  356. </div> <!-- this closes the profile-info -->
  357. <div class="profile-info">
  358. <div class="profile-title">sexual orientation</div>
  359. <div class="profile-description">Sexual Orientation</div>
  360. </div> <!-- this closes the profile-info -->
  361. </div> <!-- this closes the profile-row -->
  362. <div class="profile-row">
  363. <div class="profile-info">
  364. <div class="profile-title">species/gender</div>
  365. <div class="profile-description">species and gender</div>
  366. </div> <!-- this closes the profile-info -->
  367. <div class="profile-info">
  368. <div class="profile-title">zodiac sign</div>
  369. <div class="profile-description">zodiac sign</div>
  370. </div> <!-- this closes the profile-info -->
  371. </div> <!-- this closes the profile-row -->
  372. <div class="profile-row">
  373. <div class="profile-info">
  374. <div class="profile-title">connections</div>
  375. <div class="profile-description">You can add a huge text, or add <a href="#">links</a> too, <em>anything</em> <strong>html</strong> <u>related</u>. Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero aliquid, dolores culpa beatae quibusdam explicabo? Perspiciatis molestiae deleniti ducimus ratione facilis! Praesentium, autem a.
  376. <ul>
  377. <li>or</li>
  378. <li>you can</li>
  379. <li>add lists too</li>
  380. </ul>
  381. </div>
  382. </div> <!-- this closes the profile-info -->
  383. </div> <!-- this closes the profile-row -->
  384. </div> <!-- this closes the profile -->
  385. <h1>Physical</h1>
  386. <div class="profile">
  387. <div class="profile-row">
  388. <div class="profile-info">
  389. <div class="profile-title">faceclaim</div>
  390. <div class="profile-description">faceclaim here</div>
  391. </div> <!-- this closes the profile-info -->
  392. <div class="profile-info">
  393. <div class="profile-title">eyes</div>
  394. <div class="profile-description">eyes</div>
  395. </div> <!-- this closes the profile-info -->
  396. </div> <!-- this closes the profile-row -->
  397. <div class="profile-row">
  398. <div class="profile-info">
  399. <div class="profile-title">hair</div>
  400. <div class="profile-description">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  401. </div> <!-- this closes the profile-info -->
  402. <div class="profile-info">
  403. <div class="profile-title">height/weight/biuld</div>
  404. <div class="profile-description">Lorem ipsum dolor sit.</div>
  405. </div> <!-- this closes the profile-info -->
  406. </div> <!-- this closes the profile-row -->
  407. <div class="profile-row">
  408. <div class="profile-info">
  409. <div class="profile-title">identifying marks</div>
  410. <div class="profile-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis, accusamus.</div>
  411. </div> <!-- this closes the profile-info -->
  412. </div> <!-- this closes the profile-row -->
  413. </div> <!-- this closes the profile -->
  414. <h1>Personality</h1>
  415. <div class="profile">
  416. <div class="profile-row">
  417. <div class="profile-info">
  418. <div class="profile-title">positive</div>
  419. <div class="profile-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum obcaecati ducimus ullam, rerum molestias itaque!</div>
  420. </div> <!-- this closes the profile-info -->
  421. <div class="profile-info">
  422. <div class="profile-title">negative</div>
  423. <div class="profile-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero aliquid, dolores culpa beatae quibusdam explicabo? Perspiciatis molestiae deleniti ducimus ratione facilis! Praesentium, autem a. Ullam.</div>
  424. </div> <!-- this closes the profile-info -->
  425. </div> <!-- this closes the profile-row -->
  426. <div class="profile-row">
  427. <div class="profile-info">
  428. <div class="profile-title">likes</div>
  429. <div class="profile-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero aliquid, dolores culpa beatae quibusdam explicabo? Perspiciatis molestiae deleniti ducimus ratione facilis! Praesentium, autem a. Ullam.</div>
  430. </div> <!-- this closes the profile-info -->
  431. <div class="profile-info">
  432. <div class="profile-title">deslikes</div>
  433. <div class="profile-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa mollitia et, beatae officiis impedit dicta?</div>
  434. </div> <!-- this closes the profile-info -->
  435. </div> <!-- this closes the profile-row -->
  436. </div> <!-- this closes the profile -->
  437. <h1>Overview</h1>
  438. <div class="profile">
  439. <div class="profile-row">
  440. <div class="profile-info">
  441. <div class="profile-description">
  442. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem molestiae perferendis nisi laboriosam maxime tempore assumenda distinctio. Quam pariatur doloremque qui voluptatem, perspiciatis, officiis iure autem minus, error repellat aut.</p>
  443. <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est distinctio, perferendis eum totam odit eligendi. Nulla quidem pariatur quisquam quas nihil est temporibus, nobis amet.</p>
  444. </div>
  445. </div> <!-- this closes the profile-info -->
  446. </div> <!-- this closes the profile-row -->
  447. </div> <!-- this closes the profile -->
  448. </div> <!-- don't touch, this closes the layout-container -->
  449.  
  450. <!-- maziekeen's theme 212
  451. html part -->
  452.  
  453. <!-- PASTE THE HTML PART FROM STANDARD LAYOUT TO HERE !! --->
  454.  
  455.  
  456.  
  457.  
  458. </div>
  459.  
  460. <div class="credito">
  461. <a href="https://tylergaciaposey.tumblr.com/" title="tylergaciaposey's theme">
  462. <span class="th th-coffee-2-o"></span></a>
  463. </div>
  464. </body>
  465. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!