Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • April 28, 2022 at 2:09 pm #1349821
    sensiblekaren

    Hello

    Please can you help me with some CSS to do the following to the timeline feature:

    1. change the timeline headers to be a different font – Monserrat
    2. change the timeline icon (I have used an image here) size to be a little larger
    3. change the dashed line to be a solid line that links each icon in the timeline

    Thank you

    April 29, 2022 at 8:57 am #1349912
    Rikard

    Hey sensiblekaren,

    I can’t see a Timeline element on the page you linked to, could you post a link to where we can see the actual element please?

    Best regards,
    Rikard

    April 29, 2022 at 10:05 am #1349927
    sensiblekaren

    Hey thanks for getting back so quick. I have now published the page so that you can see the timeline as it currently is and enclosed the link in private content. Thank you!

    April 29, 2022 at 12:07 pm #1349952
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    h4.av-milestone-title {
    font-family: 'Montserrat';
}

.avia-timeline .milestone_icon {
    height: 100px;
    width: 100px;
    line-height: 100px;
}

.avia-timeline-vertical .av-milestone-icon-wrap:after {
    border-left-style: solid;
}

    Best regards,
    Rikard

    April 29, 2022 at 12:55 pm #1349960
    sensiblekaren

    Thank you. I added that but it hasn’t seemed to have worked. I cleared the cache and hard refreshed?

    April 29, 2022 at 7:33 pm #1349984
    Rikard

    Hi,

    Please try this CSS instead:

    h4.av-milestone-title {
    font-family: 'Montserrat' !important;
}

.avia-timeline .milestone_icon {
    height: 100px !important;
    width: 100px !important;
    line-height: 100px !important;
}

.avia-timeline-vertical .av-milestone-icon-wrap:after {
    border-left-style: solid !important;
}

    Best regards,
    Rikard

    May 3, 2022 at 12:00 pm #1350291
    sensiblekaren

    Thank you have tried it but still doesn’t seem to have worked?

    May 3, 2022 at 12:11 pm #1350294
    Nikko

    Hi sensiblekaren,

    Try to clear out the browser cache or if you are using Chrome, try to open the page in incognito mode.
    I have checked your site and the Montserrat font is rendering correctly, I have posted a screenshot link in private content.

    Best regards,
    Nikko

    May 3, 2022 at 12:19 pm #1350297
    sensiblekaren

    Arh thank you yes. Just one thing – the header needs to be bold so it matches the look of the h1 headers on the page – would it work just to add…

    h4.av-milestone-title {
    font-family: ‘Montserrat’ !important;
    font-weight: bold !important;
    }

    May 3, 2022 at 12:24 pm #1350300
    Nikko

    Hi sensiblekaren,

    Yes, your code is correct :)

    Best regards,
    Nikko

    May 3, 2022 at 12:35 pm #1350304
    sensiblekaren

    Thank you. I have added this bold code and increased the milestone icon to be 150px

    Can’t see changes again, cleared cache and went incognito – are you seeing changes?

    .avia-timeline .milestone_icon {
    height: 150px !important;
    width: 150px !important;
    line-height: 150px !important;
    }

    May 3, 2022 at 3:11 pm #1350335
    Rikard

    Hi,

    Your icon code is applying on my end, please try clearing all local and server caches again to see if that helps.

    Best regards,
    Rikard

    May 4, 2022 at 12:30 pm #1350458
    sensiblekaren

    Thank you. I see the icons now. When the icons are on a mobile they are now too big and cover the header – they are perfect on the desktop at 150px but on a mobile need to be their orginal size.

    Is it possilbe with the quick CSS to only apply the larger icon before the breakpoint?

    Also, the font for the headers should be blod but for somereason the page it does not look like monserrat – but they are now bold

    May 4, 2022 at 12:31 pm #1350459
    sensiblekaren

    To clairfy my last sentence: Also, the font for the headers should be monserrat bold but for some reason on the page it does not look like monserrat – but they are now bold

    May 4, 2022 at 1:47 pm #1350481
    Rikard

    Hi,

    You can wrap you code in a media query if you only want it to apply to screes sizes above mobile:

    @media only screen and (min-width: 768px) {
Your code goes here
}

    Montserrat is not applying to the header, which code did you add exactly, and where?

    Best regards,
    Rikard

    May 4, 2022 at 2:17 pm #1350487
    sensiblekaren

    Thank you. I added this in quick CSS:

    h4.av-milestone-title {
    font-family: ‘Montserrat’ !important;
    font-weight: bold !important;
    }

    So this for icons larger on screens above mobile

    @media only screen and (min-width: 768px) {
    .avia-timeline .milestone_icon {
    height: 150px;
    width: 150px;
    line-height: 150px;
    }}

    May 4, 2022 at 2:58 pm #1350495
    Rikard

    Hi,

    Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Best regards,
    Rikard

    May 5, 2022 at 10:25 am #1350594
    sensiblekaren

    Thank you

    May 5, 2022 at 12:22 pm #1350606
    Rikard

    Hi,

    Thanks for that, I’ve fixed it for you. Please review your site.

    Best regards,
    Rikard

    May 5, 2022 at 12:54 pm #1350610
    sensiblekaren

    Thank you – I really appreciate that. Great support.

    May 5, 2022 at 1:07 pm #1350612
    Rikard

    Hi,

    Thanks for the kind feedback :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    May 5, 2022 at 1:08 pm #1350613
    sensiblekaren

    Thank you no more help is required as issues are solved. Please close

    May 5, 2022 at 4:46 pm #1350639
    Rikard

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Header style of timeline to Monserrat, size of image icon in timeline’ is closed to new replies.