Hilfe bei eigenem Design

[Sven]

Hallo zusammen,

Ich bin gerade dabei eine neue Webseite für unser Gartenverein zu bauen.
Da dies meine erste Webseite ist habe ich mich durch einige Tutorial gelesen, und auch für die meisten meiner Probleme eine Lösung gefunden.

Für folgende Probleme suche ich ein wenig Hilfe:

Ich habe es bisher noch nicht geschafft meine Navigation in das CM einzubinden. Aktuell habe ich in der template.htm alle Punkte einzeln eingetragen und die Seiten direkt verlinkt. Habt ihr ein Tipp für mich?

Und mein zweites Problem ist das ich es nicht schaffe das Vereins Logo richtig im Header zu positionieren.
Ich habe hier schon versucht die Logo.png in ein div mit ID zu packen aber in der mobilen Ansicht und wenn die Seite verkleinert wird hat sich alles gegenseitig komplett verschoben

die Testseite ist aktuell unter der folgenden Adresse zu erreichen:
Http://kgvof.byethost4.com/cm

Ich hoffe es findet sich jemand der einem Anfänger ein wenig unter die Arme greifen kann

[cmss]

In https://github.com/cmsimple-xh/cmsimple ... /tag/1.6.7 sind einige Templates beigepackt
In mini 1 - template beispielsweise :

<!--Header-->
<div class="header">
<h1><?php echo '<span>'.sitename().'</span>;?></h1>
<?php echo searchbox();?>
<p><?php echo lastupdate();?></p>
<div style="clear:both"></div>
</div>
.....................................................
<!--Navigation 1st level-->
<div class="nav">
<?php echo toc(1);?>
</div>

<!--Navigation 2nd-3rd level -->
<div class="nav2">
<?php echo toc(2,3);?>
</div>

( oder besser <?php echo li($hc,1);?> )
....................................................................
<!--Bread-Crumbs-Locator-->
<div class="locator">
<p><?php echo locator();?></p>
</div>

<!--Content-->
<div class="content">
<?php echo content();?>

Im Header kann sich einiges verschieben, wenn man mehrere Divs nebeneinander hat. Das Beste ist dann, ein grid.css einzubinden (wie es bei Bootstrap http://ulclean.mb-info.eu/Templates/bt3head-a ein Standard ist) https://www.w3schools.com/css/css_grid.asp

[olape]

Als erstes sollte das Bild verkleinert werden, 668,2 KB ist mehr als reichlich.

Ich habe es bisher noch nicht geschafft meine Navigation in das CM einzubinden.

Code: Select all

<?php echo toc();?>
<?php echo toc(1);?>
<?php echo toc(2,3);?>
<?php echo toc(3);?>
...

Die Funktion toc() ist dafür gedacht. Alles oder nur angegebene Level.

[Sven]

Im Header kann sich einiges verschieben, wenn man mehrere Divs nebeneinander hat. Das Beste ist dann, ein grid.css einzubinden (wie es bei Bootstrap http://ulclean.mb-info.eu/Templates/bt3head-a ein Standard ist) https://www.w3schools.com/css/css_grid.asp

Das werde ich mir heute Abend mal durchlesen

Die Funktion toc() ist dafür gedacht. Alles oder nur angegebene Level.

Das mit dem php Code für die Navigation habe ich in der xh Wiki gelesen jedoch habe ich es bisher nicht geschafft das manü so einzustellen das es mein Menü Design erhält.

[frase]

... jedoch habe ich es bisher nicht geschafft das manü so einzustellen das es mein Menü Design erhält.

Da geht es doch in erster Linie um die Icons vor den Menüpunkten - oder?

Mit Toxic_XH kannst du das realisieren.
Du vergibst jeder Seite im Toxic-Tab eine eigene CSS-Klasse.
Im Stylesheet legst du dann fest (mit ::before) welches Icon erscheinen soll.

Übrigens:
FontAwesome ist in CMSimple_XH ab Version 1.7 bereits enthalten. Das musst du nicht noch einmal einbinden.

[frase]

In deinem Fall könntest du z.B. der Startseite die Klasse "start" verpassen.
Im Stylesheet fügst du dann ein:

Code: Select all

li.start a::before, li.start span::before {
    color: #fff;
    content: "\f015" !important;
    font-family: "FontAwesome";
    padding: 0 .5em 0 0;
    font-size: 1.25em;
}

Das ist natürlich nur ein Beispiel. Und du musst das für jeden Menüpunkt tun.
FA für XH ist im Moment nur Version 4.7.0 - aber es dürfte alle benötigten Icons enthalten.

Übrigens:
Warum verwendest du nicht als Basis ein verhandenes Template und änderst es nach deinen Wünschen ab?

[Sven]

Da geht es doch in erster Linie um die Icons vor den Menüpunkten - oder?

Mit Toxic_XH kannst du das realisieren.
Du vergibst jeder Seite im Toxic-Tab eine eigene CSS-Klasse.
Im Stylesheet legst du dann fest (mit ::before) welches Icon erscheinen soll.

Übrigens:
FontAwesome ist in CMSimple_XH ab Version 1.7 bereits enthalten. Das musst du nicht noch einmal einbinden.

Also eigentlich nicht primär um die Icons sondern generell um das einbinden des Menüs in meine Struktur

Fa hatte ich schon eingebunden bevor ich angefangen hatte die Seite an XH anzupassen
Aber werde es noch raus nehmen, danke für den Hinweis

[cmss]

Die Icons vor den Li's mit :

ul.menulevel1 li a::after {
font-family: FontAwesome;
content: "\f105";
font-size:16px;
display: inline-block;
padding-left: 5px;
padding-bottom: 3px;
vertical-align: middle;
}

[frase]

Also eigentlich nicht primär um die Icons sondern generell um das einbinden des Menüs in meine Struktur

Ohne Icons:
Ganz einfach toc(...) - das ist XH-Standard.
Das Ergebnis ist eine ungeordnete Liste (ul, li ...) die du nach Belieben stylen kannst.
Die mitgelieferten Templates kannst du dir anschauen und daraus lernen.

Mit Icons:
Installiere dir Toxic_XH und verwende statt toc(...) toxic(…)

Was noch ein Problem wäre:
Wenn du Unterseiten hast, sind in deinem Beispiel die Level1-Menüpunkte nicht anklickbar - die anderen erscheinen beim Hovern.
Das ist mit dem XH-Menü nur auf Umwegen zu erreichen.
Ludwig hat das in einigen seiner Templates gut realisiert. Nachschauen.