Online Users Page


QN

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

Thread: Custom OWA css

All categories Return to thread list

60.:A-MAN:.
6 years ago
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 6 years ago
35Acerio 6 years ago
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 6 years ago
It is probably because of the thing were smileys show and such. Use pastebin please.
60.:A-MAN:.
6 years ago
I'm an admin so you can ask me stuff.
60.:A-MAN:.
6 years ago
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:.
6 years ago
I'm an admin so you can ask me stuff.
60umer936
6 years ago
My school uses Google Apps.
Your mom just called. Check your phone.
1blackdragon1234 1 year ago
We can customize profiles?
New User!
No signature available.
1blackdragon1234 1 year ago
We can customize profiles?
New User!
No signature available.
60.:A-MAN:.
1 year ago
Yeah @blackdragon1234 though this is for something completely different lol. You can edit your profile in the settings.
I'm an admin so you can ask me stuff.
v3.2