Verwenden von SquareSpace zum Bearbeiten von html/css

Question

Ich versuche, eine Website auf Squarespace zu erstellen und habe Probleme beim Auswählen von Elementen auf meiner HTML-Seite, um in der benutzerdefinierten CSS zu verwenden. Wenn ich das inspect-Element in meinem Browser verwende, ändern sich die IDs für einige Elemente, während andere konstant sind.

Ich verwende den Entwicklermodus und habe den Code über github auf meinen lokalen Rechner heruntergeladen.

In der downloaded site.region Datei fand ich das div Element, das den Inhalt enthält ich Stil versuche:

<div id="content" class="main-content" data-content-field="main-content" data-collection-id="{collection.id}" {.equal? collection.typeName "gallery"}{.or}{.equal? collection.typeName "index"}{.or}data-edit-main-image="Banner"{.end}{.end}> 
    {squarespace.main-content} 
</div> 

Wo ist {squarespace.main-content} kommen und wie wähle ich Elemente in dem es um Stil?

Answer 1

einige IDs In Bezug auf Wechsel und eine Konstante bleiben, in der Tat, das ist der Fall. Weitere Informationen hierzu finden Sie unter this answer. Zusammengefasst:

... jede Identifikation mit „yui“ beginnen kann/wird auf Refresh-Seite ändern ... aber ... Block-IDs (IDs beginnend mit „block-“ nicht ändern, so lange wie der Block nicht entfernt wird ...

in Bezug auf, wo die {squarespace.main-content} kommen, dass ein JSON-T tag ist, der den Server teilt den Inhalt zu laden, wie für die innerhalb des Content-Management-System (auch bekannt als „Layout-Engine“) eingegeben Wo immer dieses Tag ist, wird der Inhalt von Layout Engine für diese Seite geladen.

Schließlich, wie Sie die Elemente im Main-Content für das Styling mit CSS auswählen, sind Sie auf dem richtigen Weg. Untersuchen Sie die Elemente so, wie Sie es tun. Wenn Sie einen bestimmten Block anvisieren möchten, suchen Sie nach IDs, die mit block- beginnen, und richten Sie diese an. Oder suchen Sie nach anderen Möglichkeiten, um das Element anzusteuern, z. B. :first-child oder nth-child Selektoren. Geben Sie dann Ihr CSS in the CSS Editor ein oder, wenn Sie den Entwicklermodus verwenden (wie Sie angegeben haben), fügen Sie die Regeln Ihrer base.less-Datei (oder anderen CSS-Dateien) hinzu und aktualisieren Sie dann Ihre Vorlage using Git or SFTP.

Eine letzte Anmerkung, dass Sie den Entwicklermodus nicht verwenden müssen, um Elemente mit CSS auszurichten. Sie können einfach die richtigen Elemente wie erwähnt anvisieren und dann die Regeln wie erwähnt in den CSS-Editor eingeben, so dass die zusätzliche Komplexität des Entwickler-Modus überhaupt nicht benötigt wird.

Answer 2

In Square dies tun:

• Schalten Sie die Entwickler-Option (bearbeiten JS es zwingend notwendig ist, zumindest nicht sicher CSS),

• zu DESIGN gehen »» BENUTZERDEFINIERTE CSS

• hinzufügen/Ändern Sie, was auch immer Sie dort mögen, sollten Sie Klassen oder CSS-Selektor wie nth-child/nth-of-type anstelle dieser dynamischen IDs style.

können Sie weitere Informationen siehe hier:

• Adding custom HTML, CSS, and JavaScript
• Using the CSS Editor