Making skin for 4.0.10?

[liquidspikes]

Hello!

I am trying to make my first Agent skin for OTRS 4.0.10.

From reading the documentation (http://otrs.github.io/doc/manual/develo ... id-1.3.5.4)
it seems all I need to do is create a copy of: "[OTRS-root]/var/httpd/htdocs/skins/Agent/default" to a new folder, "[OTRS-root]/var/httpd/htdocs/skins/Agent/myskin"

and customize it to my liking, (rip out all the orange... ewww... and add my logo)

then make a xml config file in [OTRS-root]/Kernel/Config/Files/myskin.xml to make OTRS see the theme:

myskin.xml

Code: Select all

<?xml version="1.0" encoding="utf-8" ?>
<otrs_config version="1.0" init="Framework">
    <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/myskin/img/mylogo.png</Item>
                <Item Key="StyleTop">13px</Item>
                <Item Key="StyleRight">75px</Item>
                <Item Key="StyleHeight">67px</Item>
                <Item Key="StyleWidth">244px</Item>
            </Hash>
        </Setting>
    </ConfigItem>
    <ConfigItem Name="Loader::Agent::Skin###100-myskin" Required="0" Valid="1">
        <Description Translatable="1">Custom skin for some epic people.</Description>
        <Group>Framework</Group>
        <SubGroup>Frontend::Agent</SubGroup>
        <Setting>
            <Hash>
                <Item Key="InternalName">myskin</Item>
                <Item Key="VisibleName">myskin</Item>
                <Item Key="Description">Stupid skin that doesn't work!</Item>
                <Item Key="HomePage">www.nooooooooooooooo.com/</Item>
            </Hash>
        </Setting>
    </ConfigItem>
</otrs_config>

I can choose the skin but the problem is that it only changes the logo, I still get all the default css with the ugly orange. :/

Did I miss something?

Thanks!
PS this is my first post, but I have been a long time lurker... Thank you for all your helpful posts!

[wurzel]

Hi,

I do not built skins on my own, but I think, you are missing to load a .css file (your own css)

So the default is used.

Florian

[crythias]

Here's my blue css. You can add it to your css list in Loader::Agent::CommonCSS###000-Framework and it will survive updates as long as it's in that location. As you find other colors, only add the changes to this file.

Code: Select all

@media screen,projection,tv,handheld {

/**
 * @subsection  Header
 */
#Header {
    background: #4a4a4a;
    color: #FFF;
}

#Navigation > .Selected {
  border-color: #25CCE1;
}

#Navigation > li:hover {
  border-color: #25AAE1;
}

#Navigation > .Active > ul > li:hover {
  background: #25AAE1;
}

.DataTable tbody tr:hover td, .TableSmall tbody tr:hover td, .DataTable tbody tr:active td.Clickable, .TableSmall tbody tr:active td.Clickable {
  background: #25CCE1;
}

a {
    color: #25CCE1;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #25AAE1;
}

h2 {
    color: #474747;
}
.Admin .Size1of2 h4 {
  color: #25CCE1 !Important;
}
.Admin .Size1of2:hover h4 {
  color: #25AAE1;
}

.MessageBox {
    background: #28b7f2;
}
}

[liquidspikes]

Thank you for the CSS Crythias!

I bet it looks awesome, but sadly I am unable to get it to appear...
Per your instructions I added a entry for Loader::Agent::CommonCSS###000-Framework pointing to your CSS, but it still doesn't seem to be working.

Is the CSS file for 4.0.x? or is it for 3.3.x?

I must be missing something basic somewhere, I don't know why OTRS is so hell-bent on using the default theme. :/

Does OTRS reference the CSS anywhere else other than the SysConfig?
Do I have to edit the HTML directly?

I ran through deleting the caches and rebuilding the configs just in case, but that didn't make a difference either.

Again thanks for your help!

[crythias]

In Loader::Agent::CommonCSS###000-Framework
I added:
custom/myfilename.css

myfilename.css is located in:
/opt/otrs/var/httpd/htdocs/skins/Agent/default/css/custom/

though it could be relative to your theme. I don't know.

For 4.0.x

[liquidspikes]

I finally got it figured out!

The cached-css files had improper permissions and were retaining the old information from when they were originally created (AKA copied from default).

I fixed it by removing the cached css files from:
[OTRS-root]/var/httpd/htdocs/skins/Agent/myskin/css-cache/*random_numbers_and_junk*.css

Then rebuild the caches...
sudo bin/otrs.RebuildConfig.pl

Then I reapplied permissions:
sudo chown otrs:www /[OTRS-root]/

Now I finally see my theme!

I cannot believe it was a simple file permission issue... *sigh*

At least now I am (officially) part of this great community!

[wheelshot]

Thanks for sharing the solution and welcome in the community