Classic Card: black/transparent background & title text outlines

[JacobNFerguson]

Hello, I have been modifying the classic cards and have so far used this css for each one:

}.card-1 .x-face-outer.front {
background-color: transparent !important;
background: url(“http://afreemankind.com/wp-content/uploads/2017/11/AR-edit.jpg”) no-repeat top center;
background-size: 100% auto;
}
.card-1 .x-face-outer.back {
background-color: transparent !important;
background: url("") no-repeat top center;
background-size: 100% auto;

Now that I have background photos on the front of the cards, how can I modify the backs of the cards to be 50% black and 50% transparent. Right now they are 100% transparent.

Also, is there a way in the “Front Title & Content” section of the element to put a black outline around my white title texts?.. Some parts of the background photos are white as well and the text bleeds into it and can’t be seen.

Thanks!

[nabeel]

Hi there,

Thanks for writing around! You can adjust the transparency of the card back by setting the Back Background Color to 50% transparent (see screenshot)

To add a border around card front titles, you can make use of the following code:

.x-card-outer .x-face-title {
    border: 1px solid #000;
}

Hope this helps!

[JacobNFerguson]

Yes it does, thank you. I had to remove the “transparent !important” code I had preventing the element color option from working properly.

As for the border, sorry… I meant that I want the actual text to be outlined in black - not for a rectangular border to surround it. The letters are white but they need a black outline due to some of the background pictures having white in areas (the text is hard to read). Refer to the url/user/pass if you need to… the password is still good.

Thank you very much.

[rad]

Hi there,

Please try this one,

.x-card-outer .x-face-title {
  
   -webkit-text-stroke: 1px black;

   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}

Hope this helps.

[JacobNFerguson]

You the man, Rad. That’s awesome… even better than what I had in mind. Thank you!

[Joao]

I totally agree, Rad is the man! glad to hear we managed to help!