Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 19, 2022 at 1:11 pm #1336183
    kazumakitajima

    Hi there,

    I am using Post Slider to display blog posts on my website. However, I want to change the style of my the Blog meta data that is shown such as the date of the blog post.

    I have a p style called “Heading7” that I want the blog meta date to use.

    So on this webpage (link is in private) I want the Post Slider element’s Date of blog post have the p style “Heading7”. What css do I put? Thank you

    January 19, 2022 at 3:39 pm #1336218
    Yigit

    Hey,

    Thanks for contacting us!

    Your page is password protected so I could not check it. If you are using Post Metadata element to display post meta, please edit your element and go to Advanced > Developer Settings and insert “Post Metadata” in Custom CSS field :)

    Best regards,
    Yigit

    January 19, 2022 at 7:18 pm #1336264
    kazumakitajima

    Password to view page is below.. thank you

    January 20, 2022 at 5:23 am #1336290
    Rikard

    Hi,

    Thanks for that. I’m not sure I understand what changes you are looking to make, could you try to explain a bit further, or post a screenshot highlighting your intentions please?

    Best regards,
    Rikard

    January 21, 2022 at 8:09 am #1336495
    kazumakitajima

    Hi,

    For the Post Slider, I want to change the Date meta data with the heading7 style I declared in my CSS. I also want to change the style of the “Read more” button with the button I styled in my CSS named “aoki-template_line-button”. Please see below for the screenshot of the photoshop I did. Thank you.

    January 21, 2022 at 6:30 pm #1336574
    Yigit

    Hi,

    Please edit your custom CSS and add following class to your Heading7 CSS code

    .avia-content-slider .slide-meta time

    So it would look as following

    .heading7, h7, .avia-content-slider .slide-meta time {
  color: inherit;
  font-family: 'Open Sans Light; font-size: 15p';
  letter-spacing: 4pt;
}

    And add following class to your “aoki-template_line-button”

    #top .read-more-link .more-link

    Best regards,
    Yigit

    January 21, 2022 at 9:27 pm #1336586
    kazumakitajima

    It did not work, the font is not open Sans anymore looks like a serif font. please advise

    January 21, 2022 at 9:50 pm #1336587
    kazumakitajima
    This reply has been marked as private.
    January 24, 2022 at 3:11 pm #1336908
    kazumakitajima

    Hi,

    Following up.. Thank you!

    January 28, 2022 at 12:36 pm #1337703
    Ismael

    Hi,

    That is a lot of css for a read more link. Did you remove the post slider in the “whoweare” page? We cannot find it anywhere and the post items in the news page look different compare to the screenshot, so we are not really sure what is the current appearance or style of the element. Please create a test page so that we can check the post slider and the read more link.

    Best regards,
    Ismael

    February 1, 2022 at 8:55 am #1338157
    kazumakitajima

    Can you check now please. Thank you

    February 3, 2022 at 3:01 am #1338578
    Nikko

    Hi kazumakitajima,

    Please try adding this CSS code in your Quick CSS:

    #top .slide-entry-excerpt .more-link {
    border: 0px;
    transition: 666ms cubic-bezier(0.666, 0, 0.333, 1);
    font-size: 14px;
    letter-spacing: 1.5px;
    line-height: 1;
    margin: 0px;
    overflow: hidden;
    padding: 18px 18px 18px 58px;
    position: relative;
    text-transform: uppercase;
}

#top .slide-entry-excerpt .more-link:before,
#top .slide-entry-excerpt .more-link:after {
    opacity: 0.3;
    background-color: #000000;
    content: "";
    display: block;
    height: 2px;
    left: 0px;
    position: absolute;
    top: 24px;
    width: 40px;
}

#top .slide-entry-excerpt .more-link:after {
    transform: translate3d(-100%, 0, 0);
    transition: transform 666ms cubic-bezier(0.666, 0, 0.333, 1);
}

#top .slide-entry-excerpt .more-link:hover {
    color: #000000;
    opacity: 1;
}

#top .slide-entry-excerpt .more-link:hover:after {
    transform: translate3d(0%, 0, 0);
}

#top .slide-entry-excerpt .read-more-link .more-link-arrow {
    display: none;
}

    Hope it helps.

    Best regards,
    Nikko

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