Hilfe bei eigenem Design

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
Sven
Posts: 3
Joined: Sun Mar 22, 2020 5:59 pm

Hilfe bei eigenem Design

Post by Sven » Tue Mar 31, 2020 3:00 pm

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
Posts: 177
Joined: Mon Jan 02, 2017 6:15 pm

Re: Hilfe bei eigenem Design

Post by cmss » Tue Mar 31, 2020 3:54 pm

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>'.sitename();?></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
Last edited by cmss on Tue Mar 31, 2020 8:28 pm, edited 3 times in total.

olape
Posts: 1142
Joined: Fri Mar 13, 2015 8:47 am
Contact:

Re: Hilfe bei eigenem Design

Post by olape » Tue Mar 31, 2020 4:14 pm

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


Sven wrote:
Tue Mar 31, 2020 3:00 pm
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
Posts: 3
Joined: Sun Mar 22, 2020 5:59 pm

Re: Hilfe bei eigenem Design

Post by Sven » Wed Apr 01, 2020 10:42 am

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 :D
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
Posts: 3311
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Hilfe bei eigenem Design

Post by frase » Wed Apr 01, 2020 11:19 am

Sven wrote:
Wed Apr 01, 2020 10:42 am
... 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
Posts: 3311
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Hilfe bei eigenem Design

Post by frase » Wed Apr 01, 2020 11:36 am

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
Posts: 3
Joined: Sun Mar 22, 2020 5:59 pm

Re: Hilfe bei eigenem Design

Post by Sven » Wed Apr 01, 2020 12:42 pm

frase wrote:
Wed Apr 01, 2020 11:19 am
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
Posts: 177
Joined: Mon Jan 02, 2017 6:15 pm

Re: Hilfe bei eigenem Design

Post by cmss » Wed Apr 01, 2020 12:59 pm

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
Posts: 3311
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Hilfe bei eigenem Design

Post by frase » Wed Apr 01, 2020 1:17 pm

Sven wrote:
Wed Apr 01, 2020 12:42 pm
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.

Post Reply