[Resolved] Blogpost styling

Home Forums Support Blogpost styling

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1320410
    Abhishek

    Hi
    I want to make the background of the title of the blogpost as Black

    For ref. pls see this photo – https://ibb.co/HCBy5pJ
    I want to make that portion as black in color and the text as white.
    So can you pls let me know that how can i achieve that?

    Thank You 🙂

    #1320478
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    /* remove space between header and featured image  */
    .post-image-below-header.post-image-aligned-center .inside-article .featured-image {
        margin-top: 0 !important;
    }
    
    /* Force entry header to fill space */
    .single-post .entry-header {
        margin: -40px -40px 0 -40px;
        padding: 40px;
        background-color: #000;
        color: #fff;
    }
    
    @media (max-width: 768px) {
        .single-post .entry-header {
            margin: -30px -30px 0 -30px;
            padding: 30px;
        }
    }
    
    /* Change entry header and meta text color */
    .single-post .entry-header, .single-post .entry-header .entry-meta, .single-post .entry-header .entry-meta a {
        color: #fff;
    }
    #1320846
    Abhishek

    Yehhh!
    Thank You so much!
    Now it looks cool.

    #1320899
    David
    Staff
    Customer Support
    #1354745
    Abhishek

    Hi!
    I trust you are doing well and staying safe!

    I just need a little help!
    the css you gave me above has the background as black!
    Can i change it to a Gradient background?
    i want blue gradient color like this this – https://uigradients.com/#AzurLane

    #1354788
    David
    Staff
    Customer Support

    In the above CSS. Replace:

    background-color: #000;

    for this:

    background: #7f7fd5; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #7f7fd5, #86a8e7, #91eae4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    #1354991
    Abhishek

    Thank you so much 😍🙏

    #1354999
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.