Clarity

  • 1.  PPM UI customization

    Posted Apr 22, 2017 12:52 PM

    Hi Experts,

         Any one has an example instruction on this aspect ? 



  • 2.  Re: PPM UI customization

    Posted Apr 23, 2017 02:14 PM

    Hi,

     

    Please find CSS which you can use to change look and feel of CA PPM Tool, i have added a application instance name (BOLD item in CSS), you can use this further to add company logo, color, fornt and other stylings. Just follow CSS comment and change them as pe need.

    ---------------------------------------------------------------------------------------------------

     

    /* The Default Clarity theme */

    /* The main page background color */
    .ppm_page_bg {
    background: #04152d;
    background: -webkit-gradient(radial,50% 10, 1, 50% 100, 600, from(#052E5F), to(#04152D ));
    background: -moz-radial-gradient(50% 10% 0deg,ellipse contain, #052E5F, #04152D);
    }

    /* The workspace background color */
    .ppm_workspace_bg {
    background-color: #E8EBF2;
    }

    /* The workspace color title */
    .ppm_workspace_title {
    color: #112233;
    }

    /* The logo in the upper left hand corner of the page header */
    #ppm_header_logo {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAWCAYAAACosj4+AAABw0lEQVRIx62Wv0rFMBTGOzkJdnUrF9wuEgRRECHo4ODSwcExs1M2F8Fu4hScBBWLi25WfIFurn2EPkIfIZ7IuVDS/DnpNfDBpcnN+fXkyznNMs/YuP7hIAXqQNpSi3PF+D+Hb4sSpEAtSFsa8LkE5Rl1QBCGATVRNXs6FhCkd0D4ZOAqCowADQkwf9q6/dD7r0udALSSyiJHpOfKQM0AMipcMDkhM2a+D63ZeRB2sHZWlmCzKhDImJqP1hYeo6+yZPwhLLPLAFDrAgplp/Bk1LnehhlBtSSgiHeagOcU3kZbzANUUYFCx1VlMwYEYViTKlQTKAsToDoAJBMgBAZOvWUToFAR5ASQMrEorgVURmAkIWCPhiYfWTPHQ7ARj0DIcdH7L1OrAJDPL42reaYAlQGg3ge093Lgy07ueQFFBcojLUO4mvDy8dy1eeeByckeIlx9jcfKUeb34AEyYg6gOrV1FKndfaGuQt86Ek1fEhps62sFMgVo8+Zbr1F7osc87k9kqO27+6TAvrnLr7McVIGYC6qMffeMbyF7PuoIMA0a2zl/8XliYDpQHfucbRxwPT4XkT424DNu1aKJTt93GWaI/wJ/NIHZHSMBAgAAAABJRU5ErkJggg==);
    margin: 6px 0px 0px 15px;
    width: 36px;
    height: 22px;
    }

    /* The logo in the upper left hand corner of the small page header */
    #ppm_header_logo_small {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAUCAYAAADskT9PAAAE40lEQVRIDQXBT49dZR0A4Of3nj/3zp2Zduy0gB0KWDQ1SosuiIFEEklMDOB30IUL134BPoXxG6BxYYwL3aiJSxNjQtAEqRQCSGkLnc5M595zzznvz+eJxeGNBAAAmUwbMW/plkRDHRm3slvS9ESAHFNuEsROgNymHCnLEH0QAABACwAgk2lgsSufumW68nV2LhBBrawfae++xxd3GDa0C/1Ra/GNTvlKo/RBkBPzWTXe2Rpuj3JLLAIAQCwObySAWqmj+txLphdel3uX6RZkIolCEuOae59Y3v29S6/8T3v9grIMmmBOoASoQzV+NDr5w2PbjyfRBQCIxeGNBFmZR/XWj40vvsk8MW/JRFAaciaTKFgqO2uXr71td++/6rggiCbknCQgKHvF9GDyxS+Pjfer0geAAhDToD7/ivHWG4wbpg2ZND1NJ4bHaGh7ciYfqydLD26/aXt+UbMzgfl0piG6IJHUk6p7orV6eUfMCQBaMG/l7iXzt39EJnVG0C6Ue7c1//qTOL3HzkXzzR+bn7rBtKFdq8NTHp/dNP/nz07/Osshlf3iwhu7+uu93CSo29Qftcp+UQeiAVoRTFv12nfVC08yPgZKy+ZM94/fcv827YqHn2qHc/WHv5A7+0wje62zT67Z/G5tPk7aVv1wklM6/PmB0hU5JokuRItNIkCrznRL9cp1olATaBeaT9/l5C6LfaLQXmD9UPe3X7HYpVaZhZNT9Sw0h42ybCiN9kKRW/QASCQA0Kozi5W6c0AdCSSaVqyPGdf0e4AgiQcfyKESLK42Fi/taK9e1BwUzX4jlqGsipxSjgkAAABaOdOtWB1QZwQSyEomAgkg5057pdh/fdfyhaVYEiWoZBBB1mQCAAAAoAWSTAAAAABQt6l7snHppxd1R616VuUGPfVxtf1ga/vBSLD3g11lVeSYAAAAWtEyblifsH+FeQtk0iwoLRJIIqr913Z11zr1eKYhSjj/+9rZX85N96scUnu52P3+Lg1GAAAAilIYzpX1I5qWRGAazIfPsrrIvAU5Vc1B0T6zkuuZIBbF5r3B8W/OjJ9X0YfoQ9krNEkCAAAARWmY1sr922QSBcE0yEvPmJ/7nqgT41rMW/XoRXXvkHkCEWn6bJLbVLqQM3VTLb7Vaw4auU0AAADQyqRdKp++I05ek3uHjBtg2phuviGvPK88/FjdO1KfvS6nt5W+mpETy5sL63cG48ez6Nh9eWnv1RUTAAAAAC1oOnF6T/vuH40v/4TSUkeyIsxP3zI/8x1qZegMJ09b7X6IXg6pvdI6/NmB7UejshP6Z3vRhTpUAAA5p3kza3dbgqZdXX4LlEY8uKPUSf3qN2k6shKoE/NEVhTb4ar+4BP9zrHMhonSF91Rp73UijaMd0d5npr9hiDaMB/PfJYObuwbvhzVKTXt6vJbIILSiM/f0zy4o+4eim5F09GvaHsyhK28f2L+5/v6vQfKfq+sQvQhp2RIw/uDR78+1ewX3bVWDslMBsvsHb16xZf/PjU8nMTi8EYCgEymgdJwcFU9OFL3Dokizh9pzu7z5Yecb1l2+mda/dc62pCns/Gz2XBnZKZ9otFcKNQECvWYpi+2Dyd1rmJxeCMBAADMW6atqBOJ0simo+2JQpLbVDdJpmhC9CEWAXLCnABAS9ZU2kLwf2dpZf05P+LyAAAAAElFTkSuQmCC);
    margin: 5px 0px 0px 10px;
    width: 32px;
    height: 20px;
    }

    /* The product name styles in the page header */
    #ppm_header_product {
    color: #fff;
    font-family: Arial,Helvetica,Verdana,sans-serif;
    font-size: 21px;
    font-weight: bold;
    padding-left: 16px;
    }

    /* The product name styles in the small page header */
    #ppm_header_product_small {
    color: #fff;
    font-family: Arial,Helvetica,Verdana,sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding-top: 4px;
    padding-left: 10px;
    }

    /* The product name itself */
    #ppm_header_product span:before, #ppm_header_product_small span:before {
    content: "*** CLIENTS - Clarity PPM Development ***";
    }

    /* The small person silhouette image next to the user name in the page header */
    #ppm_header_user_img {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAA1UlEQVQoz42QywqCUBRFnfUBfUR/3UAigrIGhUFpA7MXkWGPQTgoKw0q0CtYaMVObw8KTRosOBwW99y9mVQ6w/xDZMELA1QbfSSKZ8+Hd7vC8y9w3BNiRV7owSIObOeBRQgqfBsRsatMYR4O2AUY+z2dpYEaFfMVASvDpCzXGyy3BrKFOmL/2Bmp0AJJW+mQhxMkptZ0nYqJqZXZgp4Nz4/ni/gXwxDmB69AX+LRsmg1xHVhhxUR51HVc/cWy7wMlhOR41pgiyKd2ZIQzE2UahJiw/ziDmCs2ceka4yKAAAAAElFTkSuQmCC);
    height: 13px;
    width: 10px;
    margin: -1px 3px;
    }

    /* The color of the header links */
    .ppm_header_links {
    color: #92bcd6;
    }

    /* The color of the header link divider */
    .ppm_header_links_div {
    border-left: 2px solid #21354b;
    }

    /* The color of the header logout link */
    #ppm_header_logout {
    color: #ff8800;
    }

    /* The main omnibar/navigation bar below the header */
    #ppm_omnibar {
    background-color: #7791AB;
    background: -moz-linear-gradient(#7791AB, #4C6786);
    background: -webkit-gradient(linear, center top, center bottom, from(#7791AB), to(#4C6786));
    background: linear-gradient(#7791AB, #4C6786);
    -pie-background: linear-gradient(#7791AB, #4C6786);
    color: #001122;
    font-family: Helvetica Neue,Arial,sans-serif;
    font-weight: bold;
    }

    /* The omnibar button hover styles */
    .ppm_omnibar_button:hover {
    border: 1px solid #566a7c;
    }

    /* The styles of the primary navigation menus when hovered */
    .ppm_nav_menu_hover {
    background-color: #f5f8fa;
    color: #335588;
    }

    /* The global page refresh image */
    #ppm_refresh img {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAREAYAAABr/Zu5AAAFnElEQVRIx42VfTRUaRzHZ0zRMF7GhMyYZgxGTAxFqSxFhyglSaLWbrXbSWodpynU2p1osSqJWC8T00yDKWl2vCWvGS8r47U6i4QUtto2Bo28PNvdO3f3NHuczOePz7nPeX6/+71n7vO7KLwujbbWDoX6jLNgY/xgq7nBxn77qZF1ZB9Sh45RrC/79Pq/+3wmgEoJbI3TsA0GCD/R3q35ktpEbrYIt6dTnEwdmZEby41aLRzsbmzWMXSwUnVo3foL4YiRNyNj4wucHK7TWgcbf9FWsll/Z7BqyCKDYJbA1nHDE6k0pqWZt74WVcdyuXkwS5/dnwR2pXDQtxOqmSVSvq1Y2rC9gXzToxjdWFBfy2WKjCX7ig9eJeXcE3tsozmFepb5za+osAlzCt0Rttw3/Zgwojo7Hj+3GwKzDPzzQxOVAqA7FU8QpR1CjmMI6E/wa4gCUyOLR/zGInJ93yPugOxt/IwtAIu1MKE8QmrQVcs5UTDyAMPtRtYBBkJrJRxkaZlSELWnsI0dcTl6RSubLL3zrErPNrUNRDxDvx6SPwYAcc1cW29/0rQhb0SsJuloM+GLxO/rJ1s31Ka3pw+w5X8o71c2SIBYWQIH0eAjQXbC1i5R79Erol6xJMZdSMvPr8zr7WGNlk6hAUCcVnhzslSjOLOuru5hXZdjXCOz6WYzydY/6wJXLBhae0545o69SGZbcQtTLm2pfZ6vXI8Y5ENYWMNBtLSU/hL9A5hTqqPqB0x9a1ntvP652eQnrJcm420AZGjnm5dz2zmNeyDWt0wOTXHe7zW6nDiTNpM9s+LHPakH845WGdOvPuShS47zHyN1CxkUQDAOKAXB+GmXU04xrYmhTnz3Qz42jp6dJoOufwUCgDg1PiuIdy1Q+E4KQRkdJ8tIE4bqUdvkPksCddXkEZ6xtemZHup3YqsK27Fj6++MVRu0s8axhV7V37VLZZqF8dUFHQTZ2cIT1ZkdeBkLVEKsCoGDaK5GjmmIRpaBHa3dUH7i/Nm3l6yi3aXZffavKwFAfEMbwuUZXKh7GraKHfKOhbpAqIYL9udic0t1P1TtqemuC6I9L7tfIa0Zslk3OQNhPjD7J4TZBBBDkPThPssa/h1Ymr5EgfkH3Qnfzq9yTr7wm/9tabfBKB4AxFe+ST3DGfQv7x7pdX3KxUvgBqhQJIgzbkdnQJaKi/MHr18Dg3UmHK67CX2LrMKTmdmkAinTQbkf2A5BUPRRpSudGuxyzVDt2/hhE+LdXTXTHZmz9yXsxxovWADEjqV55fVLDNh9MdNxevSt9qdcX/kcwUXBderDsHVpsM0i6cN2512olICfu7Lc7zIeJCB9RFYPSF2U2SSQDUH5HQ6irjxHVEKwNdoZemGGw2xe0iR/SzOvhtnBGPz4liP+vvxiIqc3m7HP/6D/YX9TuiXd3mdzFMXNJMDG1PGdsbddmTPO45DhqyjvRBGvP6dYuf7S/utfiI63BIE2CLMYxfEN+d9kxT4nSMh5aka24Wt97W1MzuVsEl2oM5f3VzCl1/o+vu2Ik9n8ylLK6x+i2SmxudzG+9HxKQ/zrOplGYRb+VWksd3K+7kcsX29h7x4fikEcxjIIIiKOaKasdC3ZqdxhqkKPVinLNDtsH/IlGtAYlpOn5jxhlvGaz7WMw3AYn0VyxOXJL7RqxiRBEm/3hE2nwtBq4ID4OSKES/53FcX5e2y28aHisOF08JbIsJpumdSYzYkYyOt2XuTxvhBbVYp+YKjZd2yjpRBQcE9W5koGqQM5opbN12mZGoI3SOfjXMgrBtmsyGo5xVz4w1sjOciv74olOJ0OCiOa8+9lxBaJ4u2QJAvVnlBrGrocIVYbTdMgjD3m5qDICtuTKDCxg4gfZC+iw6yQDCh4okUc0C1U3GjvE+NrCP7UMKF+v4NuRVchkpi8c4AAAAASUVORK5CYII=);
    width: 16px;
    height: 15px;
    }

    /* The global search button image */
    #ppm_search img {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQEAYAAACgoUgcAAAFBElEQVRIx2MQFFJSMjZhYCCOZrwEodmdIDSvB4QW8IHQ/P8gNM8aCM32BVUfbvMJOcAPQrO0QS2cB6EV3klGqaUZl6jm6MgYP7FeJzPJ3sHFxFNDzMBLwl8txEzoje0qtxcBGkLb9DmsZ3no8QmgmgMzl2iHwDSK7hG+Iv9NR0LtjzybqoK2jcKOM8LXVz4qzZt37+frnz9Ej+o/3P/u+2/3R/aPJN+H/1798PmD/W/P//y5+fnd5Jfvv85P00h0yjDJ1+Dii56RmpSvw7KLSIfAglJgnsAOmTkaDeqnUouyJuVHaGXc2fry97fIKzcffH7X+dvw/3+i6cq3P391X4y/mfz4/tvFInvq7NrC+wqZ/Ag4BJYGFN4J+IhekA5RMbup/Wzr59Cr7vcYXz/+cfX/fxh98/Xzwi/cR/Uvpd5XfPW/Sumq6SPpd4oVE+64v/z4be1heXT1d++/3vhj8oWPM3LnxS8JZj5CwCE8a/g4JL+pPlG/s9P0qPwF66I7t0pfbP/G+P8/jD5Sf+H+nfS8eU4nQJC/K0gBBNlfhF6JyIpmYH8UeC98UqwHn8C10MevP0wt7ULXf2vqi4lfZyY++d4OggwNOBzCV8WVICAnek/5z7nPd4VfWR/vvlb6VPnT+f//L+y+9/6N5rFyExcQFGzBlcZE+FRmmKpwWzjIeSmEqAheu3r/SebHzwevwsy51vxU9tP2DR+hDnmBwyG897iC+H+IzlNed+r0zchnL493X1J+6Pw++v//Q5kXVO987HlvfMWEy8SB+xH+3MazRk3MhMHxldSeC+33rd+8bV4NM+eSIZD2PXAQ6pB/OBzCdYeLhV9LxE9J61jx1cLHuce7z86/a/p67///+/zPlN9c2fNeb5ZhlIkE7x+07AilWZUgtGSU6j/jV4435HjOlN7e+vL1ZFOYOWc337V8vZmgQ9iiuI4I6ohPkT+35/TpszdPrg48yXpT/IXg///Htl/rfRr42LqYo/Jcg7zqG8UCnUcWYYI+qAWbdIXcF90pNhbKQuujd/Ye5pW0OnH5xuXnex+8hplzUv+m6gvWhYpQh1zC5ZAvfFOkCzR8FAqmBi/sXvM2bNGRxqvcT0qBiRRK7zt4bvHd/O2+tWEtZ7sPKhcZFVgdcBaQ8jIRsT3mXiGVsfDi6tgtztLbDr+9Evx45sXr6PqPVl4tfhLq5AJ1SAiaA5i2QWhhBt53khtUSzQZWqb2X57l69G27/f56/cnfjx4QP+i9kNgqofR+5svpD9Q/+i9d/U557u7j9Tviz7PfK/z8Fl0dXBa98LzB42TTB/cBEHGE+jZFxq3XH18m2STdESU6zgP8ZUIayhv2r7wxMQbsVeX79E/O/UuMLXv4j9tetv0sTWMT5DmPJt8d/KHubv1z0jevt+8ev9FEGT6AXEIQwm6Q+ZAU/kv9iZ+FrE2Ra0Vn3eqn3Cc+3HH4lOZt37+/7/u5v728/yr+hMOpV/Ky9BwamXuvznzs0nZ2ta9c8/MrV618emhxou/Oxk3Hz/Se0W/fe7m6MOnL8umn1vyfYPtrv2SVjOCQZD5DsQhCAdghAj3G/FryofYntgecX7luURfYIv9Md1rjz/+nX93/cR9xg0/peaAoOAEtTMgyFoFKUeYPkAKNE4ZSIHGyZUkB4LsS4pyQJBlS9NtEGSYR3LtCwGCWWy/QFD2Hv8bMLwDcQjDMdKaDcTTACroWl16NSLkAAAAAElFTkSuQmCC);
    width: 16px;
    height: 15px;
    }

    /* The home menu image */
    #ppm_home_go img {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQEAYAAACgoUgcAAAEAElEQVRIx2MQFFJSMjZhYCCRfgWhWa5AaHYbCM08DyrvR6q5JDqAsQVCcyZBaEkhiRC1Z6ZVciLmN+z2uC4SumbKZtfiwcLuRqqDiHXAJQjN3QChFSJkItQ/GPeoJexsPJx8ZqbDrbvBrxS/CS7bvyx0bfLm73Jubiq+z0JXceqghiDZDmHKgdC8QRBaOUEyRfmNXon6riO852NvPk8QeSD5du4v44/eDz6/6/xt+P//fds3i3/KX7q5yXaX6MFk6W0+VSGLYk5xvkD1ENEOYWaB0PzbBP4oXDFYo/pK5Jq8lmaN5qfD089X3uot0LnH+Prxj6v//+Oi7y5/Xf8j9cPxC7/vPHz+24LB9UaAQ9QqzidQDyrgcogfamITNOCPkm3QXqE+RWCSlJryHq03x/OvuD9w7BO9Vfpi+zfG//+Jpq1flH7d+mHu9cKn3B93p8zw7AoVS1jCaSD2T32ShQbMwwzoaYDXg/eK9ArNOpVfPGWiu+QZtBtOhl/nfXxxdeC10qfKn87//08pffXpE/OPvUXXfF9F/krjYctznRJ0KP4Dow0sLezi+yb7SueBwDn3Ap9pgQn6AkeYL4nfN179+ZLyQ+f30f//U522BdKOCxXrhNr5J/Az7oGFiBkbGw+XkADPjSnS80NXno24dXTrldWP5h//fqr65vkXko+Pnp1/1/T13v//Kab77wq/7r7w8ezmu5avNx84eM757uzXrx3+YSRW5kvsi7hL+FI4w3hDBAPk1WasXNK5fmbYopOsN8VfCP7/Tyl9ovH62qcXnU89uAmCTC7f20GQoQhHrmG5xRcldUXdT3bf1OCF3Wvehi060niV+0np///o9EHxi4YPTI/qH3x8ifuh9JH6w2uvCD+Ofvgcl/ojtpdvP8qEOYThEIHsi3DIJMV5a1clhi06oH9R+yEwF6DTTidAUGSf2QM7NlcdcZNdz0+9v/mwfS4u9Qc0LxjfVyfeIXZ8YlISanLSHP26c9hXsIYt2qN/dupdYKpHp2EOUT9kdM/2j+Sb7YrHe6/dbZ+LS/2e5DPn7ygS7RCmHJ4zYgsUKoQe9fTPXL8UGDU7Fp/KvPXz/390GuYQgzbLMCcNoU2bjx/pvaLfPheX+p2cJy/eLCXaIQxzuEuE2aRmsBtk7StZVvvIKmOZ/7bpR4/3ia6YuOPvCe+e96tu7s4+dbt7o8MVxzonHZ4tpmo2B1yiODRWsu+IP7baO2dT7+GTl2+32W8+e9T8amHL6y13jxVeu9i8etvLY2evzlbJgjokiehKj/8NCDKfkpoDgnwqamdAkOePiQsIcu+BhAjjA5j6JDkQZL5UlAOCbG5Nt0GQ5cOMYBBk3rD/IggyLEK3BwCiy5rZS8OqwgAAAABJRU5ErkJggg==);
    width: 16px;
    height: 15px;
    }

    /* The Current Timesheet image */
    #ppm_timesheet img {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAACuElEQVQoz3WT+0uTURjHX83Ksh+66DTULmSgBZpBzb+ggiChDAIRSkT9QchfKgKl1LIkraRMaxUUSKAIJS4nk3nd6y7O5e7v3rm9295t72xzTm1z8/J0NmdtWgc+POc8l+95zuEcDACwaDLYhfF7MnKTMQw7gshEHEbsRySE4vvOFsXkxxafu5SExR3IQcnnr9+qKn718ctNvlBWNIjLr3V+HSwsq645sXXDP5N0dmESFn+oIOVozpVu7lCTybVM0gtrYPX+xeTy85UzzsvbBFi5F+J37mXlpx87dVWsonrpBQCzZxVM7iAiELFBoOZWgHIHgySzWB4jcPAkOw21XdDFHeaECg2zy0A6fQh/NKvIRxtm/SjuDyhMP/PCAnmlrVjcjoTjxWW3q1QWD6Nn/KCzL20DxcTyGWcN4fgV8S32kI6FROxMWVsc2p31ktP5VMf4QGX1wg+T26u0eEGFzqK0zIcRKoyVCrPHtblGBNX0fCqWX8FB9Vja49b3DSItbZAZZn1ClUXbNyJ7ISWd9mnKAxKdXTChtr6RG92wgcuKrFxBzaVsXASGpdY/f9uIa6yMWGcPiAkmIJDpBT0D4/cFkwSHL9bUignHkkTPQBjC4ZIQDDFJOlmbAokPWzrqRToH4Fob4BobTGjtMKqgbL0jsoahKQNXqKbXERCFR6SzJW8KYCXl1Rf7cTU9rrbB8DS1MjxthhGFGc3N6xEbAvkpHyIUe4dr6F0xr6qp7VPTd1xr54l0rkHZDGxgjBBeL/EnDXpkJairzJiXGBpZ2afT7tY1V3BxzdqA1AADUhL6hGpRP+qVJyGBJ9EDT0wY+8am0v/5FyJCyXUt7cXdfOkYF9dCF1/a8W1UKeNOaD29Y8p2rlCT89/PFM2NktKMO7WN7HsPnmQ9e/0hu/1zd9ajxubdW/N+AwgUmpcbd19iAAAAAElFTkSuQmCC);
    width: 16px;
    height: 15px;
    }

    /* Divider bar in omnibar */
    .ppm_omnibar_div {
    background-color: #6F89A6;
    border-left: 1px solid rgba(86,106,124, .75);
    }

    /* The history/back button */
    #ppm_history_back, #ppm_mnp_history_back {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAZCAYAAADaILXQAAABu0lEQVRIx62WPWsVQRSG37N71/gBRiERIrnFlSAYtRAsrcRCsLCwsLe2sLOwFlt7/4SVjSAqyC1i8CPIBQMmiI2E3EZ2Z86Z3fNa3MVgvXNg2meG5zzFCAC4u4hIBeB4fyoABQaO9OAT219na28/bF3eme2uNiGWyDBC8tiXb9/Xnz5/cfPqpY29+3dv/9qYjDUHfARg6fW76ebmxQv7jx8++EGyNWudIAFwMHx37+fqvTu3ttVS5+6tO53DuP/gVV035dq5FY1q3rYtSSCXlqJzF5KMUZFSCwKSCw66w1IrIaqYJQHyvRwkYZYkBIWqydBF/gf3BRxFoRKjgmReLWpJSEgTouRcKJyEqkmbOqmbKMxj5ci5mgkoUjdBcrV4pEWTdJ0jO9xJRDUka6WugzB3iqomMaZ+oWT2WkKMUjcxb4qLzg0hqITMKXJRS5KohhA160K7sizZNKFceDfkhNvK2eV4cDg/WZVLtaUk7p4NrtevXdl/+erNeLI+mbuzM0tZ3i4kSwDLj548u/FpZ3ZmVFZzQP7kUCN95xWAU++nH89Ptz6Pfx8cni7LQkREBsP7C4pe0yjXv+UvH1VDoNewpvsAAAAASUVORK5CYII=) no-repeat;
    width: 24px;
    height: 27px;
    }

    /* The back button image */
    #ppm_history_back img, #ppm_mnp_history_back img {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAPCAYAAADUFP50AAACMElEQVQoz2N49/6T+Nv3H/HiS1dvSW3Yukd+664DcrfuPJAEiTE8ff5aHBe+euOO5KKVGxUzS+qNQhJy7Zav3uh29cZtQ5Acw537TyTQ8dUbdyXXbtolX1zboesVluIWlZSTMmX67LS7z94tevnhe39OXoEuw+VrdyRh+MLlm5KbdxyQrW2bqBkYm23vFhAdn5CWk7t514HeOy++PH7w7vf/Z+++zY6JSzBmOHnmiiQIb9t9RKa9f5ZaREqhpa1nWLirT0heW1df3Zkbj8/dff3jPww/fv15dmR0nDHDlh2HZPqmLVROyK4wtveN9jWxdskNj4wp37zvxK5rTz/9uvH8y39kfP/Fx9lhETEmDPOXbpBPyqky1DW1S9TWNy7tnTZvyZnbLz5cfvThPzZ85+m7OcGhUaYMsxauk3fzCbVLSMudvOfU9Ufn7r75jw/fePhqjn9guBlQ43rZ/NJGDXMru4a5K7ceOn792Z8TN1/8x4Uv330+x9svxIxh0swVciCcnF6kbWFlHxQaFd+6ctvhM4evPP6PDZ+/+WSuu1egOUN7/wJ5ZBwVl2Hs6R0YXl7X2rPxwLmb+87f/4+MT197ONfJzc+CobZ1ujw2HJ+cY52QnBE7efbSaVuPXnmy6/Sd/yB84vK9uXZO3pYMRdX9CvhwblG1Y01dS+KqrQcWbjtx493RC7fnWdl5WDJkFnUoEsIZRe2KXX3TXXfvO5x3/srt8tCYPA2G////k4UB8xUIdxHpXs8AAAAASUVORK5CYII=);
    width: 14px;
    height: 15px;
    }

    /* The history drop down button */
    #ppm_history_dd, #ppm_mnp_history_dd {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAZCAYAAADTyxWqAAAByUlEQVQ4y62VvWsUQRiHn9kbzJGowRThRKPxE42YkESFpLESsRBFMApCCsUm1nZW/hvWFjYWdhZWaVKIlR9EUInY6YEm7s7OzrwzFt7FO7HITnxhi2WWh+f32+VdFWMcY+sTAQ9YwAAOkO6hXrh7/xI15+ihA+tTE8c/3Lh6cRXIu0AlIuN1YY8ePx1dXnl1Ym52cu3e7ZsvO0C0rZytC1u8fvnLyPDu/Mmz5/N3bl1bbQ7sMEDI3r1fa5nShjpXWVq5cH6uPdhs/nixvLIXaADor+3vS63RkQfUn9hoZFVemCEgA9AiQZnSqgQYIQSyLMsABaC9CMaUibBIF/TbzHuKoiTVjBg377XzovLCJMfsYaG99+RFasygIr1mzrM9s9hnpnLvVXpn9Js555Jg8g+z9M7k7868V0Vh+C8xvZftvM3+mCKCMTa9s96YXkSZMt0shD9q+s3bjw9JnBCiCiIeCJ3lWKlUmPdu6NiRg+3u2ta2ckkgYzf2zU6dKubPTn/bNDN2Y3+taDEMhCDD52ZOq5nJidfAz85fC31m+mRrS2s1RkKIYdfOwfLw+NjnxYUrn4B1oOo+o2KMe+qIdfpxgFdKSe939gt3lDxyYYK18gAAAABJRU5ErkJggg==) no-repeat;
    width: 17px;
    height: 27px;
    }

    /* The history/back button drop down image */
    #ppm_history_dd img, #ppm_mnp_history_dd img {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAA7UlEQVQY02MIiEzx9PAPjwkIT4iJSsyMTs0piahqaPdbvmqDw/7DZ+T2HTotxZCSkds1f/n61cvWbV+1fvv+ldv3n1h+4MTFZeeu3V9y+96j3PlL1soz2Dm4VB+5cOfRlYfv/yPj01cf7Dl/8ZrrinW7ZBi8/MJcQyLiGvadufnm2NXH/0F4/5mbt9dt2JK1cdsB9bmLN8oy9E5ZIu/tH+6TX1bXs+3o1e9bjlx+N2HKrIqFS9eaT5q5Qg6EGdr7F8g3ds5SCImI92vsnDytvW9Gd2vHBGeQOAwz1LZOl4fhrLwq07Lqdn1kMRAGAC4ijig3F/N6AAAAAElFTkSuQmCC);
    width: 9px;
    height: 7px;
    vertical-align: middle;
    margin-bottom: 4px;
    }

    /* Button styles */
    .ppm_button {
    border-top: 1px solid #c4d1e1;
    border-bottom: 1px solid #889ab5;
    border-left: 1px solid #bccee4;
    border-right: 1px solid #889ab5;
    background: -webkit-gradient(linear, center top, center bottom, color-stop(0, #ebf4fc), color-stop(.5, #d9e9fc), color-stop(.52, #c6ddf6), color-stop(1,#c3d3eb));
    background-image: -moz-linear-gradient(center top, #ebf4fc 0%, #d9e9fc 50%, #c6ddf6 52%, #c3d3eb 100%);
    background: linear-gradient(center top, #ebf4fc 0%, #d9e9fc 50%, #c6ddf6 52%, #c3d3eb 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ebf4fc, endColorstr=#c3d3eb)";
    }

    /* Button styles when hovered */
    .ppm_button:hover {
    background: -webkit-gradient(linear, center top, center bottom, color-stop(0, #f8fbff), color-stop(.5, #e4effb), color-stop(.52, #d1e4f8), color-stop(1,#c5d5eb));
    background-image: -moz-linear-gradient(center top, #f8fbff 0%, #e4effb 50%, #d1e4f8 52%, #c5d5eb 100%);
    background: linear-gradient(center top, #f8fbff 0%, #e4effb 50%, #d1e4f8 52%, #c5d5eb 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f8fbff, endColorstr=#c5d5eb)";
    }

    /* Top-level tabs */
    .ppm_tab {
    background-color: #B3C8DB;
    background: linear-gradient( #B3C8DB, #92A8BE );
    background: -moz-linear-gradient(#B3C8DB, #92A8BE);
    background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#92A8BE), to(#B3C8DB));
    filter: progid:DXImageTransform.Microsoft.Gradient( GradientType=0, startColorStr='#B3C8DB', endColorStr='#92A8BE' );
    }

    /* Top-level selected tab */
    .ppm_sel_tab {
    background-color: #E8EBF2;
    background: -moz-linear-gradient(#FFF, #e3e7ec);
    background: -webkit-gradient(linear, center top, center bottom, from(#FFF), to(#e3e7ec));
    background: linear-gradient(#FFF, #e3e7ec);
    filter: progid:DXImageTransform.Microsoft.Gradient( GradientType=0, startColorStr='#FFFFFF', endColorStr='#e3e7ec' );
    }

    /* The dialog window close image */
    .ppm_dialog_close img {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABQklEQVQY0wXB72rTUBjA4d97zmlG/6RN5oXMCqPKYEixmDE/eRVehLfhTeyTbsLo0E2YHRRH55W4Lsk5qWmad88jZ9cPOhzFnF9c8viYC4CidFxEup/qaTalKD2m1+/RsR0+nGSkaaIiYK0lSUb6fvYWZx3dbhfz7et3vA9YI2SzKUmSaDIa6Wx6jBPB+8B8foN8/PSZF+m+Ztk7or2Iuq4BiKKIpt7y49eCPC/FqMK/9Vou5z8JvgKxIJbgN1zd3LJeP4lqi2O3AxFolW3dAALAttmibQuqqCoGI8TDWI+OJqhRQuUJlUdRJodjBnFfETBxHOub1xNaEUKouP29ZHH3hxAqWoRX4wP6vb7Kl7Nrdc7RNA339yt88CJiiAcDHY9f4pylaXaYvMjZ/K9YLpcURSEKqEJRlrJa/WVTb/C+5BnUl5z8M8wxIQAAAABJRU5ErkJggg==);
    width: 10px;
    height: 10px;
    }

    /* The dialog window maximize image */
    .ppm_dialog_max img {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAAwUlEQVQY042QwUpDUQxEz+TdInal+CmKIAh+d0H8Bpdv66a4kq4Um+Smi9unFTedkASSCcxEL69vxZlonsH55Ai223cEIEMI7ISh0W6urmnpyWbzLJkhM0yGTGg5FEji6fGhbB8OBVShsR6oUTICqoietPCgxoZptfqjsYA6hnvS3BMKquD76xOkIUVDQu+daWpkJi3SB7P4r1miTQ2q6JG0vQe393elxbpOv/Dr4WJ9SZvneQy15JEiA+nndx+7HQelyFQZXlydTQAAAABJRU5ErkJggg==);
    width: 11px;
    height: 10px;
    }

    /* The dialog window minimize image */
    .ppm_dialog_min {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAdUlEQVQY062OsQ3CQBAEZ5Z3DvRHGZRBEfRADTThgBIMIsAkPMELicwf+JKVbuf21sPxRM+UWmsfSP10JsLKr1/PByRoSABDCAa07U0oCAoGkg0qJk0VsPnny7Ui+Lugpf4J43ijbPe7xX7DUCjTdF8E5/nNF1/ZGUbPlVnmAAAAAElFTkSuQmCC);
    width: 10px;
    height: 10px;
    }

    .ppm_dialog_favs img {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAABXklEQVQoz2P4//8/AzacWNErnFTRK4JLngGXRE7T9HggTiJZY8e8jXs75206RJJGfmUrrpnrD32ftfHwTxkDdx6sGrMbpwkAnSTCwK7EwcDAwA7CQP9FL9199v+yPef+p1T1x8PEGVjlObKBakF6QBoVgRrndi/c8m/W+sOfpqza+37GuoO/1x259h+EZ6479BskNmvDoY/dC7f+y22esSCzfooy3OrK/iXFszYc/r/55O3/G4/f/L/28FUwBrG3nLr9f/bGI/+rJiwpw+rHgLRa3c75my/CNMFw14Itl4Mz6w3wBk7DtFULQIo3HLsBxiB24/TVS/GGqrCaLTfQf19AGvqW7Hjat2T7ExAbKPZN3tiLF6fG0u4FoSB/Ns1Ys5Fd1pSPQUCLB2jbepBYee+iKKwagaHLWNw5b2lJ57w8dGcBxbOBeAVQDRM2jVzAOLPAlVJSKvvMgWq4YXwAZqncqh1neBMAAAAASUVORK5CYII=);
    width: 14px;
    height: 14px;
    }

    /* The portlet title bar */
    .ppm_portlet_title_bar,
    .ppm_portlet_header_actions {
    background-color: #B3C8DB;
    background: linear-gradient( #B3C8DB, #92A6B8 );
    background: -moz-linear-gradient(#B3C8DB, #92A6B8);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B3C8DB), to(#92A6B8));
    -pie-background: linear-gradient(#B3C8DB, #92A6B8);
    border-bottom: 1px solid #aebdcb;
    color: #001122;
    }

    /* Primary Navigation Menus */
    .ppm_umenu {
    background-color: #f5f8fa;
    background: -moz-linear-gradient(#f5f8fa, #e0ecf7);
    background: -webkit-gradient(linear, center top, center bottom, from(#f5f8fa), to(#e0ecf7));
    background: linear-gradient(#f5f8fa, #e0ecf7);
    -pie-background: linear-gradient(#f5f8fa, #e0ecf7);
    }

    /* The filter section on portlet and list pages */
    .ppm_filter_section {
    background-color: #EFF3F7;
    border: 1px solid #B9C3D2;
    }

    /* Grid header rows*/
    .ppm_grid > thead,
    .ppm_list_layout > thead,
    .ppm_list_layout_pmpy > thead {
    background-color: #B3C8DB;
    background: linear-gradient( #B3C8DB, #92A8BE );
    background: -moz-linear-gradient(#B3C8DB, #92A8BE);
    background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#92A8BE), to(#B3C8DB));
    }

    /* Grid column headers */
    .ppm_grid th,
    .ppm_list_layout th,
    .ppm_list_layout_pmpy th {
    border-left: 1px solid #92a7bb;
    border-bottom: 1px solid #92a7bb;
    }

    /* Grid row highlighting from Studio configuration */
    .ppm_grid_row_highlight {
    background-color: #FDFEDB !important;
    }

    /* Grid row highlighting on mouseover */
    .ppm_grid > tr:hover, .ppm_grid > tbody > tr:hover {
    background-color: #E8EBF2 !important;
    }

    /* Grid aggregation row colors */
    .ppm_aggregation, .ppm_aggregation > td {
    background-color: #D8D8D8;
    }

    .ppm_flyout_filter {
    background-color: #F2F5F9;
    position: absolute;
    z-index: 5;
    padding: 5px;
    overflow: auto;
    max-height: 365px;
    max-width: 800px;
    width: 800px;
    border: 1px solid #9BA0A8;
    display: none;
    }

    .ppm_flyout_filter_content {
    overflow: auto;
    max-height: 305px;
    }

    .ppm_flyout_filter_container {
    position: relative;
    }

    /* Login page CSS styles */

    /* Clarity PPM Logo */
    #ppm_login_logo {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAWCAYAAACosj4+AAABw0lEQVRIx62Wv0rFMBTGOzkJdnUrF9wuEgRRECHo4ODSwcExs1M2F8Fu4hScBBWLi25WfIFurn2EPkIfIZ7IuVDS/DnpNfDBpcnN+fXkyznNMs/YuP7hIAXqQNpSi3PF+D+Hb4sSpEAtSFsa8LkE5Rl1QBCGATVRNXs6FhCkd0D4ZOAqCowADQkwf9q6/dD7r0udALSSyiJHpOfKQM0AMipcMDkhM2a+D63ZeRB2sHZWlmCzKhDImJqP1hYeo6+yZPwhLLPLAFDrAgplp/Bk1LnehhlBtSSgiHeagOcU3kZbzANUUYFCx1VlMwYEYViTKlQTKAsToDoAJBMgBAZOvWUToFAR5ASQMrEorgVURmAkIWCPhiYfWTPHQ7ARj0DIcdH7L1OrAJDPL42reaYAlQGg3ge093Lgy07ueQFFBcojLUO4mvDy8dy1eeeByckeIlx9jcfKUeb34AEyYg6gOrV1FKndfaGuQt86Ek1fEhps62sFMgVo8+Zbr1F7osc87k9kqO27+6TAvrnLr7McVIGYC6qMffeMbyF7PuoIMA0a2zl/8XliYDpQHfucbRxwPT4XkT424DNu1aKJTt93GWaI/wJ/NIHZHSMBAgAAAABJRU5ErkJggg==);
    margin: 6px 0px 0px 15px;
    width: 36px;
    height: 22px;
    }

    .ppm_login {
    background-color: #00174a;
    font-family: Verdana, Arial, sans-serif;
    height: 100%;
    width: 100%;
    bottom: 0;
    position: absolute;
    text-align: center;
    white-space: nowrap;
    }

    .ppm_login_abs_center {
    background-color: #04152d;
    width: 100%;
    height: 100%;
    }

    .ppm_login_box {
    background-color: #fff;
    background: -moz-linear-gradient(#ffffff, #e2e2e2);
    background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#e2e2e2));
    background: linear-gradient(#ffffff, #e2e2e2);
    -pie-background: linear-gradient(#ffffff, #e2e2e2);
    padding: 38px 38px;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    behavior: url( ui/ext/pie.htc );
    -pie-poll: false;
    position: relative;
    }

    /* Style for Login Title */
    .ppm_login_title {
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
    font-size: 17px;
    color: #0088CC;
    padding-bottom: 18px;
    }

    /* Style for Product Name at login page */
    .ppm_login_product {
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    font-family: Calibri, Arial, Verdana;
    margin-left: 20px;
    vertical-align: middle;
    }

    /* Style for copyright */
    .ppm_login_copyright {
    color: #fff;
    font-size: 11px;
    font-family: Verdana, Arial, sans-serif;
    margin: 8px 5px 0px 0px;
    text-align: right;
    }

    /* Style for login field */
    .ppm_login_field_label {
    color: #000;
    font-size: 11px;
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
    padding-right: 10px;
    vertical-align: center;
    white-space: nowrap;
    }

    /* Style for error/alert messagaes */
    #ppm_login_button {
    color: #fff;
    cursor: pointer;
    background-color: #fff;
    background: -moz-linear-gradient(#56ADEA, #1C70C4);
    background: -webkit-gradient(linear, center top, center bottom, from(#56ADEA), to(#1C70C4));
    background: linear-gradient(#56ADEA, #1C70C4);
    -pie-background: linear-gradient(#56ADEA, #1C70C4);
    border: 1px solid #4495CD;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    behavior: url( ui/ext/pie.htc );
    -pie-poll: false;
    font-size: 11px;
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
    float: right;
    padding: 3px 12px;
    position: relative;
    }

    /* Style for error/alert messagaes*/
    .ppm_login_msg {
    color: #d00;
    font-size: 11px;
    font-family: Verdana, Arial, sans-serif;
    height: 45px;
    }

    /* The login service messages */
    #ppm_login_message_top span:before, #ppm_login_message_bottom span:before{
    content: "";
    }

    /* The The login service messagage style */
    #ppm_login_message_top,#ppm_login_message_bottom{
    color: #fff;
    font-family: Arial,Helvetica,Verdana,sans-serif;
    font-size: 20px;
    font-weight: bold;
    padding-left: 16px;
    text-wrap:normal;
    }

    ---------------------------------------------------------------------------------------------------

     

    Let me know if this helps



  • 3.  Re: PPM UI customization

    Posted Apr 23, 2017 04:31 PM

    Depends on the part of the UI you want to customise, and how deep you want to go.

    The CSS theme alteration posted above is the supported method, but this will not change the New UX. 

    Get in touch if that's what you want to do



  • 4.  Re: PPM UI customization

    Posted Jun 14, 2018 03:21 AM

    am1 Is there a way we could highlight the non-working day in Clarity 15.3 new UI timesheets? We used the this code in 14.2 Classic PPM. Any idea

     

    /* Public Holiday background color change in Timesheets */
    input.ppm_res_cal_non_working {background-color : #91e2b6 !important; }