Unknown
Ok, so this one I grabbed from "ChainsawXIV":https://www.obsidianportal.com/profile/ChainsawXIV on their "Sanction of the Athar":https://sanction.obsidianportal.com/ Campaign page. I have tweaked it to use CSS now instead of all inline which reduces the amount of code you need to put on the page. I also no longer use the image for the gradient and again use CSS for that effect which means you can now easily tweak all the involved colors to fit your Campaign theme. Finally, like everything I am working on it is adaptive to mobile devices, though I am thinking I will tweak the way that works actually to some degree (either doing a min-width on it or giving it a special mobile only declaration--not decided yet, but you could always toss those in with some minor tweaking yourself). Anyways, here it is:
*CSS*
/* BACKGROUND BOX */
.dar-bg-container {
width:50%;
float:right;
background-color:transparent;
font-family:arial;
font-size:9pt;
margin:0px 0px 20px 20px;
}
.dar-bg-title {
color:#FFFFFF;
background-color:darkred;
font-weight:bold;
padding:1px 5px 1px 5px;
font-size:8pt;
}
.dar-bg-name {
background-color:#FFFFFF;
line-height:normal;
padding:0px 0px 0px 0px;
}
.dar-bg-name span {
padding-left:5px;
font-weight:bold;
}
.dar-bg-desc {
font-style:italic;
background: -moz-linear-gradient(left, rgba(255,0,0,0.1) 0%, rgba(255,0,0,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,0,0,0.1)), color-stop(100%,rgba(255,0,0,1)));
background: -webkit-linear-gradient(left, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
background: -o-linear-gradient(left, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
background: -ms-linear-gradient(left, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
background: linear-gradient(to right, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
padding:3px 5px 3px 5px;
}
.dar-bg-bonus {
background-color:#FFFFFF;
padding:2px 5px 2px 5px;
}
/* END BACKGROUND BOX */
*HTML - Full*
@
BACKGROUND
Background Name Description of the background goes here. Benefits: List Here
@
*HTML - Minimal*
@
BACKGROUND
Background Name Description of the background goes here.
@
Enjoy, tweak as needed, comments and suggestions welcome as always.
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
Comments
*More Responsive CSS*
/* BACKGROUND BOX */
.dar-bg-container {
width:50%;
float:right;
background-color:transparent;
font-family:arial;
font-size:9pt;
margin:0px 0px 20px 20px;
}
.dar-bg-container.creature {
width:47%;
}
/* TARGET SMARTPHONES (PORTRAIT AND LANDSCAPE) */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.dar-bg-container {
width:100%;
float:none;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
}
.dar-bg-title {
color:#FFFFFF;
background-color:darkred;
font-weight:bold;
padding:1px 5px 1px 5px;
font-size:8pt;
}
.dar-bg-name {
background-color:#FFFFFF;
line-height:normal;
padding:0px 0px 0px 0px;
}
.dar-bg-name span {
padding-left:5px;
font-weight:bold;
}
.dar-bg-desc {
font-style:italic;
background: -moz-linear-gradient(left, rgba(255,0,0,0.1) 0%, rgba(255,0,0,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,0,0,0.1)), color-stop(100%,rgba(255,0,0,1)));
background: -webkit-linear-gradient(left, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
background: -o-linear-gradient(left, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
background: -ms-linear-gradient(left, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
background: linear-gradient(to right, rgba(255,0,0,0.1) 0%,rgba(255,0,0,1) 100%);
padding:3px 5px 3px 5px;
}
.dar-bg-bonus {
background-color:#FFFFFF;
padding:2px 5px 2px 5px;
}
/* END BACKGROUND BOX */
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/