Styling options

Resolved Mike Rawson
(@mike-rawson)

6 years, 10 months ago

Hi Tom,

I really like the plugin because it’s so simple, but is there anyway to style it with CSS?

I’d like if possible to change the font / font size / and text, background and border colours so that it works better against my blog posts.

Thanks,

Mike

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Support Mrinal Roy
(@mkrdip)

6 years, 10 months ago

Hi Mike,

Thanks for your kind words and using our plugin.

It’s definitely possible to style the message using Custom CSS codes. Would you mind to share your URL, please?

By the way, Tom isn’t maintaining the plugin anymore, please check this announce.

Cheers.

Thread Starter Mike Rawson
(@mike-rawson)

6 years, 10 months ago

Thanks for the quick response. I only have it on a local test instance at the moment, as the default colours and fonts don’t match my blog.

I found this CSS in the source code:

#single-post-message{width:100%;}
2 #single-post-message-preview{background-color:#fcf8e3;border:1px solid #fbeed5;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;margin-bottom:18px;margin:8px 0 8px 0;color:#c09853;padding:12px;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);font-family:Arial,Sans-serif;font-size:12px;}

But adding variations of this in the CSS within the Customizer doesn’t seem to change anything.

Mike

Thread Starter Mike Rawson
(@mike-rawson)

6 years, 10 months ago

Hi there,

Just wondering whether you might be able to help me with the CSS?

Thanks,

Mike

Thread Starter Mike Rawson
(@mike-rawson)

6 years, 10 months ago

Hi there,

Just wondering if you are planning to help me out with the CSS? It’s been 10 days now.
Plugin Support Mrinal Roy
(@mkrdip)

6 years, 9 months ago
Hi Mike,

Extremely sorry for being late here.

As styles are getting added inline to override them we need to use !important rule. So, please use CSS like the following:
```
#single-post-message-preview {
    background-color: #fcf8e3 !important;
    border: 1px solid #fbeed5 !important;
    color: #ff0000 !important;
    font-family: 'Times New Roman', Sans-serif !important;
    font-size: 14px !important;
}

.single-post-message {
    background-color: #fcf8e3 !important;
    border: 1px solid #fbeed5 !important;
    color: #ff0000 !important;
    font-family: 'Times New Roman', Sans-serif !important;
    font-size: 14px !important;
}
```
Hope this helps.

Cheers!

– Mrinal
Thread Starter Mike Rawson
(@mike-rawson)

6 years, 9 months ago

Hi Mrinal,

Thanks for getting back to me. That works great.

Is there any way to not have the box corners rounded?

Thanks,

Mike

Plugin Support Mrinal Roy
(@mkrdip)

6 years, 9 months ago

Hi Mike,

Yes, you can just add one more property to both CSS rules above.

border-radius: 5px;

Hope this helps.

Thread Starter Mike Rawson
(@mike-rawson)

6 years, 9 months ago

Thanks Mrinal,

I actually used 0px to remove the rounding, and I had to use the !important suffix.

border-radius: 0px !important;

Thanks for all your help.

Mike

Plugin Support Mrinal Roy
(@mkrdip)

6 years, 9 months ago

Hi Mike,

Glad that you did it yourself.

Cheers.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Styling options’ is closed to new replies.