[GELÖST] CMSMS - CSS / Layout nicht richtig???

holzjunge · 28. April 2015 16:50

Hi,

ich bin neu im Umgang mit CMSMS.
Bisher kam ich gut damit zurecht.

Ich habe ein Template von Templatemo.com genommen und es bisher gut implementiert als Template mit CSS etc.
Allerdings wird die Website nicht richtig dargestellt.
Die Elemente die von Font Awesome sind werden nicht angezeigt.

Sprich im HTML die tags: "" werden nicht angezeigt.

Wie kann ich das beheben?

Mfg.

NaN · 28. April 2015 18:51

Sorry, aber das sind zu wenig Infos.
Welches Template genau?
Mit "Templatemo" und "" kann leider keiner etwas anfangen.
Was hast Du denn alles unternommen, um den Fehler zu analysieren?
(Stichworte wie "Firebug", "Fehlerkonsole", "Netzwerkkonsole" etc.)

jeff1980 · 28. April 2015 18:52

Hi,

ohne konkreten Link zur betroffenen Homepage wird's schwierig. Aber ins Blaue gerate würde ich sagen, dass ein Pfad nicht stimmt - z.B. zur von Font Awesome verwendeten Schrift-Datei.
Schau mal im Firefox in die Konsole (Extras->Web-Entwickler->Web-Konsole) oder installiere Dir Firebug (https://addons.mozilla.org/de/firefox/addon/firebug/). Damit siehst Du, was im Hintergrund abläuft und ggf. nicht geladen wird/werden kann.

holzjunge · 29. April 2015 22:03

ok,

hier die aktuelle Seite:
http://whiskyundfrauen.de/index.php

und so sollte es eig. aussehen:
http://whiskyundfrauen.de/indexNH.html

CSS Dateien wurden wie gesagt alle einzeln und richtig mit dem Template verlinkt.
Allerdings wird es trotzdem falsch dargestellt.

NaN · 29. April 2015 05:35

CSS Dateien wurden wie gesagt alle einzeln und richtig mit dem Template verlinkt.

Und was ist mit den Fonts?
Wo liegen die?
Wie sind sie im CSS verlinkt?

Schau doch einfach mal mit den gannten Tools, ob auch wirklich alles so ist, wie es sein sollte.
(Firefox -> [F12] drücken -> Netzwerk -> Seite neu laden und nach Fehlern Ausschau halten)

Dann siehst Du nämlich, dass die Fonts nicht geladen werden können, weil sie aus dem tmp-Verzeichnis geladen werden. Und dort sind sie sicher nicht. Also ab ins CSS und die Fonts überprüfen. Nicht relativ zum CSS verlinken sondern absolut wie sie auf dem Server hinterlegt sind: url("[[uploads_url]]/pfad/zum/font")

holzjunge · 29. April 2015 07:42

Mit Font Awesome ist nicht direkt ein Font gemeint sondern diese Website:
http://fortawesome.github.io/Font-Awesome/icon/bed/

Davon werden die icons nicht angezeigt.

NaN · 29. April 2015 09:07

Hast Du eigentlich irgendeinen der bisher genannten Tipps probiert?

Mit Font Awesome ist nicht direkt ein Font gemeint sondern diese Website:

Klar.
Und mit Mercedes ist nicht direkt ein Auto gemeint sondern diese Webseite:
http://www.mercedes-benz.de/content/ger … intro.html

tongue

Was genau wird denn auf der FontAwesome-Webseite angeboten?
Fonts und Stylesheets, die in deinem Template verwendet werden.
Ergo in Deinen Stylesheets wird ein Font eingebunden.
Dieser Font heißt ... tadaaah! ... Font Awesome tongue
Der macht dann diese Icons.
Der kann aber nicht geladen werden.
Weil in Deinen Stylesheets auf das falsche Verzeichnis verlinkt wird.
Deshalb musst Du in Deinen Stylesheets die Links zu den Fonts anpassen.
Da steht ziemlich weit oben sowas:

Hier klicken, um den Code zum Kopieren zu markieren

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Dieses "url('../fonts/fontawesome-webfont...')" ist "falsch".
Das verlinkt relativ zur CSS-Datei.
Das klappt nur, wenn Deine Verzeichnisstruktur genauso aufgebaut ist, wie im Template von Templatemo.
Ist sie aber nicht mehr, weil Du Die Stylesheets ins CMS eingefügt hast.
D.h. die Stylesheets liegen jetzt im Verzeichnis "/tmp/cache/".
Und d.h. es wird im Verzeichnis "/tmp/fonts/" nach dem Font gesucht.
Dort ist er natürlich nicht.
Und dort hat er auch nichts zu suchen.

Es gibt jetzt zwei Möglichkeiten:
1.
Du änderst die URL zum Font so, dass sie auf das Verzeichnis zeigt, in dem die Fonts liegen. Dazu musst Du die Fonts natürlich auch auf den Server laden. Z.B. nach "/uploads/themes/FontAwesome/fonts/".
Die URL zum Font im Stylesheet könnte dann z.B. so aussehen:

Hier klicken, um den Code zum Kopieren zu markieren

@font-face {
  font-family: 'FontAwesome';
  src: url('[[uploads_url]]/themes/FontAwesome/fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('[[uploads_url]]/themes/FontAwesome/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('[[uploads_url]]/themes/FontAwesome/fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('[[uploads_url]]/themes/FontAwesome/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('[[uploads_url]]/themes/FontAwesome/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('[[uploads_url]]/themes/FontAwesome/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

2.
Scheinbar hast Du Dir die Mühe gemacht, alle Stylesheets ins CMS einzufügen und mit dem Template zu verknüpfen. Das ist auch okay so. Du hättest aber auch einfach die CSS-Dateien + Fonts auf den Server laden können (z.B. "/uploads/themes/FonteAwesome/css/" bzw. "/uploads/themes/FonteAwesome/fonts/") und im Template anstelle von {cms_stylesheet} mit

Hier klicken, um den Code zum Kopieren zu markieren

<link rel="stylesheet" href="{uploads_url}/themes/FontAwesome/css/font-awesome.css">

direkt auf die CSS-Datei verlinken können.
Denn dieses CSS wirst Du eh nie bearbeiten müssen.
Das muss also auch nicht in der Datenbank sein.
Dann kannst Du die original Dateien so lassen wie sie sind und alles sollte out-of-the-box funktionieren.
Du kannst die Dateien dann aber nicht vom CMS nach Medientyp gruppieren und zusammenfassen.
Hast also eine Anfrage an den Server mehr.
Musst Du selber entscheiden, ob das ins Gewicht fällt (Stichwort "Pagespeed" und "SEO").

holzjunge · 02. Mai 2015 14:54

Danke NaN, das ich die CSS Dateien dann doch direkt einbinden kann wusste ich nicht.
Das erste Problem ist damit gelöst.

Allerdings verstehe ich noch nicht ganz wie ich es hin bekomme das die Icons von Font Awesome angezeigt werden...die font datei soll laut FireFox (F12) nun richtig verlinkt sein.
Angezeigt wird es allerdings nicht.

Er findet die Font datei aus der Font Awesome.css einfach nicht.
Obwohl der Pfad eig. richtig sein müsste.

Beitrag geändert von holzjunge (02. Mai 2015 15:20)

NaN · 02. Mai 2015 15:25

die font datei soll laut FireFox (F12) nun richtig verlinkt sein

Wie kommst Du darauf?
Beim mir steht da rot die Fehlermeldung "404".
Was da so viel heißt wie URL zum Font ist falsch.
(Mal davon abgesehen, dass noch einige andere Dinge nicht geladen werden können)
Und wenn Du Dir die URL zum Font mal genau anschaust, wirst Du feststellen, dass
http://whiskyundfrauen.de/uploads/css/%5B%5Buploads_url%5D%5D/themes/FontAwesome/fonts/fontawesome-webfont.woff?v=4.3.0
Keine gültige URL ist.

Nochmal: Entweder Du verwaltest die Stylesheets über die Administration. Dann musst Du im CSS dieses [[uploads_url]]/pfad/zum/font verwenden.
Oder Du packst die Stylesheets auf den Server und verlinkst direkt darauf.
Dann musst Du dieses [[uploads_url]]/pfad/zum/font nicht verwenden.

Im Moment sieht es so aus, als hättest Du einen Mix aus diesen beiden Sachen. Also Sytslesheets auf dem Server, direkt verlinkt und [[uploads_url]] im CSS. Das funktioniert so nicht.

Und dann sind da noch diverse Javascripts falsch verlinkt. Dort steht wortlwörtlich {uploads_url}/js/vendor/jquery-1.11.0.min.js
Schau da mal im Template nach, ob da nicht zufällig ein {literal}...{/literal} um diese verlinkten Scripte steht. (literal = wörtlich = das CMS verarbeitet die Angaben in den geschweiften Klammern nicht)

holzjunge · 02. Mai 2015 15:45

AAAAAhhh ok big_smile sorry ich arbeite wie gesagt zum ersten mal mit CMSMS.

Ich habe jetzt die Dateien intern auf dem Server verlinkt also sprich nicht über das Admin Panel.
Allerdings scheint es jetzt so das er gar nicht mehr nach den Fonts sucht?
Die Font Awesome.css datei findet er, in dieser steht "../fonts/dateien.ttf" etc.

Von welchem Ordner geht CMSMS dann als root ordner aus? von "uploads" oder nicht?
Da dort auch der css Ordner ist den er findet.

NaN · 02. Mai 2015 16:06

Beispiel...

CSS: /uploads/template/css/foo.css

im CSS steht ../fonts/font.eot

D.h. er sucht nach /uploads/template/font/font.eot

Aber ... ich hatte insbesondere im Firefox mal ein Problem mit Fonts, wenn sie nicht im gleichen Verzeichnis waren wie die CSS Datei bzw. wenn sie nicht im Root-Verzeichnis waren. Siehe dazu dieses Thema.

holzjunge · 02. Mai 2015 16:22

Hm an FireFox kann es glaub ich nicht liegen da er offline auch alles anzeigt wie es ist.
Was mich nur wundert ist das er scheinbar die dateien nicht richtig aktualisiert!? Bzw. ich beim F12 drücken
immer die meldung bekomme (304 Not Modified), obwohl ich die datei erst geändert und dann über Filezilla auf den Server geladen habe.

Ich blicke nicht mehr durch big_smile

NaN · 02. Mai 2015 16:28

Hm an FireFox kann es glaub ich nicht liegen da er offline auch alles anzeigt wie es ist.

Und "offline" herrschen auch exakt die gleichen Bedingungen wie auf dem Server?

Was mich nur wundert ist das er scheinbar die dateien nicht richtig aktualisiert!?

Notfalls mal den Zwischenspeicher im Browser löschen.

Hast Du das mit .htaccess Datei mal probiert?

holzjunge · 02. Mai 2015 16:40

Ich habe den Fehler gefunden! big_smile

Der Pfad etc. ist richtig allerdings Wurde der Seiten Inhalt mit den tags gelöscht? Keine Ahnung warum...

Ich habe diese jetzt wieder eingefügt und TADA! Da sind die Icons ^^

Allerdings werden die Scripte jetzt nicht ausgeführt bzw. der Slider nicht mehr angezeigt?
Die <script> verlinkungen waren mit {literal} und {/literal} umschlossen.

Habe diese literal tags nun entfernt, seit dem wird der Slider nicht mehr angezeigt.

Klenkes · 02. Mai 2015 17:09

Dein Flexslider Script fehlt nun.
Ich konnte keine Einbindung des Scripts finden. plugin.js hieß es doch...

holzjunge · 02. Mai 2015 17:18

Genau. Danke - die Einbindung hat gefehlt, keine Ahnung warum big_smile

oh mann, so was big_smile

der Thread kann geschloßen werden. Danke.

Forum für CMS/made simple

#1 28. April 2015 16:50

[GELÖST] CMSMS - CSS / Layout nicht richtig???

#2 28. April 2015 18:51

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#3 28. April 2015 18:52

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#4 29. April 2015 22:03

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#5 29. April 2015 05:35

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#6 29. April 2015 07:42

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#7 29. April 2015 09:07

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#8 02. Mai 2015 14:54

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#9 02. Mai 2015 15:25

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#10 02. Mai 2015 15:45

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#11 02. Mai 2015 16:06

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#12 02. Mai 2015 16:22

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#13 02. Mai 2015 16:28

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#14 02. Mai 2015 16:40

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#15 02. Mai 2015 17:09

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

#16 02. Mai 2015 17:18

Re: [GELÖST] CMSMS - CSS / Layout nicht richtig???

Fußzeile des Forums