API tools faq
paste
Advertisement
cornetespoir

FAQ page #2 // Gmail

cornetespoir
Jun 18th, 2016
666
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.37 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. //gmail faq page
  3.  
  4. by espoirthemes //
  5.  
  6. +don't remove credit
  7. +there are instructions throughout the code, but keep in mind that you will need html/css knowledge to use this, but if there are any errors, please let me know!
  8.  
  9. -->
  10.  
  11. <html>
  12. <head>
  13.  
  14. <!-- title here -->
  15. <title>Inbox - {name}@tumblr.com</title>
  16.  
  17.  
  18.  
  19. <link href='https://fonts.googleapis.com/css?family=Product+Sans' rel='stylesheet' type='text/css'>
  20. <link rel="shortcut icon" href="http://www.iconarchive.com/download/i98301/dakirby309/simply-styled/Gmail.ico" />
  21. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  22. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  23. <script>
  24.  
  25. $(document).ready(function(){
  26. $('ul.tabs li').click(function(){
  27. var tab_id = $(this).attr('data-tab');
  28. $('ul.tabs li').removeClass('current');
  29. $('.tab-content').removeClass('current');
  30. $(this).addClass('current');
  31. $("#"+tab_id).addClass('current');
  32. });
  33. });</script>
  34.  
  35.  
  36. <script type="text/javascript" language="JavaScript"><!--
  37. function HideContent(d) {
  38. document.getElementById(d).style.display = "none";
  39. }
  40. function ShowContent(d) {
  41. document.getElementById(d).style.display = "block";
  42. }
  43. function ReverseDisplay(d) {
  44. if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
  45. else { document.getElementById(d).style.display = "none"; }
  46. }
  47. //-->
  48. function HideAllShowOne(d) {
  49. // Between the quotation marks, list the id values of each div.
  50.  
  51. var IDvaluesOfEachDiv = "idone idtwo idthree idfour";
  52.  
  53. //-------------------------------------------------------------
  54. IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
  55. IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
  56. IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
  57. IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," ");
  58. var IDlist = IDvaluesOfEachDiv.split(" ");
  59. for(var i=0; i<IDlist.length; i++) { HideContent(IDlist[i]); }
  60. ShowContent(d);
  61. }
  62. </script>
  63.  
  64.  
  65.  
  66.  
  67. </head>
  68.  
  69. <style type="text/css">
  70.  
  71.  
  72. /* tumblr controls */
  73. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
  74. display:none; /*erase this line if you want them to show */
  75. }
  76.  
  77.  
  78. body{
  79. margin:0px;
  80. font-family: Arial;
  81. }
  82.  
  83. /*this is all the styling to make it look like gmail. you shouldn't really need to touch any of this, but I'll mark where the colors are in case you want to change them */
  84. #sidebar {
  85. position:fixed;
  86. height:100vh;
  87. width:200px;
  88. padding:10px 30px;
  89. z-index:999999;
  90. }
  91.  
  92. .container{
  93. width: 80%;
  94. margin: 100px auto auto 220px;
  95. }
  96.  
  97. ul.tabs{
  98. margin: 0px;
  99. padding: 0px;
  100. list-style: none;
  101. width:90%;
  102. border-bottom:1px solid #ddd; /*bottom border of tabs */
  103. }
  104. ul.tabs li{
  105. background: none;
  106. color: #222; /* font color of primary/social/promo tabs */
  107. width:150px;
  108. margin-left:-6px;
  109. display: inline-block;
  110. padding: 10px 15px;
  111. box-shadow:0px 1px #ddd, 0px 9px white, 0px 10px #ddd;
  112. border:1px solid #ddd;
  113. border-bottom:none;
  114. cursor: pointer;
  115. background: #f1f1f1; /*background of tabs when not active */
  116.  
  117. }
  118.  
  119. ul.tabs li.current{
  120. background:white; /*background of current/active tab */
  121. color: #222; /*font color of current/active tab */
  122. box-shadow:0px 1px white, 0px 9px white, 0px 10px #ddd;
  123.  
  124. }
  125.  
  126. ul.tabs li.current:first-child {
  127. border-top-color:black; /*top border of the 1st tab (primary) */
  128. border-width:2px 1px 1px 1px;
  129. }
  130.  
  131. ul.tabs li.current:nth-child(2) {
  132. border-top-color:blue; /*top border of 2nd tab (social) */
  133. border-width:2px 1px 1px 1px;
  134. }
  135. ul.tabs li.current:nth-child(3) {
  136. border-top-color:green; /*top border of 3rd tab (promotions) */
  137. border-width:2px 1px 1px 1px;
  138. }
  139.  
  140. /*this is for if you wanted to add more tabs */
  141. ul.tabs li.current:nth-child(4) {
  142. border-top-color:orange;
  143. border-width:2px 1px 1px 1px;
  144. }
  145. ul.tabs li.current:nth-child(5) {
  146. border-top-color:purple;
  147. border-width:2px 1px 1px 1px;
  148. }
  149.  
  150.  
  151. /*don't touch this section */
  152.  
  153. .tab-content{
  154. display: none;
  155. background:white;
  156. padding: 15px;
  157. width:100%;
  158. }
  159. .tab-content.current{
  160. display: inherit;
  161. }
  162. .tab-content.current ul {
  163. margin-top:-10px; margin-left:-40px;
  164. }
  165.  
  166. /*end don't touch section */
  167.  
  168.  
  169. .tab-content.current li {
  170. margin-left:-20px;
  171. padding:10px;
  172.  
  173. background:#F1F1F1; /*background color of questions */
  174. border-bottom:1px solid #ddd; /*bottom border of questions */
  175. list-style:none;
  176.  
  177. }
  178.  
  179. .tab-content.current li:first-child {
  180. margin-top:3px;
  181. border-top:1px solid #ddd;
  182. }
  183.  
  184. .bt {
  185. padding:10px 30px;
  186. background:#DA4A38; /*color of "compose" button */
  187. border-radius:3px;
  188. color:white;
  189. border:1px solid transparent;
  190. font-weight:600;
  191. font-size:12px;
  192. text-shadow:-1px 1px rgba(0,0,0,.12);
  193. text-decoration:none;
  194. text-transform:uppercase;
  195. }
  196.  
  197. .bt:hover {
  198. background:linear-gradient(to top, rgba(200,74,56, 1), #DA4A38);
  199. border:1px solid #aaa;
  200. }
  201.  
  202. a {
  203. text-decoration:none;
  204. color:#222; /*link colors */
  205. }
  206.  
  207.  
  208. /*this is the styling for inbox, under the compose button */
  209. #sidebar li:nth-child(2){
  210. list-style:none;
  211. margin-top:30px;
  212. padding:8px 26px;
  213. margin-left:-30px;
  214. color:#DA4A38;
  215. font-weight:600;
  216. border-left:4px solid #DA4A38;
  217. }
  218.  
  219. /*sidebar links */
  220. #sidebar li {
  221. list-style:none;
  222. margin-top:10px;
  223. font-size:14px;
  224. padding:8px 28px;
  225. margin-left:-30px;
  226. border-left:4px solid transparent;
  227. }
  228.  
  229. /* I don't recommend editing the rest of the css, so keep scrolling until you get to <body> */
  230. #searchbar {
  231. position:fixed;
  232. width:100%;
  233. height:60px;
  234. top:0px;
  235. background:#f1f1f1;
  236. border-bottom:1px solid #ddd;
  237.  
  238. }
  239.  
  240. .clear {
  241. clear: both;
  242. height: 0px;
  243. overflow: hidden;
  244. }
  245.  
  246. #search {
  247.  
  248. margin-top:16px;
  249. width:652px;
  250. margin-left:220px;
  251.  
  252. }
  253.  
  254. .search-scope {
  255. font-size: 12px;
  256. text-align: center;
  257. }
  258.  
  259. #search-scope input,
  260. #search-scope label {
  261. cursor: pointer;
  262. }
  263.  
  264. #search form {
  265. margin: 0;
  266.  
  267. }
  268.  
  269.  
  270.  
  271. #search form .submit {
  272. background: #4B8DF8;
  273. color: #fafafa;
  274. border: none;
  275. padding:6px 16px;
  276. float: right;
  277. line-height:90%;
  278. cursor: pointer;
  279. font-size:20px;
  280. }
  281.  
  282.  
  283.  
  284. #search input[type="text"]{ width:600px;
  285. letter-spacing:2px;
  286. color:#444;
  287. border:1px solid #ccc;
  288. background:#fff;
  289. padding:6px;
  290.  
  291. }
  292. /*end search box */
  293.  
  294.  
  295.  
  296. #iconpanel {
  297. position:absolute;
  298. right:34px;
  299. top:14px;
  300.  
  301. }
  302.  
  303. #panel {
  304. min-height:150px;
  305. width:300px;
  306. position:absolute;
  307. right:30px;
  308. padding:0px 20px;
  309. top:60px;
  310. background:white;
  311. box-shadow:0px 0px 2px 2px #ddd;
  312. padding-bottom:none;
  313. }
  314.  
  315.  
  316. #panel:before
  317. {
  318. content: '';
  319. position: absolute;
  320. display: block;
  321. width: 16px;
  322. height:16px;
  323. background:white;
  324. box-shadow:-2px -2px 1px 0px #ddd;
  325. transform:rotate(45deg);
  326. z-index:1;
  327. top:-6px;
  328. right:10px;
  329. }
  330.  
  331.  
  332. #panel li {
  333. width:300px;
  334. padding:20px;
  335. height:30px;
  336. margin:0;
  337. background:#f1f1f1;
  338. border-bottom:1px solid #ddd;
  339. left:-20px;
  340. }
  341.  
  342. #panel li:first-child {
  343. height:100px;
  344. background:white;
  345. font-size:14px;
  346. }
  347.  
  348. #panel li:last-child {
  349. background:#f1f1f1;
  350. font-size:14px;
  351. position:absolute;
  352. height:20px;
  353. box-shadow:2px 2px 2px 0px #ddd, -2px 0px 2px 0px #ddd;
  354. margin-left:60px;
  355. }
  356.  
  357. #panel li:last-child a {
  358. padding:10px 20px;
  359. border:1px solid #ccc;
  360. background:#f9f9f9;
  361. font-size:.9em;
  362. }
  363.  
  364.  
  365. #panel li:first-child a {
  366. color:white;
  367. }
  368.  
  369.  
  370.  
  371. #panel ul {
  372. list-style:none;
  373. position:relative;
  374. margin-left:-60px;
  375.  
  376. }
  377.  
  378.  
  379. .privacy:hover {
  380. text-decoration:underline;
  381. }
  382.  
  383. .account a{
  384.  
  385. background:#4285F4; opacity:.8; color:white; padding:6px 10px; font-weight:580;
  386. }
  387.  
  388.  
  389. .account a:hover {
  390. opacity:1;
  391. text-decoration:none;
  392.  
  393. }
  394.  
  395. #egg { opacity:.8; right:10px; bottom:10px; position:fixed;bottom:4px;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  396.  
  397. border:1px solid #222222; z-index:999;
  398.  
  399. }
  400. #egg:hover { animation-name: egg;
  401. animation-duration: 1s;
  402. animation-iteration-count: infinite;}
  403. @keyframes egg{
  404. 0%{}
  405. 10%{transform:rotate(20deg)}
  406. 80%{transform:rotate(-20deg)}
  407. 100%{}
  408.  
  409. }
  410.  
  411. </style>
  412.  
  413.  
  414. <body>
  415.  
  416. <!-- don't worry about this part,
  417. keep scrolling until you see START CONTENT -->
  418.  
  419. <div id="searchbar">
  420. <div style="float:left; font-size:30px; padding:0px 20px;line-height:200%;font-family: 'Product Sans', sans-serif; font-weight:bold;"><font style="color:#4285F4">G</font><font style="color:#EA4335">o</font><font style="color:#FBBC05">o</font><font style="color:#4285F4">g</font><font style="color:#34A853">l</font><font style="color:#EA4335;">e</font></div>
  421. <div id="iconpanel">
  422. <a href="javascript:ReverseDisplay('panel')" title="Tumblr Account: {name}"><img src="{portraitURl-64}" style="border-radius:100%; widht:30px; height:30px;"></a>
  423. </div>
  424. </li> <div id="panel" style="display:none;">
  425. <ul>
  426. <li><img src="{PortraitURL-96}" style="border-radius:100%; margin-left:10px; position:absolute;width:96px"> <div style="position:absolute; margin-left:120px; max-width:120px"> <b>{Name}</b> <br> {name}.tumblr.com <br> <a href="https://www.tumblr.com/policy/en/privacy" style="color:#4285F4;" class="privacy">Privacy</a>
  427. <br> <br>
  428. <div class="account"> <a href="https://tumblr.com/settings">My Account</a></div>
  429. </div>
  430. </li>
  431. <li> <a href="https://www.tumblr.com/new/blog" style=""> Add account </a> <a href="http://tumblr.com/logout" style="position:absolute; right:20px; bottom:12px;">Sign Out</a></li>
  432. </ul>
  433. </div>
  434.  
  435. <div id="search">
  436. <form action="/search" method="get" id="search-form">
  437. <input type="hidden" name="t" value="{Name}" />
  438. <input type="text" name="q" class="query" value="{SearchQuery}" />
  439. <input type="submit" value="🔍" class="submit" />
  440. <div class="clear"></div>
  441. </form>
  442. </div>
  443.  
  444. </div>
  445. <a href="http://espoirthemes.tumblr.com" title="credit"><div id="egg"></div></a>
  446.  
  447.  
  448.  
  449. <!-- START CONTENT -->
  450.  
  451. <div id="sidebar">
  452. <a class="bt" href="/ask"> compose</a>
  453. <li> Inbox </li>
  454.  
  455. <!-- add your extra links here-->
  456. <li> <a href="/">Link</a> </li>
  457. <li> <a href="/">Link</a> </li>
  458. <li> <a href="/">Link</a> </li>
  459.  
  460.  
  461. </div>
  462.  
  463. <div class="container">
  464.  
  465. <!-- START TABBED CONTENT -->
  466.  
  467. <ul class="tabs">
  468. <li class="tab-link current" data-tab="tab-1">
  469.  
  470. <!-- name of tab 1 -->
  471. <i class="fa fa-inbox fa"></i> Primary </li>
  472.  
  473. <li class="tab-link" data-tab="tab-2">
  474.  
  475. <!-- name of tab 2 -->
  476. <i class="fa fa-users"></i> Social </li>
  477.  
  478. <li class="tab-link" data-tab="tab-3">
  479. <!-- name of tab 3 -->
  480. <i class="fa fa-tags"></i> Promotions</li>
  481. </ul>
  482.  
  483.  
  484. <!--FIRST TAB -->
  485. <div id="tab-1" class="tab-content current">
  486.  
  487. <ul>
  488.  
  489.  
  490. <li> <!-- beginning of question -->
  491.  
  492. <a href="javascript:ReverseDisplay('one')" style="float:left">
  493.  
  494. <i class="fa fa-square-o"></i> <i class="fa fa-star-o"></i> {name}</a>
  495.  
  496. <a style="float:right">Jun 18</a> <!-- date of “email” -->
  497.  
  498. <center> Question? </center>
  499.  
  500. </li> <!-- end of question -->
  501.  
  502. <div id="one" style="display:none;"> <!-- beginning of answer -->
  503.  
  504. <p> Answer! </p>
  505.  
  506. </div> <!--end of answer -->
  507.  
  508.  
  509.  
  510. <li> <!-- beginning of question -->
  511.  
  512. <a href="javascript:ReverseDisplay('two')" style="float:left">
  513.  
  514. <i class="fa fa-square-o"></i> <i class="fa fa-star-o"></i> {name}</a>
  515.  
  516. <a style="float:right">Jun 18</a> <!-- date of “email” -->
  517.  
  518. <center> Another question? </center>
  519.  
  520. </li> <!-- end of question -->
  521.  
  522. <div id="two" style="display:none;"> <!-- beginning of answer -->
  523.  
  524. <p> another answer! </p>
  525.  
  526. </div> <!--end of answer -->
  527.  
  528. </ul>
  529.  
  530.  
  531. </div> <!--end fist tab -->
  532.  
  533. <!-- SECOND TAB -->
  534. <div id="tab-2" class="tab-content">
  535. <ul>
  536. <li> <!-- beginning of question -->
  537.  
  538. <a href="javascript:ReverseDisplay('newtab')" style="float:left">
  539.  
  540. <i class="fa fa-square-o"></i> <i class="fa fa-star-o"></i> {name}</a>
  541.  
  542. <a style="float:right">Jun 18</a> <!-- date of “email” -->
  543.  
  544. <center> Question or 2nd tab? </center>
  545.  
  546. </li> <!-- end of question -->
  547.  
  548. <div id="newtab" style="display:none;"> <!-- beginning of answer -->
  549.  
  550. <p> Answer for 2nd tab! </p>
  551.  
  552. </div> <!--end of answer -->
  553.  
  554.  
  555.  
  556. </ul>
  557. </div> <!-- end 2nd tab -->
  558.  
  559. <!--THIRD TAB -->
  560. <div id="tab-3" class="tab-content">
  561.  
  562. your promotions tab is empty
  563.  
  564. <!-- to add questions, erase the line above and add:
  565. <ul>
  566.  
  567.  
  568.  
  569. </ul>
  570.  
  571. and put your questions in between the <ul> and </ul> -->
  572.  
  573.  
  574. </div> <!-- end 3rd tab -->
  575.  
  576. </div><!-- container end -->
  577.  
  578.  
  579. </body>
  580. </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!