Customer Account Page Icons not fully displaying

-- url of the page with the problem -- : www.fricanospizzaalpine.com/order-online/account
-- HikaShop version -- : HikaShop Business 2.3.0
-- Joomla version -- : 3.2.3
-- PHP version -- : 5.4.23
-- Browser(s) name and version -- : Internet Explorer 11.0.9600.16518

See the attached screenshot.
Using IT Future theme (IceTheme) www.icetheme.com/themes/ice-future
The icons (i.e. "View your orders") on the Customer account page are only partially showing. About half of the image (the middle portion) are displaying.

Hi,
The issue that you are having is probably caused by your template CSS, so the solution will probably be to use so CSS code to fix it .

Hi
could you give a user and password that don't need us go to the register step ( give an email ) ?
it is not easy to know wich widget UI ( link ?) we need to click to add /choose a product !
regard's

Make the account here:
www.fricanospizzaalpine.com/component/hikashop/user/form

then see the icons here:
www.fricanospizzaalpine.com/order-online/account

Choose the products here:
www.fricanospizzaalpine.com/order-online

Hi
Could you create a test account and send the information in forum or private ... I don't want to use any of my email acount .
I ll be very happy to " debug " your page to know if i could find and resolve your problem .

when focus on client side UI all information about server ( joomla HKS version) are not usefull only capture screen ( higligh comment problems with paint.Net ) access to page not main web page (link) and user/password account is usefull ( if page is accessible only for register user ) !! this should be stick somewhere to not ask the same questions . Hikashop team know what i mean since i more an xml xslt xpath css guy than a php

regard's

Yes,

Username: terryfricanos
Password: terry123

Hi
you have to change the width value from 14 to 50 , website use a sprite so hope this change ll not create new problem
if you have many page that contain image post thoses link in this thread if problem occur
in media/jui/css/bootstrap.css
line 2276
[class^="icon-"], [class*=" icon-"]
{
background-image: url("../img/glyphicons-halflings.png");
height: 14px;
line-height: 14px;
margin-top: 1px;
vertical-align: text-top;
width: 14px;
width: 50px;
}

Hope this ll be helpfull
For people who understand css debug it take only 2 min to find the problem !
many more month to understand study all the stuff trick about css and browser
The way menu work is very nice without js code ( it ll be reverse for my library )
regard's

Thank you. You are very kind, helpful and knowledgeable!

I do have 3 more pages with icons:

www.fricanospizzaalpine.com/order-online/shopping-cart

www.fricanospizzaalpine.com/order-online/account/order

www.fricanospizzaalpine.com/order-online...carts/cart_type-cart

hi
i make a mistake , all the sprite icon have the same height width so the change you have to do is on each
selector ( properties values ) that refer their own icon in the sprite .

so for for example lock icon you have to do this
in www.fricanospizzaalpine.com/component/us...iew=login&Itemid=120
for boostrap.css.
line 2440
.icon-lock {
background-position: -287px -24px;
width: 14px;/* <- already set in default [class^="icon-"], [class*=" icon-"] */
}


you have to do the same thing for all images problems
shopping cart => .icon-user{} icon .lock-{}

It is strange that it doesnt work by default ! . Could i know your worflow ? how you install all he stuff round glyphicons-halflings.png ? from premade templates ? install by default ? or custom use of some glyphicon take from third css framework ?
I think the problem is not really sprite but the css code around the image that hide the image rendering area for the first time i test the page .

sorry for the mistake
regard's

OK i find the real problem since , the icon in the first page is colored 48x48px)and not in the second page ( lock 14x14px) ?.
someone use !important to that create the mess in my debuggger (i not aware about this and need to study more before be shure how it work )

so for the first image ( not sprite ).
so the problem don't come from sprite !!
.icon-48-user2 {
background-image: url("../images/icons/icon-48-account.png") !important;
width: 48px !important ; /*add width with important ! (it is important ) and don't touch the selector that contain url to sprite */
height:48px !important ; /* to be sure but perhaps define elsewhere by HKS team */
}

do this i think for all color images ( width 48px )
there are many way to resolve same problem ( and create some new ) , i hope you understand the logic !
it seem we use the same account in the same time , best is not use the same because page content change after login and disturb me
for simplicity best is to use demo demo for use name and password for simplicity ( for tempory user login not root access) !!
thank for the link to the pages issues , it help a lot .
I learn a lot about important! real case using css debugger !
I hope this ll not create anothers issues , css is really not rocket science we never know what occur when a change is made if we don't take some time to study the TEMPLATES ( hikashop and the one you choose here ice-future).


regard's

The template is www.icetheme.com/themes/ice-future
The only modification was colors

Where do I add?
add width with important !

Hi

@TerryHikashop here the css code to fix it
Since !important is use you can place the selector defintion anywhere in a css file load in the page
But since the selector is already define , you can modify rather that duplicate selector definition

the location is in /media/com_hikashop/css/frontend_default.css
line 676 ( but you can do a Ctr F ( fin )

change for user icon (only )
.icon-48-user2 {
background-image: url("../images/icons/icon-48-account.png") !important;
}
to
.icon-48-user2 {
background-image: url("../images/icons/icon-48-account.png") !important;
width: 48px !important ;
height:48px !important ;
}

do the same for
.icon-48-order {}
.icon-48-address{}
.icon-48-cart{}

HKS default template ( css file) manage the image location right .
I think one of your template ( one of the css files use on your website) create a problem .
iti is because HKS use in the name of their selector icon- that is use also by black and white glyphicon .
"icon-" is the general way to name raster icon for main website .

---

Perhaps hikashop could choose another prefix name specific for their default HKS layout template like "hks-icon" ?
I think this is a way to avoid !important . User must know then that if there choose a joomla template
there ll be two Css icon logic ( HKS and choosen template ) .

For example the new code and ressources name could be
.hks-icon-48-user2 {
background-image: url("../images/icons/hks-icon-48-account.png") !important;
width: 48px ; /* could be or not remove ...it depend of HKS html/css default choice */
height:48px ; /* could be or not remove ...it depend of HKS html/css default choice */
}

All the change ( php selector image name ) could be easy achieve by "automation" script ( rename /reg ex / search & replace ) .


@Mohamed
you give the clue/way to go but i think TerryHikashop has until now not the knowledge about css to be able to fix by himself the css code (base on question about css file location . i don't have also the knowledge since it take me time to understand the problem ! ) . when you write " The issue that you are having is probably caused by your template CSS, so the solution will probably be to use so CSS code to fix it " . I think you could write that " the issue that you are having is probably caused by HKS template . " HKS is a sub component integrate inside a main master component template so ........ ( you know what i mean ) .

All this is not a problem if you understand the choice make by HKS team and understand css/ joomla.
The problem is there is no coding standart style ( or whatever name to use ) for css when use CMS and specific CMS like joomla .


regard's

I placed the code for
.icon-48-user2
.icon-48-order
.icon-48-address
.icon-48-cart

It was at line 1366 not 676

lionel75,

All the icons are fixed.

Your skills are good/admirable!

And we are impressed with HikaShop support.

Thank you.