Replies

Nov 10, 2016 9 years ago
nene
User Avatar
Angora

Hi! I came up with some codes that might be a little helpful for the wardrobe. They require the Stylish extension for Chrome/FF, since the wardrobe is out of reach of CustomCSS. (it's def. worth it since you can tweak any site's CSS with this though!)

These have been approved for use and sharing by staff. However, if you decide to use them, you acknowledge to do so at your own risk.

Updates 11.11.16

  • Added code for HA base/facial features replacement (intended for previewing custom facial features)
  • Added alternative code for border around items.
    How to use After installing the extension for either Chrome or Firefox, it's a quick process to set up.

Step 1 Navigate to your default wardrobe page and click as shown

Step 2 Chrome ex. // FF ex. (Apply these to URLs starting with https://subeta.net/wardrobe_v3.php)


For CW creators/submitters
[size=11px PREVIEW/PLAY WITH UNSUBMITTED CW OVERLAYS[/size]]Preview a single overlay. img[src*="?hair"] {background: url('https://linktoyouroverlay.com/goeshere.png');}- Preview multiple overlays (ex. for items that come with a set). Replace the URLs. Items are layered by the order it's listed in the code. In this case : 1.png (appears on top), 2.png (underneath 1.png), 3.png (bottommost/underneath 2.png). img[src*="?hair"] {background: url('https://overlay.com/1.png'),url('https://overlay.com/2.png'),url('https://overlay.com/3.png');}
Play with your overlay live in the v3 wardrobe. It attaches to the hair layer (you can still use the salon BUT it'll be on the same layer, and salon hair will always be on top), where you can drag it up or down and layer it like any on-site wearable. Useful for making previews. You'll have to host the overlay externally and replace the URLs manually, but it's easier than saving images + popping them into an image editor to make previews.

[size=11px BORDER & WHITE BACKGROUND AROUND HA[/size]].showAvatar {background: ; border: 1px solid pink}
Turns the background behind the HA white and adds a border around it. Useful for cropping.

[size=11px REPLACE BASE OR BASE FEATURES WITH YOUR OWN[/size]]Left HA (currently wearing). .showPreview .clothing [data-reactid*="base"] {background:url('https://yourpreview.com/goeshere.png'); object-position: -1000px;}Right HA (previewing). .showAvatar .clothing img[src*=base] {background:url('https://yourpreview.com/goeshere.png'); object-position: -1000px;}
Intended for custom facial features some artists prefer to use for their previews. If you want to replace a certain facial feature but retain the base HA, then simply replace the "base" in *="base" with "mouth", "eyes", or "nose".


Other tweaks

before // after

[size=11px LESS DISTRACTING RED ERROR BOX[/size]].alert-danger {position: absolute; min-width: 260px; top: -80px;max-width: 320px; max-height: 120px; padding: 5px;padding-top: 10px} .alert-danger h4 {display: none;} .alert-danger p {font-size: 0;} .alert-danger :before, .alert-danger :after {font-weight: 400; text-transform: none;} .alert-danger strong {font-size: 12px; text-transform: uppercase;} .alert-danger button {position: absolute; left: 0} .alert-danger p strong:nth-child(2):before {content: 'limit reached (';} .alert-danger p strong:nth-child(2):after {content: '). ';} .alert-danger a:after {content: 'BUY'; font-size: 10px; font-weight: bold; border-radius: 5px; background: ; padding: 3px}
Not much prettier but it is less disorienting than the original. Every time the error pops up I stop for a sec for my eyes to refocus because it brings the left side down with it :ll Now it's in a fixed position, and smaller to be less distracting.

[size=11px EASIER TO SEE BORDER AROUND WORN ITEMS[/size]] 1px border. .item.selected {border: 1px solid red} 3px border. .item {outline: 3px solid transparent;} .item.selected {outline: 3px solid red}
(i'm v great with phrasing things i'm sorry) This applies to the bottom right box that shows item images. Usually the items you're currently wearing are marked with a baby blue 1px border, which I found really difficult to see sometimes. This makes the border more apparent. Two options, either a 1px border or a thicker 3px one.

[size=11px TWO-COLUMN CURRENTLY WEARING LIST[/size]]div#list {width: 250px;} div#list > .list > li {width: 125px;} .list .list-item {display: inline-flex;} .avatarOptions {max-width: 290px;} .container-fluid {min-width: 1400px;}
Kind of a hacky alternative to the one-column list. I got tired of scrolling up and down just to toggle showing/hiding a wearable. This splits the list into two columns so it fits on your screen a little better, useful for people who have layering parties on their HAs. Downside: Best (and probably only useful) for screens at least 1400px in width.

@ cathii @ sonatine @ usagi @ tundra pinging you guys (cw artists/releasers recently talked to) just in case you might find anything handy! c:

Nov 11, 2016 9 years ago
Cathii
is made of stardust
User Avatar
Cathii

omg this is so awesome ilu ;__________;

The only one I changed was the 'EASIER TO SEE BORDER AROUND WORN ITEMS' I think - your code created an outline for the entire box, which added a sort of padding at the bottom (and overlapped on other items). I just changed it for border:1px solid red; instead, so that it hugs the icon itself!

[img align=center]http://i.imgur.com/AOoPOqn.gif[/img]
Cathii's CW shop ❤️

Nov 11, 2016 9 years ago
Robin
User Avatar
Belmont

what the HECK you're my hero holy mother thank you for this ;_____;

[font=Georgia]if I'm really a winner, where do these demons come from?[/font] ✧ cw shop ✧

Nov 11, 2016 9 years ago
nene
User Avatar
Angora

aaa i'm glad they could be useful ^___^ i added in your code as an option too just in case! aw gosh i'm not worthy ;;; no problem!!

Nov 17, 2016 9 years ago
Tundra
is feeling deflated
User Avatar

thank you for the ping!! sorry im so late replying, honestly I couldn't understand any of this (except the perks) for the first few days because I had a constant headache xD

Read through now that I'm more clear headed ^_____^ I just wanna say this is so awesome!! I hate trying to find pieces on the wardrobe to match something then saving the file(s) and trying on in other software only to be more frustrated to find it isn't quite right. This would definitely help that!!

Also love the neat little tricks you found (and also Cathii's!) c:


º❤️º º❤️º

Nov 17, 2016 9 years ago
nene
User Avatar
Angora

aaa sorry I wasn't more clear ;-; I'm glad it's working for you (if it is), if not I'd be willing to explain further!

Nov 17, 2016 9 years ago
Tundra
is feeling deflated
User Avatar

nooo!! you were clear, I just couldn't process it at first because I was feeling under the weather cx


º❤️º º❤️º

Nov 17, 2016 9 years ago
Sorcerer
is a worthy opponent
User Avatar
Forsake

Cool stuff!

if you're into CWs take a look at the first post. It's not for everyone, but still worth letting you know about!

Nov 17, 2016 9 years ago
omnibless
USED DYNAMITE
User Avatar
MettlesomeKid

wow the upsy-downsy image from reading the description or adding just another layer was always a pain, thank you :)

thanks for ping

Nov 17, 2016 9 years ago
nene
User Avatar
Angora

thanks for pinging your css group! o no problem! c:

Nov 17, 2016 9 years ago
Go home
Julie
you're drunk
User Avatar

I'll def use that red box error code. And the red around the worn item border. Thank you


Forum Art by
Signature Art by

Nov 17, 2016 9 years ago
Yarn
is synthetic
User Avatar
Parsec

First of all, , Thank you thank you thank you!! and also thank you for the ping. <3

I have a request, I imagine it is super difficult, so I understand if you don't want to.. but it doesn't hurt to ask, I hope? Noemi, could you create a custom code where the items appear before the search refinement section?... Like this - click, please Like I said though, I understand if this is a big thing to change, I know it probably is.. just thought I'd request and see if you could/would try it. <3

Nov 17, 2016 9 years ago
Zay
made a huge mistake
User Avatar
Riza

Okay so I really love these wardrobe tweaks, thank you! My only issue is with the "two-column" thing. For some reason, this affects all of the site? It makes everything on the forums spill past the bookmark sidebar for some reason. I'm guessing it's doing that because my screen resolution, so I've just disabled it for now until I go to mess with the wardrobe.


Proud Gamer | My best friend is

Nov 17, 2016 9 years ago
Sorcerer
is a worthy opponent
User Avatar
Forsake

Check step 2 in the first post. Sounds like you're applying the code to the subeta.net domain instead of the wardrobe url.

Nov 17, 2016 9 years ago
Zay
made a huge mistake
User Avatar
Riza

I don't know actually I guess I'm a bit lost sorry! I thought I'd done it right, but maybe not.

Here's what I have for the code:

SPOILER (click to toggle) url(http://www.w3.org/1999/xhtml);

@-moz-document url("https://subeta.net/wardrobe_v3.php") {

} .item.selected {border: 2px solid red}

div#list {width: 250px;} div#list > .list > li {width: 125px;} .list .list-item {display: inline-flex;} .avatarOptions {max-width: 290px;} .container-fluid {min-width: 1400px;}

.alert-danger {position: absolute; min-width: 260px; top: -80px;max-width: 320px; max-height: 120px; padding: 5px;padding-top: 10px} .alert-danger h4 {display: none;} .alert-danger p {font-size: 0;} .alert-danger :before, .alert-danger :after {font-weight: 400; text-transform: none;} .alert-danger strong {font-size: 12px; text-transform: uppercase;} .alert-danger button {position: absolute; left: 0} .alert-danger p strong:nth-child(2):before {content: 'limit reached (';} .alert-danger p strong:nth-child(2):after {content: '). ';} .alert-danger a:after {content: 'BUY'; font-size: 10px; font-weight: bold; border-radius: 5px; background: ; padding: 3px}


Proud Gamer | My best friend is

Nov 17, 2016 9 years ago
nene
User Avatar
Angora

it's due to the @-moz-document url("https://subeta.net/wardrobe_v3.php") {

}

part. move that } bracket to the very very end of the code and that should fix it!

sure! here's the code, luckily relatively simple: .loadedContent {position:absolute; top: 0; max-height: 300px} /* right side - items box / .col-lg-7.col-md-7.col-sm-5 {padding-top: 400px;} / right side - filters and options */ you can adjust the height of that items box by changing max-height: 300px to whatever you wish. remember to adjust the 400px value too (should be 100px higher than the max-height value)

Nov 17, 2016 9 years ago
Zay
made a huge mistake
User Avatar
Riza

Ohh okay I guess I just didn't see that lol that actually makes a lot of sense! Thank you!!


Proud Gamer | My best friend is

Nov 17, 2016 9 years ago
nene
User Avatar
Angora

no problem! i'm glad it worked ^__^

Nov 17, 2016 9 years ago
Yarn
is synthetic
User Avatar
Parsec

woah! , you are Awesome!

Can you reduce the size of the items box? the box that contains all the items? It would be great if it was not as tall/height was less...

Nov 17, 2016 9 years ago
nene
User Avatar
Angora

yep, you can adjust it yourself actually!

Quote
you can adjust the height of that items box by changing max-height: 300px to whatever you wish. remember to adjust the 400px value too (should be 100px higher than the max-height value)
say i wanted the items box to be 200px, i would change it like so: .loadedContent {position:absolute; top: 0; max-height: 200px} /* right side - items box / .col-lg-7.col-md-7.col-sm-5 {padding-top: 300px;} / right side - filters and options */

Please log in to reply to this topic.