Joomla! Probleme beim Anpassen eines Template

wolfs · 03.02.2009

Hi @ all!

Bin dabei, ein Template anzupassen (s. o.). Dabei hab' ich folgendes Problem. Das vorhandene Template ist in drei 'Zonen' aufgeteilt. Die mittlere ist für den Inhalt. Die linke und rechte sind einfach nur Hintergrund (ein Verlauf zur Mitte hin). Die Farbe der linken und rechten Seite ist von den Seiten her schwarz und zur Mitte hin wird's grau. Die mittlere Zone ist ein leicht durchscheinendes Schwarz.

Die Aufteilung ist für mich nicht ideal (beim Original ist der mittlere Bereich ca. 400 Pixel breit und ich brauch 600 Pixel). Desweiteren soll mein Logo dann auch ein wenig breiter werden und die Farbgebung soll nicht ganz so dunkel sein. Den Hintergrund hab' also jetzt in Photoshop nachgebastelt. Wenn ich den jetzt in Joomla! einbinde ist von dem von mir erstellten Hintergrund nix mehr zu sehen, dann ist alles schwarz. Versteh' ich nicht. Wenn ich einen weißes Hintergrund erstelle ist er weiß. Grau ist grau. Bin am verzweifeln.

Kann es sein, dass die Hintergrundfarbe (trotz Hintergrundbild) in der .css-Datei anders angegeben ist? Mit CSS kenn' ich mich nicht aus. Gibt es eine Beispiel-CSS-Datei in der die einzelnen Angaben beschrieben sind, damit es einfacher zu verstehen ist?

Wäre schön, wenn ihr mir helfen könntet.

Hier noch die Hintergründe: Original

Fälschung

sokie · 03.02.2009

AW: Joomla! Probleme beim Anpassen eines Template

prinzipiell musst du doch nur die Lage deine ursprünglichen Hintegrunds im richtigen Ordner finden, und diese Datei mit deiner ersetzen. (wichtig exakte schreibweise des Dateinamens)

DrEddison · 03.02.2009

AW: Joomla! Probleme beim Anpassen eines Template

Du solltest auch schauen, ob der Dateiname korrekt ist. Oftmals gibt es Probleme bei Umlaten, Groß-/Kleinschreibung und Leerzeichen. Wenn alles passt und der Speicherort auch der gleiche ist, dann prüfe das CSS. Am besten poste es mal, dass man mal draufschauen kann.

"Normalfall":

body{
background:#f00 url('pfad/bild.jpg') no-repeat center top;
}

#f00 = Farbe rot, also bei dir sollte dort #000 stehen, wenn alles schwarz sein soll. #f00 nur zum testen, ob die eigenschaft überhaupt verarbeitet wird.

url() = sollte klar sein ;-)

no-repeat = keine wiederholung, es geht auch repeat-x oder repeat-y für die entsprechenden achsen

das andere sind die positionsangaben. dort geht auch left, bottom, right

Gib mal bescheid!

-EDIT-
Es wird auch gern das abschließende ";" vergessen. also immer alles schön prüfen und nochmal hier posten

Sculert · 03.02.2009

AW: Joomla! Probleme beim Anpassen eines Template

Also um Css kommste da nicht drumrum...

Für die allgemeinen Eigenschaften von Joomla findest du hier gute Tutorials auch was Css allgemein betrifft. Z.b.

Gute css Referenz findest auf Css4you.de

Die Aufteilung ist für mich nicht ideal (beim Original ist der mittlere Bereich ca. 400 Pixel breit und ich brauch 600 Pixel).

im css findest du:

.deindiv{
width : 400px;
color : xyz...
}

einfach ändern und schon is 600 px

Auch das einbinden vom Hintergrund musste übers css machen

background-image: url(../template/templatename/bg.png)

genaue Syntax und Möglichkeiten findest in der Referenz

Soweit so gut also ne Runde Css spielen

Sculi

wolfs · 03.02.2009

AW: Joomla! Probleme beim Anpassen eines Template

Den neuen Hintergrund habe ich, nachdem ich die Original-Datei umbenannt habe, in den Ordner des Template's kopiert. Die wurde ja dann auch im Browser angezeigt.

Upps, da ist mir die falsche *.css reingerutscht. Muss wohl nicht die template.css sondern die style1.css sein. (Peinlich)

Hier ist mal die style1.css:

Code:

body {
background:#010101 url(../images/tr-bg-style1.jpg) no-repeat top center fixed;
color: #666666;
}

#tr-container {

}
#tr-top-menu  {
border-bottom:1px solid #333;
}
#tr-logo a {
    background:url(../images/tr-logo-style1.png) no-repeat center center;
}
#tr-top-menu #mainlevel-nav li a {
color:#FFFFFF;

}
h2.contentheading, .contentheading {
    color:#bbb;
    border-bottom:1px solid #333;
}
td.buttonheading {
    border-bottom:1px solid #333;

}
.leading {
    background:#bbb;
}
div.moduletable h3, div.moduletable_menu h3, div.moduletable_text h3 {
    color:#999;
    border-bottom:1px solid #333;
    
}
small, .small, .smalldark, .mosimage_caption, .author, .createby, .createdate, .modifydate, a.readon, .img_caption {
color:#333;
}
a.readon:hover, a.readon:active, a.readon:focus {
    border: 1px solid #EEE;
}
a.readon {
border: 1px solid #000;
}
#system-message dd.message ul {
    background: #bbb;
}
ul.menu a {
    color:#bbb;
}
ul.menu a:visited {
    color:#bbb;
}
ul.menu a:hover, ul.menu li#current a {
    background:url(../images/tr-arrow-hover-style1.png) no-repeat left center;
}
#tr-content-a .moduletable .item {
    background:#bbb;
}
#tr-content-a .moduletable h3 {
    color:#bbb;
}
a {
    color: #999;
}
a:hover, a:active, a:focus {
    color: #fff;
}

#tr-footer {
    border-top:1px solid #222;    
    color:#222;
}


.sectiontableheader {
background:#bbb;

}
.blog_more , .links {
    
    background:#000;
    border-top:1px solid #333;
}
#tr-container .landing-list li {
width: auto;
}
#tr-container .landing-list img {
background:none;
border:1px solid #333;
padding:2px;
}
#tr-container .landing-list h3 {
font-size:12px;
}
#tr-container .landing-list h3 a{ text-decoration:none;font-size:12px; font-family:Arial, Helvetica, sans-serif; font-weight:normal;}
#itemlist h1{ margin:0;}
#tr-container #p-container .pageslinks { border:none;}

#tr-container #p-container .p-image img {
border:none;
}
#tr-container #p-container .p-image {
background:none;
border:none;
margin:0;
padding:0;
}
#tr-container  #p-container .p-title {
color:#FFF;
font-family:"Myriad Pro",Arial,sans-serif;
font-size:14px;
font-weight:bold;
margin:0 0 5px;
padding:0 0 0 10px;
text-transform:uppercase;
border-bottom:1px solid #333;
}
#tr-container  #p-container .p-item {
border:none;
}
#tr-container #p-container p .pagenav {
background:none;
border:none;
color:#999999;
font-size:11px;
margin:0 3px;
padding:2px 3px;
visibility:visible;
}
#tr-container #p-container .p-item-right-x {
padding:10px;
}
#tr-container #p-container .p-item h3 {
color:#999;
font-size:11px;
letter-spacing:0.04em;
margin:5px 0 0;
text-transform:uppercase;
}
#tr-container #p-container .p-web a {color:#666;}

#tr-container #p-container .p-catheader-x { font-size:12px; padding:10px; line-height:180%; font-style:italic;}

#tr-m-spotlight {font-size:13px; padding:0 10px 10px 10px; line-height:180%; }
#tr-m-showcase{display:table;
margin-bottom:30px;}

.mod_portfolio_item { margin:6px; border:1px solid #333; padding:5px; display:block; float:left;  }
.mod_portfolio_img { overflow:hidden; height:60px; display:block; width:70px; text-indent:-10000px; }
.mod_portfolio_title { display:none; }

.tr-mod-info { padding:0px 10px;}
.tr-mod-info p { }

DrEddison · 04.02.2009

AW: Joomla! Probleme beim Anpassen eines Template

Heißt das, dass Dein Problem damit gelöst ist?

Ich finde, CSS kann man nicht "mal eben" erklären. Das ist sehr komplex und auch vom Aufbau der (X)HML-Datei abhängig. Es gibt aufbauten, da kann man mal schnell die Breite um 200px vergrößern, bei anderen muss noch hier der padding- und dort der margin-wert angepasst werden. Mögliche Fehlerquellen gibt's da zu Hauf!

Grüße!

wolfs · 04.02.2009

AW: Joomla! Probleme beim Anpassen eines Template

Hi,

noch konnte ich nicht ausprobieren, ob die Änderung, die ich gerade vorgenommen habe funktioniert. Das seh' ich nachher.

Das CSS nicht 'mal eben' erklärt ist, ist mir klar. Daher hab' ich gehofft, dass es eine 'Basis-CSS' gibt, anhand man das gewünschte Design anpassen kann. Diese Basis-Datei liegt ja prinzipiell jedem Template bei, nur das darin nicht alle Schritte, bzw. Abschnitte erklärt sind. Vielen Dank schon mal für den Hinweis mit den padding- und margin-werten.

Gerade hab' ich die geänderte style1.css ausprobiert und es war alles weiß. Also kein Fortschritt. Als ich mir das ganze nochmal im Editor angesehen hab', ist mir aufgefallen, dass ich beim Dateinamen anstelle eines 'g' ein 'q' geschrieben habe. Is' mir ganz schön peinlich. Also ist mein bisheriges Problem gelöst.

Vielen Dank für eure Hilfe. Ich hätte es eigentlich selbst sehen müssen, aber wenn man davor sitzt sieht man manchmal die augenscheinlichsten Fehler nicht.