Gestaltung der Javascript Integration

Sie können Ihrer Tipprunde natürlich selbst anders gestalten. Dazu verwenden Sie ganz einfach sogenannte CSS-Stylesheets. Fertige Lösungen für die häufigsten Wünsche präsentieren wir Ihnen auf dieser Seite.

Auf dieser Seite finden Sie:

• Tabellenfarben anpassen
• Farben der Navigation anpassen
• Navigation vertikal darstellen
• Länderflaggen anzeigen (EM oder WM Tippspiele)
• Vorgehen bei weiterer individuelle Gestaltung

Tabellenfarben anpassen

Wenn Sie alle Tabellen des Tippspiels in Ihrem eigenen Firmendesign anzeigen möchten, können Sie dies bequem mit einer CSS Definition erledigen. Wollen Sie zum Beispiel die Tipprunde in schwarz und gelb erstrahlen lassen, müssen Sie darauf achten, dass auch die Schriftfarbe selbst dem Kontrast angepasst wird.

Im folgenden Beispiel haben wir bewusst krasse Farben gewählt, die überhaupt nicht zusammenpassen, aber die Möglichkeiten gut aufzuzeigen. Schwarz/gelb und blau/weiß sind die Grundmuster des Designs:

.kicktipp-javascript .kicktipp-content {
   background-color: darkblue;
   color: white;
}

.kicktipp-javascript .kicktipp-content tr.o,.kicktipp-javascript        
.kicktipp-content tr.o p,.kicktipp-javascript .kicktipp-content tr.o    
div,.kicktipp-javascript .kicktipp-content tr.o ul                      
li,.kicktipp-javascript .kicktipp-content tr.o a
   {
   background-color: yellow;
   color: black;
}

.kicktipp-javascript .kicktipp-content tr.e,.kicktipp-javascript        
.kicktipp-content tr.e p,.kicktipp-javascript .kicktipp-content tr.e    
div,.kicktipp-javascript .kicktipp-content tr.e ul                      
li,.kicktipp-javascript .kicktipp-content tr.e a
   {
   background-color: black;
   color: white;
}

.kicktipp-javascript .kicktipp-content td.colgap,.kicktipp-javascript   
.kicktipp-content th.colgap
   {
   background-color: darkblue;
}

.kicktipp-javascript .kicktipp-content caption,.kicktipp-javascript     
.kicktipp-content th,.kicktipp-javascript  .kicktipp-content            
div,.kicktipp-javascript .kicktipp-content a,.kicktipp-javascript       
.kicktipp-content td a,.kicktipp-javascript  .kicktipp-content th       
a.sort
   {
   color: white;
}

.kicktipp-javascript .kicktipp-content tr.s INPUT {
   background-color: green;
   color: white;
}

.kicktipp-javascript .kicktipp-content p {
   color: white;
}

.kicktipp-javascript .kicktipp-content tr.sptsieger {
   background-color: red;
   font-weight: bold;
}

.kicktipp-javascript .kicktipp-content tr.sptsieger .pkts {
   color: white;
}

Für Ihre eigene Farbgestaltung passen Sie die obigen CSS Anweisungen bitte Ihren Wünschen an.

Farben der Navigation anpassen

Die Navigation, die wir mitliefern passt vielleicht nicht immer zu Ihrem Design der eigenen Webseite. In diesen Fällen, können Sie die Menüpunkte mit CSS nach Herzenlust gestalten.

Wie oben verwenden wir krasse Farben, um die vorhandenen Möglichkeiten optimal darstellen zu können. Die Navigation soll sich also dem gelb/schwarzen und blau/weißen Design anpassen:

.kicktipp-javascript .kicktipp-navigation ul li {
   background-color: darkblue;
   color: white;
}

.kicktipp-javascript .kicktipp-navigation ul li a {
   background-color: yellow;
   color: black;
   border-bottom: 1px solid red;
}

.kicktipp-javascript .kicktipp-navigation ul li a.active {
   background-color: red;
   color: white;
   font-weight: bold;
   border-bottom: 1px solid red;
}

.kicktipp-javascript .kicktipp-navigation ul li a:HOVER {
   background-color: black;
   color: yellow;
    border-bottom: 1px solid red;
}

Navigation vertikal darstellen

Wenn Sie die Navigation als vertikales Menü ausliefern lassen wollen, verwenden Sie bitte hierzu den gesonderten Javascript-Aufruf (siehe "Integration"). Zusätzlich sollten Sie über Ihr eigenes CSS folgende Anweisung hinzufügen:

.kicktipp-javascript .kicktipp-navigation ul li {
   float: none !important;
   padding: 0px 2px !important;
}

.kicktipp-javascript .kicktipp-navigation ul li a {
   padding: 2px 0px !important;
    margin: 0 !important
}

Länderflaggen anzeigen (EM oder WM Tippspiele)

Wenn Sie möchten, können Sie in der Tippübersicht und auf einigen anderen Seiten die Länderflaggen bei internationalen Turnieren anzeigen. Hierzu binden Sie bitte unser fertiges CSS in den head-Tag Ihrer HTML-Seite ein.

<head>
	... 
   <link rel="stylesheet" type="text/css"
    href="http://www.kicktipp.de/css/flaggen.css" />
</head>

Sollten Sie Länderflaggen für andere Turniere wünschen, sprechen Sie uns bitte an.

Leider braucht man für die Verwendung von Vereinssymbolen unter Umständen eine Lizenz. Daher können wir das nicht als fertige Lösung präsentieren. Wenn Sie allerdings eine solche Lizenz haben oder aber aus rechtlichen Gründen gar keine benötigen, können Sie die technische Vorgehensweise aus den Länderflaggen kopieren.

Vorgehen bei weiterer individuelle Gestaltung

Für speziellere Gestaltungsmöglichkeiten müssen Sie den von uns ausgelieferten HTML Code ansehen und mit CSS Befehlen entsprechen ansteuern.

Normalerweise kann man sich den HTML Quelltext sehr einfach über jeden Internetbrowser ansehen, in dem man den Menüpunkt "Quelltext ansehen" auswählt.

Durch die Integration mit Javascript ist dies leider nicht ohne weiteres möglich. Es gibt aber zwei Möglichkeiten, die Ihnen den Zugriff erleichtern:

Wenn Sie den Browser Firefox benutzen, können Sie mit dem Firebug-Plugin sehr bequem die Integration analysieren und gestalten.

Sollte die Installation des Browsers oder des Plugins keine Option für Sie sein, können Sie sich den HTML-Quelltext auch über die normalen Kicktipp Seiten ansehen. Wie die Tabellen aufgebaut sind, sehen Sie zum Beispiel genauso in jeder beliebigen Tipprunde im Quelltext, zum Beispiel in der Demo-Tipprunde unter http://www.kicktipp.de/demo/tippuebersicht

Allerdings hat die Javascript Integration zusätzlich ein <div>-Element mit der Css-Klasse "kicktipp-javascript".

Lassen Sie Ihre Tipprunde in den Farben Ihres Designs erblühen. Viel Spaß bei der Gestaltung Ihres Tippspiels!