SHARE
TWEET

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

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