Is a theme modification necessary for blueprint themes in order to properly provide support for apple pay or is it provided through the %%GLOBAL_AdditionalCheckoutButtons%% variable?
To get the apple pay button with white bg/black text, you need to add the following css:
.apple-pay-checkout-button {
background-image: -webkit-named-image(apple-pay-logo-black);
background-color: white;
}
For black text/white bg:
.apple-pay-checkout-button {
background-image: -webkit-named-image(apple-pay-logo-black);
background-color: white;
border: .5px solid black
}
The necessary html and integrations bits are already there with the variable you mentioned
Related
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
Here is the site-to-be (work in progress still)
http://www.fairhavenstorage.com/DRAFT
On a desktop screen it's fine, but on a mobile device, the site title and description do not budge. I added some custom CSS to allow the logo to display beside the site title - here is what I entered:
#logo .site-title, #logo .site-description {
display: block !important;
}
.site-title {margin-top: 26px;}
#logo img {
float: left;
margin-right: 20px;
}
#logo {
float: left;
width: 800px;
}
And for the image on the right side of header, I entered this:
.header-widget {
float: right;
width: 200px;
margin-top: 10px;
}
It's not looking good on my iPhone and I'm unsure what to do. If anyone can suggest a fix, that would be greatly appreciated!
try and deactvate or override existing css . There are #media queries in your existing css
I'm creating an email template in MailChimp, and I have some responsive code that I want to work for the devices that support it (primarily iOS Mail and BlackBerry Mail apps).
While the template loads the responsive media queries correctly in the iOS Mail app, they don't appear to trigger within the BlackBerry Mail app. I am testing on both a BlackBerry Z10 and Q10 with the same up-to-date OS.
My media query looks like this:
#media only screen and (max-device-width: 600px) {
#templateContainer {
width: 100% !important;
}
.globalLogo {
width: 90% !important;
}
.logoBox {
display: block !important;
width: 100% !important;
}
.imageBox {
width: 100% !important;
display: block !important;
height: 40px !important;
border-left: none !important;
}
.emailTitle {
text-align: center !important;
}
#title {
border-top: 3px solid #FFF !important;
width: 100% !important;
display: table !important;
}
.topImageRow {
display: none !important;
}
.tableofcontents {
margin:0 0 30px 0 !important;
list-style: outside !important;
width: 90% !important;
}
}
I've also added the following viewport meta tag to the header:
<meta name="viewport" content="width=device-width; initial-scale=1, maximum-scale=1">
I've experimented with max-width instead of max-device-width, but it doesn't seem to make a difference. I've also tried 800px instead of 600px, and removing the "only screen and" from the media query.
Any help would be greatly appreciated.
Final Answer:
Send it to a different email account domain. It can sometimes be the security filters at your workplace, so if you're sending it to you#yourwork.com, try hooking up you#yourotheremail.com to your blackberry and checking it there.
Original:
Not really a definitive answer, but hopefully this will get you closer...
Create a really easy media query to trigger (something like max-width:99999px;) and change the color or something really noticeable. Does it work at all?
If it is triggering, step your way down until it stops. If you can't get it to trigger at 99999px, it doesn't support media queries, even though the support charts suggest it does.
Sometimes your server can strip the media queries, so try testing it on different domain also, particularly if you have any sort of corporate server or software.
Another thing you could do is try and view the output code to see if your CSS is still intact. Not sure how to view this on a Blackberry though.
Is that possible to do with CSS.
I tried this:
#gallery_ul {
display: inline-block;
list-style: none outside none;
margin: auto auto auto auto;
width: 986px;
}
#gallery_ul li {
float:left;
margin:10px;
padding:10px;
text-align:center;
border:1px solid grey;
width:274px;
}
#gallery_ul img {
padding-bottom:5px;
}
If yes then how? Thank you.
You can either do it with CSS-columns or with javascript. I would suggest javascript, unless you don't need to worry too much about browser support/quirks.
See the masonry plugin for the most popular way to do so: http://masonry.desandro.com/
You can. But i think you have to be more specific.
One approximation is to create each block and set "float: left" property, then the squares will organize automatically or you can create three vertical columns and then put the squares inside.
I have drawn a hotspot link ontop of an image, but unfortunaltely I can see the actual outlines in the web browser SAFARI. Is there a way of getting rid of this? I use Dreamweaver CS3 on a Mac.
On this web page, I've drawn the hotspot links arond the image of the rabbits and the yellow circle. You can see that when you click on these links, you see the area I have drawn the hotspot.
Greatful for any help. Thank you,
Vanessa
I think you're looking for the outline:none; css style.
You'll want to apply that to your link styles for that image.
EDIT: Add this in your style tags at the top of the page:
map area{
outline:none;
}
So it should look like this:
<style type="text/css">
<!--
#import url(../css_snap01.css);
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
map area{
outline:none;
}
-->
</style>