Responsive Background Box

Unknown
edited February 2015 in Campaign Portal Building
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

  • Unknown
    For anyone that is interested, this is the revised CSS I am using for this. This does not resize dynamically on a desktop, but it will detect Smartphones and change up the way it handles the display. There is also a special case for adding an extra class of creature to the containing div that will size it a bit smaller (I did this for my GM section to get it to float better).

    *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/
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions