? CSS snippets for SBS (Page 1) ● SmileBASIC Source Forums

Sign In

Register
*Usernames are case-sensitive
Forgot my password

CSS snippets for SBS

1 2
  • #1 ✎ 1070 randomous Robot Hidden Easter Eggs Second Year My account is over 2 years old Website Drawing I like to draw! Hobbies The website allows you to customize the styling of basically anything you want. If you've come up with something cool that you think people will like, post it here with a short description of what it does. A screenshot would be nice too. Posted
  • #2 ✎ 1070 randomous Robot Hidden Easter Eggs Second Year My account is over 2 years old Website Drawing I like to draw! Hobbies Get rid of the send button in chat:
    section.chat #sendpane input[type="submit"] { display: none !important; } section.chat #sendpane draw-area { right: 2px !important; }
    Posted
  • #3 ✎ 225 TheV360 Pokemon Is Awesome! I love Pokemon! Express Yourself First Day Joined on the very first day of SmileBASIC Source Website Night Person I like the quiet night and sleep late. Express Yourself Sorry if this is necroposting, but I found a cool and very simple way to have a sticky header on modern browsers: header { position: sticky; top: 0; z-index: 999; } Posted
  • #4 ✎ 1013 Yttria /*'Solarized Dark theme for [code] blocks * *'- Y */ .bbcode code, .bbcode code * { /*'default text color/background color */ color: #839496; /*'base0 */ background-color: #002b36; /*'base03 */ } .bbcode code .keyword { color: #268bd2; /*'blue */ } .bbcode code .number { color: #2aa198; /*'cyan */ } .bbcode code .label { color: #d33682; /*'magenta */ } .bbcode code .function { /*'builtin functions (CHR$,MID,etc.) */ color: #859900; /*'green */ } .bbcode code .variable { /*'user-defined vars and function calls */ color: #93a1a1; /*'base2 */ } .bbcode code .def + .variable { /*'user function definitions */ /* DEF [FOO] */ color: #b58900; /*'yellow */ } .bbcode code .comment { color: #657b83; /*'base00 */ background-color: #073642; /*'base02 */ /*'when applying a background-color, this * *'eliminates uncolored gap between lines */ display: inline-block; font-style: italic; } .bbcode code .operator { color: #859900; /*'green */ } .bbcode code .equals { /*'assignment operator */ color: #93a1a1; /*'base1 */ } .bbcode code .string { color: #657b83; /*'base00 */ } Sample: https://smilebasicsource.com/editor?type=css Posted Edited by Yttria
  • #5 ✎ 225 TheV360 Pokemon Is Awesome! I love Pokemon! Express Yourself First Day Joined on the very first day of SmileBASIC Source Website Night Person I like the quiet night and sleep late. Express Yourself img.smallavatar, img.bigavatar, #openUserHomeAvatar img { width: 0; height: 0; background: url("//kland.smilebasicsource.com/i/cqdjb.png"); background-size: cover; box-sizing: content-box; } img.smallavatar { padding: 0 3.5rem 3.5rem 0; } img.bigavatar { padding: 0 100px 100px 0; } #openUserHomeAvatar img { padding: 0 8rem 8rem 0; } @media (min-width: 500px) { img.bigavatar { padding: 0 150px 150px 0; } } @media (min-width: 700px) { img.bigavatar { padding: 0 200px 200px 0; } } SmileBASIC Source Early November 2018 Simulator CHAOS, CHAOS... Edit: just saw that the image URL has some BB Code around it, please disregard that. edit: thank 12me21; Edit: Want to be able to know who's who, but still want this chaos? Use my brand-new Site JS! //' Get all profile pictures. var pfp = document.querySelectorAll("img.smallavatar, img.bigavatar, #openUserHomeAvatar img"); //' For each profile picture, move the main picture to the background, and swap the src picture for a Ralsei picture. for (var i = 0; i < pfp.length; i++) { pfp[i].style.backgroundImage = "url(" + pfp[i].src + ")"; pfp[i].style.backgroundSize = "cover"; pfp[i].src = "//kland.smilebasicsource.com/i/vggbp.png"; } Honestly I'm having way too much fun with this Ralsei profile picture thing Posted Edited by TheV360
  • #6 ✎ 238 AnswerXOX Great Page Hidden Achievements osu! Is Awesome! I love osu! Express Yourself Third Year My account is over 3 years old Website Have an aesthetic circular icon in chat. #messagepane ol li figure img { border-radius: 50%; } Posted
  • #7 ✎ 1785 12Me21 Syntax Highlighter Received for creating the code syntax highlighter on SBS Night Person I like the quiet night and sleep late. Express Yourself
    img.smallavatar, img.bigavatar, #openUserHomeAvatar img { width: 0; height: 0; background: url("//kland.smilebasicsource.com/i/cqdjb.png"); background-size: cover; box-sizing: content-box; } img.smallavatar { padding: 0 3.5rem 3.5rem 0; } img.bigavatar { padding: 0 100px 100px 0; } #openUserHomeAvatar img { padding: 0 8rem 8rem 0; } @media (min-width: 500px) { img.bigavatar { padding: 0 150px 150px 0; } } @media (min-width: 700px) { img.bigavatar { padding: 0 200px 200px 0; } } SmileBASIC Source Early November 2018 Simulator CHAOS, CHAOS... Edit: just saw that the image URL has some BB Code around it, please disregard that. I can't remove it and it doesn't show up in the preview.
    yeah that's a bug with our awful bbcode parser. If you change the url to //kland.smilebasicsource.com/i/cqdjb.png it should work.
    Posted Edited by 12Me21
  • #8 ✎ 225 TheV360 Pokemon Is Awesome! I love Pokemon! Express Yourself First Day Joined on the very first day of SmileBASIC Source Website Night Person I like the quiet night and sleep late. Express Yourself More custom CSS! Here's some funkier user-ranks (those bracket things, or not anymore as I changed them to capsule kinda things) user-rank[data-level] { border-radius: 8rem; /*.5em*/ padding: 0 .75rem; color: white; font-size: .75em; } /*[data-poster="TheV360"] { display: none !important; }*/ user-rank::before, user-rank::after { content: none; } user-rank[data-level="1"] { color: black; background-color: #777; } user-rank[data-level="2"] { color: white; background-color: #00779d; } user-rank[data-level="3"] { color: white; background-color: #128409; } user-rank[data-level="4"] { color: white; background-color: #6f6aac; } user-rank[data-level="5"] { color: black; background-color: #dd6e86; } user-rank[data-level="6"] { color: black; background-color: #db8d10; } user-rank[data-level="7"] { color: white; background-color: #5c257c; } user-rank[data-level="-1"] { color: black; background-color: #777; } And a small style for the code tag that fixes tab spacing! code { tab-size: 2em; -o-tab-size: 2em; -moz-tab-size: 2em; -webkit-tab-size: 2em; }Also, a cool blinky underscore for the nav tabs! nav ul li a { font-family: monospace !important; } nav ul li.active a::after { content: "_"; animation: blink_underscore 1s linear infinite; } @keyframes blink_underscore { 0% { opacity: 1; } 50% { opacity: 1; } 100% { opacity: 0; } } Posted
  • #9 ✎ 225 TheV360 Pokemon Is Awesome! I love Pokemon! Express Yourself First Day Joined on the very first day of SmileBASIC Source Website Night Person I like the quiet night and sleep late. Express Yourself
    How do I remove all profile pictures?
    Here's a basic thing for that. Doesn't cover everything, but it works in forum threads and most other places. Now it does cover everything. .smallavatar, .bigavatar, #openUserHomeAvatar img, post-count { display: none !important; }
    Posted Edited by TheV360
  • #10 ✎ 225 TheV360 Pokemon Is Awesome! I love Pokemon! Express Yourself First Day Joined on the very first day of SmileBASIC Source Website Night Person I like the quiet night and sleep late. Express Yourself Here's a thing that certainly exists now You can also check your score in the user tab. CSS #ralsei-point-total { background-image: url("//kland.smilebasicsource.com/i/oxpjh.png"); cursor: pointer; } .score-toast { position: absolute; border-radius: .25rem; padding: .5rem; color: white; background-color: #128409; animation: 2s linear 1 toastFly; } @keyframes toastFly { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-32px); opacity: 0; } } JS (function(){ var storage = window.localStorage; // No tampering, unless you hate fun if (!storage.getItem("ralsei-score")) storage.setItem("ralsei-score", 0); var userNav = document.querySelector("user-nav"); var thing = document.createElement("a"); thing.id = "ralsei-point-total"; thing.title = "Ralsei Point Total"; thing.innerHTML = "Ralsei Point Total"; thing.addEventListener("click", (e)=>{ alert("You've accumulated " + storage.getItem("ralsei-score") + " Ralsei points. Why?"); }); thing = userNav.insertBefore(thing, document.getElementById("sign-out")); // Get all profile pictures. var pfp = document.querySelectorAll("img.smallavatar, img.bigavatar, #openUserHomeAvatar img"); var ev = function(e) { ralseiify(e); e.target.removeEventListener("click", ev, false); }; // For each profile picture, move the main picture to the background, and swap the src picture for a Ralsei picture. for (var i = 0; i < pfp.length; i++) { eventThingy(pfp[i]); } function ralseiify(e) { var scoreElement; // Edit profile picture e.target.style.backgroundImage = "url(" + e.target.src + ")"; e.target.style.backgroundSize = "cover"; if (Math.random() > 0.5) e.target.style.transform = "scaleX(-1)"; e.target.src = "[url=http://kland.smilebasicsource.com/i/vggbp.png"]http://kland.smilebasicsource.com/i/vggbp.png"[/url];; // Add to score storage.setItem("ralsei-score", parseInt(storage.getItem("ralsei-score")) + 1); // Score popup scoreElement = document.createElement("div"); scoreElement.className = "score-toast"; scoreElement.innerHTML = "+1 Ralsei Points"; scoreElement.style.left = (e.pageX + 24) + "px"; scoreElement.style.top = (e.pageY - 8) + "px"; scoreElement = document.body.appendChild(scoreElement); window.setTimeout((el)=>{el.remove();}, 2000, scoreElement); } function eventThingy(element) { element.addEventListener("click", ev, false); } })(); Posted Edited by TheV360
  • #11 ✎ 652 IAmRalsei Forum Leader Hidden Achievements First Year My account is over 1 year old Website Expert Programmer Programming no longer gives me any trouble. Come to me for help, if you like! Programming Strength
    Here's a thing that certainly exists now You can also check your score in the user tab. CSS #ralsei-point-total { background-image: url("//kland.smilebasicsource.com/i/oxpjh.png"); cursor: pointer; } .score-toast { position: absolute; border-radius: .25rem; padding: .5rem; color: white; background-color: #128409; animation: 2s linear 1 toastFly; } @keyframes toastFly { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-32px); opacity: 0; } } JS (function(){ var storage = window.localStorage; // No tampering, unless you hate fun if (!storage.getItem("ralsei-score")) storage.setItem("ralsei-score", 0); var userNav = document.querySelector("user-nav"); var thing = document.createElement("a"); thing.id = "ralsei-point-total"; thing.title = "Ralsei Point Total"; thing.innerHTML = "Ralsei Point Total"; thing.addEventListener("click", (e)=>{ alert("You've accumulated " + storage.getItem("ralsei-score") + " Ralsei points. Why?"); }); thing = userNav.insertBefore(thing, document.getElementById("sign-out")); // Get all profile pictures. var pfp = document.querySelectorAll("img.smallavatar, img.bigavatar, #openUserHomeAvatar img"); var ev = function(e) { ralseiify(e); e.target.removeEventListener("click", ev, false); }; // For each profile picture, move the main picture to the background, and swap the src picture for a Ralsei picture. for (var i = 0; i < pfp.length; i++) { eventThingy(pfp[i]); } function ralseiify(e) { var scoreElement; // Edit profile picture e.target.style.backgroundImage = "url(" + e.target.src + ")"; e.target.style.backgroundSize = "cover"; if (Math.random() > 0.5) e.target.style.transform = "scaleX(-1)"; e.target.src = "[url=http://kland.smilebasicsource.com/i/vggbp.png"]http://kland.smilebasicsource.com/i/vggbp.png"[/url];; // Add to score storage.setItem("ralsei-score", parseInt(storage.getItem("ralsei-score")) + 1); // Score popup scoreElement = document.createElement("div"); scoreElement.className = "score-toast"; scoreElement.innerHTML = "+1 Ralsei Points"; scoreElement.style.left = (e.pageX + 24) + "px"; scoreElement.style.top = (e.pageY - 8) + "px"; scoreElement = document.body.appendChild(scoreElement); window.setTimeout((el)=>{el.remove();}, 2000, scoreElement); } function eventThingy(element) { element.addEventListener("click", ev, false); } })();
    This is a fun game. The Ralsei icon in the user menu fits right in with Randomous' icons. 10/10. Edit:I had over 100 Ralsei Points™ but then the next day they all vanished! My new rating is 8/10
    Posted Edited by IAmRalsei
  • #12 ✎ 1785 12Me21 Syntax Highlighter Received for creating the code syntax highlighter on SBS Night Person I like the quiet night and sleep late. Express Yourself The score won't persist across different computers since it uses localStorage Posted Edited by 12Me21
  • #13 ✎ 652 IAmRalsei Forum Leader Hidden Achievements First Year My account is over 1 year old Website Expert Programmer Programming no longer gives me any trouble. Come to me for help, if you like! Programming Strength
    the score won't persist across different computers and/or browsers since it uses localStorage
    It was the same browser and device
    Posted Edited by IAmRalsei
  • #14 ✎ 1785 12Me21 Syntax Highlighter Received for creating the code syntax highlighter on SBS Night Person I like the quiet night and sleep late. Express Yourself Make [co​de] not fill entire screen width code { display: inline-block !important; max-width: 100% !important; overflow-x: auto; margin-right: 69420px !important; } button code { margin-right: 0 !important; } .bbcode, .bbcode blockquote { overflow-x: hidden; overflow-x: -moz-hidden-unscrollable; } This is a really awful hack because CSS is terrible. Very high chance of breaking the entire site Posted Edited by 12Me21
  • #15 ✎ 319 HTV04 Intermediate Programmer I can make programs, but I still have trouble here and there. Programming Strength Avatar Taboo I didn't change my avatar for 180 days Website Second Year My account is over 2 years old Website Can I have a template for the code block? I tried to edit Y’s custom code, but it had a lot of edited parts, and I didn’t know what to delete because I don’t really know how the code block works. Posted Edited by HTV04
  • #16 ✎ 1013 Yttria I feel like it's pretty self-explanatory? Each class under <.bbcode code> is a token type, with two exceptions: The first rule selects the entire code element, setting a background-color here sets the code background, and setting a text color sets the default color. The other exception is .bbcode code .def + .variable, which selects variables (or rather, unknown identifiers, i.e. user vars/functions) if and only if they follow the DEF keyword. This is used to target function definition names for attention. Since comments have a background-color specifically for that token, and because text on SBS has a line-height > 1.0, I use the display: inline-block; property so that the background takes up the entire line height, to avoid gaps in background color in comment blocks. Posted
  • #17 ✎ 319 HTV04 Intermediate Programmer I can make programs, but I still have trouble here and there. Programming Strength Avatar Taboo I didn't change my avatar for 180 days Website Second Year My account is over 2 years old Website With this script, you can change the syntax colors in the code block to match SmileBASIC's. /*'SmileBASIC 3 colors for [code] blocks */ .bbcode code, .bbcode code * { color: #ffffff; background-color: #000000; } .bbcode code .keyword { color: #7bb5f7; } .bbcode code .number { color: #f77bb5; } .bbcode code .label { color: #f7a500; } .bbcode code .function { color: #7b7bf7; } .bbcode code .comment { color: #10bd42; } .bbcode code .string { color: #a5ada5; } Please let me know if there are any problems with this code. Posted Edited by HTV04
  • #18 ✎ 23 Splam Day Person I like the warm sunshine and wake up early! Express Yourself Expert Programmer Programming no longer gives me any trouble. Come to me for help, if you like! Programming Strength Night Person I like the quiet night and sleep late. Express Yourself Ralsei POINTS!!! Posted
  • #19 ✎ 23 Splam Day Person I like the warm sunshine and wake up early! Express Yourself Expert Programmer Programming no longer gives me any trouble. Come to me for help, if you like! Programming Strength Night Person I like the quiet night and sleep late. Express Yourself
    Ralsei POINTS!!!
    ... WONT WORK!
    Posted
  • #20 ✎ 23 Splam Day Person I like the warm sunshine and wake up early! Express Yourself Expert Programmer Programming no longer gives me any trouble. Come to me for help, if you like! Programming Strength Night Person I like the quiet night and sleep late. Express Yourself YOU CANT CLICK USER BECAUSE SMILEBASICSOURCE IS SAD AND WONT LET YOU *{ filter:grayscale(100%); } with this, Randomous looks like he came outta da flipnotes haneta! *{ filter:contrast(200%); } Posted Edited by Splam
1 2