Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 20, 2024 at 9:11 pm #1462575
    Jak73

    Hi,
    i’m trying to add css for a special headings to specific pages. Other pages will have another css settings.
    So I would like to give different css for the special heading on different pages.
    I think the best way would be, to add a class to the specific special header in the developer setting, right?

    But how can i add a class to the css-code below, so it targets the specific special heading element?

    #main .container_wrap_first .av-special-heading {
	margin-top: 0px;
padding-top: 12px;
padding-bottom: 8px;
}

    kind regards
    Jak

    July 20, 2024 at 9:20 pm #1462578
    Mike

    Hey Jak73,
    Like this:

    #main .container_wrap_first .av-special-heading.custom-class {
	margin-top: 0px;
padding-top: 12px;
padding-bottom: 8px;
}

    custom-class is your custom class

    Best regards,
    Mike

    July 20, 2024 at 10:00 pm #1462582
    Jak73

    Hi Mike,

    this works great!
    How can i add a text styling too:

    font-size: 18px;
  font-family: zen-kaku-gothic-new;
font-weight: 500;

    Tried to add this to the css above, but it’s not affecting it?

    kind regards
    Jak

    • This reply was modified 4 months ago by Jak73.
    • This reply was modified 4 months ago by Jak73.
    July 20, 2024 at 10:28 pm #1462586
    Mike

    Hi,
    I would need to see the page to see why it’s not working.

    Best regards,
    Mike

    July 20, 2024 at 11:30 pm #1462587
    Jak73

    Sorry, sure…
    I just saw, that i can’t add links to special heading. So i changed it to a text-block with links.
    How can i use the same css for the text-block instead of the special heading (i added the class “text-about” in developer settings for this text-block)?

    #main .container_wrap_first .av-special-heading.custom-class {
	margin-top: 0px;
padding-top: 12px;
padding-bottom: 8px;
}

    and also use this css for the font-style too:

    font-size: 18px;
  font-family: zen-kaku-gothic-new;
font-weight: 500;

    Sorry for my confusion.

    kind regards
    Jak

    • This reply was modified 4 months ago by Jak73.
    July 21, 2024 at 11:02 am #1462598
    Rikard

    Hi,

    Please try this CSS instead:

    #main .avia_textblock.text-about {
  margin-top: 0px;
  padding-top: 12px;
  padding-bottom: 8px;
  font-size: 18px;
  font-family: zen-kaku-gothic-new;
  font-weight: 500;
}

    Best regards,
    Rikard

    July 21, 2024 at 11:12 am #1462600
    Jak73

    Hi Rikard,
    thanks for your fast reply!
    That works nice with the font-family and the font-size.
    But i’m not able to reduce the space above and below the text-block?
    I tried to change:

      padding-top: 12px;
  padding-bottom: 8px;

    but it does not change as on the screenshot?

    kind regards
    Jak

    July 21, 2024 at 4:44 pm #1462615
    Rikard

    Hi,

    This is what is currently appyling:

    #main .avia_textblock.text-about {
  margin-top: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 19px;
  font-family: zen-kaku-gothic-new;
  font-weight: 500;
  word-spacing: 18px;
}

    Changing the top and bottom padding values work when I test it in the browser.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.