Backlight cart template

mridley · 2017-07-06 16:56:36

I'm just about there with changing over to the new templates, one last page the cart template,

1. Where do i change the "Discount code" box size, as it over laps with the apply button.
2. "Delivery Method" the box is way too long?
3. With a black page background and white txt, you can't see the delivery option as the txt is also white?

Gallery is here http://www.tsiphotography.co.uk/galleri … ssex_2016/

Add a couple of items and then "view the cart.

I've changed the txt color to red, so it's obvious you can see the issue it the txt is white.

Last edited by mridley (2017-07-06 17:28:08)

Matthew · 2017-07-06 17:43:40

1. It's supposed to overlap; the discount input should be padding so that text doesn't fall under the button. And in the update we're due to release (probably) tonight, I've adjusted the size of the button so that it more properly matches the size of the field.

2. I'm not sure what you mean. Perhaps a screen capture to illustrate your point?

3. This should also be fixed in the coming update.

And dood, that ferret ... ADORABLE.

mridley · 2017-07-07 16:21:46

I've applied the 1.2.1 update, if you take a look here

http://www.tsiphotography.co.uk/galleri … ssex_2016/

Add a couple of items to teh cart and then when you view the cart the "Apply" button on the discount code doesn't look right and teh txt in the "Delivery method" is cut off at the bottom.

Matthew wrote:

1. It's supposed to overlap; the discount input should be padding so that text doesn't fall under the button. And in the update we're due to release (probably) tonight, I've adjusted the size of the button so that it more properly matches the size of the field.
2. I'm not sure what you mean. Perhaps a screen capture to illustrate your point?
3. This should also be fixed in the coming update.
And dood, that ferret ... ADORABLE.

mridley · 2017-07-07 16:23:16

I've applied the 1.2.1 update, if you take a look here

http://www.tsiphotography.co.uk/galleri … ssex_2016/

Add a couple of items to the cart and then when you view the cart the "Apply" button on the discount code doesn't look right and the txt in the "Delivery method" is cut off at the bottom.

Matthew wrote:

1. It's supposed to overlap; the discount input should be padding so that text doesn't fall under the button. And in the update we're due to release (probably) tonight, I've adjusted the size of the button so that it more properly matches the size of the field.
2. I'm not sure what you mean. Perhaps a screen capture to illustrate your point?
3. This should also be fixed in the coming update.
And dood, that ferret ... ADORABLE.

Last edited by mridley (2017-07-07 16:23:32)

Matthew · 2017-07-07 17:55:37

I'm in the midst of posting that update. I hope I didn't accidentally send out notifications, because I was supposed to be holding off on that, as I literally just found a small issue and I'm waiting for an updated build from Ben to replace it ...

And I see that button is now behaving differently than it was yesterday. Possibly as a side-effect of the thing I just fixed else where. I'm going to go find a good wall to bang my head against ...

Matthew · 2017-07-07 19:15:00

Okay, this is a bit late, so not in 1.2.1. It's also a little more heavy handed than I might like, but it will do for now. You can add this to backlight/modules/module-cart/lib/css/cart.css, at the bottom:

fieldset {
	border: none;
	margin: 0;
	padding:0;
}
.pangolin .discount-entry input {
	box-sizing: border-box;
	display: block;
	width: 100%;
}
.pangolin .discount-submit,
.pangolin .discount-submit:hover {
	box-sizing: border-box;
	line-height: 33px;
	padding: 0;
	width: 85px; height: 33px;
}

The problem here is that we're using a common CSS file for the cart, for both Okapi and Pangolin. Some of Pangolin's global styling rules are conflicting with the cart styling. Last I checked on the cart, this wasn't an issue, so it's likely a conflict arisen from subsequent updates to Pangolin's global styles, made after I had "completed" my cart updates for 1.2, and I just didn't think to check back for side-effects in the cart. I should probably separate these in another update.

mridley · 2017-07-08 18:36:41

Hi Matt, I tried as suggested but it made no difference at all, possibly something I did wrong?

rod barbee · 2017-07-08 21:48:07

I don't see your cart using any custom css. Be sure it's being applied to the page template that your cart is using.

mridley · 2017-07-09 08:54:02

Hi Rod,

I wasn't aware i needed a custom css, Matt's says "You can add this to backlight/modules/module-cart/lib/css/cart.css, at the bottom:" which i did but it didn't seem to make any difference?

rod barbee wrote:

I don't see your cart using any custom css. Be sure it's being applied to the page template that your cart is using.

rod barbee · 2017-07-09 08:57:37

I didn't realize you already added it.

rod barbee · 2017-07-09 09:05:02

did you take it out of the cart.css file?

I just looked with the inspector and didn't see the code Matt suggested. When I added it to cart.css (again, in the inspector), I can see it making a difference.

mridley · 2017-07-09 16:21:26

Hi Rod,

Yes sorry I had removed it, I've now added it back in..

rod barbee wrote:

did you take it out of the cart.css file?
I just looked with the inspector and didn't see the code Matt suggested. When I added it to cart.css (again, in the inspector), I can see it making a difference.

Daniel Leu · 2017-07-09 16:47:18

After you edit the css file as Matt suggested, you have to run Designer > Clear Template Cache.

mridley · 2017-07-09 16:58:48

I'm rubbish at this stuff, so I got my daughter to have a look :-) now it seems a lot better, shortened the "Delivery box" and changed colours, only minor issue the colour for the discount code seems to be linked I.E when you change the wording Discount code it also changes the txt colour within the box, so we've change the colour to a grey so we can read both..

Yes,

Just a thought previously Matt had changed the txt colour in the quantity box delivery method and discount code to black because as you can see The txt is white so is unreadable, so im wondering if this is applied in the fix he supplied?

Daniel Leu wrote:

After you edit the css file as Matt suggested, you have to run Designer > Clear Template Cache.

Last edited by mridley (2017-07-09 20:42:31)

Community @ The Turning Gate

#1 2017-07-06 16:56:36

Backlight cart template

#2 2017-07-06 17:43:40

Re: Backlight cart template

#3 2017-07-07 16:21:46

Re: Backlight cart template

#4 2017-07-07 16:23:16

Re: Backlight cart template

#5 2017-07-07 17:55:37

Re: Backlight cart template

#6 2017-07-07 19:15:00

Re: Backlight cart template

#7 2017-07-08 18:36:41

Re: Backlight cart template

#8 2017-07-08 21:48:07

Re: Backlight cart template

#9 2017-07-09 08:54:02

Re: Backlight cart template

#10 2017-07-09 08:57:37

Re: Backlight cart template

#11 2017-07-09 09:05:02

Re: Backlight cart template

#12 2017-07-09 16:21:26

Re: Backlight cart template

#13 2017-07-09 16:47:18

Re: Backlight cart template

#14 2017-07-09 16:58:48

Re: Backlight cart template

Board footer