SHARE
TWEET

[FTU] Smoothie About Me - Strawberry [6 tabs]

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