-
Author
-
October 25, 2016 at 17:17 #141168kjcarleoParticipant
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.October 25, 2016 at 20:17 #141242RaduModeratorUse 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 solutionOctober 25, 2016 at 20:27 #141251kjcarleoParticipantWhat about squaring it?
Also, does anything exist to make a popup for notifications or something more visible?
October 25, 2016 at 20:33 #141253kjcarleoParticipantWhat 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.October 25, 2016 at 20:34 #141256kjcarleoParticipantIs it possible to change the location of the bubble? Maybe to bottom right instead of top right?
October 26, 2016 at 19:40 #141501RaduModeratorUse 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 solutionOctober 26, 2016 at 21:33 #141529kjcarleoParticipantBubble OK now. Thanks. WOrking on coloring of submenus and popouts
October 27, 2016 at 20:10 #141708RaduModeratorGreat, no problem
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionOctober 29, 2016 at 06:15 #142007kjcarleoParticipantHow about making the bubble squared? Is that possible?
October 29, 2016 at 07:55 #142009KieranParticipantHi @kjcarleo to make the bubble square add this to your child theme style.css
COPY CODE.kleo-notifications.new-alert { border-radius: 0 !important; }
October 29, 2016 at 08:07 #142010kjcarleoParticipantIs there any benefit to adding it to Quick CSS instead? Whats the difference?
October 29, 2016 at 08:27 #142011KieranParticipantIt’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.
October 29, 2016 at 18:34 #142035kjcarleoParticipantActually 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; }
October 29, 2016 at 18:43 #142036kjcarleoParticipantI 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
October 29, 2016 at 18:45 #142037kjcarleoParticipantHere is the attachment.
[attachment file=142038]
Attachments:
You must be logged in to view attached files.October 29, 2016 at 18:53 #142040KieranParticipantHi @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 withCOPY CODE.kleo-notifications.new-alert { background-color: #dd3333; color: #ffffff; position: absolute; top: 18px !important; right: -24px !important; border-radius: 0 !important; }
October 29, 2016 at 18:57 #142041kjcarleoParticipantYeah 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
October 29, 2016 at 19:19 #142045KieranParticipantHere’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.
October 29, 2016 at 19:19 #142046kjcarleoParticipantAnother thing, how do I change the color of the black box (45 degrees square) to #dd3333?
October 29, 2016 at 19:23 #142052KieranParticipantCould you put some content within the page for me please?
October 31, 2016 at 22:02 #142312kjcarleoParticipantHow do I change the color of the black box (45 degrees square) to #dd3333?
Kevin
November 1, 2016 at 19:37 #142435RaduModeratorProvide 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 solutionNovember 1, 2016 at 20:59 #142457kjcarleoParticipantAttached. See at the bottom right
Attachments:
You must be logged in to view attached files.November 2, 2016 at 20:22 #142586RaduModeratorThis 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 solutionNovember 3, 2016 at 04:51 #142643kjcarleoParticipantI tried that and even after flushing the cache I do not see a change.
November 3, 2016 at 05:18 #142650kjcarleoParticipantIt 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
November 3, 2016 at 19:02 #142748RaduModeratorNo 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 -
AuthorPosts
The forum ‘General questions’ is closed to new topics and replies.