Styling options

  • Resolved Mike Rawson

    (@mike-rawson)


    7 years, 5 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)

    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)

    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)

    Hi there,

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

    Thanks,

    Mike

    Thread Starter 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 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

    Thread Starter Mike Rawson

    (@mike-rawson)

    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)

    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)

    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)

    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.