Special Heading "Heading Style Modern (left)" with light line - Support

where do you like to have the heading border ? besides heading or besides the subline?

/* === besides the heading === */

#top .av-special-heading.blockquote  {
  display: grid;
  margin: 0;
  row-gap: 0px;   /*=== influences the distance between heading and subheading  ===*/
  grid-auto-flow: row;
  grid-template-columns: auto 1fr;
  grid-template-areas: 
    "area1 area2" 
    "area3 area3";
}

#top .av-special-heading.blockquote  .av-special-heading-tag {
  grid-area: area1;
  padding-right: 20px
}

#top .av-special-heading.blockquote .special-heading-border {
  display: block;
  grid-area: area2;
}

#top .av-special-heading.blockquote  .av-subheading_below {
  grid-area: area3;
  margin-top: -10px; /*=== if you like to have less distance between heading and subheading  ===*/
}

/* === besides the subheading : erase that rule if you like to have it besides the heading === */
#top .av-special-heading.blockquote  {
  grid-template-areas: 
    "area1 area1" 
    "area3 area2";
}

March 24, 2025 at 11:20 am #1480040

Thank you. With this code…

body .av-special-heading.blockquote .special-heading-border {
    display: block;
}

body .av-special-heading .av-special-heading-tag {
    float: left;
}

…it looks like this:
Screenshot

Could you fix this?

This reply was modified 1 month ago by northorie.

March 24, 2025 at 11:21 am #1480042

Hi Guenni,
thank you for your reply. With your codes nothing changes…

Ich glaube du sprichst deutsch oder? Ich habe es mit beiden Codes versucht. Es hat sich nichts verändert.
Viele Grüße

March 24, 2025 at 12:09 pm #1480043

du hast auch nicht erwähnt, dass du die subline oberhalb der Headings hast.

für dich jetzt zum Testen :

#top .av-special-heading.blockquote {
  display: grid;
  margin: 0;
  row-gap: 10px;
  grid-auto-flow: row;
  grid-template-columns: auto 1fr;
}

#top .av-special-heading.blockquote .av-special-heading-tag {
  grid-area: area1;
  padding-right: 20px
}

#top .av-special-heading.blockquote .special-heading-border {
  display: block;
  grid-area: area2;
}

#top .av-special-heading.blockquote .av-subheading_above {
  grid-area: area3;
  margin-bottom: 20px; 
}

#top .av-special-heading.blockquote {
  grid-template-areas: 
    "area3 area3" 
    "area1 area2";
}

dann siehst du schon mal wie es wird.

_____________

um es selektiver zu gestalten müsstest du diesen Headings noch eine benutzer Klasse hinzufügen.
um für beide Fälle gewappnet zu sein.
z.B: subline-above oder subline-below

dann :

/* === besides the heading === */

#top .av-special-heading.blockquote.subline-above,
#top .av-special-heading.blockquote.subline-below {
  display: grid;
  margin: 0;
  row-gap: 0px;   /*=== influences the distance between heading and subheading  ===*/
  grid-auto-flow: row;
  grid-template-columns: auto 1fr;
}

#top .av-special-heading.blockquote.subline-above .av-special-heading-tag,
#top .av-special-heading.blockquote.subline-below .av-special-heading-tag {
  grid-area: area1;
  padding-right: 20px
}

#top .av-special-heading.blockquote.subline-above .special-heading-border,
#top .av-special-heading.blockquote.subline-below .special-heading-border {
  display: block;
  grid-area: area2;
}

#top .av-special-heading.blockquote.subline-below .av-subheading_below {
  grid-area: area3;
  margin-top: -10px; /*=== if you like to have less distance between heading and subheading  ===*/
}

#top .av-special-heading.blockquote.subline-above .av-subheading_above {
  grid-area: area3;
  margin-bottom: 10px; /*=== if you like to have less distance between heading and subheading  ===*/
}

#top .av-special-heading.blockquote.subline-above  {
  grid-template-areas: 
    "area3 area3" 
    "area1 area2";
}

#top .av-special-heading.blockquote.subline-below  {
  grid-template-areas: 
    "area1 area2" 
    "area3 area3";
}

see: https://webers-testseite.de/bildvergleich/

March 24, 2025 at 12:18 pm #1480045

Hab ich nicht ;) subheadline ist unterhalb der Überschrift

March 24, 2025 at 12:25 pm #1480046

ok – ich fand jetzt deine Seite – hilfreich wäre ein link gewesen:

/* === besides the heading === */

#top .av-special-heading.blockquote  {
  display: grid;
  margin: 0;
  row-gap: 0px;   /*=== influences the distance between heading and subheading  ===*/
  grid-auto-flow: row;
  grid-template-columns: auto 1fr;
  grid-template-areas: 
    "area1 area2" 
    "area3 area3";
}

#top .av-special-heading.blockquote  .av-special-heading-tag {
  grid-area: area1;
  padding-right: 20px
}

#top .av-special-heading.blockquote .special-heading-border {
  display: block;
  grid-area: area2;
}

#top .av-special-heading.blockquote  .av-subheading_below {
  grid-area: area3;
  margin-top: -10px; /*=== if you like to have less distance between heading and subheading  ===*/
}

und wie gesagt :

/* === besides the subheading : erase that rule if you like to have it besides the heading === */
#top .av-special-heading.blockquote  {
  grid-template-areas: 
    "area1 area1" 
    "area3 area2";
}
#top .av-special-heading.blockquote .av-subheading_below {
  margin-top: 10px;
}

March 24, 2025 at 1:28 pm #1480049

btw: this handles visibility of that line:

#top .av-special-heading.blockquote .special-heading-border .special-heading-inner-border {
  opacity: 0.8;
}

March 24, 2025 at 2:47 pm #1480050