3.0 Tip: Status Update Box Tweaks

If you find the new Status Update Box a bit boring, here's some CSS tweaks to spice it up a little.

Borders
Shadows
Padding / margins
Multi-layer CSS gradient

Simple & clean... enjoy :)

/*------------------Fire Tech Status Update Tweaks---------------------*/
.status-container {border: 2px groove #fff;padding: 10px;border-radius: 10px;
background:linear-gradient(to bottom,rgba(255,255,255,1),rgba(0,134,173,.8),rgba(255,255,255,0)), url(https://storage.ning.com/topology/rest/1.0/file/get/557835?profile=original);background-repeat:repeat-x,repeat;background-position:bottom,top;
-moz-box-shadow: 0px -1px 4px -1px rgba(0, 0, 0, 1) ;
-webkit-box-shadow: 0px -1px 4px -1px rgba(0, 0, 0, 1) ;
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 1) ;}
.status-body.media-body {border-bottom:none;}
.js-statusForm.statusForm .button.button-primary {margin-top:10px;}
.js-statusForm.statusForm .input-full {border: 1px solid #000; border-radius:10px;}
.statusForm::before {border-color: transparent #000 transparent transparent;}

Replies

Anam July 30, 2014 at 2:35am

Thank you FireTech. That looks and works really groovy :)
- Fire-Tech > Anam July 30, 2014 at 4:31pm
  
  Glad you like it :)
soaringeagle July 30, 2014 at 9:42am

as soon as it was released i was working on my own lil tweak
- Fire-Tech > soaringeagle July 30, 2014 at 4:33pm
  
  Looks good SE! I like the insets better on darker networks too. Have to do the same on my FTS site ;)
Thiago Santos de Moraes July 30, 2014 at 11:58am

Thanks, I love it.
- Fire-Tech > Thiago Santos de Moraes July 30, 2014 at 6:18pm
  
  Thanks Thiago :)
NC for Hire

⚡JFarrow⌁ July 30, 2014 at 3:21pm

nice one FT!
- Fire-Tech > ⚡JFarrow⌁ July 30, 2014 at 4:34pm
  
  Thanks J ;)
This reply was deleted.
- Fire-Tech July 30, 2014 at 4:39pm
  
  Looks great John! I threw mine together pretty quick before going to bed, but I'm glad you did the work for all the comments on your tip. 1 less thing I need to do. I always liked your color choices too. Thanks for sharing :)