[Resolved] Blogpost styling

[_blank]

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 🙂

[David]

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;
}

[_blank]

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

[David]

You’re welcome

[_blank]

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

[David]

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+ */

[_blank]

Thank you so much 😍🙏

[David]

Glad to be of help

[Author]

Posts