
-
AuthorPosts
-
March 23, 2025 at 10:28 am #1479952
Hi,
the default special heading style displays a light line next to the headline.
When I switch to ‘Heading Style Modern (left)’, the line disappears – but I need to use this style because I want to include a subtitle.
Is there a way to keep or add the line with the modern left style as well?Best regards
March 24, 2025 at 5:10 am #1480011Hey northorie,
Thank you for the inquiry.
You can add this css code to keep the headline border:
body .av-special-heading.blockquote .special-heading-border { display: block; } body .av-special-heading .av-special-heading-tag { float: left; }
Best regards,
IsmaelMarch 24, 2025 at 8:48 am #1480029where 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 #1480040Thank 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:
Could you fix this?
-
This reply was modified 1 week, 1 day ago by
northorie.
March 24, 2025 at 11:21 am #1480042Hi 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üßeMarch 24, 2025 at 12:09 pm #1480043du 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-belowdann :
/* === 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"; }
March 24, 2025 at 12:18 pm #1480045Hab ich nicht ;) subheadline ist unterhalb der Überschrift
March 24, 2025 at 12:25 pm #1480046ok – 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 #1480049btw: 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 #1480050Awesome!!! Thank you so much :)
Topic can be closedMarch 24, 2025 at 4:57 pm #1480056Hi,
Thanks for the update. Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard -
This reply was modified 1 week, 1 day ago by
-
AuthorPosts
- The topic ‘Special Heading “Heading Style Modern (left)” with light line’ is closed to new replies.