SHARE
TWEET

[FTU] Smoothie About Me - Banana [3 tabs]

Zephyrhowl Jan 9th, 2017 (edited) 115 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [styleclass=ct][
  2. ][styleclass=av]avatar here 100x100px[/styleclass][
  3. ][styleclass=text]default text here [i]italic[/i] [b]bold[/b] [u]underline[/u] [s]strike[/s] [url=http://pokefarm.com]link[/url]
  4.  
  5. [progress="[inventory=PokéDex]/10"]progress bar[/progress][/styleclass][
  6. ][styleclass=tabs][accordion]
  7. [a-section=tab1]tab1 content[/a-section]
  8. [a-section=tab2]tab2 content[/a-section]
  9. [a-section=tab3]tab3 content[/a-section]
  10. [/accordion][/styleclass][
  11. ][styleclass=cr]code©[url=https://pokefarm.com/forum/post/2117803]type null[/url][/styleclass][/styleclass]
  12. [style]
  13. /* STYLE OPTIONS
  14.    Everything here is editable EXCEPT the last section!
  15.    Please respect me by not editing anything else unless you are certain you know what you are doing! */
  16.    
  17. /* image codes
  18.    replace image url with desired image INSIDE quotation marks! */
  19. @bgImage:url("https://i.imgur.com/jQvGVIM.png");
  20. @tabImage:url("https://i.imgur.com/0FI6vMG.png"); /* used for tab content */
  21. @tabIcon:url("https://pfq-static.com/img/items/acc/icon/seashell.png");
  22.  
  23. /* border codes */
  24. @borderStyle:double; /* Recommended values: double, outset, inset */
  25. @borderColor:#ff993a;
  26. @roundedBorders:5px; /* enter 0px for no rounded borders */
  27.  
  28. /* background colors */
  29. @bgColor1:#FAD785; /* main background */
  30. @bgColor2:#FEF7E7; /* background for tabs, etc */
  31.  
  32. /* fonts */
  33. @fontColor:#b54e00;
  34. @tabFontColor:#e86000;
  35. @linkColor: #e86000;
  36. @linkStyle:none; /* recommended values: none, underline */
  37. @font:"arial", "sans-serif";
  38. @tabFont:"ms pgothic", "arial", "sans-serif";
  39. @fontWeight:normal;
  40.  
  41. /* tab hover colors */
  42. @tabBgColor:#fde5c2; /* background color */
  43. @fontColor2:#ce1616; /* font color */
  44. @borderColor2:#d60e0e; /* border color */
  45.  
  46. /* tab text align */
  47. @tabAlign:left; /* recommended values: left, center */
  48.  
  49. /* do not edit unless necessary */
  50. @lineHeight:14px;
  51. @fontSize:12px;
  52. @borderSize:3px;
  53. @marginTop1:96.8%; /* used for credit */
  54. @marginTop2:1px;
  55. @marginLeft:1px;
  56. @tabMargin:67px;
  57. @tabMargin2:108px;
  58. @tabTop2:80px;
  59. @tabWidth:(@ctWidth/3) - (@tabMargin/1.3);
  60. @ctWidth:311px;
  61. @ctHeight:321px;
  62. @transition:all ease-in-out 0.5s;
  63.  
  64. /* MAIN STYLING
  65.    I highly recommend not changing anything in this section. */
  66.  
  67. .ct {
  68.   background-color:@bgColor1;
  69.   background-image:@bgImage;
  70.   width:@ctWidth;
  71.   height:@ctHeight;
  72.   position:relative;
  73. }
  74.  
  75. .ct a { color:@linkColor; text-decoration:@linkStyle; }
  76. .ct .bbcode_tooltip { border-color:@linkColor; }
  77. .ct .tooltip_content { background-color:@bgColor1; border:1px solid @fontColor; color:@fontColor }
  78.  
  79. .av {
  80.   width:100px;
  81.   height:100px;
  82.   color:@fontColor;
  83.   font-family:@font;
  84.   font-size:@fontSize;
  85.   line-height:@lineHeight;
  86.   border:@borderSize @borderStyle @borderColor;
  87.   border-radius:@roundedBorders;
  88.   background-color:@bgColor2;
  89.   float:left;
  90.   margin-top:@marginTop2;
  91.   margin-left:@marginLeft;
  92. }
  93.  
  94. .tabs .panel {
  95.   border:none;
  96.   box-shadow:none;
  97.   background:none;
  98.   &>h3 {
  99.     background-color:@bgColor2;
  100.     background-image:@tabIcon;
  101.     background-repeat:no-repeat;
  102.     background-position:right center;
  103.     color:@tabFontColor;
  104.     font-family:@font;
  105.     font-weight:@fontWeight;
  106.     text-align:@tabAlign;
  107.     border:@borderSize @borderStyle @borderColor;
  108.     border-radius:@roundedBorders;
  109.     width:@tabWidth;
  110.     height:14px;
  111.     position:absolute;
  112.     overflow:hidden;
  113.     margin-top:@tabTop2;
  114.     margin-left:@tabMargin2;
  115.     -webkit-transition:@transition;
  116.     transition: @transition;
  117.     -o-transition:@transition;
  118.     -moz-transition:@transition;
  119.   }
  120.     &>h3:hover { background-color:@tabBgColor; border-color:@borderColor2; }
  121.     &>h3:nth-child(3) { margin-top:@tabTop2; margin-left:(@tabMargin2) + (@tabMargin); }
  122.     &>h3:nth-child(5) { margin-top:@tabTop2; margin-left:(@tabMargin2) + (@tabMargin*2); }
  123.     &>h3 a {
  124.       color:@tabFontColor;
  125.       font-size:12px;
  126.       font-family:@tabFont;
  127.       -webkit-transition:@transition;
  128.       transition: @transition;
  129.       -o-transition:@transition;
  130.       -moz-transition:@transition;
  131.     }
  132.     &>h3 a:hover { color:@fontColor2; }
  133.     &>div {
  134.       width:295px;
  135.       height:189px;
  136.       background-color:@bgColor2;
  137.       background-image:@tabImage;
  138.       border:@borderSize @borderStyle @borderColor;
  139.       border-radius:@roundedBorders;
  140.       color:@fontColor;
  141.       font-family:@font;
  142.       font-size:@fontSize;
  143.       line-height:11px;
  144.       position:absolute;
  145.       overflow:hidden;
  146.       top:108px;
  147.       left:1px;
  148.       padding-left:3px;
  149.       padding-right:3px;
  150.     }
  151. }
  152.  
  153. .text .panel, .panel .panel { box-shadow:none; border-radius:0px; border:1px solid @borderColor;
  154.   &>h3 { background-color:@bgColor2; background-image:none; color:@fontColor; line-height:initial; border:1px solid transparent; border-radius:0px; position:initial; width:initial; margin-top:0px; box-shadow:none; transition:none; }
  155.   &>h3:hover { border:1px solid transparent; padding:none; background-color:@bgColor2; }
  156.   &>h3 span, &>h3 a { color:@tabFontColor; font-family:@font; font-weight:normal; text-align:left; transition:none; }
  157.   &>h3 span:hover, &>h3 a:hover { color:@fontColor; }
  158.   &>div { background-color:@tabBgColor; background-image:none; border:initial; color:@fontColor; margin-top:0px; height:initial; width:initial; overflow:initial; z-index:initial; position:initial; top:initial; }
  159. }
  160.  
  161. .text .panel>h3:nth-child(1n), .panel .panel>h3:nth-child(1n) { margin:0px; }
  162.  
  163. .text {
  164.   width:295px;
  165.   height:195px;
  166.   background-color:@bgColor2;
  167.   background-image:@tabImage;
  168.   border:@borderSize @borderStyle @borderColor;
  169.   border-radius:@roundedBorders;
  170.   color:@fontColor;
  171.   font-family:@font;
  172.   font-size:@fontSize;
  173.   line-height:@lineHeight;
  174.   position:absolute;
  175.   overflow:hidden;
  176.   top:108px;
  177.   left:@marginLeft;
  178.   padding-left:3px;
  179.   padding-right:3px;
  180.   padding-top:2px;
  181. }
  182.  
  183. .cr {
  184.   position:absolute;
  185.   line-height:10px;
  186.   font-family:@tabFont;
  187.   font-size:@fontSize;
  188.   color:@fontColor;
  189.   background-color:@bgColor2;
  190.   top:@marginTop1;
  191.   padding-left:@marginLeft;
  192.   &>a { color:inherit; }
  193. }
  194.  
  195. .expbar { background-color:@bgColor2; border-color:@borderColor; color:@fontColor;
  196.   &>span { font-weight:normal; }
  197.   &>div { background-color:@bgColor1; border-color:@borderColor; }
  198. }
  199.  
  200. .panel h3>a>svg { display:none; }
  201. [/style]
RAW Paste Data
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
 
Top