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

Sign In

Register
*Usernames are case-sensitive
Forgot my password
[Help Wanted] SmileBASIC Documentation Project

CSS snippets for SBS

  • #1 ✎ 1065 randomous Owner 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 ✎ 1065 randomous Owner 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 ✎ 192 TheV360 Third Year My account is over 3 years old Website 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 ✎ 931 Y_ack /*' Solarized Dark for [code] blocks * *' - Y */ .bbcode code, .bbcode code * { 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 { color: #859900; /* green */ } .bbcode code .variable { color: #93a1a1; /* base2 */ } .bbcode code .comment { color: #657b83; /* base00 */ background-color: #073642; /* base02 */ font-style: italic; display: inline-block; width: 100%; } .bbcode code .operator { color: #859900; /* green */ } .bbcode code .equals { color: #93a1a1; /* base1 */ } .bbcode code .string { color: #657b83; /* base00 */ } Sample: https://smilebasicsource.com/editor?type=css Posted
  • #5 ✎ 192 TheV360 Third Year My account is over 3 years old Website 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 ✎ 227 AnswerXOX Great Page Hidden Achievements RNG Hidden Easter Eggs Second Year My account is over 2 years old Website Have an aesthetic circular icon in chat. #messagepane ol li figure img { border-radius: 50%; } Posted
  • #7 ✎ 1619 12Me21 Head Admin Second Year My account is over 2 years old Website 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 ✎ 192 TheV360 Third Year My account is over 3 years old Website 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 ✎ 274 Shelly How do I remove all profile pictures? Posted
  • #10 ✎ 192 TheV360 Third Year My account is over 3 years old Website 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
  • #11 ✎ 192 TheV360 Third Year My account is over 3 years old Website 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
  • #12 ✎ 554 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
  • #13 ✎ 1619 12Me21 Head Admin Second Year My account is over 2 years old Website 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
  • #14 ✎ 554 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