LIVE NOTIFICATIONS BUBBLE CUSTOMIZATION

[kjcarleo]

Hello is it possible to cutomize the color of the live notification bubble? Can I make it square even?

Attachments:

You must be logged in to view attached files.

[Radu]

Use this css

COPY CODE

.kleo-notifications.new-alert {
    background-color: #e8307a;
    color: #ffffff;
}

Cheers

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 ?

[kjcarleo]

What about squaring it?

Also, does anything exist to make a popup for notifications or something more visible?

[kjcarleo]

What about the coloring of the rest of the notification area? And the “Mark All As Read” button?

Attachments:

You must be logged in to view attached files.

[kjcarleo]

Is it possible to change the location of the bubble? Maybe to bottom right instead of top right?

[Radu]

Use those selectors

COPY CODE

.kleo-toggle-submenu .submenu-inner {background:red;}

.kleo-notifications-nav ul.submenu-inner li { background:green; }

a.btn.btn-default.mark-as-read {
    background: red !important;
    color: green !important;
}

.kleo-toggle-submenu .minicart-buttons { background:yellow !important; }

Addapt icon notification position

COPY CODE

.kleo-notifications.new-alert {
    background-color: #e8307a;
    color: #ffffff;
    position: absolute;
    top: 10px !important;
    left: 10px !important;
}

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 ?

[kjcarleo]

Bubble OK now. Thanks. WOrking on coloring of submenus and popouts

[Radu]

Great, no problem

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 ?

[kjcarleo]

How about making the bubble squared? Is that possible?

[Kieran]

Hi @kjcarleo to make the bubble square add this to your child theme style.css

COPY CODE

.kleo-notifications.new-alert {
    border-radius: 0 !important;
}

[kjcarleo]

Is there any benefit to adding it to Quick CSS instead? Whats the difference?

[Kieran]

It’ll work fine in the Quick CSS too 🙂

The child theme is used for advanced customizations to WordPress functions and beyond as well as CSS. If you plan to only make small tweaks to the CSS you should continue to use the Quick CSS section within the theme.

[kjcarleo]

Actually it ONLY worked in quick CSS. I pasted the code exactly into the style.css but no change until I removed it from sytle.css and entered it to my Quick CSS.

Here is my chief concern, my quick CSS is getting quite a lot of code. Is there a limit? There is so much now, I am not sure how to condense it. Take a look:

COPY CODE

.header-color.social-header {
    background-color: #0025db;
}
.header-color .top-menu li > a, .header-color #top-social li a {
    font-family: "Raleway";
    color: white;
}
.header-color .top-menu li > a:hover, .header-color #top-social li a:hover {
     color:white;
}
#top-social li a {
    border-right: 1px solid transparent !important; }
.kleo-main-header .nav.navbar-nav li a {
    color: #fff !important;
    font-weight: 900 !important;
}
#gwolle_gb #gwolle_gb_new_entry .input {
	border: 0px solid #e5e5e5;
	background-color: transparent;
}
#gwolle_gb #gwolle_gb_new_entry input,
#gwolle_gb #gwolle_gb_new_entry textarea {
	background-color: #f2f2f2;
}
.avatar {
border-radius: 0 !important;
}

.top-menu li a {
    border: 0 !important;
}

li.kleo-user_avatar-nav a img {
    border-radius: 0;
    border:2px solid #ddd;
}

.bp-login-widget-user-avatar {
    border-radius: 0;
    border: 5px solid #ddd;
}

#buddypress .rounded, .buddypress .rounded {
    border-radius: 0 !important;
}

div#kleo-quick-contact {
    width: 400px;
}

h4.kleo-qc-title {
    font-weight: 800;
}
div#kleo-quick-contact p {
    font-weight: 400;
}
.kleo-main-header .nav > li.active > a {
    box-shadow: none !important;
}
h4.kleo-qc-title:before {
    content: '\e85f';
    font-family: fontello;
    padding: 10px;
}

h1.page-title {font-weight: bold;}

/*Envira Gallery Title for Albums */
.envira-gallery-wrap .envira-album-title {
font-size:18px;
}

.envira-gallery-description p {
    font-size: 18px;
}

.kleo-search-form #searchform .input-lg {
    border-radius: 0;
    margin: 0 !important;
    height: 45px !important;
}

.kleo-search-form #searchform .input-group-btn { top:10px !important;}

.envira-breadcrumbs a {
    color: blue;
    font-size: 18px;
}
.envira-breadcrumbs a:hover {
    color:blue;
    font-size: 18px;
}
.envira-breadcrumbs .breadcrumb_last {
    color: black;
    font-size: 18px;
}
ul#menu-megaprimarymenu .caret:after {
    color:white !important;
}
#footer .widget-title {
    text-decoration: underline;
    font-size: 16px;
    font-weight: 900;
}
.share-links div.hr-title {
    margin-bottom: 5px !important;
}
.share-links {
    text-align: center;
    padding: 10px;
    clear: both;
}
.dropdown-menu li a {
    background: #0025db;
    border: solid 0px #ffffff;
    color: #ffffff !important;
}
.breadcrumb-extra a {
    text-transform: uppercase;
}
ul.dropdown-menu li:hover {
    background: #0025DB !important;
    border: 0px solid #0025DB !important;
}
ul.dropdown-menu a:hover {
    color: #0025DB !important;
}
.header-color .dropdown-menu .active a {
    background: #dd3333;
}
.kleo-notifications.new-alert {
    background-color: #dd3333;
    color: #ffffff;
    position: absolute;
    top: 18px !important;
    right: -24px !important;
}
ul#menu-megaprimarymenu li a {
    text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}
ul.dropdown-menu li a {
    text-shadow: none !important;
}
.kleo-search-form .kleo-ajax-search-loading {
    margin: 0 auto;
    top: 12px;
}

.kleo-toggle-submenu .submenu-inner {
     background:red;
}
.kleo-notifications-nav ul.submenu-inner li {
     background:green;
}
a.btn.btn-default.mark-as-read {
    background: red !important;
    color: green !important;
}
.kleo-toggle-submenu .minicart-buttons {
     background:yellow !important;
}
.kleo-main-header .nav li a:hover {
    box-shadow: inset 0px 2px 0px 0px #dd3333 !important;
}
.kleo-search-form #searchform .input-lg {
    box-shadow: 0px 12px 42px 12px rgba(0,0,0,0.08);
}
.kleo-notifications.new-alert {
    border-radius: 0 !important;
}

[kjcarleo]

I need some help with the code for the mini cart hover menu. Please see attached, I did my best to show which colors I want where, but with out the respective code I am just chasing my tail.

I would Like the Button Blue, and as long as it keeps the red bar on hover it should be fine.

Kevin

[kjcarleo]

Here is the attachment.

[attachment file=142038]

Attachments:

You must be logged in to view attached files.

[Kieran]

Hi @kjcarleo

That’s unusual for CSS in child theme style.css not to come through. Is your child theme activated? Do you have a cache on your site/server or CloudFlare? If you do it may well need cleared before you’d see any changes through style.css.

You have two entries for .kleo-notifications.new-alert you should remove both entries and replace with

COPY CODE

.kleo-notifications.new-alert {
    background-color: #dd3333;
    color: #ffffff;
    position: absolute;
    top: 18px !important;
    right: -24px !important;
    border-radius: 0 !important;
}

[kjcarleo]

Yeah I am using WP Rocket, maybe I didnt wait long enough.

Thanks so much on the consolidation – I can probably look at the rest myself.

How much longer are you around??? I am really trying to get resolution for the following ticket today:

https://archived.seventhqueen.com/forums/topic/menu-colors-on-hover

[Kieran]

Here’s an article by WP Rocket on clearing the cache http://docs.wp-rocket.me/article/53-clear-wp-rocket-cache Also it would be worth purging any content / switching to development mode if you’re running CloudFlare whilst developing your site.

[kjcarleo]

Another thing, how do I change the color of the black box (45 degrees square) to #dd3333?

[Kieran]

Could you put some content within the page for me please?

[kjcarleo]

How do I change the color of the black box (45 degrees square) to #dd3333?

Kevin

[Radu]

Provide screenshot that points out that

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 ?

[kjcarleo]

Attached. See at the bottom right

Attachments:

You must be logged in to view attached files.

[Radu]

This is the selector

COPY CODE

.kleo-toggle-menu .kleo-toggle-submenu:before { background-color:red !important;}

Cheers

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 ?

[kjcarleo]

I tried that and even after flushing the cache I do not see a change.

[kjcarleo]

Actually it is good to go. Thank you so much.

[kjcarleo]

It looks great. Thank you so much. Maybe you could help out Laura and I with an issue with my submenu colors?

It is tthis ticket: https://archived.seventhqueen.com/forums/topic/menu-colors-on-hover#post-134362

[Radu]

No problem. I’ve replied to you already, for that matter we talk in that topic, i will close this

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