HILFE CSS STYLE WIRD AUCH IM HEADER ÜBERNOMMEN!

[AlSanta]

Hallo lieben Community, ich bin aktuell dabei einen shopify store aufzubauen und habe auf einer Seite (FAQ-Seite) einen CSS Code eingebunden und angepasst. Leider bin ich absoluter Laie und der Code veränder auch ungewollt zwei Stellen im Header. Der Header soll aber von dem CSS Style unberührt bleiben. Kann mir jemand weiterhelfen? Hier ist der Code, den ich auf der Seite eingebunden habe:

"<style><!--
/* Grundlegende Styles */

body
{padding: 2rem;}
details {background: #FFFFFF; border: 1px solid #121212; border-radius: 3px; margin-bottom: 1.5rem;}
summary {background: #BEE3DA; color: #121212; cursor: pointer; padding: 1rem;}
.akkordeon-inhalt {padding: 1rem 1rem 1px 1rem;}

summary::before {
padding-right: .25rem;
content: '+ '; font-size: 2.1rem; font-weight: bold; /* Instead of Triangle closed */
}
details[open] summary::before {
padding-right: .25rem;
font-style: italic;
content: '- '; font-size: 2.1rem; font-weight: bold; /* Instead of Triangle open */
}

/* Styling the summary in case of open 'details' */
details[open] summary {
font-style: italic;
border-radius: 3px 3px 0 0;
}


/* Der verzögerungseffekt */
details[open] summary ~ * {animation: sweep .5s ease-in-out;}

@keyframes sweep {
0% {opacity: 0; margin-left: 0px}
100% {opacity: 1; margin-left: 0px}
}


--></style>"

 

[scatello]

Ohne die Seite zu kennen wird dir niemand helfen können.

Zur Info: alles in Großbuchstaben zu schreiben wird in Foren als "schreien" interpretiert und das ist nicht sehr nett.

 

[AlSanta]

Der Shop ist leider noch nicht online, daher ist es schwer eine Seite dazu zu zeigen. Ich kann dazu ein Bild posten, wenn es hilft...

Auf dem Screenshot sieht man was der CSS Code bewirkt. Leider hat sich der Code auch auf den "Header" ausgewirkt, sodass die rot eingekreisten Bereiche auch umrandet sind und ein "+" und "-" enthalten, was nicht sein soll...

[ Über ein "Schreien" habe ich mir keine Gedanken gemacht, ich denke man kann da auch zu viel reininterpretieren, oder sich reinsteigern, aber ich schreie niemanden an. Lassen wir es als einen HilfeRUF durchgehen ;-) ]

 

[scatello]

Ich kann dazu ein Bild posten, wenn es hilft...

Nein, das hilft kein Stück weiter.

 

[scatello]

Du könntest es aber mal hier versuchen: https://community.shopify.com

Dort gibt es bestimmt User, die den Shop besser kennen und somit auch besser helfen können.

 

[AlSanta]

Ich könnte Dir ein PW zum shop schicken. Kannst Du mir denn dann helfen?

 

[AlSanta]

Das hat nicht wirklich mit shopify zu tun...Es ist einfach nur ein kleiner eingebauter CSS Code in einem Textformular....Daher habe ich mich absichtlich in diesem Forum angemeldet, weil ich hier auf Experten gehofft habe...

 

[scatello]

Ich könnte Dir ein PW zum shop schicken

Ich denke, der Shop ist nicht online

Kannst Du mir denn dann helfen?

Vielleicht. Aber es wäre besser, wenn du den Shop offen hast, damit auch andere eventuell helfen können.

 

[AlSanta]

Der shop ist nicht zugänglich = off. Mit PW nur zugänglich weil er nicht fertig ist und ich keinen unfertigen Shop eröffne. Mensch bist du anstrengend. Danke aber erspare mir bitte deine Kleinlichkeit. Dafür habe ich keine Zeit. Ich suche mir schon passende Hilfe. Aber du stiehlst mir gerade mit deiner Oberlehrer Art nur Zeit die ich nicht habe. Also spare es dir einfach, du brauchst mir nicht antworten...

 

[scatello]

Aber du stiehlst mir gerade mit deiner Oberlehrer Art nur Zeit die ich nicht habe.

Was ist mit dir nicht in Ordnung? Du schilderst ein Problem unzureichend, postest ein Grafik, mit der man nichts anfangen kann und dann kommst du so blöde rüber?

 

[Sempervivum]

Hallo @AlSants,
ich versuch's mal, ohne das HTML gesehen zu haben:
Solch ein Problem kann man sehr leicht lösen, indem man die Elemente, auf die sich das CSS beziehen soll, durch eine Klasse eingrenzt. Also bei den details und summary jeweils ein Klasse hinzu fügen:

<details class="faq">
  <summary class="faq">Some details</summary>
  <p>More info about the details.</p>
</details>

Und dann im CSS darauf beziehen:

body
{padding: 2rem;}
details.faq {background: #FFFFFF; border: 1px solid #121212; border-radius: 3px; margin-bottom: 1.5rem;}
summary.faq {background: #BEE3DA; color: #121212; cursor: pointer; padding: 1rem;}
.akkordeon-inhalt {padding: 1rem 1rem 1px 1rem;}

summary.faq::before {
padding-right: .25rem;
content: '+ '; font-size: 2.1rem; font-weight: bold; /* Instead of Triangle closed */
}
details.faq[open] summary::before {
padding-right: .25rem;
font-style: italic;
content: '- '; font-size: 2.1rem; font-weight: bold; /* Instead of Triangle open */
}

/* Styling the summary in case of open 'details' */
details.faq[open] summary {
font-style: italic;
border-radius: 3px 3px 0 0;
}


/* Der verzögerungseffekt */
details.faq[open] summary.faq ~ * {animation: sweep .5s ease-in-out;}

@keyframes sweep {
0% {opacity: 0; margin-left: 0px}
100% {opacity: 1; margin-left: 0px}
}

Möglicher Weise das gleiche auch bei .accordeon-inhalt.

 

[AlSanta]

Hallo @AlSants,
ich versuch's mal, ohne das HTML gesehen zu haben:
Solch ein Problem kann man sehr leicht lösen, indem man die Elemente, auf die sich das CSS beziehen soll, durch eine Klasse eingrenzt. Also bei den details und summary jeweils ein Klasse hinzu fügen:

Vielen Dank für Deine Hilfe Sempervivum! Ich werde es direkt umsetzen und berichten

 

[AlSanta]

Hallo @AlSants,
ich versuch's mal, ohne das HTML gesehen zu haben:
Solch ein Problem kann man sehr leicht lösen, indem man die Elemente, auf die sich das CSS beziehen soll, durch eine Klasse eingrenzt. Also bei den details und summary jeweils ein Klasse hinzu fügen:

<details class="faq">
  <summary class="faq">Some details</summary>
  <p>More info about the details.</p>
</details>

Und dann im CSS darauf beziehen:

body
{padding: 2rem;}
details.faq {background: #FFFFFF; border: 1px solid #121212; border-radius: 3px; margin-bottom: 1.5rem;}
summary.faq {background: #BEE3DA; color: #121212; cursor: pointer; padding: 1rem;}
.akkordeon-inhalt {padding: 1rem 1rem 1px 1rem;}

summary.faq::before {
padding-right: .25rem;
content: '+ '; font-size: 2.1rem; font-weight: bold; /* Instead of Triangle closed */
}
details.faq[open] summary::before {
padding-right: .25rem;
font-style: italic;
content: '- '; font-size: 2.1rem; font-weight: bold; /* Instead of Triangle open */
}

/* Styling the summary in case of open 'details' */
details.faq[open] summary {
font-style: italic;
border-radius: 3px 3px 0 0;
}


/* Der verzögerungseffekt */
details.faq[open] summary.faq ~ * {animation: sweep .5s ease-in-out;}

@keyframes sweep {
0% {opacity: 0; margin-left: 0px}
100% {opacity: 1; margin-left: 0px}
}

Möglicher Weise das gleiche auch bei .accordeon-inhalt.

Sempervivum, du bist einfach der Beste!!!! Vielen Dank noch einmal! Es klappt!!! Ich freue mich so sehr! Ein Segen, dass es in solchen Forum auch Mitglieder wie Dich gibt.