Support » Plugin: Single Post Message » Styling options

  • Resolved Mike Rawson

    (@mike-rawson)


    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 Kanti Roy

    (@mkrdip)

    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.

    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

    Mike Rawson

    (@mike-rawson)

    Hi there,

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

    Thanks,

    Mike

    Mike Rawson

    (@mike-rawson)

    Hi there,

    Just wondering if you are planning to help me out with the CSS? It’s been 10 days now.

    Plugin Support Mrinal Kanti Roy

    (@mkrdip)

    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

    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 Kanti Roy

    (@mkrdip)

    Hi Mike,

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

    border-radius: 5px;

    Hope this helps.

    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 Kanti Roy

    (@mkrdip)

    Hi Mike,

    Glad that you did it yourself.

    Cheers.

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.