Add padding to Messages alert

[msteimann]

Hello,

I would like to report two minor design issues.

1. Is it possible to add margin to the message alert boxes, so that the text excerpt gets not cut off at the bottom?

2. Is it possible to enlarge the width of the search bar on the member’s profile messages tab, so that the translation text fits in?

Regards,

Martin

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, can you share an user that has notifications so i can see it?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[msteimann]

This reply has been set as private.

[msteimann]

This reply has been set as private.

[msteimann]

Hello again,

I have just noticed that Firefox does show the correct width of the search field. The text is rendered too bright, but at least it’s fully readable.

Regards,
Martin

Attachments:

You must be logged in to view attached files.

[Laura]

Hello 🙂
for the first issue, please add this to style.css of child theme

COPY CODE

.nav.navbar-nav .kleo-messages-nav .kleo-toggle-submenu li.kleo-submenu-item .message-body {
    height: 100% !important;
}

Also noticed the Mark all as read button cuts, add this to fix it

COPY CODE

a.btn.btn-default.mark-as-read {
    width: 100% !important;
    max-width: 80% !important;
}

Which other buttons need fixing?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[msteimann]

Thank you Laura, both patches work! Its the search field of the messages tab on profile page that needs fixing. Please note attachment. Please also note my attachment of post #217586, which shows different behaviors of this issue on different browsers.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, try by adding this to style.css of child theme

COPY CODE

.message-search {
    width: 16% !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[msteimann]

Hello Laura,

there must be something else that causes the cut off text. For testing purposes I set the width to 50%, and the issue remains (please note attachment).

By the way: which is the preferred place to enter CSS codes like the one above? I am getting confused by the three different options to paste it into:

1. The Quick CSS within the KLEO Theme Settings
2. The Editor under Dashboard – Design – Customizer
3. The Editor under Dashboard – Design – Editor

Would you mind to give a brief explanation?

Thank you!

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

Please use the next css instead the one from #217737 reply.

COPY CODE

#buddypress div.message-search input[type=text] {
    min-width:300px;
}

By default the box has around 130px max width assuming it’s enough space to enter 2-3 medium length words, that can be increased using the above css rule and it can be placed in any of the places specified by you above.

Also you can change the 300px value to your preferred one.

Put them in the quick CSS within the KLEO Theme Settings

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[msteimann]

Perfect – thank you Radu!

[Radu]

You’re welcome
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts