Advanced Customization

The deck and its elements will inherit the style of your theme, but if you need to further customize the appearance of the cards, and you have some basic knowledge about CSS, you can have a look at the following table to find the needed CSS selectors.

ELEMENT	CSS SELECTOR
Button (to take and mix)	.oracle-cards-wrapper .button
Button to take a card (if any)	.take-a-card
Button to mix the cards	.refresh-cards
Deck wrapper	.oracle-cards-wrapper
Single card	.eos-card
Back of the card	.card-back-img
Front of the card	.card-front-img
Card description	#eos-card-content

Below you have some examples of advanced customization.

Rounded buttons:

.oracle-cards-wrapper .button{
    -o-border-radius:10px;
    -ms-border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

Custom button background and text color:

.oracle-cards-wrapper .button{
    background-color: #728b9b;
    color: #fff
}

A custom button background and text color on hover:

.oracle-cards-wrapper .button:hover{
    background-color: #c19a9b;
    color: #000
}