Notifications
Clear all

[Solved] Fixing the display with code

15 Posts
2 Users
0 Likes
1,122 Views
Posts: 27
Topic starter
(@yuri-vasilchenko)
Eminent Member
Joined: 2 years ago

Hi!

Please write me the code to change the appearance of the extension.

Everything is also shown in the screenshot.

1) Alignment of the list of notifications on the right border of the site

2) Color changes:
1. Background color
2. Separator strip color
3. Bottom band color

Notif 1

 

14 Replies
Astghik
Posts: 5842
Admin
(@astgh)
Illustrious Member
Joined: 6 years ago

@yuri-vasilchenko,

You can reduce the width of the section using the CSS code:

#wpadminbar #wun-container, #wun-container {
     width: 200px !important;
}

For the second point use this code: 

#wpadminbar #wun-container .wun-notifications, #wun-container .wun-notifications, #wpadminbar .wun-notifications .wun-head, .wun-notifications .wun-head, #wpadminbar .wun-content .wun-item, .wun-content .wun-item{
    background-color: #9f6f6f !important;
}
#wpadminbar .wun-notifications .wun-head, .wun-notifications .wun-head{
    border-bottom-color: #ff00d4;
}

#wpadminbar #wun-container .wun-notifications, #wun-container .wun-notifications {
        border-bottom-color:  #d08d8d;
}

All the red marked values can be changed as you like.

3 Replies
(@yuri-vasilchenko)
Joined: 2 years ago

Eminent Member
Posts: 27

@astgh

For question number 1, this code is completely inappropriate. Please check the correct code.

(@yuri-vasilchenko)
Joined: 2 years ago

Eminent Member
Posts: 27

@astgh

I'll clarify the problem again, if you didn't understand me from the picture.

The right border of the "Notifications" block should be flush with the right border of the site on the right. Need to align to the right side!

(@yuri-vasilchenko)
Joined: 2 years ago

Eminent Member
Posts: 27

@astgh

I can adjust the width of the block as I need.
We want the block to align with the right side of the site and expand from right to left as the width changes.

Posts: 27
Topic starter
(@yuri-vasilchenko)
Eminent Member
Joined: 2 years ago

I need to do like this:

Notif 2

 

Posts: 27
Topic starter
(@yuri-vasilchenko)
Eminent Member
Joined: 2 years ago

And I also need a code to change the colors of the notification loading icon:

Notif 3
3 Replies
Astghik
Admin
(@astgh)
Joined: 6 years ago

Illustrious Member
Posts: 5842

@yuri-vasilchenko,

We don't provide support for style customization, we may help with 1-2 simple questions related to colours and background but not more. We can not help you customize all components of the website style, these are custom requirements and should be done by website owners. We only help with general questions and issues.

Thank you for your understanding.

You can find all classes by pressing F12 on the browser and opening Chrome or Firefox Console, it'll help you easily write CSS rules you need to customize. 

CSS

 

(@yuri-vasilchenko)
Joined: 2 years ago

Eminent Member
Posts: 27

@astgh ОК!

But please help me with this one question on the code to change the color of an element:

https://gvectors.com/forum/wpdiscuz-user-notifications/fixing-the-display-with-code/#post-32499

Astghik
Admin
(@astgh)
Joined: 6 years ago

Illustrious Member
Posts: 5842

ok, @yuri-vasilchenko

Here is the code: 

#wpadminbar .wun-loader svg path, #wpadminbar .wun-loader svg rect, .wun-loader svg path, .wun-loader svg rect {fill: red;}

Don't forget to apply it in this way as well: 

Follow the instructions provided here:  https://css-tricks.com/snippets/wordpress/apply-custom-css-to-admin-area/

Posts: 27
Topic starter
(@yuri-vasilchenko)
Eminent Member
Joined: 2 years ago

And one more thing: please give instructions on how to replace wun-item-icon with my icon or with the same icon, but in a different color.

 

1 Reply
(@yuri-vasilchenko)
Joined: 2 years ago

Eminent Member
Posts: 27

I have already done this.

Page 1 / 2
Share:
Scroll to top