Support

Home Forums Multiple Event Registration Add-on How do I style Add to cart and View cart Links?

How do I style Add to cart and View cart Links?

Posted: April 7, 2014 at 11:48 am


Charlie Farrow

April 7, 2014 at 11:48 am

I’ve been searching the documentation and forums with no success. I’m probably being a bit dim but I can’t see where or how to generate a button of similar weight and size as the View Details Button in the attached screenshot

I realise [ESPRESSO_CART_LINK anchor="Add to Cart" direct_to_cart=1 moving_to_cart="Redirecting to cart..."] adds a text link in the position that I have labelled #1 in the screenshot (even though at the moment it says View cart) and I can change Add to cart in that position to an image (but not a matching generated button which I would like to do)

But I am totally unable to see where to modify the appearance of the text link that I have numbered #2.

I would like to make #2 a generated button to match the generated View Details button to its left. Or at least see where and how to add an image file to modify it.


Charlie Farrow

April 7, 2014 at 11:51 am

Why isn’t the screenshot showing up?


Charlie Farrow

April 7, 2014 at 11:51 am

i185.photobucket.com/albums/x162/CharlieFarrow/Stylebuttons_zps4e413bef.jpg


Lorenzo Orlando Caum

  • Support Staff

April 7, 2014 at 11:55 am

Hello,

What CSS are you currently using to target the view cart link? It has the following CSS class associated with it:

.ee_view_cart

For the add to cart link, it has this class:

.ee_add_item_to_cart


Lorenzo


Charlie Farrow

April 7, 2014 at 1:39 pm

I’m not using anything! That’s what I’m asking. Where is it and what needs to be added?


Charlie Farrow

April 7, 2014 at 1:40 pm

Where is the documentation about this?


Lorenzo Orlando Caum

  • Support Staff

April 7, 2014 at 4:13 pm

This doesn’t have its own page in our wiki as it just needs CSS to work.

The following will create a blue button for the view cart link and add to cart link:

.ee_view_cart {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
	background-color:#79bbff;
	-webkit-border-top-left-radius:6px;
	-moz-border-radius-topleft:6px;
	border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topright:6px;
	border-top-right-radius:6px;
	-webkit-border-bottom-right-radius:6px;
	-moz-border-radius-bottomright:6px;
	border-bottom-right-radius:6px;
	-webkit-border-bottom-left-radius:6px;
	-moz-border-radius-bottomleft:6px;
	border-bottom-left-radius:6px;
	text-indent:0;
	border:1px solid #84bbf3;
	display:inline-block;
	color:#ffffff;
	font-size:medium;
	font-weight:normal;
	font-style:normal;
	height:50px;
	line-height:50px;
	width:100px;
	text-decoration:none;
	text-align:center;
}

You could add it to your theme’s stylesheet or a plugin like My Custom CSS.


Lorenzo


Charlie Farrow

April 9, 2014 at 7:40 am

Thank you that is exactly what I needed to know.

The support post ‘How do I style Add to cart and View cart Links?’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Status: closed

Updated by  Charlie Farrow 5 years, 2 months ago ago

Topic Tags

Notifications

This topic is: resolved
Do NOT follow this link or you will be banned from the site!