Joomla templates ändern
Hallo Fans,
zur Zeit stelle ich Internetseiten einer Kirchengemeinde auf Joomla um. Ich verwende die Joomla-Version 1.0.15 Stable und habe mir ein zum Inhalt passendes template besorgt, das ich nun nur etwas anpassen möchte.
Wenn man googelt, findet man eine Menge zu diesem Thema - nur kein leicht verständliches tutorial !
Mich interessiert:
Welche Datei(en) muss ich wo verändern (index.php oder/und template_css.css), wenn ich Folgendes beeinflussen möchte:
a) Wie erstelle ich im mainmenu Fettschrift ?
b) Wie kann man dort die Untermenüpunkte ein wenig nach rechts auswerfen ?
c) Evtl. auch mit einem Punkt davor ?
d) Wie stelle ich dort ggf. andere Farben ein ?
e) Ich vermisse die Funktion, dass LINKS automatisch unterstrichen werden. Ich habe bisher immer manuel unterstrichen.
Jetzt weiss ich nicht, ob diese Fragen für dieses Forum nicht zu speziell sind. Aber vielleicht hat ja hier jemand den Durchblick..
Gruss WIM47
Antwort schreiben
Die ganzen Sachen kannst du in deiner CSS-Datei im Template-Ordner bestimmen. Vorrausgesetzt du kennst dich mit CSS aus
Antwort 2 von wim47 vom 13.09.2020, 11:54 Options
Hallo Comuterfreak,
wenn ich mich mit CSS auskennen würde, hätte ich nicht diese Fragen gestellt.
übrigens...
Punkt a (Fettschrift) habe ich mittlerweile durch Vergleiche mit versch. templates herausgefunden.
Dann poste hier mal die CSS-Datei
Antwort 4 von wim47 vom 13.09.2020, 13:06 Options
Hallo Comuterfreak,
hier ist der Inhalt der Datei template_css.css:
/*------------------------------------------------------------------------
# COLLAPSE MODULES TUTORIAL BY YOUJOOMLA.COM
# ------------------------------------------------------------------------
# Copyright (C) 2006-2007 Youjoomla.com, All Rights Reserved.
-------------------------------------------------------------------------*/
body {
font-family:'trebuchet ms',arial,verdana,sans-serif;
color: #000000;
background-color:#DFE0EB;
margin: 0px;
padding: 0px;
font-size: 12px;
line-height: 21px;
background-image: url(../images/bg.jpg);
background-repeat: repeat-x;
}
#credits{display:none;}
body.contentpane {
background: #ffffff;
}
#div1{
height:6px;
}
#div1-left{
float:left;
height:6px;
width:200px;
#background-image: url(../images/slogan.jpg);
}
#div1-right{
float:right;
height:6px;
width:800px;
font-size:11px;
}
#div1-closer{
clear:both;
}
#div2{
height:62px;
}
/*Höhe von 72px auf 62px geändert*/
#div2-left{
float:left;
/*height:72px;
width:200px;
geändert wegen neuem Logo; Stephan Schlensak*/
height:68px;
width:278px;
background-image: url(../images/logo.jpg);
}
#div2-right{
float:right;
height:32px;
width:800px;
}
#space{
height:12px;
}
/*
#div2-closer{
clear:both;
}
*/
#div3{
height:48px;
}
#div3-left{
float:left;
height:48px;
width:200px;
background-image: url(../images/search.jpg);
line-height:48px;
}
*/
#div3-left .inputbox{
margin-top:12px;
margin-left:2px;
border:none;
padding:4px;
border:solid #DFE0EB 1px;
font-size:10px;
}
#div3-right{
float:right;
height:48px;
width:800px;
text-transform:uppercase;
}
*/
#div3-closer{
clear:both;
}
#wrap{
margin:0 auto;
width:1000px;
}
#container {
width:1000px; /*center hack*//*THIS IS THE MAIN CONTAINER FOR ALL DIVS*/
margin:0 auto; /*center hack*/
text-align:left;
}
#modright {/*THIS IS MODULE RIGHT*/
float:right;
width:150px;
overflow:hidden;
}
#modright-inside {/*THIS IS MODULE LEFT*/
padding:10px;
}
#modleft {/*THIS IS MODULE LEFT*/
margin-top:10px;
font-weight: bold; /* ÄNDERUNG VOM 13.09.08. Zeile hinzugefügt. Auswirkung: mainmenu fett */
float:left;
width:198px;
overflow:hidden;
border:solid #DFE0EB 1px;
background-color:#FFFFFF;
}
#modleft-inside {/*THIS IS MODULE LEFT*/
padding:10px;
}
/*COLAPSE MODULES FUNCTIONS */
/*LEFT AND RIGHT MODULES VISIBLE */
#main-body {/*THIS IS MAIN DIV HOLDS THE CONTENT DIV*/
float:left;
width:850px;
}
#content {/*THIS IS CONTENT DIV AND YOUR MAINBODY IS INSIDE OF IT*/
text-align:left;
float:right;
width:650px;
}
#box {
margin-bottom:10px;
}
#mainbody{border:solid #DFE0EB 1px;
background-color:#FFFFFF;
padding:0 10px 0 10px;
}
#content-inside {
padding:11px 10px 10px 10px;
}
/*COLAPSE LEFT MODULE ONLY*/
#main-body-right {
float:left;
width:850px;
}
#content-right {
text-align:left;
float:left;
width:850px;
}
/*COLAPSE RIGHT MODULE ONLY*/
#main-body-left {
float:left;
width:1000px;
}
#content-left {
text-align:left;
float:right;
width:800px;
overflow:hidden;
}
/*COLAPSE RIGHT AND LEFT MODULE */
#main-body-full {
float:left;
width:1000px;
}
#content-full {
margin:0 auto;
text-align:left;
width:1000px;
}
/*END COLAPSE MODULES FUNCTIONS */
#clear{
clear:both;
}
#footer{
border-top:solid #405d7e 1px;
}
#footer-left{
margin-top:10px;
float:left;
width:480px;
}
#footer-right{
float:right;
width:520px;
margin-top:10px;
}
#footer-closer{
clear:both;}
a img {
border: none;
}
img {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6{
}
h1{
font-size:25px;
line-height:30px;
}
h2{
font-size:20px;
line-height:25px;
}
h3{
font-size:15px;
line-height:20px;
}
h4{
font-size:12px;
line-height:17px;
}
#news{
}
#news-left{
float:left;
width:46%;
border:solid #DFE0EB 1px;
background-color:#FFFFFF;
padding:10px;
margin-bottom:8px;
}
#news-right{
float:right;
width:46%;
border:solid #DFE0EB 1px;
background-color:#FFFFFF;
padding:10px;
margin-bottom:8px;
}
#news-closer{
clear:both;
}
#bottom{
margin-top:6px;
}
#bottom-left{
float:left;
width:46%;
border:solid #DFE0EB 1px;
background-color:#FFFFFF;
padding:10px;
}
#bottom-right{
float:right;
width:46%;
border:solid #DFE0EB 1px;
background-color:#FFFFFF;
padding:10px;
}
#bottom-closer{
clear:both;}
.moduletablemainnav{
position:relative;
z-index:100;
margin:0;
padding:0;
}
#mainlevelmainnav,#mainlevelmainnav ul{
float:left;
list-style:none;
background:transparent;
line-height:30px;
margin:0;
padding:0;
}
#mainlevelmainnav a{
display:block;
color:#405d7e;
text-decoration:none;
padding:0 0.5em 0 0.5em;
}
ul#mainlevelmainnav li a#active_menumainnav {
color: #6faabc;
background-image: url(../images/menu-bg.jpg);
}
#mainlevelmainnav a:hover{
color: #6faabc;
background-image: url(../images/menu-bg.jpg);
}
#mainlevelmainnav a:hover li{
color: #6faabc;
background-image:none;
}
#mainlevelmainnav li{
float:left;
padding:0;
background-image:none;
}
#mainlevelmainnav li ul{
position:absolute;
left:-999em;
width:12em;
background:#405d7e;
border:#6faabc 1px solid;
margin:0;
background-image:none;
}
#mainlevelmainnav li li{
width:11em;
}
#mainlevelmainnav li ul a{
width:11em;
color:#405d7e;
background-image:none;
line-height:25px;
}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul, #mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
left:-999em;
background-image:none;
}
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul, #mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul, #mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul{
left:auto;
z-index:6000;
background-image:none;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
background-image:none;
}
Kannst du mir mal den Link zu deiner HP geben, das ich sehen kann wo was zu finden ist
Antwort 6 von Computerfreaki vom 13.09.2020, 16:43 OptionsLösung
- Also für die Untermenüpunkte fügst du einfach unten an deine CSS-Datei folgendes an:
a.sublevel {
margin-left:12px;
}
Die Pixelzahl kannst du dementsprechend anpassen, müsste aber so wie jetzt in Ordnung sein
- Für den Punkt davor schreibst du:
a.sublevel:before {
content: "\2022";
}
- Für die Farben suchst du die immer die Eigenschaft color:, da hinten dran steht dann die Farbe
- Und für die Links schreibst du das ans Ende der .css-Datei:
a {
text-decoration: underline;
}
Und wenn du was über CSS wissen willst, kann ich dir diese beiden Seiten empfehlen:
http://de.selfhtml.org/css/index.htmhttp://css4you.deGruß Computerfreaki
Antwort 7 von wim47 vom 13.09.2020, 18:01 Options
DANKE Computerfreaki !!!
SUPER. Mit solch einer "Komplettlösung" hatte ich nicht gerechnet.
Ich werde alles kurzfristig ausprobieren (erst morgen möglich).
Nochmals VIELEN DANK.
Gruss Wim47
So was ist mein Hobby. Des is für mich Routinesache. Da hab ich keine Probleme damit. Deshalb bin ich ja im Supportnet. ;-)
Hier kannste mal gucken :-):
http://www.computerjan.de
Antwort 9 von katy vom 14.09.2020, 19:44 Options
a {
text-decoration: underline;
}ist Unsinn! Damit wären auch alle Anker unterstrichen. @CF, wenn du schon so dick aufträgst, dann bitte sinnvoll. Um Links zu unterstreichen muss es
a:link {
text-decoration: underline;
}
lauten!
katy