Skin login screen

[spinaldf]

Dears,
how Do I add Skin in Login Screen? , because the skin is only working after login

[zzz]

Hello,

Only one skin can be shown on the login page and that is defined by Loader::Agent::DefaultSelectedSkin and Loader::Customer::SelectedSkin for customer.

— Emin

[spinaldf]

Hi, I don't have idea, but here doesn't work.

Show images:

I check and I select the skin for both. Do I need add another configuration?

Loader::Agent::DefaultSelectedSkin
Loader::Customer::SelectedSkin


Look image of my configuration. I saved.

[zzz]

Just tested it and it's working fine for me.
Are you sure that you didn't just forget to make custom changes to the login screen (they use different class names)?

Login.PNG

— Emin

[spinaldf]

Hi, I don't have idea, But I sent my code. Do you Any suggestion Or can you show me this error?

########################################################################
<?xml version="1.0" encoding="utf-8" ?>
<otrs_package version="1.0">
<Name>Skins</Name>
<Version>0.1.1</Version>
<Vendor>CUSTOM</Vendor>
<URL>https://otrs.com/</URL>
<License>GNU GENERAL PUBLIC LICENSE Version 3, 8 December 2020</License>
<Description Lang="en">Custom - This customs working the files: index.pl and customer.pl</Description>
<Description Lang="pt">Customizações - Os arquivos customizados funcionam com os arquivos: index.pl e customer.pl</Description>
<IntroInstall Type="post" Lang="en" Title="Thank you!">Thank you for choosing the Custom.</IntroInstall>
<IntroInstall Type="post" Lang="pt" Title="Obrigado!">Obrigado por escolhe customizações.</IntroInstall>
<BuildDate>?</BuildDate>
<BuildHost>?</BuildHost>
<Filelist>
<File Permission="644" Location="Kernel/Config/Files/XML/CamaraSkin.xml"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/camara/css/Core.Header.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/camara/img/bg_topo.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/camara/img/logo-camara-transp.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/camara-azul/css/Core.Header.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/camara-azul/img/bg_topo.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/camara-azul/img/logo-camara-transp.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/camara-verde/css/Core.Header.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/camara-verde/img/bg_topo.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/camara-verde/img/logo-camara-transp.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-azul/css/Core.Default.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-azul/css/Core.Responsive.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-azul/img/bg_topo.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-azul/img/logo-camara-azulejo-mob.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-azul/img/logo-camara-azulejo.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-azul/img/logo-camara-color.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-azul/img/logo-camara-transp.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-new-identity/css/Core.Default.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-new-identity/css/Core.Login.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-new-identity/css/Core.Responsive.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-new-identity/img/bg_topo.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-new-identity/img/logo-camara-azulejo-mob.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-new-identity/img/logo-camara-azulejo.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-new-identity/img/logo-camara-color.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/camara-new-identity/img/logo-camara-transp.png"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/default/css/thirdparty/seges/DynamicFieldHTMLText.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/default/css/thirdparty/seges/jquery-tourbus.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Agent/default/css/thirdparty/seges/TicketFluidSidebar.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/default/css/thirdparty/seges/AddRemoveButtons.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/default/css/thirdparty/seges/DynamicFieldHTMLText.css"></File>
<File Permission="644" Location="var/httpd/htdocs/skins/Customer/default/css/thirdparty/seges/jquery-tourbus.css"></File>
</Filelist>
</otrs_package>

########################################################################
# File Core.Header.css

/**
* 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: 80px;
padding: 10px 0 12px;
background: url(../img/bg_topo.png) no-repeat right 4px, url(../img/logo-camara-transp.png) 50px 18px no-repeat, linear-gradient(135deg, #128EB6 0%,#242B33 33%); /* #333; */
color: #FFF;
position: relative;
}

#Application {
display: none;
}

/**
* @subsection Logo
*/
#Logo {
top: -4px;
right: 38px;
width: 244px;
height: 100%;
background: url(../img/logo_bg.png) no-repeat;
background-size: contain;
position: absolute;
display: none;
}

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


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

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

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

#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: 68px;
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 {
float: right;
}

.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: #FF9922;
}

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

#Navigation > .Selected {
border-color: #FF9922;
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: #FF9922;
}

#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 */

@media only screen and (min-width: 1025px) {

/* Verde: linear-gradient(to right, #173010 0%,#507c3f 45%) */

#Header {
height: 80px;
padding: 10px 0 12px;
background: url(../img/bg_topo.png) no-repeat right 4px, url(../img/logo-camara-transp.png) 10px 10px no-repeat, linear-gradient(135deg, #128EB6 0%,#242B33 33%);
color: #FFF;
position: relative;
}

#Application {
top: 38px;
right: 5px;
position: absolute;
display: block !important;
}

#Application a {
color: white;

}

#ApplicationAbbr {
font-size: 2em;
font-weight: bold;
padding-right: 5px;
white-space: nowrap;
}

#ApplicationName {
padding-left: 5px;
font-size: 1.8em;
border-left: 2px solid #128EB6;
}
}

[zzz]

I don't see any changes for the login screen.

Try something like:

Code: Select all

.LoginScreen  {
	background-color: red;
}

[spinaldf]

Well, work, then do I need to add this option with my skin? In another words, I need to repeat my code?

[zzz]

Yop, the login screen uses different class names (but that shouldn’t be that much work).