added to cart / wishlist popup.

-- HikaShop version -- : 3.2

According to a previous thread in which Nicholas was involved in I am trying to modify the colors to reband them for my company for the Successfully added to cart popup but the changes are having no affect, so i must be either using the wrong class, or adding the changes to the wrong place.

I added the below (just with different colors) to the custom css and also tried it in the front end css, but no go.

#hikashop_notice_box_message div.hikashop_success{
	background-color:#427060;
	border-bottom-color: #182E32;
	border-top-color: #182E32;
	color: #FFF;
}

I just realized that the above changes would not be correct, as this is a modal popup, however I am not sure the proper syntax for modifying a modal popup in the custom edit.css.

So i have tried this instead in the custom css.

#modal-hikashop_print_popup {
background-color:#ffaf59;
border-bottom-color: #f0842b;
border-top-color: #f0842b;
color: #f0842b;
}

I could not be so lucky as for it to work

I was not implying you said anything, I was just stating that you were involved in an earlier thread where this was listed as a solution. I mentioned you in hopes you would recall that thread and steer me in the right direction.

As for the directory plugins/hikashop/cartnotify/media and the css file notify-metro.css, unless that can be accessed via the hikashop configuration editor or via the templates file manager (for lack of a better term), I do not believe I have any ability to get to that file as I only have access to the Joomla Control Panel under that I do not see anything that links anything like that.

If you see the attached screen shot that is all I am able to access, and I don't see a way to get to that directory / css file from there unless I am missing something and it's hiding somewhere. If I can't access this, then I will have to open an issue with the webmaster of the server where my site is hosted. So I will see if I can get the webmaster to send me a copy of that configuration so I can see it so I know what edits to make in the custom.css

Would it be best to make the changes (once I know what changes to make) in the custom.css or custom frontend,css? Or if perhaps you guys could supply my with a copy of how that class is configured in the notify-metro.css this way I can use that to know what I am customizing? I just need to know what is set by default so I can override it and or add the proper changes.

Thanks

Hi Nicholas,

While I see the class / code as follows it does not show anything about the colors other then #444 which is grey, so i am curious where the blue colors are coming from. Obviously they are not being set in this code so that means that these colors are being set somewhere else. The problem with that is that there are likely other places that will use those colors and I would want them to be changed at a global level so that any place those colors are going to be used, they will be changed. There is nowhere in that code that your blue teal branded colors are being used. I will try to add a color and background color and see if that changes what I need but if they are used elsewhere, these changes will not affect anywhere else.

.notifyjs-metro-base,
.notifyjs-metro-lite-base{
	position: relative;
    min-height: 52px;
    color:#444;
}
.notifyjs-metro-base .image {
	display: table;
	position: absolute;
	height: auto;
	width: auto;
	left: 25px;
	top: 50%;
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.notifyjs-metro-base .text-wrapper,
.notifyjs-metro-lite-base .text-wrapper {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	clear: both;
	font-family: 'Segoe UI';
}
.notifyjs-metro-base .text-wrapper {
	margin: 10px 10px 10px 52px;
}
.notifyjs-metro-base .title,
.notifyjs-metro-lite-base .title {
	font-size: 15px;
	font-weight: bold;
}
.notifyjs-metro-base .text,
.notifyjs-metro-lite-base .text {
	font-size: 12px;
	font-weight: normal;
	vertical-align: middle;
}
.notifyjs-container {
	min-width:250px;
}

I did not copy and paste the code you provided, I just needed to know what code was used to set the colors initially so that I could modify specifically the code / class for only the code specific to the colors so to rebrand the pop-up for the colors I only used the class name and the color and background color attributes. I did not add the entire code as provided. I have learned enough about CSS to modify the styling with the smallest amount of code and the cleanest way possible. I belive I added about 4 lines of code I total to make the proper styling changes. I may not have represented my question properly but yes I was able to figure out what needed to be added and nothing more.

Thanks

Hi Philip, I think that there is still a misunderstanding. The code that Nicholas provided me was exactly the code I needed to use. It was assumed that I just copied and pasted the entire code snippet that was provided to me to rebrand the colors for my site, but that is not what I did. I simply needed the code so that I knew what class and the portions of the code that I needed to modify.

The changes that I made were to simply take the code I was provided and just added

/* 
Rebrand colors for the add to cart and wishlist
*/
.notifyjs-metro-base,
.notifyjs-metro-lite-base{
  	background-color: #f0842b !important;
}
.notifyjs-metro-base .text-wrapper,
.notifyjs-metro-lite-base .text-wrapper {
  	color: black !important;
  	background-color: #f0842b !important;
}

/* 
* end rebrand of nofifcation popup
*/