|
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
|
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
|
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.
|
