CSS Joomla Template - Aussehen der Gallerie verändern

[treib0r]

Joomla Template - Aussehen der Galerie verändern

Hallo alle miteinander,

kurz vorweg. Ich habe 0 Ahnung von CSS und kann nicht programmieren. Diverse Anpassungen habe ich via Versuch-und-Irrtum "erlernt". Allerdings komme ich jetzt nicht mehr weiter und bitte deswegen um Hilfe.

Es geht um den Look dieser Slideshow:
http://www.joomfreak.com/demo/#jf_texturia

Die alte Version von bt_modslideshow sah auf meiner Homepage genauso aus. Das Problem war nur, dass ich keine Bilder uploaden konnte. Diverse Wege habe ich ausprobiert und Ratschläge befolgt, ohne dass es etwas gebracht hat.
Deswegen habe ich dann die Bezahlversion der Slideshow gekauft, installiert und seitdem keine Probleme mit den Bilderuploads mehr.
Allerdings sieht die Slideshow nun folgendermaßen aus:
http://www.grundschule-kleinekielstrasse.de

Wie kann ich nun diesen Schrägen Rahmen implementieren? Die Background .pngs etc. habe ich alle. Jedoch weiß ich nicht, was ich in CSS verändern muss. Die Navigationspfeile habe ich hinbekommen, den Rest leider nicht. Schön wäre auch die orangefarbene Infobox über den Bildern.

Falls ihr mir helfen könnt, kann ich die benötigten CSS Datein uppen.

Danke.

 

[Daaron]

Da fehlt in erster Linie etwas HTML-Code, der diesen Rahmen drüber legt..

Aber: Weil man ja kein nutzloses HTML schreiben soll, dass ausschließlich optischen Zwecken dient, löst der clevere Entwickler das eh über CSS Pseudo Elemente.

.container_skitter:after {
display: block;
content: "";
width: 943px;
height: 539px;
background: url("http://www.joomfreak.com/demo/jf_texturia/modules/mod_btslideshow/assets/skitter/images/jf_slideshow.png");
margin-top: -539px;
position: absolute;
z-index: 101;
}

Was du hier noch anpassen musst:
1.) Höhe & Breite
2.) die URL des Hintergrunds sowie dessen Ausrichtung

 

[treib0r]

Danke schon mal dafür. Ich habe die Codezeilen jetzt zusätzlich eingefügt:

.box_skitter .container_skitter {overflow:hidden;position:relative;}
.box_skitter .image {overflow:hidden;}
.box_skitter .image img {display:none;}
.container_skitter:after {
display: block;
content: "";
width: 943px;
height: 539px;
background: url("http://www.joomfreak.com/demo/jf_texturia/modules/mod_btslideshow/assets/skitter/images/jf_slideshow.png");
margin-top: -539px;
position: absolute;
z-index: 101;
}

Die URL zum .png habe ich korrigiert, jedoch bekomme ich so nicht das erwartete Ergebnis.