Custom Skin CSS Cache

[possebon]

Hi all,

I created a custom skin based on the default. The steps I did were:

1) copy the /opt/otrs/var/httpd/htdocs/skins/Agent/default folder to mycustom skin /opt/otrs/var/httpd/htdocs/skins/Agent/mycustom
2) change the colors on the css files of css folder
3) create the $OTRS_HOME/Kernel/Config/Files/MyCustomSkin.xml with all settings there
4) executed $OTRS_HOME/bin/otrs.RebuildConfig.pl

I cleared the css-cache folder before doing the RebuildConfig.pl and even running several times, the cache is not created again.

How can I troubleshoot this? Am I doing the correct procedure?

Thanks in advance

[RStraub]

What do you mean, the cache is not build again?
How do you notice that?

Or do you have problems activating the skin? After the steps you took, make sure you actually change to your skin in the user preferences page.

[possebon]

I mean that the css-cache folder is empty.

And if I let the option Loader::Enabled::CSS enabled, the OTRS does not load my skin.

If I disabled it, the OTRS will load my skin, but not totally. There are some sections of CSS that does not change. In fact, the only thing that changes when I have the Loader::Enabled::CSS enabled is the logo. All the rest keeps the same from the default skin.

[RStraub]

You didn't answer my question - did you SELECT the skin, in your user preferences?

[possebon]

Sorry, yes I selected the skin on Preferences.

[RStraub]

So from what I gather, you have multiple problems.

Why won't we try and figure out how to actually show your skin before worrying about the cache?
(btw, the proper way to delete the css cashe, is executing: "~otrs/bin/otrs.LoaderCache.pl -o delete")

Could you post an example of a color change you did (with path to filename) as well as the .xml you're using?

[possebon]

OK.

This is the content of my VivoSkin.xml

Code: Select all

<?xml version="1.0" encoding="utf-8" ?>
<otrs_config init="Framework" version="1.0">
  <ConfigItem Name="AgentLogo" Required="0" Valid="1">
    <Description Translatable="1">The logo shown in the header of the agent interface. The URL to the image must be a relative URL to the skin image directory.</Description>
    <Group>Framework</Group>
    <SubGroup>Frontend::Agent</SubGroup>
    <Setting>
      <Hash>
        <Item Key="URL">skins/Agent/vivo/img/logo.png</Item>
        <Item Key="StyleTop">13px</Item>
        <Item Key="StyleRight">75px</Item>
        <Item Key="StyleHeight">67px</Item>
        <Item Key="StyleWidth">302px</Item>
      </Hash>
    </Setting>
  </ConfigItem>
  <ConfigItem Name="Loader::Agent::Skin###100-vivo" Required="0" Valid="1">
    <Description Translatable="1">Skin Vivo Multitorpedo.</Description>
    <Group>Framework</Group>
    <SubGroup>Frontend::Agent</SubGroup>
    <Setting>
      <Hash>
        <Item Key="InternalName">vivo</Item>
        <Item Key="VisibleName">Vivo</Item>
        <Item Key="Description">Skin Vivo Multitorpedo</Item>
        <Item Key="HomePage">www.vivomultitorpedo.com.br</Item>
      </Hash>
    </Setting>
  </ConfigItem>
</otrs_config>

This is a print screen with the Loader::Enabled::CSS set to Yes
http://ibin.co/2HK2rrmxEo9p

This is a print screen with the Loader::Enabled:CSS set to No
http://ibin.co/2HK3QD7EU1Jy

My Preferences with skin selected:
http://ibin.co/2HK3m48rddMZ

[crythias]

Xml !=css

[RStraub]

But apparently the skin is working, now I finally understand what you mean with the cache.

Leave the setting on yes and execute:

~otrs/bin/otrs.DeleteLoaderCache.pl -o delete
and restart the apache, just to be sure.

[possebon]

Sorry guys if I answer incorrectly. I'm a new guy using OTRS, that read the documentation and tried to follow what I understood there. Probably for you that masters the OTRS and it's backgrounds, some stuff could be obvious, but not for someone that is begining.

This is the code of the Core.Header.css

Code: Select all

/**
 * This file containts the CSS Styles for the header
 * with it's toolbar, the userbar and the whole main navigation
 *
 * @project     OTRS (http://www.otrs.org) - Agent Frontend
 * @copyright   xxx
 * @license     AGPL (http://www.gnu.org/licenses/agpl.txt)
 */

/**
 * @package     Skin "Default"
 * @section     Header
 */

@media screen,projection,tv,handheld {

/**
 * @subsection  Header
 */
#Header {
    height: 72px;
    padding: 10px 0 12px;
    background: #d5d5d5;
    color: #FFF;
    position: relative;
    z-index: 10;
}

/**
 * @subsection  Logo
 */
#Logo {
    top: -4px;
    right: 38px;
    width: 302px;
    height: 67px;
    background: url(../img/logo.png) no-repeat;
    position: absolute;
}

.RTL #Logo {
    right: auto;
    left: 38px;
}


/**
 * @subsection  Toolbar
 */
#ToolBar {
    left: 10px;
    top: 10px;
    position: absolute;
}

#ToolBar:last-child {
    margin-left: 0px;
}

.RTL #ToolBar {
    float: right;
}

#ToolBar li {
    width: 24px;
    height: 34px;
    margin: 0 5px;
    float: left;
    position: relative;
}

.RTL #ToolBar li {
    float: right;
}

#ToolBar li.Extended {
    width: auto;
}

#ToolBar li.Extended form * {
    float: left;
}

#ToolBar li.Extended form select {
    margin-top: 1px;
}

#ToolBar a {
    height: 20px;
    width: 24px;
    text-indent: -9999px;
    position: relative;
    display: block;
}

#ToolBar a i {
    display: block !important;
    font-size: 18px;
    font-style: normal;
    font-weight: normal !important;
    padding: 0;
    text-align: center;
    text-indent: 0;
    text-shadow: 1px 1px 0 #000000;
    width: 24px;
    position: relative;
    top: -9px;
}

#ToolBar a i.icon-small {
    font-size: 12px !important;
    position: absolute;
    right: -7px;
    text-align: center;
    top: -3px;
    width: 15px;
    display: none !important;
}

#ToolBar .New .icon-small.icon-show-new {
    display: block !important;
}

#ToolBar .Reached .icon-small.icon-show-reached {
    display: block !important;
}

#ToolBar a span.Counter {
    bottom: -14px;
    color: #FFFFFF;
    display: block;
    font-size: 11px;
    left: 50%;
    margin-left: -12px;
    position: absolute;
    text-align: center;
    text-indent: 0 !important;
    width: 24px;
}

/**
 * @subsection      Navigation Level-0
 */

#NavigationContainer {
    position: absolute;
    top: 55px;
    left: 10px;
    z-index: 20;
    width: 98%;
    height: 35px;
    overflow: hidden;
}

#NavigationContainer #Navigation {
    left: 0px;
    position: absolute;
}

.RTL #NavigationContainer {
    left: auto;
    right: 10px;
}

#NavigationContainer > a {
    background: #f3960d;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 13px;
    height: 34px;
    line-height: 28px;
    position: absolute;
    text-align: center;
    width: 20px;
    z-index: 100;
}

#NavigationContainer > a.NavigationBarNavigateRight {
    right: 0px;
}

#NavigationContainer > a.NavigationBarNavigateLeft {
    left: 0px;
}

#NavigationContainer > a:hover {
    padding-top: 1px;
    padding-left: 1px;
    width: 19px;
    height: 33px;
}

#NavigationContainer > a i {
    margin-top: 10px;
    display: block;
}

#NavigationContainer > .fa-check {
    position: absolute;
    font-size: 15px;
    top: 8px;
    color: #777;
    display: none;
}

/**
 * @subsection      Main hover effect
 */
#Navigation > li {
    float: left;
    position: relative;
    background: #000000;
    margin-right: 1px;
    border-bottom: 5px solid #000;
}

#Navigation > li > a {
    display: block;
    height: 21px;
    padding: 8px 15px 0px 7px;
    font-size: 12px;
    line-height: 12px;
    color: #DDD;
}

#Navigation > li > a#GlobalSearchNav {
    padding-right: 21px;
}

#Navigation > li > a#GlobalSearchNav i {
    font-size: 15px;
    margin-top: 5px;
}

.RTL #Navigation > li > a {
    padding: 4px 4px 3px 15px;
}

.RTL #Navigation > li > a#GlobalSearchNav {
    padding-right: 4px;
    padding-left: 26px;
}

#Navigation > li:hover {
    cursor: pointer;
    border-color: #0569cd;
}

#Navigation > li:hover > a,
#Navigation > li:active > a {
    color: #FFF;
}

#Navigation > .Selected {
    border-color: #0569cd;
    z-index: 90;
}

#Navigation > .Selected > a {
    color: #FFF;
}

/**
 * @subsection      Search icon
 */
#Navigation .Search {
    width: 16px;
}

#Navigation a i {
    top: 2px;
    left: 15px;
    font-size: 20px;
    position: absolute;
}

/**
 * @subsection      Navigation Second level
 */

#Navigation > li > ul {
    display: none;
}

#Navigation > .Active > ul {
    position: absolute;
    top: 35px;
    left: 0px;
    display: block;
    min-width: 240px;
    z-index: 99;
    background: #000;
}

.RTL #Navigation > .Active > ul {
    left: auto;
    right: -9px;
}

#Navigation > .Active > ul > li {
    font-size: 11px;
    line-height: 11px;
    margin-top: -1px;
    position: relative;
}

#Navigation > .Active > ul > li:hover {
    background: #0569cd;
}

#Navigation > .Active > ul > li:hover > a {
    color: #000;
}

#Navigation > .Active > ul > li > a {
    display: block;
    position: relative;
    color: #DDD;
    padding: 6px 10px 7px 8px;
    border-bottom: 1px solid #555;
}

#Navigation > .Active > ul > li:last-child > a {
    border-bottom: none;
}

} /* end @media */

And this is the code of the Core.Default.css

Code: Select all

/**
 * @project     OTRS (http://www.otrs.org) - Agent Frontend
 * @copyright   xxx
 * @license     AGPL (http://www.gnu.org/licenses/agpl.txt)
 */

/**
 * @package     Skin "Default"
 * @section     Default Settings
 */

@media screen,projection,tv,handheld {

/**
 * @subsection  Fonts
 */

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    text-align: left;
}

.RTL {
    text-align: right;
    /* this will inherit to all elemtents because of reset.css */
    direction: rtl;
}

/**
 * @subsection  Print elements - Only show when page is printed
 */
.PrintOnly {
    display: none;
}

/**
 * @subsection  Hidden elements - Elements that are hidden at first
 */
.Hidden {
    display: none;
}

.Invisible {
    visibility: hidden;
}

/**
 * @subsection      ARIA (Accessibility)
 * @subsubsection   AlertMessage
 * @note            This definition allows to create text on the page
 *                  which is not seen, but will be read by the screen reader.
 *                  display: none; cannot be used in this case.
 */

.ARIAAlertMessage {
    position: absolute;
    left: -10000px;
    right: auto;
    top: -10000px;
}

.RTL .ARIAAlertMessage {
    left: auto;
    right: -10000px;
}

/**
 * @subsection  ElementPool - Hide elements for later use with JavaScript
 */
#UIElementPool {
    display: none;
}

/**
 * @subsection  Links
 */

a {
    color: #0569cd;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #F72;
}

/**
 * @subsection  Headings
 */
h1 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

h2 {
    font-size: 14px;
    color: #474747;
    margin-bottom: 10px;
}

h3 {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
}

h4 {
    color: #333;
    margin-bottom: 5px;
    font-weight: bold;
}

h5 {
    color: #333;
    margin-bottom: 5px;
}

/**
 * @subsection  Paragraphs
 * @note        Use paragraphs instead of <div>s for text-only, multiline content!
 */
p {
    /* increase line-height for readability */
    line-height: 1.3em;
}

/**
 * @subsection  Code Examples
 */
code {
    font-family: monospace;
}

/**
 * @subsection  Text modifiers
 */
strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

/**
 * @subsection  Regular lists
 * @note        List elements (ul, ol) are being reset by default to avoid browser styling, so we
                need to define our own 'default' lists using a class.
 */

ul.Default {
    list-style-type: square;
    margin: 5px 0px;
    padding-left: 20px;
}

ul.Default li {
    line-height: 130%;
    margin-bottom: 3px;
}

/**
 * @subsection  Definition lists
 */
dl {
    margin: 5px 0;
}

dt {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3em;
    margin-top: 5px;
}

dd {
    line-height: 1.3em;
    margin-left: 15px;
    margin-right: 0;
}

.RTL dd {
    margin-left: 0;
    margin-right: 15px;
}

/**
 * @subsection  Text
 */
.Center {
    text-align: center;
}

.Left {
    text-align: left;
}

.Right {
    text-align: right;
}

.Error {
    color: #ff505e;
}

.Warning {
    color: #ff505e;
}

.Notice {
    color: #333;
}

.Confirmation {
    color: #069d07;
}

.Small {
    font-size: 90%;
}

/**
 * @note    Use the class InvisibleText to hide text from the screen,
 *          while it is still recognized and read by screen readers.
 */
.InvisibleText {
    width: 0;
    height: 0;
    display: inline-block;
    text-indent: -9999px;
    white-space: nowrap;
    position: absolute;
}

/**
 * @subsection  Spacings
 */
.Spacing {
    margin: 13px;
}

.SpacingTop {
    margin-top: 13px;
}

.SpacingTopSmall {
    margin-top: 8px;
}

.SpacingTopLarge {
    margin-top: 89px;
}

.SpacingBottom {
    margin-bottom: 13px;
}

.SpacingBottomMedium {
    margin-bottom: 34px !important;
}

.SpacingBottomLarge {
    margin-bottom: 89px;
}

.SpacingLeft {
    margin-left: 10px;
}

/**
 * @subsection  Indents
 */
.Indent {
    padding-left: 13px !important;
}

/**
 * @subsection  Box alignment
 */
.CenterBox {
    margin-left: auto !important;
    margin-right: auto !important;
}

/**
 * @subsection  Controlling the display: value
 * @note        This is especially helpful for links. When
 *              they have this class, the entire block will be clickable.
 */
.AsBlock {
    display: block;
}

/**
 * @subsection  Clear
 */
.Clear {
    float: none !important;
    clear: both !important;
}

.ClearLeft,
.RTL .ClearRight {
    float: none !important;
    clear: left !important;
}

.ClearRight,
.RTL .ClearLeft {
    float: none !important;
    clear: right !important;
}

/**
 * @subsection  MainBox
 */
.MainBox {
    position: relative;
    padding: 4px 16px 8px 8px;
}

.RTL .MainBox {
    padding: 4px 8px 8px 16px;
}

.OverviewBox {
    position: relative;
}

.MainBox > h1 {
    margin: 0;
    padding: 10px 8px 15px 8px;
    position: relative;
}

.MainBox > .AsteriskExplanation {
    padding-left: 8px;
    margin-bottom: 10px;
}

.RTL .MainBox > .AsteriskExplanation {
    padding-left: 0px;
    padding-right: 8px;
}

.AsteriskExplanation {
    color: #999;
}

.MainBox.FormScreen > h1,
.MainBox.FormScreen > .AsteriskExplanation {
    margin-left: 24%;
}

.MainBox.FormScreen.NoSidebar > h1,
.MainBox.FormScreen.NoSidebar > .AsteriskExplanation {
    margin-left: 30%;
}

.RTL .MainBox.FormScreen > h1,
.RTL .MainBox.FormScreen > .AsteriskExplanation {
    margin-right: 24%;
}

.RTL .MainBox.FormScreen.NoSidebar > h1,
.RTL .MainBox.FormScreen.NoSidebar > .AsteriskExplanation {
    margin-right: 30%;
}

.OverviewBox > h1 {
    margin: 10px 0px;
    padding: 8px 11px 7px;
    position: relative;
}

/**
 * @subsection  Standard Widths
 */
.W10pc {
    width: 10%;
}

.W20pc {
    width: 20%;
}

.W25pc {
    width: 25%;
}

.W33pc {
    width: 33%;
}

.W50pc {
    width: 50%;
}

.W60pc {
    width: 60%;
}

.W70pc {
    width: 70%;
}

.W75pc {
    width: 75%;
}

.W80pc {
    width: 80%;
}

.W90pc {
    width: 90%;
}

.W95pc {
    width: 95%;
}

.W100pc {
    width: 100%;
}

.W50px {
    width: 50px;
}

.W950px {
    width: 950px;
}

/**
 * @subsection  Customizable logos
 */
#LoginLogo {
    background: transparent url(../img/loginlogo_default.png) center no-repeat;
    height: 100px;
}


/**
 * @subsection  MessageBox
 */

.MessageBox {
    margin: 5px 18px 0 10px;
    background: #F7AE40;
    position: relative;
    z-index: 1;
}

.MessageBox.WithIcon {
    padding-left: 20px;
}

.MessageBox.WithIcon > i {
    position: absolute;
    left: 12px;
    top: 12px;
}

.RTL .MessageBox {
    margin: -2px 10px 0 18px;
}

.MessageBox p {
    padding: 10px;
}

.MessageBox p,
.MessageBox a {
    color: #442A0B;
}

.MessageBox a:hover {
    text-decoration: underline;
}

.MessageBox > p + p {
    margin-top: 2px;
}

.MessageBox.Error {
    background: #F25C5C;
}

.MessageBox.Error p,
.MessageBox.Error a {
    color: #000;
}

.MessageBox.Confirmation {
    border-color: #049E35;
    background: #1AEE47;
}

.MessageBox.Confirmation p {
    border-color: #36F374;
}

.MessageBox.Confirmation p,
.MessageBox.Confirmation a {
    color: #044016;
}

.MessageBox p a:after {
    content: "\2192";
    display: inline-block;
    font-size: 15px;
}

.MessageBox.Info {
    background-color: #2A5464;
}

.MessageBox.Info p,
.MessageBox.Info a {
    color: #fff;
}

.MessageBox a.Button:after {
    content: "";
}

.MessageBox a.Button {
    display: inline;
    padding: 3px 7px;
}

.MessageBox a.Button:hover {
    text-decoration: none;
}

.MessageBox.Info a.Button {
    background-color: #3E6C7C;
}

.MessageBox.Info a.Button:hover {
    background-color: #4B7C8E;
}

.MessageBox.Info a.Button i {
    color: #89C6D1;
}

/**
 * @subsection  Flag
 */

.Flag.Small {
    width: 17px;
    height: 8px;
    margin: 0px auto;
}

.Flag span {
    display: block;
    height: 100%;
    text-indent: -9999px;
    cursor: pointer;
    /* set a default color for priorities */
    background-color: #cdcdcd;
}

.Flag span.Escalated {
    background-color:#ff505e;
}

.Flag span.New {
    background-color: #8bef4d;
}

.Flag span.Warning {
    background-color: #ffdd50;
}

.Flag span.PriorityID-1 {
    background-color:#03c4f0;
}

.Flag span.PriorityID-2 {
    background-color:#83bfc8;
}

.Flag span.PriorityID-3 {
    background-color:#cdcdcd;
}

.Flag span.PriorityID-4 {
    background-color:#ffaaaa;
}

.Flag span.PriorityID-5 {
    background-color:#ff505e;
}

/**
 * @subsection  "Unread" star
 */
span.UnreadArticles,
div.UnreadArticles {
    display: block;
    width: 16px;
    height: 15px;
    margin-left: 6px;
    font-weight: normal;
    position: relative;
    padding: 0px 3px !important;
}

span.UnreadArticles i,
div.UnreadArticles i {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
    font-size: 14px;
    color: #ddd;
}

span.UnreadArticles em,
div.UnreadArticles em {
    display: none;
}

span.UnreadArticles i:first-child,
div.UnreadArticles i:first-child {
    color: #777 !important;
    font-size: 16px;
    z-index: 1;
    left: -1px;
    top: -1px;
}

span.UnreadArticles.Remarkable i,
div.UnreadArticles.Remarkable i {
    color: #F2BD0E;
}

span.UnreadArticles.Ordinary,
div.UnreadArticles.Ordinary {
    color: #ddd;
}

tbody tr:hover span.UnreadArticles i {
    color: #fff;
}

span.ImportantArticles {
    display: block;
    width: 16px;
    height: 16px;
    float: right;
    margin: -2px 0px 0px 23px;
    color: #C10505;
    font-size: 13px;
}

span.ImportantArticles em {
    display: none;
}

span.ImportantArticles i {
    color: #C10505;
}

/**
 * @subsection  Charts
 */
.Chart {
    width: 240px;
    height: 200px;
}

#ChartTooltip {
    padding: 2px 8px 3px;
    background: #000;
    color: #FFF;
    font-size: 11px;
    opacity: 0.8;
    border-radius: 8px;
    position: absolute;
}

/**
 * @subsection  Datepicker
 */
.DatepickerIcon {
    margin: 1px 0 0 4px;
    height: 16px;
    width: 16px;
    display: inline-block;
    vertical-align: top;
    color: #333;
}

.RTL .DatepickerIcon {
    margin: 0 4px 0 0;
}

/* Vacation Days */
td.Highlight a.ui-state-default {
    border: 1px solid #fad42e;
    background: #ffe45c;
    background: -moz-linear-gradient(top,  #fff0a5 0%, #ffe45c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff0a5), color-stop(100%,#ffe45c));
    background: -webkit-linear-gradient(top,  #fff0a5 0%,#ffe45c 100%);
    background: -o-linear-gradient(top,  #fff0a5 0%,#ffe45c 100%);
    background: -ms-linear-gradient(top,  #fff0a5 0%,#ffe45c 100%);
    background: linear-gradient(to bottom,  #fff0a5 0%,#ffe45c 100%);
}

/* Today */
.ui-datepicker-current-day {
}

/*Weekend*/
.ui-datepicker-week-end {
}

/**
 * @subsection  Autocompletion
 */

.ui-autocomplete {
    z-index: 20 !important;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.ui-autocomplete .ui-menu-item {
    font-size: 11px;
}

.ui-overlay-autocomplete {
    z-index: 4000 !important;
}

/**
 * @subsection  Icons
 */
.IconInline {
    display: inline-block;
}

.IconReady {
    width: 16px;
    height: 16px;
    background-image: url(../img/icons/tick.png);
}

.IconNotReady {
    width: 16px;
    height: 16px;
    background-image: url(../img/icons/cross.png);
}

.IconNotReadyGrey {
    width: 16px;
    height: 16px;
    background-image: url(../img/icons/cross_sw.png);
}

/**
 * @subsection  Dialog popup width
 */
iframe.TextOption {
    width: 500px;
    height: 400px;
}

iframe.TextOption.SpellCheck {
    width: 800px;
}

iframe.TextOption.Customer {
    width: 800px;
}

/**
 * @subsection global search
 */
#SearchForm,
#AgentCustomerInformationCenterSearchForm {
    width: 560px;
    padding-right: 20px;
}

#ArticleFilterDialogForm {
    width: 480px;
    max-height: 300px;
}

#ContextSettingsDialog {
    width: 450px;
    max-height: 100px;
}

#SearchForm legend {
    color: #333333;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 5px;
    display: block;
    width: 100%;
}

/**
 * @subsection global message format
 */
.ArticleBody {
    font-family: monospace,fixed;
    word-wrap: break-word;
    background: #fff;
    border: 1px solid #eee;
    padding: 10px;
}


/**
 * @subsection  Chat
 */

.ArticleChat .Name {
    font-weight: bold;
    white-space: nowrap;
}

.ArticleChat .Time {
    padding-right: 5px;
    color: #888;
    white-space: nowrap;
}

.ArticleChat .SystemGenerated .Name {
    display: none;
}

.ArticleChat .SystemGenerated .Text {
    font-style: italic;
    color: #888;
}

.ArticleChat .Own .Name {
    color: red;
}

.ArticleChat > div {
    display: table;
}

.ArticleChat > div > div {
    display: table-row;
}

.ArticleChat > div > div > span {
    display: table-cell;
}

#ChatStartDialog {
    width: 500px;
    position: relative;
}

#ChatStartDialog form {
    display: block;
    padding: 10px;
}

#ChatStartDialog form textarea {
    width: 380px;
    height: 30px;
    font-family: arial, sans-serif;
    padding: 3px;
}

#ChatStartDialog form .Primary {
    position: absolute;
    right: 20px;
    top: 11px;
}

#ChatStartDialog form .Primary span {
    line-height: 26px;
    height: 26px;
}

#ChatStartDialog form .Primary:focus {
    border-color: #333;
}

.ChatProtocol {
    border: 1px solid #ccc;
    padding: 2px;
    overflow-y: auto;
    max-height: 150px;
    width: 617px;
}

/**
 * @subsection global jQuery UI optimizations
 */
/*
* Bug #8288: Autocomplete search results show up in Times font when using Internet Explorer
*/
.ui-menu-item {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ui-menu .ui-menu-item a {
    border: 1px solid #fff;
}

.ui-corner-all {
    border-radius: 0px !important;
}

.ui-widget-header {
    background: #eee !important;
    border: 0px !important;
    font-weight: normal !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: #f2f2f2 !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background: #ddd !important;
}

/**
 * @subsection global CKEditor fixes/improvements
 */

.cke_combo__fontsize .cke_combo_text {
    width: 40px !important;
}

#cke_RichText,
.cke_toolbar > .cke_toolgroup,
.cke_toolbar .cke_combo_button,
.cke_inner .cke_contents,
.cke_dialog_body,
input.cke_dialog_ui_input_password,
input.cke_dialog_ui_input_text,
textarea.cke_dialog_ui_input_textarea {
    border-radius: 0px !important;
}

.cke_toolgroup .cke_button_on {
    background-color: #ccc;
}

input.cke_dialog_ui_input_password:focus,
input.cke_dialog_ui_input_text:focus,
textarea.cke_dialog_ui_input_textarea:focus {
    box-shadow: none !important;
    border-color: #0569cd !important;
}

/**
 * @subsection global nvd3 improvements/fixes
 */

.nvtooltip {
    font-size: 11px !important;
    border: 0px !important;
}

} /* end @media */

[possebon]

But apparently the skin is working, now I finally understand what you mean with the cache.

Leave the setting on yes and execute:

~otrs/bin/otrs.DeleteLoaderCache.pl -o delete
and restart the apache, just to be sure.

I tried the command above and it says that could not find it.

I tried the command you sent before:
bin/otrs.LoaderCache.pl -o delete

It executes fine, stopped the OTRS and apache, but nothing changes.

[RStraub]

Weird. Next try:
Tail the apache (error) - log while loading up some pages. You might have permission problems for the cache.

[possebon]

Thats the result of tail

Code: Select all

[Tue Sep 29 11:04:52 2015] [error] [client 177.19.184.162] File does not exist: /opt/otrs/var/httpd/htdocs/skins/Agent/vivo/css-cache/ModuleCSS_72f1411d255825e4e9d398e158dae5fc.css, referer: http://otrs.vivomultitorpedo.com.br/index.pl?Action=Admin;OTRSAgentInterface=0lIg8FvmrsTL5KNxk9s54HDJeRdCXBtS
[Tue Sep 29 11:05:07 2015] [error] [client 177.19.184.162] File does not exist: /opt/otrs/var/httpd/htdocs/skins/Agent/vivo/css-cache/CommonCSS_dadf5d8e52ce9f7d96d6410e610b1ca1.css, referer: http://otrs.vivomultitorpedo.com.br/index.pl?Action=AdminSysConfig;OTRSAgentInterface=0lIg8FvmrsTL5KNxk9s54HDJeRdCXBtS
[Tue Sep 29 11:05:07 2015] [error] [client 177.19.184.162] File does not exist: /opt/otrs/var/httpd/htdocs/skins/Agent/vivo/css-cache/ModuleCSS_7f74f7e122b62277cda627be3e094d38.css, referer: http://otrs.vivomultitorpedo.com.br/index.pl?Action=AdminSysConfig;OTRSAgentInterface=0lIg8FvmrsTL5KNxk9s54HDJeRdCXBtS
[Tue Sep 29 11:05:26 2015] [error] [client 177.19.184.162] File does not exist: /opt/otrs/var/httpd/htdocs/skins/Agent/vivo/css-cache/CommonCSS_dadf5d8e52ce9f7d96d6410e610b1ca1.css, referer: http://otrs.vivomultitorpedo.com.br/index.pl
[Tue Sep 29 11:05:26 2015] [error] [client 177.19.184.162] File does not exist: /opt/otrs/var/httpd/htdocs/skins/Agent/vivo/css-cache/ModuleCSS_7f74f7e122b62277cda627be3e094d38.css, referer: http://otrs.vivomultitorpedo.com.br/index.pl
[Tue Sep 29 11:06:06 2015] [error] [client 177.19.184.162] File does not exist: /opt/otrs/var/httpd/htdocs/skins/Agent/vivo/css-cache/CommonCSS_dadf5d8e52ce9f7d96d6410e610b1ca1.css, referer: http://otrs.vivomultitorpedo.com.br/index.pl?Action=AdminSysConfig;Subaction=Edit;SysConfigSubGroup=Core%3A%3AWeb;SysConfigGroup=Framework;OTRSAgentInterface=0lIg8FvmrsTL5KNxk9s54HDJeRdCXBtS
[Tue Sep 29 11:06:06 2015] [error] [client 177.19.184.162] File does not exist: /opt/otrs/var/httpd/htdocs/skins/Agent/vivo/css-cache/ModuleCSS_7f74f7e122b62277cda627be3e094d38.css, referer: http://otrs.vivomultitorpedo.com.br/index.pl?Action=AdminSysConfig;Subaction=Edit;SysConfigSubGroup=Core%3A%3AWeb;SysConfigGroup=Framework;OTRSAgentInterface=0lIg8FvmrsTL5KNxk9s54HDJeRdCXBtS
[Tue Sep 29 11:06:32 2015] [error] [client 177.19.184.162] File does not exist: /opt/otrs/var/httpd/htdocs/skins/Agent/vivo/css-cache/CommonCSS_dadf5d8e52ce9f7d96d6410e610b1ca1.css, referer: http://otrs.vivomultitorpedo.com.br/
[Tue Sep 29 11:08:03 2015] [error] [client 177.19.184.162] File does not exist: /opt/otrs/var/httpd/htdocs/skins/Agent/vivo/css-cache/CommonCSS_dadf5d8e52ce9f7d96d6410e610b1ca1.css, referer: http://otrs.vivomultitorpedo.com.br/index.pl?OTRSAgentInterface=GztEJ24H1mrJ7frfqw2UFWpJG4fH2MSk
[Tue Sep 29 11:08:03 2015] [error] [client 177.19.184.162] File does not exist: /opt/otrs/var/httpd/htdocs/skins/Agent/vivo/css-cache/ModuleCSS_49a6da5f65652609dbd1efe4406e3fbe.css, referer: http://otrs.vivomultitorpedo.com.br/index.pl?OTRSAgentInterface=GztEJ24H1mrJ7frfqw2UFWpJG4fH2MSk
badd28f1-2edc-43cb-b41b-fbb9d50bcbb0

It will look for the css since the cache was deleted... it will not find there.

[possebon]

And another thing, I already checked the permissions of the folders:

This is from default skin:

Code: Select all

[root@otrs-vivo default]# pwd
/opt/otrs/var/httpd/htdocs/skins/Agent/default
[root@otrs-vivo default]# ls -l
total 12
drwxrwsr-x 3 otrs apache 4096 Ago 26 21:15 css
drwxrwsr-x 2 otrs apache 4096 Set 29 11:07 css-cache
drwxrwsr-x 4 otrs apache 4096 Ago 26 21:15 img

This is from my custom skin:

Code: Select all

[root@otrs-vivo Agent]# cd vivo
[root@otrs-vivo vivo]# ls -l
total 12
drwxr-sr-x 3 otrs apache 4096 Set 28 10:58 css
drwxr-sr-x 2 otrs apache 4096 Set 28 11:02 css-cache
drwxr-sr-x 4 otrs apache 4096 Set 28 10:13 img
[root@otrs-vivo vivo]#

[possebon]

I think I found something.

I need to generate manually the cache files using the bin/otrs.LoaderCache.pl -o generate

When I did that, the cache files are created on my custom css-cache folder and now, it's show correctly.

Not sure if this is the expected behavior, I thought that when you clear the cache, when you restart the application, the cache would be generated automatically.

Anyway my problem is solved.

Thank you guys for your time trying to help me on this.

Best regards,

[RStraub]

You are right - for me the files are generated and I never had to use -o generate.

Anyway, glad it works now. Have fun with your skin

[samwaithaka]

I had exactly the same problem until I chmod 775 for css-cache directory (css-cache directory should allow write permissions for web server user group (www-data for Ubuntu))
One more thing: Apache error.log file will be your friend.