(closed)Verwendung von diesem Template möglich?

Hallo Community,

ich bin neu im Thema Contao und möchte von euch wissen ob ich dieses Template unter Contao nutzen kann: http://www.styleshout.com/templates/...e11/index.html
Seit längerem möchte ich mich dem Thema widmen und habe vor ein paar Minuten die Installation von Contao abgeschlossen.
Leider weis ich nicht ob dieses Template verwendet werden kann und wenn ja wie ich es einbinde.
Wäre super wenn mir jemand sagt, ob es möglich ist und was ich googlen muss um mich damit zu beschäftigen :-)
Vielen Dank für eure Antworten schon jetzt.

Willkommen im Forum! :)

Du wirst das Template so nicht einfach importieren können, aber du kannst natürlich das CSS auf Contao übertragen.

Hey jubel und danke :-)
Ich bin mir nicht mal sicher ob ein CSS habe.
In dem ZIP ist nicht wirklich viel.

im ordner images die Datei "Colourise.css"

Doch, da gibt's eines (Colourise.css), ansonsten würde auch Firebug vieles verraten.
Aber du wirst auf jeden Fall die Stile auf die Contao-Klassen übertragen müssen. Mit ein paar Klicks ist es nicht getan.

Wenn dir das Design gefällt, dann versuche es mit Contao nachzubauen, das gibt dir gleich eine Menge Einblick ins CMS.

magicsepp und jubel ihr habt beide recht.
Es gibt eine colourise.css :o
Dann versuch ich mich mal im nachbauen.

würde bei der Gelegenheit die Breite auf 960px verbreitern und gleich auf html5 bauen

Zitat:

---

Zitat von magicsepp

würde bei der Gelegenheit die Breite auf 960px verbreitern und gleich auf html5 bauen

---

Ich hab die Breite mit 1000px gemacht, würdest du jetzt 960 oder 1000 px nehmen?

Wenn du Bildschirmgrößen mit 1024 unterstützen willst, sind 960 üblich. Bei 1280 Breite legt man 1140 Px an. Oder du machst ein flexibles Layout, das sich zwischen diesen Grenzwerten anpasst.

Wenn 960 üblich sind werde ich dies verwenden =)

Inzwischen sind 1140 genau so üblich. ;)

Aber das kannst du auch später noch ändern.

Ich hab über ein Modul das "Regenbogen" Bild in den header eingefügt. Wenn ich nun ein Menü erstelle steht dieses immer unter dem Regenbogen.
Kann ich dies über das Bild setzten? Also der Regenbogen soll in den Hintergrund.

Dann baust du dein Bild als Hintergrundbild ein.

Ein guter Tipp für den Einstieg sind übrigens diese beiden Bücher: Little Boxes, Webseiten erstellen mit Contao ( beide von Peter Müller).

Das zweite Buch hört sich interessant an.
Aber ich muss schon so viele andere Bücher für die Arbeit von Galileo Computering lesen :(

Ich bekomm einfach den Hintergrund nicht farbig :eek:
Unter:

Zitat:

---

Themes » Colourise11 » Stylesheets » mycss » Formatdefinition ID 95 bearbeiten

---

gebe ich das ein:

Zitat:

---

Selektor=.header
Hintergrund und Deckkraft
000000 und 100

---

Bei sollchen Problemen Hilft mir der erste Buchtip halt nicht ;)

Zitat:

---

Selektor=.header
Hintergrund und Deckkraft
000000 und 100

---

- Hast du eine Klasse header?
- Hintergrund 000000 heißt schwarz
- Deckkraft 100 komplett schwarz (könntest du auch weglassen, da default)

Und wo gibst du nun das Hintergrundbild ein?

Zitat:

---

Bei sollchen Problemen Hilft mir der erste Buchtip halt nicht

---

Doch, doch, da bekommt man ein gutes Grundverständnis für CSS! ;)

Vorweg: Ohne solides Grundlagenwissen zu HTML und CSS ist es ziemlich mutig, mit Contao eine eigene Site aufbauen zu wollen. Da kämpfst du an mehreren Fronten gleichzeitig.

Wenn du mit Contao 3 arbeitest, lautet der Selektor ziemlich sicher #header (und nicht .header). Im HTML steht <header id="header"> oder <div id="header">, und dann kann der Selektor nicht .header heißen.

Zitat:

---

Zitat von thomas91

Bei sollchen Problemen Hilft mir der erste Buchtip halt nicht ;)

---

Ein Buch kann dir ja nicht über die Schulter schauen und bei konkreten Detailproblemen einen Vorschlag machen. Aber es kann dir Grundlagenwissen vermitteln, z. B. zu Selektoren:
http://little-boxes.de/lb1/6-selekto...nd-farben.html

Trotzdem noch viel Spaß beim Lernen von Contao und CSS.

Hallo Ihr zwei,

im Moment habe ich Folgenden Code:

Code:

---

.inside {
    background:url("files/Colourise11/images/bg.jpg") center top no-repeat;
    font:18px Arial;
    color:#808080;
}

---

Firebug zeigt mir Folgende ID´s in dem Bereich an:

Code:

---

<div id="wrapper">
<div id="header">
<div class="inside">

---

IDs werden im CSS mit # angezeigt. Wenn du also den Header stylen willst, dann vielleicht so:

Code:

---

#header .inside {
    background:url("files/Colourise11/images/bg.jpg") center top no-repeat;
    font:18px Arial;
    color:#808080;
}

---

Vorweg zwei Dinge:

• Wir werden hier nicht Stück für Stück dein Template mit dir zusammen bauen. Ich jedenfalls nicht ;)
• Ohne einen Link bleibt das bei konkreten Fragen beim Raten von Zusammenhängen.

Tipp: Du solltest erst einmal analysieren, wie das Colourise11-Template aufgebaut ist, bevor du versuchst, das nachzubauen. Ich habe gerade einmal die Seite aufgerufen, und dort ist das Hintergrundbild http://www.styleshout.com/templates/.../images/bg.jpg. Es ist 1000px breit und wird dem body zugewiesen, nicht dem Header.

Noch ein Tipp: Wenn das deine erste Site mit Contao ist, dann würde ich dir ehrlich gesagt empfehlen, nicht an einem eigenen Template beides gleichzeitig zu lernen (HTML/CSS und Contao). Dazu brauchst du viel Geduld und eine ziemlich ausgeprägte Frustrationstoleranz.

EDIT
Der Selektor .inside selektiert *alle* HTML-Elemente auf der Seite mit der Klasse inside. Das ist vielleicht mehr als du glaubst. jubel hat dir ja schon den entscheidenden Tipp gegeben ;)

Zitat:

---

Ich jedenfalls nicht

---

Ich auch nicht. ;)

Frontend-Vorschau
http://webtp.lima-city.de/contao-3.0...ao/preview.php
Mir ist schon das hier keine lust un Zeit hat mit mir ein Template zu entwicklen.
Ich muss ja nicht 100% alles von dem Template, welches mir gefällt übernehmen, und kann dinge anders machen und lösen?

Das Bild ist doch da (Link). Aber du musst es wie gesagt dem body zuweisen und nicht dem Header.

Zitat:

---

Zitat von pmmueller

Das Bild ist doch da (Link). Aber du musst es wie gesagt dem body zuweisen und nicht dem Header.

---

Also hier muss ich wirklich dumm Fragen :o
Wenn ich das Bild dem Body hinzufüge ist es dann nicht auf der ganzen Seite?

Das meinte ich mit "Analysieren" ;)

Du weißt dem body als Hintergrundfarbe schwarz zu und positionierst das Bild mit center top no-repeat oben in der Mitte. Dadurch sieht es so aus, als ob es hinter dem Header steht. Da das Bild an allen vier Seiten auch schwarz ist, fällt das alles überhaupt nicht auf.

OK ich habe den Body mit der ID Top schwarz gefärbt und das Bild Center Top angeordnet. sieht aber genauso aus als ware es dem Header zugeordnet :)
Ich weis das ich mit Hilfe von css die Link Farbe ändern kann hab aus der vorhanden css die Parts kopiert und einer eigenen Formatdefinition für die Überischt hinzugefügt.

Beim Code muss ich doch jetzt die Namen anpassen, zum beispiel aus nav ul müsste doch level_1 ul werden?

Der Code hier ist aus der Orginaldatei:

Code:

---

/*  Navigation  */
#nav {
        position: absolute;
        margin: 0; padding: 0;               
        height: 40px;
        width: 900px;       
        left: 0;        top: 35px;       
        border-bottom: 1px solid #1A1A1A;
}
#nav ul {
        float: left;
        list-style: none;
        width: 880px;               
        height: 40px;
        margin: 0 0 0 5px; padding: 0;       
        display: inline;
}
#nav ul li {
        display: inline;
        margin: 0; padding: 0;
}
#nav ul li a {
        float: left;
        margin: 0;        padding: 0 8px;
        font: bold 15px/35px 'Trebuchet MS', Helvetica, Arial, Geneva, sans-serif;
        text-decoration: none;       
        color: #5c9a12;       
}
#nav ul li a:hover,
#nav ul li a:active {
        color: #eee;
        background: none;
        border: none;
}
#nav ul li#current a {       
        color: #0077B5;       
}

#header h1#logo-text a {
        position: absolute;
        margin: 0; padding: 0;
        font: normal 72px Georgia, 'Times New Roman', Times, serif;
        letter-spacing: -1.5px;
        color: #fff;
        text-decoration: none;
       
        /* change the values of top and left to adjust the position of the logo*/
        top: 140px; left: 10px;       
}
#header h1#logo-text a:hover {
        background: none;        border: none;
}
#header p#intro {
        position: absolute;
        margin: 0; padding: 0;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-weight: normal;
        font-size: 18px;
        line-height: 1.6em;
        font-style: italic;
        text-transform: none;
        color: #cd9857;
        width: 400px;
       
        /* change the values of top and left to adjust the position */
        top: 245px; left: 15px;

---

http://de.contaowiki.org/Css_ABC_in_...ic_Accademy.29

Such da mal das menu.

Ich möchte jetzt diese Zeile umsetzen:

Code:

---

#header h1#logo-text a {
        position: absolute;
        margin: 0; padding: 0;
        font: normal 72px Georgia, 'Times New Roman', Times, serif;
        letter-spacing: -1.5px;
        color: #fff;
        text-decoration: none;
       
        /* change the values of top and left to adjust the position of the logo*/
        top: 140px; left: 10px;

---

Der Code ist aus der Orginal css, aber wie gebe ich als Selektor hier ein: #header h1#logo-text a
Ich hab schon header .h1 logo-text & h1 .logo-text versucht.
Leider hatte ich beim Probieren kein Glück. Wie ist bei soetwas die richtige schreibweise?