Online Users Page


QN

Custom OWA css


55.:A-MAN:.

13/02/16 at 2:09 AM
Figured I'd make a thread for updates here so the status isn't spammed.

I've made a custom stylesheet for the Outlook Web App so it doesn't look like poop. You can paste it into an extension that allows you to inject custom CSS (such as Stylish for Chrome).

'
 '.tryit('@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
.o365button._ad_3{
height:auto;
margin-top:2px;
padding-top:4px;
padding-bottom:6px;
border-radius:3px;
}
div.o365cs-nav-header16{
color:#eee !important;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#777777+0,666666+100 */
background: rgb(119,119,119); /* Old browsers */
background: -moz-linear-gradient(top, rgba(119,119,119,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(102,102,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(119,119,119,1) 0%,rgba(102,102,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid
XImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
text-shadow:0 -1px 0 #222;
box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.1);
z-index:4;
}
.nonDraftPart._pe_q1._pe_J1{
border-radius:2px;
box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.2);
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
}
.o365cs-nav-brandingText{
color:#ccc;
text-shadow:none;
font-family: 'Open Sans', sans-serif !important;
}
.o365cs-o365logo .o365cs-nav-brandingText{
font-weight:700;
color:#eee;
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
}
.o365cs-nav-header16 .o365cs-nav-appTitleLine{
background-color:rgba(0,0,0,
5);
opacity:0;
}
button.ms-bgc-tp{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#777777+0,666666+100 */
background: rgb(119,119,119); /* Old browsers */
background: -moz-linear-gradient(top, rgba(119,119,119,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(119,119,119,1) 0%,rgba(102,102,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(119,119,119,1) 0%,rgba(102,102,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid
XImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
box-shadow:inset 0 -1px 0 0 rgba(0,0,0,0.1);
}
button.ms-bgc-tp:hover{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,666666+100 */
background: rgb(136,136,136); /* Old browsers */
background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(102,102,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(102,102,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid
XImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
}
button.ms-bgc-tp span.owaimg{
color:#ccc !important;
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
}
button.ms-bgc-tp:hover span.owaimg{
color:#eee !important;
}
.o365cs-nav-header16 .o365cs-nav-o365Branding{
border-left-color:rgba(0,0,0,0.2);
}
.o365cs-nav-header16 .o365cs-nav-rightAlign .o365cs-nav-button{
border:none;
}
.o365cs-base.o365cst .o365cs-topnavLinkBackground-2{
background:transparent;
}
.ms-bgc-tdr-h span.o365cs-topnavText, .ms-bgc-tdr-h span.owaimg{
color:#aaa !important;
text-shadow:0 -1px 0 rgba(0,0,0,0.2);
}
.ms-bgc-tdr-h:hover span.o365cs-topnavText, .ms-bgc-tdr-h:hover span.owaimg{
color:#ccc !important;
}
.ms-bgc-tdr-h:hover{
background-color:rgba(255,255,255,0.2);
}
._ho2_6{
width:50px;
}
._ho2_6 img:hover{
-webkit-filter: brightness(120%);
filter: brightness(110%);
}
._ho2_5{
border-right:none;
}
._n_O3{
background:#f8f8f8;
}
#primaryContainer{
background:#f8f8f8;
}
._n_A4, ._n_l1{
background:transparent !important;
}
.ms-bg-color-themeLighterAlt{
background:transparent;
}
/* search button bg */
button.ms-bg-color-themeLighter{
background-color:#555;
border-bottom:none !important;
box-shadow:inset 0 4px 8px -4px rgba(0,0,0,0.5), 0 0 8px 0 rgba(0,0,0,0.3);
}
button.ms-bg-color-themeLighter .ms-font-color-neutralPrimary{
color:#aaa;
}
button.ms-bg-color-themeLighter:hover .ms-font-color-neutralPrimary{
color:#ccc;
}
._is_x.ms-bg-color-themeLight{
background:#555;
box-shadow:inset 0 4px 8px -4px rgba(0,0,0,0.5), 0 0 8px 0 rgba(0,0,0,0.3);
}
/* Search button */
.ms-fcl-ts-b:before{
color:#aaa;
}
/* Search button */
.ms-fcl-ts-b:hover:before{
color:#ccc;
}
/* Search input */
._is_w{
background:#eee;
border-radius:2px;
color:#555;
top:4px;
bottom:4px;
height:auto !important;
padding-left:4px !important;
padding-right:24px !important;
box-sizing: border-box;
z-index:5;
box-shadow:0 1px 4px 0 rgba(0,0,0,0.3);
}
/* override search input hover */
._is_w.ms-bcl-nsa-h:hover{
background:#eee;
}
/* input sizing container */
._is_v{
left:14px !important;
right:34px !important;
}
/* search X */
._is_z.o365button{
position:relative;
z-index:6;
margin-right:12px;
}
/* search X icon hover */
.ms-fcl-nd-b:before{
color:#555;
}
button.ms-bg-color-themeLighter:hover{
background-color:#555 !important;
}
._n_P1{
border-left:none;
}
._fce_a.ms-bg-color-themeLighterAlt{
background-color:#555;
color:#ccc !important;
box-shadow:inset 0 4px 8px -4px rgba(0,0,0,0.5), 0 0 8px 0 rgba(0,0,0,0.3);
z-index:2;
}
.ms-bgc-tl{
background:transparent;
}
.ms-bgc-tlr-h:hover{
background:transparent;
}
.ms-bgc-tl-h:hover{
background: #444;
color:#eee !important;
}
.ms-bgc-tl-h:hover span{
color:#eee !important;
}
.ms-font-color-themePrimary-before:before, .ms-fcl-tp-b:before{
color:inherit !important;
border-color:transparent;
}
._fce_a .ms-bgc-tlr-h .ms-fcl-np, ._fce_a .ms-fcl-np, ._fce_a .ms-fcl-ns{
color:#ccc !important;
text-shadow:0 -1px 0 rgba(0,0,0,0.5) !important;
}
._n_m1, .listItemDefaultBackground{
background:transparent;
}
/* scrollbar */
.customScrollBar::-webkit-scrollbar-track, .customScrollBar::-webkit-scrollbar-corner, .customScrollBar::-webkit-scrollbar-button{
background:transparent;
}
.customScrollBar::-webkit-scrollbar-thumb{
border-color:#f8f8f8 !important;
}
/* checkboxes */
.wf-size-checkboxMultiselectSize{
border-radius:2px;
}
._rp_r1{
margin:2px;
}
._rp_05._rp_Z4{
background:#fff;
margin-left:0;
padding-left:8px;
padding-top:4px;
border-radius:2px;
border:1px solid #eee;
}
._pe_s1{
border-radius:2px;
box-shadow:inset 0 0 16px 0 rgba(0,0,0,0.2);
}
._fce_l{
margin-left:0;
}
button._fce_h.ms-fwt-r.ms-fcl-np.o365button + .ms-fcl-nt{
display:none;
}
._fce_c{
margin-right:8px;
}
.contextMenuPopup, .contextMenuPopup .ms-bgc-w{
background:#555;
}
.contextMenuPopup .ms-font-s{
color:#ccc;
text-shadow:0 -1px 0 rgba(0,0,0,0.5) !important;
}
.contextMenuPopup .ms-font-s:hover{
background:#444;
color:#eee;
}
.contextMenuPopup .ms-bcl-nl{
border-color:#444;
margin-top:0;
}
.contextMenuPopup .ms-fcl-tp{
color:#888;
}
.contextMenuDropShadow, .headerMenuDropShadow{
border-color:#444;
}

.headerMenuDropShadow{
box-shadow:3px 3px 6px -4px rgba(0,0,0,0.4), -3px 3px 6px -4px rgba(0,0,0,0.4);
}

._n_71 > div:first-child{
z-index:3;
}
/* divider */
._n_s1, ._n_t1{
box-shadow: inset 1px 0 0 0 rgba(255,255,255,0.5);
z-index:3;
}
/* select an item to view */
._db_M4.ms-bg-color-neutralLighter._db_N4{
box-shadow:0 0 16px 0 rgba(0,0,0,0.1), 0 0 1px 1px rgba(0,0,0,0.1);
border-radius:4px;
background:#fff;
}').'
'
I\'m an admin so you can ask me stuff.
34Acerio
13/02/16 at 9:45 AM
There is Stylish for Firefox too:

https://addons.mozilla.org/en-US/firefox/addon/stylish/
34Acerio
13/02/16 at 10:00 AM
Issues:

17 : 16 Expected RBRACE
error 49 : 16 Expected RBRACE
error 59 : 16 Expected RBRACE
error 263 : 8 Expected LBRACE
error 263 : 8 Unexpected token '&'
error 263 : 11 Expected LBRACE
error 263 : 11 Unexpected token ';'

It is not usable on Firefox and Chrome, for me.
34Acerio
13/02/16 at 10:01 AM
It is probably because of the thing were smileys show and such. Use pastebin please.
55.:A-MAN:.

13/02/16 at 1:25 PM
As requested: http://pastebin.com/sD211PDg
I\'m an admin so you can ask me stuff.
55.:A-MAN:.

13/02/16 at 1:46 PM
Apparently some people may be using different versions of OWA, here's what it is intended to look like.

Without theme:
'

With theme:
'
I\'m an admin so you can ask me stuff.
55.:A-MAN:.

28/08/16 at 6:30 PM
Update: http://pastebin.com/Cy9RXHp3
I\'m an admin so you can ask me stuff.
51umer936

30/08/16 at 5:12 PM
My school uses Google Apps.
Your mom just called. Check your phone.

v3.0