API tools faq
paste
Advertisement
Ahannahh

ambientthemes base code

Ahannahh
Mar 1st, 2014
5,695
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><html><head>
  2.  
  3.  
  4. <!--* * * BASE CODE BY swlft.tumblr.com / ambienttthemes.tumblr.com * * *-->
  5. <!--------------- ------------------>
  6.  
  7. <!-- the 'meta name' stuff below is how you get the customization options like text colour that you see when you go to customize your theme -->
  8. <meta name="color:background" content="#ffffff">
  9. <meta name="color:posts background" content="#ffffff">
  10. <meta name="color:links" content="#c2c2c2">
  11. <meta name="color:links hover" content="#e2e2e2">
  12. <meta name="color:text" content="#8b8b8b">
  13. <meta name="color:sidebar background" content="#ffffff">
  14. <meta name="color:ask and link post background" content="#f4f4f4">
  15.  
  16. <meta name="text:ask link label" content="ask">
  17.  
  18. <meta name="if:webkit scroll bar" content="1">
  19. <meta name="if:show submit link" content="0">
  20. <meta name="if:show ask link" content="1">
  21. <meta name="if:show archive link" content="0">
  22.  
  23. <meta name="image:sidebar" content="">
  24.  
  25. <!--- the stuff directly below is basically to do with what appears on the tab in web browsers and other technical things so just kinda leave that alone --->
  26. <title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}{block:TagPage} | {Tag}{/block:TagPage}</title>
  27. <link rel="shortcut icon" href="{Favicon}" />
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  29. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  30.  
  31.  
  32. <style type="text/css">
  33.  
  34. /** for newbies: this is where all of the styling starts! stuff like background colors, margins, etc etc. each element is styled separately, and very basically, you name your thing and then put your styling inside those curly brackets. Something beginning with a dot e.g. .links is a div class, which is <div class="links"></div> in the html. Something starting with a hashtag e.g. #theme is <div id="theme"></div> in the html. div classes are generally used for things that'll come up more than once on the page, and div ids are generally for stuff that only comes up once. **/
  35.  
  36. /** go to www.w3schools.com/css for more help with css styling things, like if you don't know what a particular thing does **/
  37.  
  38.  
  39. /** this is the overall styling for the whole blog so whatever you put there will be the kind of default styling for everything **/
  40. body {
  41. background-color:{color:background};
  42. font-family:Arial;
  43. font-weight:normal;
  44. margin:0px;
  45. top:0;
  46. left:0;
  47. word-wrap:break-word;
  48. }
  49.  
  50.  
  51. /** here you can see the css for the scroll bar which i have made optional **/
  52. {block:IfWebkitScrollBar}
  53. ::-webkit-scrollbar-thumb {
  54. height:auto;
  55. background-color: {color:text};
  56. border:2px solid {color:background};
  57. }
  58. ::-webkit-scrollbar {
  59. height:9px;
  60. width:9px;
  61. background-color: {color:background};
  62. }
  63. {/block:IfWebkitScrollBar}
  64.  
  65.  
  66. /** here is the css for all links **/
  67. a {
  68. color:{color:links};
  69. text-decoration:none;
  70. -moz-transition-duration:0.5s;
  71. -webkit-transition-duration:0.5s;
  72. -o-transition-duration:0.5s;
  73. }
  74. /** and what happens when you hover on links **/
  75. a:hover {
  76. color:{color:links hover};
  77. text-decoration:none;
  78. -moz-transition-duration:0.5s;
  79. -webkit-transition-duration:0.5s;
  80. -o-transition-duration:0.5s;
  81. }
  82.  
  83. /** h1, h2 and h3 are headings. h1 should be used for one thing like the main heading which is the title of the blog, and I've used h2 for post headings, and h3 I think I only used for quote posts **/
  84. h1 {
  85. font-size:16px;
  86. font-weight:normal;
  87. letter-spacing:0px;
  88. line-height:120%;
  89. }
  90.  
  91. h1 a{
  92. color:{color:text};
  93. }
  94.  
  95. h1 a:hover {
  96. color:{color:links};
  97. }
  98.  
  99. h2 {
  100. text-decoration:none;
  101. font-size:16px;
  102. text-align:center;
  103. line-height:110%;
  104. color:{color:text};
  105. padding:5px;
  106. padding-bottom:2px;
  107. font-weight:normal;
  108. letter-spacing:0px;
  109. }
  110.  
  111. h3 {
  112. font-weight:normal;
  113. font-size:17px;
  114. text-align:center;
  115. font-style:normal;
  116. color:{color:text};
  117. }
  118.  
  119.  
  120. /** this is the tag for the blockquotes (funnily enough) which is the things that on your tumblr dashboard have the grey lines to the left of them **/
  121. blockquote {
  122. border-left:2px solid {color:text};
  123. padding-left:5px;
  124. margin:5px;
  125. padding-top:2px;
  126. padding-bottom:2px;
  127. }
  128.  
  129.  
  130. /** this is a kind of container in which I put everything in the theme, it is important because the 'margin:auto;' means that the whole theme is centered, no matter what screen size the viewer may have **/
  131. #theme {
  132. margin:auto;
  133. width:875px;
  134. height:100%;
  135. text-align: center;
  136. background-color:{color:background};
  137. z-index:9990;
  138. position:relative;
  139. }
  140.  
  141.  
  142. /** this is a container for all the sidebar stuff, mainly this is important for the 'display:table;' and 'height:100%;' which is important for vertically centering the sidebar **/
  143. #sidewrap {
  144. width:250px;
  145. height:100%;
  146. display:table;
  147. position:fixed;
  148. width:250px;
  149. }
  150.  
  151. /** this is an inner container for the sidebar. to make the sidebar vertically centered this is the other ingredient needed: 'display:table-cell;' and 'vertical-align:middle;' **/
  152. #sidebar {
  153. display:table-cell;
  154. vertical-align:middle;
  155. color: {color:text};
  156. }
  157. /** the 'img' means i'm styling the images within the sidebar**/
  158. #sidebar img {
  159. width:250px;
  160. max-height:300px;
  161. }
  162.  
  163.  
  164. /** yet another container in which i have put the description, title and navigation links **/
  165. #titleandstuff {
  166. padding:20px;
  167. background-color:{color:sidebar background};
  168. }
  169.  
  170. #description {
  171. text-align:justify;
  172. font-size:11px;
  173. }
  174.  
  175.  
  176. /** this is the styling for the navigation links in the sidebar. the
  177. '.links a' is where you get to style the individual links **/
  178. .links {
  179. width:210px;
  180. position:relative;
  181. line-height:15px;
  182. font-size:10px;
  183. margin-top:0px;
  184. text-align:center;
  185. text-shadow:none;
  186. font-style:none;
  187. }
  188.  
  189. .links a {
  190. display:inline-block;
  191. margin-left:2px;
  192. padding:0px 5px 0px 5px;
  193. height:15px;
  194. text-align:center;
  195. color:{color:links};
  196. background-color:transparent;
  197. -moz-transition-duration:0.5s;
  198. -webkit-transition-duration:0.5s;
  199. -o-transition-duration:0.5s;
  200. }
  201. .links a:hover {
  202. background-color:transparent;
  203. color:{color:links hover};
  204. -moz-transition-duration:0.5s;
  205. -webkit-transition-duration:0.5s;
  206. -o-transition-duration:0.5s;
  207. }
  208.  
  209.  
  210. /** this is the styling for the pagination (the links to go to the next/previous page) **/
  211. #pagi {
  212. font-size:16px;
  213. width:500px;
  214. font-weight:normal;
  215. font-style:normal;
  216. text-align:center;
  217. margin-bottom:50px;
  218. color:{color:links};
  219. letter-spacing:0px;
  220. }
  221.  
  222. #pagi a {
  223. display:inline-block;
  224. color:{color:links};
  225. }
  226.  
  227. #pagi a:hover {
  228. color:{color:links hover};
  229. }
  230.  
  231.  
  232. /** this is the container for the posts! **/
  233. #postscontainer {
  234. margin-left:300px;
  235. padding:10px;
  236. width:500px;
  237. position:relative;
  238. text-align:justify;
  239. background-color:{color:posts background};
  240. color:{color:text};
  241. z-index:999;
  242. }
  243.  
  244.  
  245. /** this is the styling for each individual post, in which you can style the margin between the posts etc, etc**/
  246. .posts {
  247. background-color:{color:posts background};
  248. padding:15px 0px 15px 0px;
  249. width:500px;
  250. margin-bottom:70px;
  251. text-align:justify;
  252. font-size:11px;
  253. line-height:100%;
  254. letter-spacing:0px;
  255. color:{color:text};
  256. }
  257.  
  258.  
  259. /** styling for the post captions **/
  260. .caption {
  261. width:500px;
  262. text-align:justify;
  263. line-height:120%;
  264. }
  265.  
  266.  
  267. /** I have got the post information stuff (like source, notes etc) separated into lots of different elements so hopefully you'll have fun styling them all like I do **/
  268. .postinfo {
  269. width:490px;
  270. margin-top:0px;
  271. padding:0px 0px 5px 10px;
  272. text-align:left;
  273. line-height:100%;
  274. display:inline-block;
  275. background-color:#f5f5f5;
  276. }
  277.  
  278. .postinfo a {
  279. font-style:normal;
  280. }
  281.  
  282. .postinfo a:hover {
  283. color:{color:links hover};
  284. }
  285.  
  286. .dates {
  287. display:inline-block;
  288. font-size:11px;
  289. text-transform:none;
  290. font-weight:normal;
  291. letter-spacing:0px;
  292. }
  293.  
  294. .notesetc {
  295. margin-top:8px;
  296. display:inline-block;
  297. }
  298.  
  299. .tags {
  300. text-transform:none;
  301. font-size:10px;
  302. text-align:left;
  303. margin-top:2px;
  304. }
  305.  
  306. /** these are the few things styling the like and reblog buttons **/
  307. .buttonss {
  308. width:40px;
  309. display:inline-block;
  310. float:right;
  311. padding:5px 5px 0px 0px;
  312. }
  313.  
  314. .likee {
  315. opacity:0.7;
  316. display:inline-block;
  317. }
  318.  
  319. .likee:hover {
  320. opacity:1;
  321. }
  322.  
  323. .reblogg {
  324. padding-left:4px;
  325. padding-right:5px;
  326. opacity:0.7;
  327. display:inline-block;
  328. }
  329.  
  330. .reblogg:hover {
  331. opacity:1;
  332. }
  333. /** this is the end of the post info stuff**/
  334.  
  335.  
  336.  
  337. /** this is the styling for the chat posts, as you can see, you can style the odd and even lines separately which is pretty cool **/
  338. .chat ol {
  339. line-height:170%;
  340. list-style:none;
  341. width:500px;
  342. margin-left:-40px;
  343. }
  344.  
  345. .line.odd {
  346. background:#f6f6f6;
  347. margin-bottom:0px;
  348. padding:4px;
  349. }
  350.  
  351. .line.even {
  352. background:#fafafa;
  353. margin-bottom:0px;
  354. padding:4px;
  355. }
  356.  
  357. .label {
  358. padding-right:2px;
  359. text-transform:normal;
  360. font-weight:bold;
  361. color:{color:link};
  362. }
  363.  
  364.  
  365. /** this is the styling for the notes you see when you go onto a posts permalink page, you know under the post where the notes are listed **/
  366. .note {
  367. text-transform:uppercase;
  368. font-style:normal;
  369. letter-spacing:0px;
  370. font-size: 9px;
  371. text-align:left;
  372. line-height:90%;
  373. margin-left:-40px;
  374. }
  375.  
  376. .note li {
  377. list-style-type:none;
  378. padding:10px 25px 10px 25px;
  379. text-align:left;
  380. margin:0px;
  381. -moz-transition-duration:0.5s;
  382. -webkit-transition-duration:0.5s;
  383. -o-transition-duration:0.5s;
  384. }
  385.  
  386.  
  387. /** this is the styling for the ask posts **/
  388. .question {
  389. background-color: {color:ask and link post background};
  390. padding:20px;
  391. }
  392.  
  393. .question img {
  394. border:5px solid {color:ask and link post background};
  395. width:40px;
  396. float:left;
  397. display:block;
  398. }
  399.  
  400. {CustomCSS}
  401.  
  402. </style></head>
  403. <!-- this is where styling ends and the proper html stuff starts! -->
  404. <body>
  405. <!-- go to www.w3schools.com/html for more html help -->
  406.  
  407. <div id="theme">
  408.  
  409.  
  410. <!-- start of the sidebar stuff-->
  411. <div id="sidewrap">
  412. <div id="sidebar">
  413. <img src="{image:sidebar}">
  414. <div id="titleandstuff">
  415. <h1>{title}</h1>
  416. {block:Description}<div id="description">{description}</div>{/block:Description}
  417.  
  418. <div class="links">
  419. <a href="/">home</a>
  420.  
  421. {block:IfShowAskLink}
  422. {block:AskEnabled}
  423. <a href="/ask">{text:ask link label}</a>
  424. {/block:AskEnabled}
  425. {/block:IfShowAskLink}
  426.  
  427. <!-- this HasPages bit is pretty cool, because this bit means that it'll automatically show a link to a page you've made as long as you've got 'show a link to this page' switched on when you go into to edit your page. This little bit of code is how tumblr intends navigation links to work, and it means that on the default mobile theme your links will show up there too.
  428. There is no need for putting in links that you have to like, type in yourselves. If you want a link to a tag page or external website then just go to "Add a page" and make it a redirect page! For more info go here: www.tumblr.com/docs/pages -->
  429. {block:HasPages}
  430. {block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}
  431. {/block:HasPages}
  432.  
  433.  
  434. {block:IfShowSubmitLink}
  435. {block:SubmissionsEnabled}
  436. <a href="/submit" >submit</a>
  437. {/block:SubmissionsEnabled}
  438. {/block:IfShowSubmitLink}
  439.  
  440. {block:IfShowArchiveLink}
  441. <a href="/archive">archive</a>
  442. {/block:IfShowArchiveLink}
  443. </div>
  444.  
  445. </div>
  446. </div>
  447.  
  448.  
  449. </div>
  450. <!-- end of the sidebar stuff-->
  451.  
  452.  
  453.  
  454. <div id="postscontainer">
  455.  
  456. <!-- this is a title for tag pages which is a cool thing to do-->
  457. {block:TagPage}<h2 style="width:500px; padding:10px 0px 30px 0px;">posts tagged with <a href="{TagURL}">{Tag}</a></h2>{/block:TagPage}
  458. <!-- end of tag page title --->
  459.  
  460.  
  461. <!-- start of html for all the different types of posts -->
  462. {block:Posts}
  463. <div class="posts">
  464.  
  465. {block:Text}{block:Title}<h2>{Title}</h2>{/block:Title}{Body}{/block:Text}
  466.  
  467. {block:Quote}<h2 padding:10px;><b>“</b>{Quote}<b>”</b></h2><h3>— {Source}</h3>{/block:Quote}
  468.  
  469. {block:Link}<a href="{URL}"><h2 style="padding:18px; background-color:{color:ask and link post background}">{Name} →</h2></a>
  470. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  471.  
  472. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  473.  
  474. {block:Panorama}
  475. {LinkOpenTag}
  476. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" style="width:500px;"/>
  477. {LinkCloseTag}
  478. {block:Caption}{Caption}{/block:Caption}
  479. {/block:Panorama}
  480.  
  481. {block:Photoset}<center>{Photoset-500}</center>
  482. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  483.  
  484. {block:Chat}{block:Title}<h2>{Title}</h2>{/block:Title}<div class="chat"><ol> {block:Lines}<li class="line {Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ol></div>{/block:Chat}
  485.  
  486. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  487.  
  488. {block:Answer}
  489. <div class="question"><img src="{AskerPortraitURL-40}"><b>{Asker} asked:</b> {Question}</div>
  490. {Answer}
  491. {/block:Answer}
  492.  
  493. {block:Audio}
  494. {block:AudioEmbed}{AudioEmbed-500}{/block:AudioEmbed}
  495. {block:Caption}{Caption}{/block:Caption}{/block:Audio}
  496. <!-- end of html for the posts -->
  497.  
  498.  
  499. <!-- this is where the post info stuff starts, and it is VERY IMPORTANT that all this stuff is wrapped in { block:date } {/ block:date } because this means it won't show up on pages that are not posts. (I get pretty annoyed at seeing themes where you go on someone's 'about' page or something and you see a 'reblog' thing just floating there under it) -->
  500. {block:date}
  501. <div class="postinfo"><div class="buttonss"><div class="reblogg">{ReblogButton size="14"}</div><div class="likee">{LikeButton size="14"}</div></div>
  502. <div class="dates"><a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {ShortYear} </a></div><div class="notesetc">{block:NoteCount}<a href="{Permalink}">&nbsp;&nbsp;{NoteCountWithLabel} </a>{/block:NoteCount}{block:RebloggedFrom}<a href="{ReblogParentURL}"> via </a>{/block:RebloggedFrom}{block:ContentSource}<a href="{SourceURL}">&nbsp;source </a>{/block:ContentSource}
  503. </div>
  504. </div>
  505. {/block:date}
  506. <!-- another thing, you can replace the date (the part that has like DayOfMonth DayOfMonthSuffix ShortMonth ShortYear) with say, the time ago the post was posted. Go to www.tumblr.com/docs/en/custom_themes#dates to see what you can put in there and play around with it, it's great fun. You'll find there's a lot of options for a lot of different things in tumblr themes if you have a look around that page too-->
  507.  
  508.  
  509.  
  510. <!-- the tags -->
  511. {block:HasTags}<div class="tags">
  512. {block:Tags}<a href="{TagURL}">#{Tag} </a> {/block:Tags}</div>
  513. {/block:HasTags}
  514.  
  515. <!-- this little bit is for the post notes on permalink pages -->
  516. {block:PostNotes}<div class="note">
  517. {PostNotes}</div>{/block:PostNotes}
  518.  
  519. </div>
  520. {/block:posts}
  521.  
  522.  
  523. <!-- the pagination -->
  524. {block:Pagination}
  525. <div id="pagi">
  526. {block:PreviousPage}<a href="{PreviousPage}">prev&nbsp;</a>
  527. {/block:PreviousPage}
  528. {block:NextPage}<a href="{NextPage}">&nbsp;next</a>
  529. {/block:NextPage}
  530. </div>
  531. {/block:Pagination}
  532.  
  533.  
  534. </div>
  535. </div>
  536.  
  537. </div>
  538.  
  539. <!-- the end!! I hope you found this useful and happy htmling :---) -->
  540. </body>
  541. </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!