Trouble with CSS on View Messages screen

Home › Forums › Front End PM PRO › Trouble with CSS on View Messages screen

This topic is: Resolved

Tagged: , , , , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 27, 2018 at 10:52 am #12697
    STEVE
    Participant

    So I’m in the final phase before I launch my site. I’m cleaning up all the CSS and color schemes to make it look great! I have “Ultimate Members”, “Front End PM PRO”, and the “Front End PM – Ultimate Member Integration” Plugins all installed.

    I went and customized the CSS as much as I could to get the View Messages screen to look as I would prefer it to look. However, there are a couple of things I can’t seem to figure out how to style as I want.

    I’ve attached 2 screenshots as a visual of the exact areas I need help with.

    1. I’d like to make the font used for the “Participants” block different than the font used for the “Message Title” block. Every time I try, the change effects both. I just want to make the Participants font to be normal, not bold and the size to be 18px.
    2. I’d also like the “Read by” stamp to be Right Aligned instead of Left aligned.

    Can you please help me out with these last two requests?

    Thanks!

    Attachments:
    You must be logged in to view attached files.
    March 27, 2018 at 12:58 pm #12715
    Shamim Hasan
    Keymaster

    1. Use .fep-message-title-heading.participants{font-weight:normal;} for participant style
    2. there is no direct tag for “Read by”. May be next version i will try to add a tag.

    March 28, 2018 at 12:21 am #12742
    STEVE
    Participant

    Hi @shamim,

    I added the following CSS code..

    fep-message-title-heading.participants {
    font-size: 14px !important;
    font-weight: normal !important;
}

    but is didn’t work. Any idea why?

    Thanks

    March 28, 2018 at 12:26 am #12748
    STEVE
    Participant

    @shamim

    Nevermind… I see that I forgot the period at the beginning. I added it and the code worked…

    .fep-message-title-heading.participants {
    font-size: 14px !important;
    font-weight: normal !important;
}

    Thanks again for your help!

    If there is any other way I can adjust the “Read by” stamp to be Right Aligned please let me know. If I need to edit a PHP template of something, I’ll do it. Just let me know.

    Thanks

    April 14, 2018 at 1:09 pm #13330
    STEVE
    Participant

    Hi @shamim,

    I see you updated the code to include a direct CSS class for “fep-read-receipt”. I was able to style the Read Receipt line the way I like it. Thank you!

    I’ve almost 100% been able to style the Message view screen the way I like it via CSS.

    The only thing I’m having trouble with is the button used to send the message. On the Message screen it’s the “Reply” button, on the New Message screen it’s the “Send Message” button.

    Right now that button has a CSS class of “fep-button”. The problem is, so do all the other Front End PM PRO buttons. So what ever CSS code I give to that button, affects the other buttons. This may not sound so bad, but I’m trying to adjust it’s position and don’t want the other buttons to be affected as well.

    Any chance you can help with this?

    Thanks

    April 14, 2018 at 2:09 pm #13336
    Shamim Hasan
    Keymaster

    Try following code

    .front-end-pm-form .fep-button {
    float: right;
}
    April 14, 2018 at 4:31 pm #13352
    STEVE
    Participant

    This is helpful, but I’d rather have the button centered, not to the right. Can you help?

    Thanks

    April 14, 2018 at 8:31 pm #13355
    Shamim Hasan
    Keymaster

    Try following code

    .front-end-pm-form .fep-button {
    margin-left: 50%;
}
    April 18, 2018 at 9:42 am #13443
    STEVE
    Participant

    Thank you.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)

You need to purchase ‘Front End PM PRO’ to create topic in this support forum.

If you already purchased ‘Front End PM PRO’ please LOGIN.