Hi Chris,

The CSS for the back-office UI elements can be found in: "\umbraco_client\ui\default.css".

Just remember that this is a core fle, so if/when you upgrade Umbraco, any changes will be overwritten!

Cheers, Lee.

Hi Lee,

Can you please assist me where to make changes in the CSS because I've tried a couple of things but the backend didn't respond on it at all....I'll have this CSS:

body {
      font-family: Trebuchet MS, Lucida Grande, verdana, arial;
      font-size: 12px;
      font-weight: normal;
    background-color: #fff}
 
body *{outline: none;}


/*CREATE DIALOG */               
.createDescription
{
    padding: 25px 0 0 0;
    height: 170px;
}

.createDescription img
{
    height: 128px;
    float: left;
    margin: 0 10px 10px 0;
}

.bigInput
{
    font-size: 1.8em;
    width: 560px;
}


a
{
    color: #1541a9;
}

a:hover
{
    text-decoration: underline;
}

img
{
    border: none;
}


.feedbackCreate
{
    margin: 5px;
    padding: 5px 5px 3px 36px;
    background: url(../images/okLayerBackground.gif);
    display: block;
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 12px;
    font-weight: bold;
    color: White;
}

.feedbackDelete
{
    margin: 5px;
    padding: 5px 5px 3px 36px;
    background: url(../images/errorLayerBackground.gif);
    display: block;
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 12px;
    font-weight: bold;
    color: White;
}

.loginHeader
{
    width: 242px;
    height: 24px;
    background-image: url(../images/loginHeader.gif);
    font-family: Trebuchet MS, Arial, Helvetica,Lucida Grande;
    font-size: medium;
    font-weight: bold;
    color: #666;
}

.nolink
{
    text-decoration: none;
    color: Black;
}

.clickImg
{
    border: none;
}

h3
{
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    padding: 0px;
    margin-left: 0px;
    margin-bottom: -5px;
    margin-top: 10px;
}

/* deprecated down */
.propertyuicontrols .Pane, .propertyPane
{
    border: 1px solid #BABABA;
    background-image: url(/umbraco_client/propertyPane/images/propertyBackground.gif);
    margin: 10px;
    display: block;
}

tr.propertyHeader td, td.propertyHeader
{
    font-weight: bold;
    vertical-align: top;
    padding: 7px;
    /* border-bottom: 1px solid #DBDBDF; */
}

tr.propertyContent td, td.propertyContent
{
    vertical-align: top;
    padding: 7px;
 /*    border-bottom: 1px solid #DBDBDF; */
}
/* deprecated up */

div.propertyDiv
{
    border: 1px solid #BABABA;
    background-image: url(/umbraco_client/propertyPane/images/propertyBackground.gif);
    display: block;
    padding: 7px;
    margin-bottom: 10px;
}


.guiDialogHeader {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 18px;
    font-weight: bold;
}

.guiDialogMedium {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
}

td, .guiDialogNormal {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 12px;
    font-weight: none;
}

th
{
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
}

.guiDialogDisabled {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 12px;
    font-weight: none;
    color: #CCCCCC;
}

.guiDialogForm {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 12px;
    font-weight: bold;
}

.guiDialogTiny {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 10px !Important;
    color: #A8A8A3;
}

.guiDialogTinyMark {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 10px !Important;
    color: #606057;
}

.guiDialogTinyTop {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 10px;
    font-weight: bold;
    color: #378080;
}

.guiInputCode, .codepress {
    font-family: Consolas, courier;
    line-height:1.6em; font-size: 1em; background:#F6F6F9; border:1px solid #CCCCCC;
    margin: 0px !Important;
}

.umbEditorTextField {
    width: 400px;
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 12px;
}

.umbEditorTextFieldMultiple {
    width: 400px;
    height: 150px;
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 12px;
}

.guiDialogBox {
    background-color: #e0eced;
    border: 1px dotted #3399CC;
}

.guiInputText {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 12px;
    color: #333333;
    padding: 2px 2px 2px 2px;
}

.guiInputTextStandard {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 12px;
    width: 70%;
    color: #333333;
    padding: 2px 2px 2px 2px;
}

.guiInputMediumSize{
  width: 70%;
}

.guiInputLargeSize{
  width: 90%;
}

.guiInputStandardSize{
  width: 250px;
}


.guiInputDisabled {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 12px;
    color: #999999;
    border: 0px solid;
    padding: 4px 4px 4px 4px;
}

.guiInputTextTiny, input, select {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 11px;
    color: #333333;
}


.guiInputButton {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    font-size: 10px;
    color: #333333;
    font-weight: bolder;
}

.umbracoEditorBagground {
    background-color: white;
}

/*
.editorIcon
{
    width: 20px;
    height: 20px;
}
*/

.editorArrowOver {
    cursor: hand;
    background-color: #DEDFFD;
}

.editorIconOver {
    cursor: hand;
    background-image:    url("buttonbg.gif");
}

.editorIconDown {
    cursor: hand;
    background-image:    url("buttonbgdown.gif");
}

.editorIconOn {
    cursor: hand;
    background-image:    url("buttonbgdown.gif");
}

.editorIconDisabled {
    Filter: Alpha(Opacity=30);
}

.editorDropDown {
    font-family: verdana, arial;
    font-size: 10px;
    width: 80px;
    color: #666699;
}

.tinymceMenuBar
{
}

.mceToolbarExternal
{
    position: absolute;
    z-index: 100;
    top: -2px;
    left: 90px;
}

.guiTab {
    font-family: Trebuchet MS, Lucida Grande, verdana, arial;
    padding: 3px 0px 0px 0px;
    font-size: 10px;
}

.guiLine {
    background-color: #A2A2A0;
}

.guiLineSelected {
    background-color: #F5F5F5;
}

guiEditor {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
}



.datePicker {
    border:        1px solid WindowText;
    background:    Window;
    width:        170px;
    padding:    0px;
    cursor:        default;
    -moz-user-focus: normal;
}


.datePicker td {
    font:            smallcaption;
    font:            small-caption;
    text-align:        center;
    color:            WindowText;
    cursor:            default;
    font-weight:    normal !important;
    -moz-user-select:    none;
    padding:        0;
}

.datePicker td.red {
    color:            red;
}

.datePicker .header {
    background:        ActiveCaption;
    padding:        3px;
    border-bottom:    1px solid WindowText;
}

.datePicker .headerTable {
    width:            100%;
}

.datePicker .footer {
    padding: 3px;
}

.datePicker .footerTable {
    width:        100%;
}

.datePicker .grid {
    padding:    3px;
}
.datePicker .gridTable {
    width:    100%;
}

.datePicker .gridTable td {
    width:    14.3%;
}

.datePicker .gridTable .daysRow td {
    font-weight:    bold !important;
    border-bottom:    1px solid ThreeDDarkShadow;
}

.datePicker .grid .gridTable .upperLine {
    width:        100%;
    height:        2px;
    overflow:    hidden;
    background:    transparent;
}

.datePicker td.today {
    font-weight:    bold !important;
}

.datePicker td.selected {
    background:        Highlight;
    color:            HighlightText !important;
}

.datePicker td.labelContainer {
    width:    100%;
}

.datePicker td .topLabel {
    color:            CaptionText;
    display:        block;
    font-weight:    bold !important;
    width:            100%;
    text-decoration:    none;

}

.datePicker td.filler {
    width:            100%;
}

.datePicker button {
    border-width:    1px;
    font:            Caption;
    font-weight:    normal !important;
    display:        block;
}

.datePicker .previousButton {
    background:    buttonface url("../images/arrow.left.png") no-repeat center center;
}

.datePicker .nextButton {
    background:    buttonface url("../images/arrow.right.png") no-repeat center center;
}
.datePicker .previousButton,
.datePicker .nextButton {
    width:            14px;
    height:            14px;
}

.datePicker .todayButton,
.datePicker .noneButton {
    width:    50px;
}


.datePicker .labelPopup {
    position:    absolute;
    min-width:    130px;
    background:    Window;
    border:        1px solid WindowText;
    padding:    1px;
}

.datePicker .labelPopup a {
    width:                100%;
    display:            block;
    color:                WindowText;
    text-decoration:    none;
    whie-space:        nowrap;
}

.datePicker .labelPopup a:hover {
    background:    Highlight;
    color:        HighlightText;
}

.datePicker .labelPopup a.selected {
    font-weight:    bold;
}

.umbMacroHolder
{
    margin: 5px;
    padding: 5px;
    border: 2px dotted orange;
    display: inline;
}

.umbTagElement
{
    float: left;
    margin-left: 10px;
    padding: 0;
}

.umbTagDelete
{
    color: Red;
}

.umbTagContainer
{
    width: 300px;
    margin: 5px 0;
    display: block;
}

.umbIconDropdownList option.deprecatedImage{
  background-repeat:no-repeat;
  background-position:4px 1px;
  padding: 1px;
  padding-left:25px;
}



.umbNitroList{}
.umbNitroList input{float: left; display: block;}
.umbNitroList tr td{border-bottom: 1px solid #ccc; padding: 10px;}

.umbNitroList div{float: left; padding-left: 15px; display: block; width: 550px;}
.umbNitroList div h3{margin: 0px;}

/* Generel error / success / notice classes, as seen in the umbraco installer. */
.error, .notice, .success {padding:.8em; padding-top: 0em; padding-bottom: 0em; margin-bottom:.5em;border:2px solid #ddd;}
.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}

.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

Hi Chris,

There are a few ways to do it.  If your customer is using a web-browser that supports CSS attribute selectors, (like Firefox, Chrome), then try this:

.propertyItemContent select[multiple=multiple] {height:250px;}

Change the "250px" to whatever you like.  If it must work across all browsers, they either take a look to see what the ID attribute of the <select> is and write specific CSS for them... or find a JavaScript that loads after the jQuery library (who knows which one) and hook into the DOM?

$('.propertyItemContent select[multiple]').attr('size', '10');

Good luck, Lee.

Great Lee!

I used the one with the attribute selector and it works like a charm!

You saved my day!

greetings

Chris

Chris, remember that the attribute selector doesn't work in IE6... it's a bit quirky in IE7... and IE8 I heard it works, but no idea!

Don't forget to mark this topic as solved.

Cheers, Lee.

HEHE, so when it DOESN'T work for customer I can send them to Microsoft...............GREAT!

I had an account with same email but couldn't login withit....Retrieve password didn't work so I had to make a new account...now find out how to close this issue!

thanks again Lee!

eehhhh can't find link/button to put the status to SOLVED........

No worries Chris.  There should be a green "mark as solution" button next to the vote-counts on each reply (top-right).

Cheers, Lee.

is working on a reply...