Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #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

    #1480011

    Hey 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,
    Ismael

    #1480029

    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";
    }
    #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 week, 1 day ago by northorie.
    #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

    #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/

    #1480045

    Hab ich nicht ;) subheadline ist unterhalb der Überschrift

    #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;
    }
    

    #1480049

    btw: this handles visibility of that line:

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

    Awesome!!! Thank you so much :)
    Topic can be closed

    #1480056

    Hi,

    Thanks for the update. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Special Heading “Heading Style Modern (left)” with light line’ is closed to new replies.