Here's some custom CSS for Epic Words

← Previous 1
Hey All -

Just getting back into Epic Words since trying to do some stuff with Obsidian Portal and not liking the functionality - but MAN they have a good looking site.

I've drafted up some css that's currently tweaked for Chrome on PC / Mac, so if you're a chrome user, go ahead and install Stylish : https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

Here's the code you can use that cleans up the Epic Words and gives it a little polish. Still WIP, but wanted to share all the same!

COPY TEXT UNDER THIS LINE
/*~~~~ EpicWords Start ~~~~*/

body {
background-image:none !important;
background-color:#473F36;
}

.navigation {
}

#footer a {
color:#fff;
border-left:1px solid #fff;
}

#footer span.first a {
border-left:none;
}

#nav_bar {
background-image:none;
background:color: #d9d8d6;
}

.navigation .selected,.navigation li.selected, .navigation li.selected span {
background-image:none !important;
background-color:#000000 !important;
color:#ffffff !important;
}

.navigation {
background-image:none !important;
background-color:#ffffff;
}

ul.navigation li {
background-image:none !important;
border-right:1px solid #ECECEC;
}

.navigation ul li, li.no_access {
margin-top:0px;
height:45px;
line-height: 43px;
}

.navigation a, li.no_access {
line-height:43px;
}

.navigation a:hover {
color: #AC8214;
}

#right_col {
background-image: none;
background-color: #FFF;
border-radius:10px;
width: 175px;
}

.rightcoltop, .rightcolbottom {
background-image:none;
}

#signout_link {
text-align:center;
float: none !important;
}

div.camp_label, div.camp_label a {
font-weight: bold;
font-size: 16px;
font-family: sans-serif;
text-decoration:none;
}

div.camp_label_content {
margin-bottom: 0px;
}

div.list_forums, div.camp_label_content {
clear: left;
background-color: #FFF;
padding: 10px;
border-radius: 6px;
margin-bottom:16px;
}

#campaign_fan {
margin-top: 12px;
font-size: 10px;
text-align: center;
display: block;
}

a {
text-decoration:none;
font-weight:bold;
}

#main_content .section {
background-image: none !important;
background-color: #EEEBE6;
border-radius: 0 0 10px 10px;
}


#main_content .topborder {
background-image:none !important;
height:0;
}

div.navigation {
margin:0;
}

ul.navigation {
width:815px;
}

#ub_signin .ub_user_name, .ub_subtitle {
font-family: inherit;
}

.ub_subtitle {
margin-bottom:8px;
border-top:1px solid #A7A7A7;
padding-top:8px;
}

.ub_user_name {
margin-bottom:6px;
}


.topborder_right, .topborder_left, .border_right, .border_left, .bottomborder_right, .bottomborder_left, #main_content .bottomborder, #header .bottomborder, #header .topborder, #branding, #foottopborder, #footer {
background-image:none !important;
}

#campaign_about {
padding:10px;
}

#campaign_desc {
background-color: #FFF;
border-radius: 10px;
}

#campaign_about br {
display: block;
margin: 0;
line-height:0;
}

#campaign_detailed_link {
line-height:3px;
}

#campaign_detailed_about {
margin-top:6px;
}

#campaign_entry_block h1 {
font-family: inherit;
line-height: 28px;
font-size: 20px;
border-bottom: 1px solid #A7A0A0;
padding-bottom: 6px;
}

div.entry, div.comment_text {
line-height: 16px;
}

div.entry_text {
padding: 15px;
border-radius: 10px;
}

.gm_colors {
background:none;
}

div.entry_body, div.comment_body {
font-size: 15px;
line-height: 1.5em;
font-family: georgia;
}

div.entry_subject {
clear: left;
font-size: 20px;
margin-bottom: .5em;
font-family: georgia;
border-bottom: 1px solid #C0C0C0;
padding-bottom: 10px;
}

#campaign_header input[type=submit] {
margin-top: 5px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
display: block;
}

#layout_wrapper {
width: 1000px;
margin: 0 auto;
text-align: left;
}

#branding_header_title {
padding-top: 18px;
font-size: 40px;
line-height: 1.5em;
margin: 0 auto;
display: block;
text-align: center;

}

#pm_user a {
display: block;
margin-top: 15px;
padding-bottom: 4px;
padding-top: 3px;
text-align: center;
background-color: #474646;
border-radius: 6px;
color: #FFF;
}

#pm_user span a {
margin-top:6px;
}

#ub_extras {
display:none;
}

.navigation li.selected span a {
color:#ffffff;
}

#branding_custom.campaign_header, #branding {
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

}



#branding_header_title, #branding_header_subtitle {
float:none;
width:100%;
}

#branding_header_link {
display:none;
}

.character_list_item {
border-bottom: 1px solid #D3CFCF;
}

#camp_forums_list .character_list_item:last-child {
border-bottom:none;
margin-bottom:0;
}

#quest_block {
background-color: #ffffff;
margin-bottom: 15px;
padding-left: 25px;
padding-top: 10px;
padding-bottom: 15px;
border-left: 25px solid #9E5F19;
}

.quest_text {
line-height:18px;
}

#campaign_about img {
margin: 0 auto;
display: block;
margin-bottom: 8px;
}

/*~~~~ EpicWords End ~~~~*/
Permalink
Epic × 2!
Awesome thanks. I've installed this and it looks really great!
Permalink
Still lots of tweaks, I need to go though each page again and get width's and whatnot down pat - we're definitely still in alpha with this css!
Permalink
screenshots?
Permalink
Lhynard
screenshots?


Here's my view of a campaign you're in with the custom CSS Lhynard:

https://docs.google.com/file/d/0B6uE5jgtYSYDeXR3dmluRElNRDA/edit?usp=drivesdk

You'll need to click to view 100%, as it's a big ass screenshot!
Permalink
Ha! Yeah, that's because I post book-sized recap entries. :)

Looks great! Thanks!
Permalink
Epic!
Yeah, they read like books too (very well written!), especially with the font change, nice and easy on the eyes - I really enjoyed your stuff when I was screencapping! I've got you on follow, can't wait to see what happens next in your game!
Permalink
Thanks!

I can't wait to see what happens next either -- the players in my campaign have had me ad-libbing for the last several sessions. I have no idea when they are going to get back to the original plot I laid out! But that's the fun of GMing....

(Doesn't look like your GM has the bulk of the entries made public.)
Permalink
Hey Lhynard,
Try the campaigns now. I think I got the setting tweaked. We only just started porting this most recent campaign to epic words. It looks like "private" may be some of the defaults.
Permalink
For the Dragonspear campaign I just see 3 posts from Sessions 16 to 18.

Yes, it looks like you did open up the Loot, Wikis, and XP tabs so I can view those now. (thanks) But it was the story I was most interested in reading, because it's clear you put effort into the campaign. You may have to manually edit the privacy level for each individual post.

Be careful though: if you posted any entries as an NPC and not as a DM, that setting may get erased if you edit the entry. This bug is the one that annoys me the most since the server upgrade. (You also have to click Update twice for it to edit.)


Side question: Why FR 3.5 but rule set Next? Do you not like what they did to FR with 4.0? (That's why I stuck with 3.5 for my campaign.)


Another side question: Did you set up an elaborate photo scavenger hunt for your players in real life as part of the campaign? Awesome.
Permalink
Epic!
← Previous 1