Hey guys.
Maybe i should start of by mentioning i’m only recently started working with css. 🙂
Im currently styling the modals how they are displayed on the site. And i got the first one down the other day. Now i have to make another modal, and now the modal takes the size and styles as the first one. Which i don’t want.
So my question is, can i style all modals separately? I know they have id’s “modal-1” “modal-2″… but i had to style the .modal class, so of cause it effects all modals. But can i put something in front of the .modal? like the modal id? I tried but i can’t figure it out?
This is how my CSS is now:
/*----------- MODALS ----------*/
/*TEKST*/
#modal-1 {
font-family: Open Sans;
line-height: 15px;
font-weight: 500;
font-style: normal;
font-size: 12px;
}
/* OVERLAY */
.modal-backdrop.in {
opacity: .4 !important;
}
/* BG */
.modal-content {
background-color: rgba(247, 247, 247, 0); ;
background-image: url(http://premium-mockups.com/wp-content/uploads/2014/09/BG.png);
background-repeat: no-repeat;
opacity: 0.8;
filter: alpha(opacity=80);
box-shadow: 0 12px 7px rgba(1,1,2,.2);
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#modal-1 .modal-body {
padding-top: 15px;
padding-bottom: 15px;
width: 300px;
padding-left: 10px;
padding-top: 20px;
padding-bottom: 10px;
padding-right: 10px;
}
.modal-header {
display: none;
background: rgba(247, 247, 247, 0);
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
border-bottom-width: 0px;
}
h3#modal-label {
display: none;
}
#modal-1 {
left: 0px;
right: 710px;
top: 96px;
}
#modal-1 .modal-dialog {
width: 298px;
height: 60px;
}
Thank you guys.
Attachments:
You must be
logged in to view attached files.
.