Notifications
Clear all

Paid Addons Support Forum Only

Please note, that here we only support Paid Addons issues and questions.

gVectors Support staff works from 6am to 6pm (GMT+0)

All questions related to wpForo and wpDiscuz free plugins should be asked in the corresponding plugin support forum:

 

wpDiscuz Support Forum wpForo Support Forum

[Solved] Fixing the display with code

Page 1 / 2

yuri.vasilchenko
Posts: 27
Topic starter
(@yuri-vasilchenko)
Eminent Member
Joined: 1 month 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: 5354
Admin
(@astgh)
Support Team
Joined: 5 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
(@yuri-vasilchenko)
Joined: 1 month ago

Eminent Member
Posts: 27

@astgh

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

yuri.vasilchenko
(@yuri-vasilchenko)
Joined: 1 month 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
(@yuri-vasilchenko)
Joined: 1 month 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.

yuri.vasilchenko
Posts: 27
Topic starter
(@yuri-vasilchenko)
Eminent Member
Joined: 1 month ago

I need to do like this:

Notif 2

 

yuri.vasilchenko
Posts: 27
Topic starter
(@yuri-vasilchenko)
Eminent Member
Joined: 1 month ago

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

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

Support Team
Posts: 5354

@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
(@yuri-vasilchenko)
Joined: 1 month 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: 5 years ago

Support Team
Posts: 5354

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/

yuri.vasilchenko
Posts: 27
Topic starter
(@yuri-vasilchenko)
Eminent Member
Joined: 1 month 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
(@yuri-vasilchenko)
Joined: 1 month ago

Eminent Member
Posts: 27

I have already done this.

Page 1 / 2
Share:
Scroll to top