Unsere wachsenden CSS-Stile
Wie Sie wissen, begann diese Website als Hobby und entwickelte sich schnell zu einem Vollzeitbetrieb. Auf meiner Website sind meine Originalkreationen zu sehen, trendige Artikel , Bekleidung und Dekor . Dabei habe ich eine Menge darüber gelernt, wie man Code im „Backend“ anpasst, um unseren sich ständig weiterentwickelnden Stil zu kreieren. Freestylen mit CSS, HTML und JS erfordert eine Lernkurve, kann aber mit der Zeit und viel Geduld erreicht werden. Deshalb habe ich es Ihnen leicht gemacht. Lassen Sie uns einen Schritt aus unserem regulären Programmplan heraustreten, ihn verkleinern und etwas, nun ja, programmieren.
Kostenloser benutzerdefinierter Shopify-Code?!
Einige haben nach kundenspezifischer Arbeit gefragt und angeboten, für meine Webdesign-Dienste zu zahlen. Ich fühle mich geschmeichelt und werde dies als Gelegenheit nutzen, die Regeln der Sydneys Sammlung . Es ist nur angemessen, dass wir Positivität verbreiten, indem wir Ihnen einen kostenlosen benutzerdefinierten Shopify-Bereich zur Verfügung stellen! Es ist sehr unkompliziert und ich freue mich darauf, weitere Beiträge wie diesen zu meinem hinzuzufügen Blogs .
Lass uns anfangen
Ich werde diese Liste nach und nach erweitern und mein Bestes tun, um den aktuellsten Code bereitzustellen. Wenn Code veraltet ist, können Sie mir gerne eine Nachricht senden, und ich werde ihn anpassen:
Deckkraft des Banner-Inhaltscontainers CSS:
/*Passen Sie den Radius der Pixel nach Ihren Wünschen an*/
.Inhaltscontainer
{
Rahmenradius: 8px;
}
Transparentes und glasartiges Header-CSS:
.Header {
Hintergrund: rgba(255, 255, 255, 0,2);
Rahmenradius: 16px;
Kastenschatten: 0 4px 30px rgba (0, 0, 0, 0,1);
Hintergrundfilter: Unschärfe (5px);
Rand: 1px durchgezogener RGBA (255, 255, 255, 0,3);
}
.header__submenu {
Hintergrund: #ffffffff1;
}
.header-wrapper {
Hintergrund: keiner;
Rand: keiner;
}
Kopfzeilentext zentrieren (CSS)
@media screen und (min-width: 990px) {
.header--middle-left {
Rastervorlagenspalten: 1fr auto 1fr;
Spaltenlücke: 2rem;
}
}
Fügen Sie auf der Produktseite vor der SKU-Nummer den Text „SKU“ hinzu:
.product__sku::vorher
{
Inhalt: „SKU:“;
}
Entfernen Sie das Hamburger-Schließsymbol „X“, wenn auf dem mobilen CSS auf das Menü geklickt wird
Fügen Sie dies am Ende Ihrer base.css hinzu:
svg .icon .icon-close { Anzeige : keine; }
Bildbanner für den Abschnitt „Bildbanner“ verkleinern – Benutzerdefiniertes CSS
Wenden Sie dies auf das benutzerdefinierte CSS am unteren Rand des von Ihnen gewählten Bildbannerabschnitts an. Passen Sie die „Breite: 90 %“ nach Ihren Wünschen an.
.Banner
{
Breite: 90%;
Rand: 0 automatisch;
}
Kopiere mein ziemlich cooles Bild-Banner-Abschnitt-CSS
Wenden Sie diesen Code auf das benutzerdefinierte CSS am unteren Rand des von Ihnen gewählten Bildbannerabschnitts an.
@media screen und (max-width: 749px) {
.banner .banner__inhalt {
Elemente ausrichten: Flex-Ende;
}
}
@media screen und (max-width: 749px) {
.banner__inhalt {
Polsterung: 20px;
}
}
h2 {
Polsterung unten: 24px;
}
.banner {
Breite: 90%;
Rand: 0 automatisch;
}
Fügen Sie unter dem E-Mail-Anmeldeformular Platz zum Ausfüllen hinzu
Wenden Sie diesen Code auf das benutzerdefinierte CSS am Ende des von Ihnen gewählten E-Mail-Anmeldeformulars an. Sie können die „25px“ nach Belieben anpassen.
.Newsletter-Formular
{
Polsterung unten: 25px;
}
Zentrieren Sie die Textelemente Ihres Kopfmenüs
Wenden Sie diesen Code auf das benutzerdefinierte CSS unten in Ihrem Kopfzeileneditor an.
.Listenmenü
{
Inhalt ausrichten: zentriert;
}
Ich werde mich einloggen und aktualisieren, während ich arbeite, und auch Blogs hinzufügen, die einige andere Funktionen enthalten. Wenn Sie Empfehlungen haben oder nach etwas Bestimmtem suchen, lassen Sie es mich in den Kommentaren wissen!
Danke fürs Lesen, ich hoffe, Sie haben einige hilfreiche kostenlose CSS gefunden.
