Customer-Frontend - gleich wie Agent-Frontend

[wr-aio]

Hallo zusammen,

meine Agenten-Frontend-Login gefällt mir sehr gut und genau das gleiche Design würde ich gerne dem Customer-Frontend-Login verpassen. Finde das Standard-Customer-Frontend nicht so hübsch.

Kann ich den Spaß verändern? und wenn ja wie?

Wünsche euch ein tolles Wochenende

Grüße Wolfgang

[wr-aio]

Hallo,

weiß hier keiner einen Tipp?

Ich habe mir die Doku bzgl. eigener Themes angeschaut aber kann damit nicht viel anfangen.

Sehe in Kernel/Output/HTML/Standard lauter dtl Dateien - muss ich diese Dateien editieren? Ich sehe keine CSS oder HTML Dateien.

Muss ich diese Dateien anpassen?

Wenn ja welche ist die Frontend Geschichte für den Agent?

Möchte ja das gleiche Skin auch im Customer-Frontend haben

[DavidLambauer]

Hey, also ohne nachzuschauen würde ich sagen, du kannst in der Sysconfig mal nach logo suchen und die punkte mit Frontend::Customer durchstöbern. Da solltest du den punkt finden..

[wr-aio]

Hallo,

vielen Dank für deine Antwort. Ja klar das kann ich machen und habe ich auch.

Im Standardtheme und Customer-Frontend (customer.pl) erscheint ja oben ein grauer Balken mit Links Company Name und rechts logo.

Drunter Anmeldung mit Benutzername und Passwort.

Austausch Logo und Company Name habe ich schon gemacht damit bin ich aber nicht zufrieden - Logo sehr klein (mach ich es größer sieht es auch blöd aus wegen dem grauen Balken der dann zu klein ist)

Den grauen Balken hätte ich gerne weg - Anmeldung mit Benutzername und Kennwort zentriert und darüber ein Logo - im Prinzip genauso wie das Agent Frontend.

Ich weiß ja schon das CustomerHeader CustomerLogin und CustomerFooter dafür verantwortlich sind. Mir fehlt aber noch das Wissen wie ich steuern kann wo, wie und in welcher Größe was steht

[DavidLambauer]

Okay, wieder ohne nachzuschauen:
Falls du in der Sysconfig wirklich keinen Punkt findest der diese Werte behandelt musst du es in den CSS Dateien unter var/http/htdocs/skins/Customer/default/CSS (Ich glaub das ist der richtige Pfad) regeln. Dort muss du die entsprehenden Eigenschaften und Klassen bearbeiten.

Gruß

[wr-aio]

Hallo,

die CSS Dateien habe ich gefunden - in meinem Fall die Core.Login.css

Konnte schon die Anmeldung ein bisschen weiter nach rechts ziehen - leider noch nicht zentriert

darüber muss dann das Logo - mal schauen

[DavidLambauer]

HTML Elemente kannst du unter Kernel/Output/HTML/Standard bearbeiten. Ist allerdings nicht updatesicher. Du müsstest die Datei kopieren und in Kernel/Output/HTML legen damit es beim Update bestehen bleibt... (<--Nicht sicher)

[wr-aio]

das mit dem Update ist schon klar

In dem Standard Pfad habe ich nur .dtl Dateien kann damit wenig anfangen - kann doch auch das Bild in der CSS-Datei einbinden oder?

[DavidLambauer]

die .dtl Dateien sind die HTML Dateien.... Die heißen nur so weil ein Tempalte System verwendet wird. In CSS kannst du Hintergrundgrafiken einbinden, die für bestimmte Elemente gelten. Hast du allerdings kein Element, musst du eins in der .dtl anlegen.

sowas ungefähr:

HTML Code:

Code: Select all

<div id="logo"></div>

CSS Code:

Code: Select all

#logo {
background: Url(Pfad zum Bild);
}

[wr-aio]

ok das ist ja schon mal was

sorry für meine nicht ganz so tollen HTML und CSS Kenntnisse

HTML

Code: Select all

<div id="logo_customer">

CSS

Code: Select all

#logo_customer {
	width: 220px;
	background: url(../img/logo-customer.jpg) repeat-x;	
}

und Login- Fenster

Code: Select all

.Login {
    padding: 250px 0;
	padding-left: 230px;
	text-align: left;
	}

Anmeldefenster sind nun soweit Ok - das Bild hängt jetzt noch mitten in der Anmeldemaske

wie kann ich die Position angeben? - mit width und height kann ich ja die größe des Bildes angeben aber nicht die Position

[DavidLambauer]

du musst:

Code: Select all

#logo_customer {
   width: 220px;
   background: url(../img/logo-customer.jpg) repeat-x;   
   position:relative;
   left: 100px;
   top: 100px;
}

Du kannst auch position absolute nehmen...
Auf css-tricks.com ist es in den Videos sehr gut erklärt---

Gruß

[wr-aio]

schaut mir die Seite dann auch mal direkt gleich an

wenn ich

Code: Select all

#customerlogo {
	width: 220px;
	position:absolute;
	left: 50px;
	top: 50px;
	background: url(../img/customerlogo.jpg) repeat-x;
}

benutze wird mein Anmeldefenster auch komplett verzogen.

durch die eigene Definition in der HTML sollte das aber doch egal sein.

[wr-aio]

hmm so wirklich funktionieren will der Spaß nicht

Habe jetzt zwar das Anmeldefenster und das Hintergrundbild scheinbar voneinander getrennt aber Bild wird immernoch abgeschnitten

Code: Select all

.Login {
    padding: 150px 0;
	padding-left: 230px;
	text-align: left;	
	}

#aiologo {
background: url(../img/aiologo.jpg) repeat-x;
background-position:220px -50px;
background-repeat:no-repeat;
}

oben wird meine Grafik aber voll abgeschnitten - lade mal meine komplette Core.Login.css hoch vielleicht sieht jemand ja was

[DavidLambauer]

Du musst wie oben schon beschrieben noch das Position Attribut angeben...

[wr-aio]

Hallo,

da passiert aber leider gar nichts. Habe die Position doch mit

Code: Select all

background-position:220px 50px

angegeben.

Irgendwie scheint es mir so das das komplette Fenster nicht nur die Core.Login.css ist und der Bereich einfach zu klein ist

[DavidLambauer]

aber background position ist was anderes als position...xD

[wr-aio]

aber background position ist was anderes als position...xD

Ah OK. Wenn ich das verwende passiert gar nichts - keine Bewegung

Code: Select all

 #customerlogo {
	background: url(../img/customerlogo.jpg) repeat-x;
	background-position:220px -50px;
	background-repeat:no-repeat;
	position:relative;
	left: 50px;
	top: 20px;
	

[DavidLambauer]

CSS:

Code: Select all

.customLogo{
	width:300px;
	height:300px;
	border: 2px solid black;
	position: absolute;
	left:200px;
	top:40px;
	background:Url(HierFügstDuDenPfadVonDeinemBildEin);
}

html:

Code: Select all

<div class="customLogo"></div>

Schau dir das noch an und du solltest es hin bekommen:

http://css-tricks.com/video-screencasts ... on-values/

[wr-aio]

hmm ja ok

ziehe ich mir dann ncoh einmal rein.

Mein Problem an sich ist aber sobald ich was an der CSS ändere und das Logo das als Hintergrund bild da steht - verzieht sich auch mein Anmeldefenster - schaut aus wie siamesische Zwillinge

Vielleicht das Hintergrundbild dann doch direkt in der HTML-Datei respektive dtl oder wie die Datei sich schimpft reinposten

sorry dafür das ich mich so anstelle

[DavidLambauer]

editiere am besten nicht den vorhandenen code sondern schreibe neuen. Schreibe in die DTL Datei ein Div und in die CSS Datei eine neue Klasse. Dann sollte es doch passen..?

[wr-aio]

sorry aber ich kriege es einfach nicht hin - immer wird mein Anmeldefenster beschnitten

customerlogin.dtl (/opt/otrs/Kernel/Output/HTML/Standard/)

Code: Select all

<div id="customerlogo">

Core.Login.css (/opt/otrs/var/httpd/htdocs/skins/Customer/default/css)

Code: Select all

.Login {
    position:relative;
	left: 250px;
	top: 300px;
	}

Code: Select all

#customerlogo {
	background: url(../img/customerlogo.jpg) repeat-x;
	background-position:220px -100px;
	background-repeat:no-repeat;
	position: absolute;
    left:200px;
    top:40px;
}

Wie kann ich die eigene CSS-Datei bekannt machen?

Anbei ein Screenshot wie der spaß ausschaut

[DavidLambauer]

ich schaus mir an, dauert aber ein moment...

[wr-aio]

Hallo,

bin ein paar Tage nicht im Büro. So war das auch nicht gemeint aber danke. Muss mir das dann wieder anschauen wenn ich im Büro bin

Gruß Wolfgang

[DavidLambauer]

Hallo,
tut mir echt leid, das es so lange gedauert hat. Hab dich drei mal vergessen und als ich dran gedacht hab, hatte ich keine Zeit Ich hoffe du kannst mir verzeihen

Also ich habe jetzt was recht simples gemacht. Den Header habe ich ausgeblendet und nicht gelöscht. In der dtl Datei habe ich ein Div hinzugefügt und den Rest hab ich mit Css gemacht.

in der CSS Datei steht folgendes: (/var/httpd/htdocs/skins/Customer/default/css/Core.Login.css)

Code: Select all

/** Blendet den Header aus... **/
#Header {
        display:none;
        visibility:hidden;
}
/** Zentriert das Ganze **/
#Slider {
        margin:100px auto;
}

/** Eigenschaften des Divs in der dtl **/
#LogoCustomerLogin{
        width:300px; //muss angepasst werden, je nach breite des Logos
        height:50px; // muss angepasst werden, je nach höhe des Logos
        background:Url(../img/logo.png) no-repeat; //Der Pfad des Logos
        margin:5px auto; //Zentrieren des Logos
}

Und die DTL Datei:(Kernel/Output/HTML/Standard/CustomerLogin.dtl)

Code: Select all

  <div id="Slider">
        <div id="SlideArea">
            
            <div id="LogoCustomerLogin">
            </div>
           
 <div id="Login">....
...
...
...

Mehr ist es nicht. Alternativ kannst du auch im Div das Bild dirkt einblenden, dann kannst du auch drauf klicken und so, falls du das wllst.

Ansonsten versuchs mal damit.

Gruß David

[wr-aio]

Hallo,

danke für deine Arbeit. Kann das erst die nächsten Tage ausprobieren. Aber vielen Dank schon einmal für deine Arbeit.

[DavidLambauer]

Kein Problem, hat ja auch lang genug gedauert, dabei war es am ende doch nur 2 minuten xD Eine kleine Fehleinschätzung meinerseits...:p

[wr-aio]

Hallo,

wollte mich noch einmal melden - dein Code hat zwar auch so nicht ganz funktioniert -Anmeldebutton hat sich mit dem bild verzogen - hab den Spaß jetzt aber direkt in der HTML-Datei hinbekommen

so endlich ist der Käse gegessen - danke für die Hilfe noch einmal