♥Tsimi Posted February 25, 2014 Posted February 25, 2014 i tried to restyle the error, warning and success messages but i can't get the rounded corners working. i looked at the catalog/includes/classes/message_stack.php, there i could change the icons. inside the style sheet i looked for .messageBox .messageStackError, .messageStackWarning .messageStackSuccess as always i define a border and input the rounded corner code. border: solid 2px #ff0209; -webkit-border-radius: 5px; -moz-border-radius: 5px; -opera-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 10px; behavior: url('ext/pie/PIE.htc'); now the border is rounded but the background-color: #ffb3b5; won't follow. i also tried to use ui-corner-all inside the message_stack.php but no avail. is there any other place that i might have missed that is responsible for the messageStack design?
♥Tsimi Posted February 25, 2014 Author Posted February 25, 2014 i found out now where the rest of that messageStack is created. catalog/includes/classes/boxes.php but how to alter, or more better, take away that table structure from the messageStack and replace it with div tags?
♥kymation Posted February 25, 2014 Posted February 25, 2014 Try this one. It uses the Theme styling for error messages and alerts. Regards Jim See my profile for a list of my addons and ways to get support.
♥Tsimi Posted February 25, 2014 Author Posted February 25, 2014 Thanks Jim! Where did this come from? So if i want to use custom icons i just set the path to it?
♥Tsimi Posted February 25, 2014 Author Posted February 25, 2014 here is how i finally could solve it. (thanks to Jims file!) i just show the changed part (this is not the whole file) for ($i=0, $n=sizeof($this->messages); $i<$n; $i++) { if ($this->messages[$i]['class'] == $class) { switch ($this->messages[$i]['type']) { case 'success': $display_class = 'success'; $display_icon = ''; break; case 'warning': $display_class = 'highlight'; $display_icon = ''; break; case 'error': default: $display_class = 'error'; $display_icon = ''; break; } // switch ($this->messages $output .= ' <div class="messageStack-'; $output .= $display_class; $output .= '">' . PHP_EOL; $output .= ' <p style="margin-left: 50px;"><strong>'; $output .= $this->messages[$i]['text']; $output .= '</strong></p>' . PHP_EOL; $output .= ' </div>' . PHP_EOL; } } inside the stylesheet.css i added and the 3 icons inside the images/icons folder .messageStack-error { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-image: url(images/icons/error.png); background-repeat: no-repeat; background-color: #ffb3b5; background-position: 6px 4px; border: solid 2px #ff0209; -webkit-border-radius: 10px; -moz-border-radius: 10px; -opera-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; } .messageStack-highlight { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-image: url(images/icons/warning.png); background-repeat: no-repeat; background-color: #ffffb1; background-position: 10px 3px; border: solid 2px #c4c400; -webkit-border-radius: 10px; -moz-border-radius: 10px; -opera-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; } .messageStack-success { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-image: url(images/icons/success.png); background-repeat: no-repeat; background-color: #9dff9d; background-position: 8px 3px; border: solid 2px #009d00; -webkit-border-radius: 10px; -moz-border-radius: 10px; -opera-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; } screenshot attached. thanks again Jim!
Mort-lemur Posted February 25, 2014 Posted February 25, 2014 @@Tsimi Hi Lambros - you going to package it up and add as a contribution? (with Jims permission I guess) Now running on a fully modded, Mobile Friendly 2.3.4 Store with the Excellent MTS installed - See my profile for the mods installed ..... So much thanks for all the help given along the way by forum members.
♥Tsimi Posted February 25, 2014 Author Posted February 25, 2014 @@Tsimi Hi Lambros - you going to package it up and add as a contribution? (with Jims permission I guess) hi Heather I'd love to. But there are two things that need to be done before that. 1. As you already mentioned, first and most important is to get Jims permission. 2. I need to find better icons. As you can see the design of the icons is not same. One has a drop shadow the other is glossy....need to find an "icon set" so that all have the same style. If i would release this as Add-on what should be the title?? I have no clue how people call these messages. :unsure: btw. people could also just use Jims file. Then there is no need to add any icons or add code inside the css. His one uses the standart jquery style and icons and it looks far, far better then the standart osC messages.
♥Tsimi Posted February 25, 2014 Author Posted February 25, 2014 package incl. new icons is ready! package is attached here (for now). i think jim won't mind since he offered his file couple of posts above. edit: deleted zip
♥kymation Posted February 25, 2014 Posted February 25, 2014 Of course I don't mind. The code is licensed under the GPL, so you have the right to remix and use as you want, as long as you obey the terms of the license. While the code is GPL, be careful about including icons. Those images have to be under a compatible license. It's no problem if you created them, but be careful about "free" icons that may have a "no commercial use" license, or similar restrictions. Regards Jim See my profile for a list of my addons and ways to get support.
♥Tsimi Posted February 26, 2014 Author Posted February 26, 2014 Thanks Jim! Good point about the icons. I got them from somebodys tutorial site. It doesn't exactly state under what license the icons fall. She just write that the icons can be downloaded and be used. But under what restrictions is not stated. Anyways i contacted that person just to make sure. Waiting for reply now... meanwhile i asked burt to remove the zip package. For those two that downloaded the package, do not use the icons yet until further notice. Sorry, for any inconvenience that my action might have caused. I found this icon package. I can't find any license note. Is it ok to use? Knob Buttons Toolbar icons
♥kymation Posted February 26, 2014 Posted February 26, 2014 That site also says that the icons are free to use, and no restrictions are mentioned. This is a pretty vague license, so I would still ask. It's better to be polite than to make assumptions. Regards Jim See my profile for a list of my addons and ways to get support.
♥Tsimi Posted February 27, 2014 Author Posted February 27, 2014 Regarding the Icons that i used inside the zip package. I explained them for what purpose i would need them and they told me that i would need to have a commercial license. which, of course, would cost money. so a no go there. so again do not use the icons that where inside the zip package! if you do so, do it on your own risk. i was researching the past 24 hours a lot about licenses for images and icons and to be honest it sucks there is no clear guide line! (i'll explain more details later inside the e-commerce laws section) 10 years ago there was free ware and there was share ware and anything else needed to have a water mark! anyways i don't want to spam this topic with a license discussion. I'll do that inside the e-commerce laws section of this forum. there are many questions i have regarding osC and image/icon licenses. thanks again to Jim for pointing it out!
♥Tsimi Posted February 27, 2014 Author Posted February 27, 2014 Better Looking Messages "Repack" This is a repack of the first version. this time the icons are "free for commercial use", screenshots of the downloaded page are included. zip deleted
burt Posted March 2, 2014 Posted March 2, 2014 @@Tsimi ensure that you are allowed to redistribute these icons. Even though they might be OK for commercial use it might not mean that you can distribute them...
Guest Posted December 5, 2014 Posted December 5, 2014 any chance of this being released with the icons? otherwise, how can i display the message stack as a div instead of a table.
♥Tsimi Posted December 5, 2014 Author Posted December 5, 2014 @@NimaP Hi I created quickly 4 different icons, error, warning, success, info (*info icon is optional to use). So these icons are 100% legal and with my permission free to use for anything you like. I added 3 different sizes for each icon. (256x256, 50x50, 32x32) Download the zip package below. Replace your catalog/includes/classes/message_stack.php file. (backup your original file first!) Add the css definitions from the message_stack.css file to your css file of your choice. (the css settings are for the 32x32 sized icons, change the path to the icons that YOU would like to use. If you should use bigger icons you might have to adjust the css settings.) Add the icons that you want to use inside the catalog/images/icons folder. That's it. Enjoy! Package:
Recommended Posts
Archived
This topic is now archived and is closed to further replies.