I'M NOT A FRONT END DEVELOPER omg i should really hire one but i'm literally never going to get around to it i'm so sorry
Anyway if you see anything in the source that could be fixed to make skinning profiles easier or if you need any specific IDs or classes on elements make a post and I'll see if I can add it in for you (it's basically entirely dependent on whether it breaks current profiles or not).
Also, if you wanna use certain tags / attributes and you've noticed that they're blacklisted just post here and I'll see whether I can add it in for you, ye o/
Hi I'm back in record time <3
This time with some html whitelisting rqs though—to allow for better accessibility, whitelisting semantic html tags and all ARIA attributes is honestly a necessity. I'd like to be able to make my pages more WCAG compliant.
the new font awesome animations in V6 can be styled with
<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s;" ></i>However, it won´t function on here. Would be amazing If it could be implemented.
I'm not sure if background-clip is whitelisted, but can it be? Ya boi would like to have gradient text
I've been building a profile that makes use of Bootstrap's button groups and am disappointed that the checkbox functionality doesn't work. It seems like data-toggle and href are disabled on label elements, id and autocomplete are disabled on input elements, and data-toggle="buttons" isn't there either, but there could be more that I'm missing. Would be swag to have these functional.
background-position with double percentages seems to always double up on the first percentage and ignore the second so would be nice if that could be whitelisted or bugfixes
writing-mode and text-orientation would be helpful for decoration! they're a better way to rotate text than transform: rotate(90deg); which doesn't play nice with sizing and positioning because it messes with the element box as a whole rather than just the text itself.
Been trying to get my html and codes to work :']
trying to force the box under the first writing tab to change color and also trying to change the 4 pink squares to also change. ^^"
on top of all that i was trying to figure out how to have an image overlap a box ex: i wanted to put pumpkin images/w transparent backrouns on the sides of "pillow world"
code
<div class="container text-white my-3" style="max-width:1100px; font-family: book antiqua, palatino;">
<!-- world name box image -->
<div class="card p-5 rounded-0" style="background-image:url( imglink ); background-size:cover; background-position: center; height:280px; background-attachment: fixed;">
<!-- translucent header box -->
<div class="card bg-faded rounded-0 border-0 mx-auto" style="background-color:rgba(0,0,0,0.5); width:800px; height:280px;">
<!-- header -->
<p class="m-auto" style="font-size: 65px;">Pillow world!</p>
</div>
</div>
<div class="row no-gutters mt-3">
<!--tab buttons on left (replace "circle" with an icon name from FontAwesome) -->
<div class="col-1 pr-1">
<ul class="nav nav-tabs card-header-tabs row no-gutters">
<li class="col-12"><a class="btn bg-primary btn-block rounded-0 text-white show active" data-toggle="tab" href="#tab1" style="height:85px;"><i class="fas fa-circle mt-2 mx-auto" style="font-size:50px;"></i></a></li>
<li class="col-12 mt-3"><a class="btn bg-primary btn-block rounded-0 text-white show" data-toggle="tab" href="#tab2" style="height:85px;"><i class="fas fa-circle mt-2 mx-auto" style="font-size:50px;"></i></a></li>
<li class="col-12 mt-3"><a class="btn bg-primary btn-block rounded-0 text-white show" data-toggle="tab" href="#tab3" style="height:85px;"><i class="fas fa-circle mt-2 mx-auto" style="font-size:50px;"></i></a></li>
<li class="col-12 mt-3"><a class="btn bg-primary btn-block rounded-0 text-white show" data-toggle="tab" href="#tab4" style="height:85px;"><i class="fas fa-circle mt-2 mx-auto" style="font-size:50px;"></i></a></li>
</ul>
<br>
<!-- tagline image box -->
<div class="card bg-faded rounded-0 border-0 mt-1" style="height:601px; background-image:url( imglink ); background-size:cover; background-position: center;">
<!-- translucent filter over image -->
<div class="card bg-faded rounded-0 border-0" style="background-color:rgba(97, 72, 61,0.6); width:85px; height:601px;">
<!-- tagline (try to limit to 8 letters or less, making the font smaller will mess with the text effect) -->
<p class="m-auto" style="font-size: 75px; line-height: 0.95; text-align:center;">E</p>
<p class="m-auto" style="font-size: 75px; line-height: 0.95; text-align:center;">v</p>
<p class="m-auto" style="font-size: 75px; line-height: 0.95; text-align:center;">e</p>
<p class="m-auto" style="font-size: 75px; line-height: 0.95; text-align:center;">n</p>
<p class="m-auto" style="font-size: 75px; line-height: 0.95; text-align:center;">t</p>
<p class="m-auto" style="font-size: 75px; line-height: 0.95; text-align:center;">s</p>
<p class="m-auto" style="font-size: 75px; line-height: 0.95; text-align:center;"> </p>
<p class="m-auto" style="font-size: 75px; line-height: 0.95; text-align:center;">+</p>
<p class="m-auto" style="font-size: 75px; line-height: 0.95; text-align:center;">
<br>
</p>
<p class="m-auto" style="font-size: 75px; line-height: 0.95; text-align:center;">e</p>
</div>
</div>
</div>
<div class="col-11 pl-2">
<div class="row no-gutters">
<div class="col-9">
<!-- tabbed content box -->
<div class="card bg-faded rounded-0 border-0" style="background-color:#f7f3ed; width:715px; height:370px;">
<div class="tab-content">
<!-- tab 1 - basics -->
<div class="tab-pane fade p-1 active show" id="tab1">
<!-- header box + text -->
<p class="card border-0 rounded-0 p-1" style="height:40px; width:200px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); background-color:#61483d;"><span class="ml-2">Welcome!</span></p>
<!-- display icon on opposite side -->
<i class="far fa-circle pull-right" style="font-size:50px; color:#61483d; margin-top:-53px;"></i>
<!-- small quote -->
<p style="font-size: 20px; color:#61483d; opacity:0.5;"><em>" W-what is this place? "</em></p>
<div class="card bg-faded rounded-0 border-0 mt-2" style="background-color:rgba(0,0,0,0); width:690px; height:305px; color:#61483d; overflow:auto;">
<!-- text -->
<p style="font-size: 16px;"> A small door of light shows up as you walk though a amazing lighted village shows with golden looking light and grape vine over running an old looking building.</p>
<p style="font-size: 16px;">Papits are a bunny like sock creation! we are a closed species and concider subbing + joning! we range from events, wip mini games, arpgs, raffles, freebies, myo events and sometimes even monthly moderator application events and such!</p>
</div>
</div>
<!-- tab 2 - history -->
<div class="tab-pane fade p-1" id="tab2">
<!-- display icon on opposite side -->
<i class="far fa-circle" style="font-size:50px; color:#61483d;"></i>
<!-- header box + text -->
<p class="card border-0 rounded-0 p-1 pull-right" style="height:40px; width:200px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 90%,0% 0%,10% 100%,100% 100%); background-color:#61483d; text-align:right;"><span class="mr-2">HISTORY</span></p>
<div class="card bg-faded rounded-0 border-0 mt-2" style="background-color:rgba(0,0,0,0); width:690px; height:305px; color:#61483d; overflow:auto;">
<!-- event 1 header + seperator + text -->
<p style="font-size: 25px;">Adopts</p>Very basic, adopt here are sold for real money, currency, da points or just trades in general sometimes if misplaced raffles will be here. normally raffles should be found in the game hub <a href="https://toyhou.se/~world/92565.-pillow-town-/characters/folder:2647817">https://toyhou.se/~world/92565.-pillow-town-/characters/folder:2647817</a>
<!-- event 2 header + seperator + text -->
<p style="font-size: 25px;">Game hub/ interactive hub</p>Find various games and arpgs to earn currency, myo slots, mutations, pets and more! mini games may be added or removed from this section. event mini games and arpgs are also frequent
<!-- event 3 header + seperator + text -->
<p style="font-size: 25px;">Event 3</p><a style="font-size: 16px;">also I should probably tell you that the box scrolls. actually yknow what, I should probably just keep putting filler until the box scrolls to demonstrate that the box scrolls and stuff. so idk how's your day going, cus mine's going pretty lamely right now if I'm honest. I mean I'm coding this in rn, and you're reading this rn, so I think we're both doing lame things rn</a></div>
</div>
<!-- tab 2 - wildlife -->
<div class="tab-pane fade p-1" id="tab3">
<!-- header box + text -->
<p class="card border-0 rounded-0 p-1" style="height:40px; width:200px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); background-color:#61483d;"><span class="ml-2">WILDLIFE</span></p>
<!-- display icon on opposite side -->
<i class="far fa-circle pull-right" style="font-size:50px; color:#61483d; margin-top:-40px;"></i>
<div class="card bg-faded rounded-0 border-0 mt-3" style="background-color:rgba(0,0,0,0); width:710px; height:305px; color:#61483d; overflow:auto;">
<div class="row no-gutters">
<!-- creature 1 -->
<div class="col-4 p-1">
<!-- image + highlight link -->
<p class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:215px; border:5px solid #61483d;">
<a class="btn btn-outline-primary rounded-0" style="height:215px; border-width:0px;" href="linkhere"></a>
</p>
<!-- text -->
<p style="font-size: 25px; text-align:center;">Mai</p><a style="font-size: 15px; text-align:center;">main</a> mascot for papits and most beloved of them all! also known for being a good spring mascot</div>
<!-- creature 2 -->
<div class="col-4 p-1">
<!-- image + highlight link -->
<p class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:215px; border:5px solid #61483d;">
<a class="btn btn-outline-primary rounded-0" style="height:215px; border-width:0px;" href="linkhere"></a>
</p>
<!-- text -->
<p style="font-size: 25px; text-align:center;">Piqq</p><a style="font-size: 15px; text-align:center;">your</a> beloved Halloween mascot! may go through a design change?</div>
<!-- creature 3 -->
<div class="col-4 p-1">
<!-- image + highlight link -->
<p class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:215px; border:5px solid #61483d;">
<a class="btn btn-outline-primary rounded-0" style="height:215px; border-width:0px;" href="linkhere"></a>
</p>
<!-- text -->
<p style="font-size: 25px; text-align:center;">Margarita</p><a style="font-size: 15px; text-align:center;">Summer</a> mascot! is one of the top main mascots in papits!</div>
<!-- add more creatures above this line -->
</div>
</div>
</div>
<!-- tab 4 - featured pages -->
<div class="tab-pane fade p-1" id="tab4">
<!-- display icon on opposite side -->
<i class="far fa-circle" style="font-size:50px; color:#61483d;"> Extra</i>
<!-- header box + text -->
<p class="card border-0 rounded-0 p-1 pull-right" style="height:40px; width:200px; font-size:24px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 90%,0% 0%,10% 100%,100% 100%); background-color:#61483d; text-align:right;"><span class="mr-2">PAGES</span></p>
<div class="card bg-faded rounded-0 border-0 mt-3" style="background-color:rgba(0,0,0,0); width:710px; height:305px; overflow:auto;">
<div class="row no-gutters">
<!-- page 1 -->
<div class="col-4 p-1">
<!-- image + page name -->
<div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d;">
<p class="my-auto" style="font-size: 25px; text-align:center;">Page name</p>
</div>
<!-- highlight link -->
<a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
</div>
<!-- page 2 -->
<div class="col-4 p-1">
<!-- image + page name -->
<div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d;">
<p class="my-auto" style="font-size: 25px; text-align:center;">Page name</p>
</div>
<!-- highlight link -->
<a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
</div>
<!-- page 3 -->
<div class="col-4 p-1">
<!-- image + page name -->
<div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d;">
<p class="my-auto" style="font-size: 25px; text-align:center;">Page name</p>
</div>
<!-- highlight link -->
<a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
</div>
<!-- page 4 -->
<div class="col-4 p-1">
<!-- image + page name -->
<div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d;">
<p class="my-auto" style="font-size: 25px; text-align:center;">Page name</p>
</div>
<!-- highlight link -->
<a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
</div>
<!-- page 5 -->
<div class="col-4 p-1">
<!-- image + page name -->
<div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d;">
<p class="my-auto" style="font-size: 25px; text-align:center;">Page name</p>
</div>
<!-- highlight link -->
<a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
</div>
<!-- page 6 -->
<div class="col-4 p-1">
<!-- image + page name -->
<div class="card mb-1" style="background-image:url( imglink ); background-size:cover; background-position: center; width:215px; height:135px; border:5px solid #61483d;">
<p class="my-auto" style="font-size: 25px; text-align:center;">Page name</p>
</div>
<!-- highlight link -->
<a class="btn btn-outline-primary" style="height:126px; width:206px; border-width:0px; position:absolute; top:8px; left:8px;" href="linkhere"></a>
</div>
<!-- add more pages above this line -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<!-- image to the right of tabbed box -->
<div class="card bg-faded rounded-0 border-0" style="height:370px; background-image:url( imglink ); background-size:cover; background-position: center;">
<br>
</div>
</div>
</div>
<!-- fixed image divider -->
<div class="card my-3 rounded-0" style="background-image:url( imglink ); background-size:cover; background-position: center; height:85px; background-attachment: fixed;">
<br>
</div>
<div class="row no-gutters">
<div class="col-4">
<!-- manager box + header -->
<div class="card bg-faded rounded-0 border-0" style="background-color:#f7f3ed; height:250px; width:310px;">
<p style="font-size: 30px; color:#61483d; text-align:center;"><strong>MANAGER</strong></p>
<!-- "shadow" over header text -->
<!-- icon + highlight link -->
<p class="card rounded-circle mx-auto mb-0" style="background-image:url( imglink ); background-size:cover; background-position: center; width:160px; height:160px; border:5px solid #61483d;">
<a class="btn btn-outline-primary rounded-circle" style="height:160px; border-width:0px;" href="linkhere"></a>
</p>
<!-- username -->
<p style="font-size: 25px; text-align:center; color:#61483d;">Plushpup</p>
</div>
<!-- staff box + header -->
<div class="card bg-faded rounded-0 border-0 mt-3" style="background-color:#f7f3ed; height:250px; width:310px;">
<p style="font-size: 30px; color:#61483d; text-align:center;"><strong>STAFF</strong></p>
<!-- "shadow" over header text -->
<div class="card bg-faded rounded-0 border-0 mt-2 p-1" style="background-color:rgba(0,0,0,0); width:300px; height:305px; color:#61483d; overflow:auto;">
<div class="row no-gutters">
<!-- staff 1 -->
<div class="col-6">
<!-- icon + highlight link -->
<p class="card rounded-circle mx-auto mb-0" style="background-image:url( imglink ); background-size:cover; background-position: center; width:100px; height:100px; border:3px solid #61483d;">
<a class="btn btn-outline-primary rounded-circle" style="height:100px; border-width:0px;" href="linkhere"></a>
</p>
<!-- username -->
<p style="font-size: 20px; text-align:center; color:#61483d;">Deviledeggz</p>
</div>
<!-- staff 2 -->
<div class="col-6">
<!-- icon + highlight link -->
<p class="card rounded-circle mx-auto mb-0" style="background-image:url( imglink ); background-size:cover; background-position: center; width:100px; height:100px; border:3px solid #61483d;">
<a class="btn btn-outline-primary rounded-circle" style="height:100px; border-width:0px;" href="linkhere"></a>
</p>
<!-- username -->
<p style="font-size: 20px; text-align:center; color:#61483d;">none</p>
</div>
<!-- staff 3 -->
<div class="col-6">
<!-- icon + highlight link -->
<p class="card rounded-circle mx-auto mb-0" style="background-image:url( imglink ); background-size:cover; background-position: center; width:100px; height:100px; border:3px solid #61483d;">
<a class="btn btn-outline-primary rounded-circle" style="height:100px; border-width:0px;" href="linkhere"></a>
</p>
<!-- username -->
<p style="font-size: 20px; text-align:center; color:#61483d;">None</p>
</div>
<!-- staff 4 -->
<div class="col-6">
<!-- icon + highlight link -->
<p class="card rounded-circle mx-auto mb-0" style="background-image:url( imglink ); background-size:cover; background-position: center; width:100px; height:100px; border:3px solid #61483d;">
<a class="btn btn-outline-primary rounded-circle" style="height:100px; border-width:0px;" href="linkhere"></a>
</p>
<!-- username -->
<p style="font-size: 20px; text-align:center; color:#61483d;">None</p>
</div>
<!-- add more staff above this line -->
</div>
</div>
</div>
</div>
<div class="col-8">
<!-- event box + header -->
<div class="card bg-faded rounded-0 border-0" style="background-color:#f7f3ed; height:516px;">
<p style="font-size: 50px; color:#61483d; text-align:center;"><strong>EVENT</strong></p>
<!-- "shadow" over header text -->
<div class="card bg-faded rounded-0 border-0 mt-2 p-1" style="background-color:rgba(0,0,0,0); width:650px; height:360px; color:#61483d; overflow:auto;">
<!-- text -->
<p style="font-size: 16px;">Nothing this month! come back later to see if we have something!</p>
<p style="font-size: 16px;">
<br>
</p>
<p style="font-size: 16px;">incoming myo event & ect on October 5th</p>
</div>
<!-- more information button + text + highlight link -->
<div class="card bg-faded rounded-0 border-0 m-auto" style="background-color:#61483d; height:55px; width:300px;">
<p class="my-auto" style="font-size: 30px; text-align:center;">Check it out here!</p>
<a class="btn btn-outline-primary rounded-0" style="height:55px; width:300px; border-width:0px; position:absolute; top:0px; left:0px;" href="linkhere"></a>
</div>
</div>
</div>
</div>
</div>
</div><span class="ml-1"><a href="https://toyhou.se/MCDogResource" style="color:#61483d; font-size:13px;">Code by MCDogWarrior</a><a class="pull-right mr-1" href="https://unsplash.com/" style="color:#61483d; font-size:13px;">Backgrounds from Unsplash</a></span>
<p>
<br>
</p>
<a class="pull-right mr-1" href="https://unsplash.com/" style="color:#61483d; font-size:13px;"></a>
</div>
also colors haha
da7720 - orange im trying to change the 4 small boxes
8a7c3b - trying to change the box under the text to this green
CSS question- im trying to edit the color of links. after i click a link, it'll turn into a bootstrap color and I'm not sure how to prevent this.
not a whitelisting rq, ignore!
Endercoil this would probably belong in HTML/CSS questions thread but either way,
links have multiple states/pseudo-classes ( w3schools has an article here: https://www.w3schools.com/css/css_pseudo_classes.asp ). the ones we would normally edit would be just a {} and a:hover {}, but sometimes when you click on some links, it will 'focus' on them and have a sightly differnt appearance, so you have to edit a:focus as well.