API tools faq
paste
Advertisement
cvndythemes

Network #01 - Theme

cvndythemes
Sep 20th, 2016
1,669
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.37 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. >> ETHEREAL THEMES // NETWORK THEME #01
  4.  
  5. Designed by etherealthemes
  6. etherealthemes.tumblr.com
  7. ⓒ 2016 - 2017
  8.  
  9. >> TERMS OF USE
  10.  
  11. Do NOT remove the credit
  12. Do NOT claim as your own
  13.  
  14. *You can move the credit, but leave it visible
  15. *Edit as much as you'd like
  16. *Feel free to ask about basic customization
  17. *Theme suggestions always welcomed
  18.  
  19. >> EXTRAS
  20.  
  21. Fonts by Google Fonts
  22. Icons by FontAwesome
  23.  
  24. NOTE:
  25. This page will auto center and auto align the characters. While editing, the characters might be mis-aligned. Once you go to yoururl.tumblr.com/page the characters will auto-fill the screen depending on the screen size that's being used to view.
  26.  
  27. Inverting Tumblr Controls - Search "Tumblr Controls" and delete the second code with the invert settings.
  28.  
  29. -->
  30.  
  31. <!DOCTYPE html>
  32. <html>
  33. <title> {text:Webpage Title} </title>
  34.  
  35. <!-- DEFAULTS -->
  36.  
  37. <meta name="color:Background" content="#ffffff" />
  38. <meta name="color:Text" content="#000000" />
  39.  
  40. <meta name="color:Title" content="#f3b9cf" />
  41. <meta name="color:Topbar BG" content="#ffffff" />
  42. <meta name="color:Navigation" content="#777777" />
  43.  
  44. <meta name="color:Member Box" content="#ffffff" />
  45. <meta name="color:Members" content="##b6b6b6" />
  46.  
  47. <meta name="color:Links" content="#4a4a4a" />
  48. <meta name="color:Link Hover" content="#777777" />
  49.  
  50. <meta name="text:Webpage Title" content="Web Title" />
  51. <meta name="text:Page Title" content="Topbar Title" />
  52.  
  53. <meta name="text:Link 1" content="Link 1" />
  54. <meta name="text:Link 1 URL" content="http://" />
  55. <meta name="text:Link 2" content="Link 2" />
  56. <meta name="text:Link 2 URL" content="http://" />
  57. <meta name="text:Link 3" content="Link 3" />
  58. <meta name="text:Link 3 URL" content="http://" />
  59. <meta name="text:Link 4" content="Link 4" />
  60. <meta name="text:Link 4 URL" content="http://" />
  61. <meta name="text:Link 5" content="Link 5" />
  62. <meta name="text:Link 5 URL" content="http://" />
  63. <meta name="text:Link 6" content="Link 6" />
  64. <meta name="text:Link 6 URL" content="http://" />
  65.  
  66. <meta name="if:Invert Tumblr Controls" content="1"/>
  67.  
  68. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  69.  
  70. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  71.  
  72. <link href='https://fonts.googleapis.com/css?family=Open+Sans|Josefin+Sans:400,700i' rel='stylesheet' type='text/css'>
  73.  
  74. <style type="text/css">
  75.  
  76. /* --- Scrollbar --- */
  77.  
  78. ::-webkit-scrollbar {width:7px;background-color:{color:Background};}
  79. ::-webkit-scrollbar-thumb {background-color:{color:Srollbar};}
  80.  
  81. iframe.tmblr-iframe {
  82. z-index:99999999999999!important;
  83. top:5px!important;
  84. right:0!important;
  85. opacity:0.4!important;
  86. padding-right:40px;
  87. transform:scale(0.6);
  88. transform-origin:100% 0;
  89. -webkit-transform:scale(0.6);
  90. -webkit-transform-origin:100% 0;
  91. -o-transform:scale(0.6);
  92. -o-transform-origin:100% 0;
  93. -moz-transform:scale(0.6);
  94. -moz-transform-origin:100% 0;
  95. -ms-transform:scale(0.6);
  96. -ms-transform-origin:100% 0;
  97. {block:IfInvertTumblrControls}
  98. filter:invert(1);
  99. -webkit-filter:invert(1);
  100. -o-filter:invert(1);
  101. -moz-filter:invert(1);
  102. -ms-filter:invert(1);
  103. {/block:IfInvertTumblrControls}
  104. }
  105.  
  106.  
  107. /* --- General --- */
  108.  
  109. body {
  110. margin:0px;
  111. color:{color:Text};
  112. font-size:9px;
  113. letter-spacing:0px;
  114. background-color:{color:Background};
  115. font-family: 'Open Sans', sans-serif;
  116. }
  117.  
  118. p {
  119. text-align: justify;
  120. text-align-last: center!important;
  121. }
  122.  
  123. hr {
  124. display: block;
  125. margin-top: 0.5em;
  126. margin-bottom: 0.5em;
  127. margin-left: auto;
  128. margin-right: auto;
  129. border-style: inset;
  130. border-bottom: 1px;
  131. }
  132.  
  133. #et {
  134. background:transparent;
  135. color:#000000;
  136. background:transparent;
  137. right:0px;
  138. bottom:0px;
  139. padding:5px;
  140. position:fixed;
  141. letter-spacing:1px;
  142. opacity:0.4;
  143. }
  144.  
  145. #et a {
  146. color:#000000;
  147. text-decoration:none;
  148. border:0px;
  149. }
  150.  
  151. /* Top Bar */
  152.  
  153. #topbar {
  154. background-color:{color:Topbar BG};
  155. top:0;
  156. left:0;
  157. width:100%;
  158. height:120px;
  159. position:fixed!important;
  160. z-index:3;
  161. text-align:center;
  162. }
  163.  
  164. .topbartitle {
  165. color:{color:Title};
  166. font-family: 'Josefin Sans', sans-serif;
  167. font-weight:700;
  168. font-style:italic;
  169. text-transform: uppercase;
  170. font-size:25px;
  171. text-align:center;
  172. margin-top:30px;
  173. margin-bottom:10px;
  174. }
  175.  
  176. a.topbarnavi, a.topbarnavi:visited {
  177. text-transform: uppercase;
  178. font-size:10px;
  179. text-decoration:none;
  180. letter-spacing:1px;
  181. color:{color:Navigation};
  182. padding:3px 10px 3px 10px;
  183. margin-left:3px;
  184. margin-right:3px;
  185. text-decoration:none;
  186. border-bottom:1px solid {color:Topbar BG};
  187. -webkit-transition: all 350ms linear;
  188. -moz-transition: all 350ms linear;
  189. -ms-transition: all 350ms linear;
  190. -o-transition: all 350ms linear;
  191. transition: all 350ms linear;
  192. }
  193.  
  194. a.topbarnavi:hover {
  195. color:{color:Navigation};
  196. border-bottom:1px solid {color:Members};
  197. }
  198.  
  199. /* --- Container --- */
  200.  
  201. #container {
  202. width: 80%;
  203. margin: 0 auto;
  204. }
  205.  
  206. #content {
  207. float:center;
  208. width: 100%!important;
  209. padding:5px;
  210. background:transparent;
  211. margin-top:130px!important;
  212. }
  213.  
  214. /* --- Member Boxes --- */
  215.  
  216. #memberbox {
  217. margin: 0 auto;
  218. width:140px;
  219. height:140px;
  220. display:inline-block;
  221. margin:0px 10px 20px 10px;
  222. background-size:100%;
  223. font-family: 'Open Sans', sans-serif;
  224. font-size:10px;
  225. color:#000;
  226. padding:5px;
  227. -webkit-transition: all 350ms ease-in-out;
  228. -moz-transition: all 350ms ease-in-out;
  229. -o-transition: all 350ms ease-in-out;
  230. }
  231. #memberimg {
  232. margin-top:-5px;
  233. margin-left:-5px;
  234. max-width:150px;
  235. max-height:150px;
  236. z-index:1;
  237. }
  238.  
  239. #memberbox:hover .memberinfo {opacity:1;}
  240.  
  241. .memberinfo {
  242. padding:5px;
  243. margin-top:-140px!important;
  244. margin-left:5px;
  245. width:120px;
  246. height:120px;
  247. text-align:center;
  248. font-family: 'Open Sans', sans-serif;
  249. background-color:{color:Member Box}!important;
  250. z-index:2;
  251. position:absolute;
  252. overflow:scroll;
  253. opacity:0;
  254. -webkit-transition: all 350ms ease-in-out;
  255. -moz-transition: all 350ms ease-in-out;
  256. -o-transition: all 350ms ease-in-out;
  257. }
  258.  
  259. .memberinfo:hover {
  260. margin-top:-140px!important;
  261. margin-left:5px;
  262. opacity:1;
  263. width:120px;
  264. height:120px;
  265. -webkit-transition: all 350ms ease-in-out;
  266. Theia-transition: all 350ms ease-in-out;
  267. -o-transition: all 350ms ease-in-out;
  268. }
  269.  
  270. .memberinfo a {
  271. display:block;
  272. font-size:10px;
  273. color:{color:Links};
  274. text-transform:lowercase;
  275. font-style:italic;
  276. text-decoration:none;
  277. letter-spacing:1px;
  278. border:none;
  279. margin-bottom:3px;
  280. display:inline-block;
  281. padding:3px;
  282. width:90%;
  283. -webkit-transition: all 350ms ease-in-out;
  284. -moz-transition: all 350ms ease-in-out;
  285. -o-transition: all 350ms ease-in-out;
  286. }
  287.  
  288. .memberinfo a:hover {
  289. color:{color:Link Hover};
  290. text-decoration:none;
  291. border:none;
  292. -webkit-transition: all 350ms ease-in-out;
  293. -moz-transition: all 350ms ease-in-out;
  294. -o-transition: all 350ms ease-in-out;
  295. }
  296.  
  297. /* --- Titles --- */
  298.  
  299. h2 {
  300. color:{color:Members};
  301. font-size:13px;
  302. font-style:italic;
  303. padding:5px;
  304. margin-top:0px;
  305. text-align:center;
  306. text-transform:uppercase;
  307. margin-bottom:0px!important;
  308. }
  309.  
  310. </style>
  311.  
  312. </head>
  313. <body>
  314. <!-- Start Main Container -->
  315. <div id="container">
  316. <div id="content">
  317. <center>
  318.  
  319.  
  320.  
  321.  
  322. <!-- Example Start -->
  323. <div id="memberbox">
  324. <div id="memberimg">
  325. <img src="https://68.media.tumblr.com/54a43d6414f2137e5725fafad4c74c63/tumblr_odhwo0pB811ucjeiho2_250.jpg" /> <!-- Member photo here -->
  326. </div>
  327.  
  328. <div class="memberinfo">
  329. <h2>Desirae</h2> <!-- Member name goes here -->
  330. <a href="http://charlesluciano.tumblr.com">charlesluciano</a>
  331.  
  332. <hr><!-- Adds a line break -->
  333.  
  334. <!-- Start Description -->
  335. <p>
  336. bang bang
  337. </p>
  338. <!-- End Description -->
  339.  
  340. </div></div>
  341. <!-- Example End -->
  342.  
  343.  
  344.  
  345.  
  346. <!-- Start Member Box / copy from here -->
  347. <div id="memberbox">
  348. <div id="memberimg">
  349. <img src="http://placehold.it/150X150" /> <!-- Member photo here -->
  350. </div>
  351.  
  352. <div class="memberinfo">
  353. <h2>Member Name</h2> <!-- Member name goes here -->
  354. <a href="#">Member URL</a>
  355.  
  356. <hr><!-- Adds a line break -->
  357.  
  358. <!-- Start Description -->
  359. <p>
  360. Description goes here.
  361. </p>
  362. <!-- End Description -->
  363.  
  364. </div></div>
  365. <!-- End Member Box / to here and paste below to duplicate -->
  366.  
  367.  
  368.  
  369.  
  370.  
  371. </center>
  372. </div></div></div>
  373. <!-- End Main Container -->
  374.  
  375. <!-- Start Topbar -->
  376. <div id="topbar">
  377. <div class="topbartitle">{text:Page Title}</div>
  378. <a class="topbarnavi" href="{text:Link 1 URL}">{text:Link 1}</a>
  379. <a class="topbarnavi" href="{text:Link 2 URL}">{text:Link 2}</a>
  380. <a class="topbarnavi" href="{text:Link 3 URL}">{text:Link 3}</a>
  381. <a class="topbarnavi" href="{text:Link 4 URL}">{text:Link 4}</a>
  382. <a class="topbarnavi" href="{text:Link 5 URL}">{text:Link 5}</a>
  383. <a class="topbarnavi" href="{text:Link 6 URL}">{text:Link 6}</a>
  384. </div>
  385. <!-- End Topbar -->
  386.  
  387.  
  388. <div id="et"><a href="http://etherealthemes.co.vu/"><i class="fa fa-paint-brush"></i></a></div>
  389.  
  390. </body>
  391. </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!