Online Users Page


QN

Previous notifications:
7 months ago
New Blog Entry In .:A-MAN:. lists stuff!
8 years ago
Regular accepted your friend request
More..

Custom OWA css


All categories Return to thread list

60.: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).

@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:DXImageTransform.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,0.05);
    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:DXImageTransform.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:DXImageTransform.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.
35Acerio
13/02/16 at 9:45 AM
There is Stylish for Firefox too:

https://addons.mozilla.org/en-US/firefox/addon/stylish/
35Acerio
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.
35Acerio
13/02/16 at 10:01 AM
It is probably because of the thing were smileys show and such. Use pastebin please.
60.: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.
60.: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.
60.:A-MAN:.

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

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



Back to top
v3.2