I have irritating basket issues.

[jamieianosborne]

Hi there,

 

This is my site http://drunkenskunk.co.uk

 

I'm having issues with the basket icon in the top right.

 

Firstly, when a page is refreshed the rounded corners become square, but then when I mouseover they become rounded again. Why is this? I'd like them to stay rounded.

 

Secondly, how do I move that icon alignment away from the edge? I'd like it at the same distance away as the skunk logo is from the left. I've tried a couple of methods but the whole page seems to mess up.

 

Many thanks in advance,

 

Jamie. 

[Carolina Custom Designs]

Firstly, when a page is refreshed the rounded corners become square, but then when I mouseover they become rounded again. Why is this? I'd like them to stay rounded.

 

Jamie. 

In modules/blockuserinfo/blockuserinfo.css

#shopping_cart a {
    background: url("img/icon/cart.gif") no-repeat scroll right 10px center #EAEAEA;
    border-radius: 0 0 0 0;
    display: block;
    height: 10px;
    min-width: 150px;
    padding: 12px 40px 16px 10px;
}

change border-radius:0 0 0 0; to border-radius:3px;

 

That should solve your problem.

 

Marty Shue

[Carolina Custom Designs]

Secondly, how do I move that icon alignment away from the edge? I'd like it at the same distance away as the skunk logo is from the left. I've tried a couple of methods but the whole page seems to mess up.

 

For this one find the following in same file as above:

#header_right #header_user {
    clear: both;
    float: right;
    margin-top: 20px;
}

and change this to

#header_right #header_user {
    clear: both;
    float: right;
    margin: 20px 20px 0 0;
}

Marty Shue

[Jiten rash (away)]

first problem add this

at blockcart.css if already have also add #shopping_cart a:hover with comma like below @carolina !important tag is required cos radius3px is inline

 

#shopping_cart a, #shopping_cart a:hover{border-radius:0px!important; moz-appearence:none;}

now close this on all add this css -moz-border-radius:0px!important; -webkit-border-radius:0px!important;

 

second problem at blockuserinfo.css

#header_right #header_user{

margin: 20px 35px 0px 0px;}

Edited September 23, 2013 by Jiten rash (see edit history)

[jamieianosborne]

You sir's, are gentlemen and scholars. Thank you very much, that's got me sorted.

 

Greatly appreciated.

[Jiten rash (away)]

no it isnt >>>u still didnt applied my css

[vekia]

 

this is how it looks for me, weirdy gap betwen cart and block user info module

[Jiten rash (away)]

 

this is how it looks for me, weirdy gap betwen cart and block user info module

its fine for me

Edited September 24, 2013 by Jiten rash (see edit history)

[vekia]

i cleared cache and still the same :|

what browser you use Jiten? im on chrome

[Jiten rash (away)]

Mozilla v23

 

actually the issue is not solved yet i still see border radius !important tag is necessary here

Edited September 24, 2013 by Jiten rash (see edit history)

[jamieianosborne]

Sorry lads, I had to rush out last night and didn't get the chance to complete it and iron it all out.

 

Vekia, the drop down should be sorted now but please do tell me if it isn't.

 

Prestashop Fanatic, your code worked fine for me, was exactly what I was after.

 

Jiten Rash, I have added your code now (although I'm not 100% sure it's in the correct place, could you check this for me) but my relative inexperience means I'm not sure what your code is doing, could you explain your reasoning for adding this in more detail.

 

I'm learning this Prestashop stuff at lightning pace ;-)

 

I'm so grateful for the interest in this topic from you guys by the way!

Edited September 24, 2013 by jamieianosborne (see edit history)

[vekia]

i cleared browser cache and now it looks like:

[Carolina Custom Designs]

It looked similar to what Vekia posted on my end too. I was able to align by changing the following:

 

blockcart.css

#header #cart_block {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 1px 0 #C6C6C6;
    color: #555555;
    display: none;
    height: auto;
    position: absolute;
    right: 20px;
    text-transform: uppercase;
    top: 83px;
    width: 200px;
    z-index: 10;
}

Only change was top: 83px;

 

Hope that helps!

 

Marty Shue

[Jiten rash (away)]

now its like this

 

see jamieianosborne as far your problem was rounded corners on shopping cart its still not fixed..i gave a some piece of code u need to add to fix

#header #cart_block {
    top: 83px;}<-- will fix cart issue

Edited September 24, 2013 by Jiten rash (see edit history)

[jamieianosborne]

Sorry guys, you might have just caught me as I was adding Social media links which threw the cart drop down out of line. I've now edited to look fine on my end, chrome and firefox on mac. Everything looking fine now on your ends? I'm a little concerned that in Vekia's screenshot the horizontal alignment is still attached to the right.

 

And Jiten Rash, I'm having trouble understanding what it is you're asking me to do. Could you explain yourself more clearly please. I am a relative newbie when it comes to certain bits of code. Just to clarify, I want rounded edges for the cart icon, although when it drops down, the bottom left and bottom right corners to turn square. At the moment this is what happens, so what is your code adding?

 

Thanks everybody. 

[Jiten rash (away)]

OMG u want to have rounded corners always ??????????? and i was trying to remove ok

 

add this lines at blockuserinfo.css

 

#shopping_cart a:hover{border-radius:3px 3px 0px 0px;-moz-border-radius:3px 3px 0px 0px;-webkit-border-radius:3px 3px 0px 0px;}