Custom CSS for Shops, Search, and Vault

I made this on my own. While I do my best to foresee any conflicts, any code that you are currently using may break, interfere with, or just plain BORK the intended results.

I spent several hours last night tweaking how I wanted the new shop/vault User Interface (UI) to look. I wanted something that didn't take up a lot of space, made things faster to see, and went as closely back to "original or better" as I could get it. Here are the results. (Please post here if you have any specific requests. Anyone can jump in to help; I have school tomorrow, and a teacher's gotta teach! lol!)

Shops

This was the first UI change we saw, so I learned a lot. There's plenty of selectors here for someone who knows what they're doing, but I noticed that the Shop Search also used many of the same selectors. So if your Shop Search looks funny, ask nicely and maybe we can work something out. (;

[spoiler=Shop and Search CSS Results]

/*************************************************** NEW SHOPS ***********************/ /shop search/ .ui.grid.middle.aligned.vertically.divided {margin: auto !important; width: 60% !important;}


/remove to button**/
.ui.message.error > br
{display: none !important;}
body {line-height: normal !important;}
.ui.message.error select
{font-size: 100% !important;}
/price box/
.four.wide.column input[type=text]
{text-align: center;}
/remove column*/
.four.wide.column > br
{display: none !important;}
.four.wide.column > label
{width: 50% !important;
padding: 1px 8px !important;
font-size: 80% !important;}
/item display***/
.four.wide.column div.wl_item
{float: left !important;}
/**list box/
.ui.center.aligned.segment
{ margin: auto; width: 80%; }
/*title boxes/
.basic
{width: 100% !important;}
/**paddings/
.ui.grid > .row
{ margin-top: 1.1%; padding: .1rem 0% 0%; }
.ui.message
{padding: 2px !important;}

.ui > form, .ui > .basic, .ui > .header {padding: 2px !important;}[/spoiler]

Vaults

This code was MUCH more necessary. Who even wants a vault menu which takes up 99% of the page when it's first loaded?! Not. Me. getting to work on this, I realized that the new CSS3 (which I haven't really looked at in about a year) offers some really nifty code... like flex. Flex let's things move more fluidly within a "box" so that they can wrap and condense depending on the browser size. i.e. Great for mobile formatting! Again, I wanted to remove unnecessary space and get back to the older look, so all my categories were listed simply...

[spoiler=Vault CSS Results]

/*****************************************VAULT/


.panel-body
{padding: 2px !important;}
form > .row > .col-md-4, .col-md-12
{width: auto !important;
display: inline-flex !important;}
.col-md-4 h5, .col-md-12 h5
{padding-left: 15px !important;
padding-right: 2px !important;
font-weight: 900 !important;}
.input-group .form-control
{height: auto !important;
border-radius: 4px !important;}

.nav>li>a {padding: 8px 8px !important; align-self:center !important;} [/spoiler]

Logged Out

Custom CSS for Shops, Search, and Vault

Replies