Dokumentation HubSpotFür HubSpot-Entwickler

Für HubSpot-Entwickler

Ergänze ein transjt-Theme mit custom.css und custom.js um dein eigenes CSS und JavaScript. Beide Dateien bleiben erhalten, wenn du erneut exportierst.

Wo deine Änderungen hingehören

Jedes transjt-Theme bringt zwei Dateien mit, die für deinen eigenen Code reserviert sind:

custom.css für Styles
custom.js für Scripts

Sie werden nach allem geladen, was transjt erzeugt, deshalb setzen sich deine Regeln in den meisten Fällen ohne !important durch.

Sicher beim erneuten Export. Wenn du dein Projekt erneut exportierst, lässt transjt custom.css und custom.js unverändert. Generierte Module und Theme-Dateien können ersetzt werden, also gehören deine Anpassungen dorthin, nicht in die generierten Dateien.

Die Dateien finden

Gehe in HubSpot zu Content > Design Manager.
Öffne den Ordner transjt projects und dann den Ordner deines Projekts. Er beginnt mit tj-, gefolgt vom Projektnamen, zum Beispiel tj-northbeam-claude.
custom.css liegt im Ordner css, custom.js im Ordner js.

HubSpot Design Manager with the theme folder tj-northbeam-claude open: css/custom.css and js/custom.js are highlighted — Design Manager: custom.css im Ordner css und custom.js im Ordner js deines Themes.

Im Design Manager bearbeiten

Öffne custom.css oder custom.js.
Füge deinen Code am Ende der Datei ein.
Klicke auf Publish changes.

Live-Seiten übernehmen die Änderung, wenn sie das nächste Mal veröffentlicht werden. Um sie sofort zu sehen, öffne die Seite in HubSpot und klicke auf Update.

Lokal mit der HubSpot CLI bearbeiten

Wenn du lieber deinen eigenen Code-Editor nutzt, verwende die HubSpot CLI. Lade das Theme herunter:

hs cms fetch "transjt projects/tj-<your-project>" ./my-theme

Bearbeite css/custom.css oder js/custom.js und lade dann die Datei hoch, zum Beispiel:

hs cms upload ./my-theme/css/custom.css "transjt projects/tj-<your-project>/css/custom.css"

Oder führe hs cms watch aus, um jede Änderung während der Arbeit hochzuladen.

Beispiel: ein Modul anpassen

Untersuche das Element in deinem Browser, um die Klasse des Moduls zu finden, das du ändern möchtest, und sprich sie dann in custom.css an:

/* Example: larger hero headline on mobile */
@media (max-width: 767px) {
.hero__title { font-size: 2.25rem; }
}

Der Klassenname oben ist nur ein Beispiel. Verwende die Klasse, die du in deinem eigenen Theme findest.

Empfehlungen

Halte alle Anpassungen in custom.css und custom.js. Änderungen an generierten Dateien können beim erneuten Export verloren gehen.
Beschränke deine Regeln auf eine Modulklasse, damit sie keine anderen Teile der Website beeinflussen.
Kommentiere, wofür jeder CSS-Block da ist. Wer nach dir am Code arbeitet, wird es dir danken.