font and colour change

  • Resolved hairyhobo

    (@hairyhobo)


    3 years, 7 months ago

    Hello I have the AWSM pro version on a subscription with envato and i was looking to find out how to do the following..

    Fonts – how do you change the fonts, make some bold, etc?

    Style 1, preset 01 – when you hover an image a black box pops up with the name. How do you change the colour of this box? and can it be set to multiply blend? Also relating to that box, can the name switch with the job title?

    thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support vidyakv

    (@vidyakv)

    Hi @hairyhobo,

    Thanks for reaching out to us.

    Could you please share with us the URL of your team page?
    Please let us know which text you want to change the font. Also, let us know the color you want to change in the hover overlay.

    Regards,
    Vidya K V

    Thread Starter hairyhobo

    (@hairyhobo)

    Hopefully this will work…

    https://staging3.belmontfarmandequinevets.co.uk/meet-the-team/

    Colour of the block to be #5E2A81 with a multiply blend

    Fonts – all the fonts to open sans with the name in open sans bold.

    Can the name come above the job title in the popup box?

    Thanks

    Plugin Support vidyakv

    (@vidyakv)

    Hi @hairyhobo,

    Please copy-paste the below CSS in the ‘Custom CSS’ field of the team’s edit page.

    .awsm-grid-wrapper {
    font-family: "Open Sans", Sans-serif;
}
.drawer-style.style-1 figcaption {
    background: rgba(94,42,129,.8);
}
.drawer-style.style-1 .awsm-personal-info {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    height: 100%;
}
.drawer-style.style-1 figcaption::before {
    display: none;
}
.drawer-style.style-1 .awsm-content-scrollbar {
    display: flex;
    flex-flow: column wrap;
}
.drawer-style.style-1 .awsm-content-scrollbar span {
    order: 2;
    margin-bottom: 20px;
}
.drawer-style.style-1 .awsm-content-scrollbar h2 {
    order: 1;
    margin-bottom: 0;
}
.drawer-style.style-1 .awsm-content-scrollbar * {
    order: 3;
}

    Regards,
    Vidya K V

    Thread Starter hairyhobo

    (@hairyhobo)

    Thats awesome, thank you.

    If i put…
    mix-blend-mode: multiply;
    on the .drawer-style.style1

    It applies the blend mode to the text as well. Can it be applied to the purple colour only? so the text shows as white on top?

    How do i amend the two different sized names “matt pugh” and the “BVETMED” text.
    I would like to alter the sizes and make some of these bold.

    Thanks

    Plugin Support vidyakv

    (@vidyakv)

    Hi @hairyhobo,

    CSS to apply blend mode:

    .drawer-style.style-1 figcaption{
	background: none;
}
.drawer-style.style-1>.awsm-grid-card .awsm-grid-list-item{
	background: rgba(94,42,129,0.5);
}
.drawer-style.style-1 figure.cs-hover img, .no-touchevents .drawer-style.style-1 .awsm-grid-card .awsm-grid-list-item:hover figure img{
	mix-blend-mode: multiply;
}

    The selectors for changing the size of Name and Designation are following:
    Name selector: .drawer-style.style-1 figcaption h3 {}
    Designation selector: .drawer-style.style-1 .awsm-personal-info span {}

    Regards,
    Vidya K V

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘font and colour change’ is closed to new replies.