Custom CSS Beta Discussion

HumAnnoyd

OK. I did finally track the previous characters down but it doesn't seem to include the DSS versions of the character. So far it does look like I did loose my PC. But what is problematic is that many of my 80+ Characters were using the DSS sheet that I had modified to match my site through CSS that no longer seems to affect them. I am not sure what to do because I am afraid I will lose my characters if I try to do something about it. Sigh.

Langy

I don't think you should need to edit the individual DSS pages to make it fit with the rest of your site, Hum; it's probably all CSS-fixable.

One thing you'll want to add (and most people with DSS's will want to add) is:

.dynamic_sheet_container {
overflow: visible;
}

This'll make it so you don't have those stupid scrollbars.

What's the custom CSS for the DSS's that you were trying to apply? I'm browsing through some of it and can't see anything that you've altered specifically for the DSS's.

Liam: Are you browsing on a tablet? Try viewing it on a computer, which may help. It *looks* like the forum section of the dashboard has been made too wide to fit where it's supposed to go, but I'm not positive.

LiamGray

I have not yet used any code or changed anything. I have mostly just been adding characters and wiki pages. I actually have no idea how to change things except at the simplest level currently. I am still rather "noobish" in that regard. I am currently browsing on a PC with Windows Vista.

Here is my page if it helps.
https://rifts-megaversal-highway.obsidianportal.com/

HumAnnoyd

Langy, I wasn't trying to edit the individual DSS page I was switching that character to a non-DSS version I had from a long while back to see if it would look ok. It didn't so I decided to switch back. That is when I realized that I couldn't get the DSS version back. I oh so very much apprecaite the container fix. That was one of the things that was making me crazy. I am a gm and I run from my laptop so I was dreading having to scroll back and forth. That fix will save me lots of time. Anyway. Below is the CSS I had for the DSS sheets on my EC site.

/* CSS FOR THE 'DFRPG SIMPLE' CUSTOM CHARACTER SHEET */


OK. It looks like it is under control now. Had a little help from a friend.

HumAnnoyd

And here it is for the other sheet:

/* CSS FOR THE 'DFRPG SIMPLE WITH MAGIC' CUSTOM CHARACTER SHEET */

All better now. :D

Pils

Hi,

Maybe someone could help me: I just want to change the text of campaign title and right sidebar from white to black.

Thanks...

-Pils

Thorvaldr

This should get your title and right sidebar mostly black:

bc. #campaign-stream {color:black;}
.stat-label {color:black;}
#campaign-stream .name {color:black;}
.campaign-title {color:black !important;}

-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/

Pils

Thanks Thorvaldr, that's great!

-Pils
"Planescape Next":https://planescape-next.obsidianportal.com/: Glory? Majesty? You don't know the dark of it!
"Dark Sun -- La Décade des Héros":https://dark-sun-a-trova.obsidianportal.com/: Face the Fire of the Dark Sun... a World ravaged by Sorcery!

Pils

Another little request... How do we do now to change the font family and have a justified text (with CSS of course)?

EDIT: I found it in the Reforged campaigns post, thanks to Savannah!

rpowell138

Using a bunch of code I've found here, as well as a lot of Inspect Element, I've got my site mostly complete. This is (thankfully) a very new campaign, so it doesn't have a lot of data yet. I had done some things like shrink the sidebar and whatnot but it tended to break on the iPad so I've reduced my code quite a bit. I'll probably post what all I'm using up after I've sorted out a few final things.

Campaign: https://exalted-duty-and-honor.obsidianportal.com/

What I need help with is two things:

Sidebar Float: The fact that the sidebar isn't floating on the right side is bugging me. I'd like to have it line up with the right-side of the banner like the left side does. I fussed with trying to set the background color of the modules, instead of the sidebar itself, but that created a whole new series of visual issues so I'm hoping there is another way. Minor gripe.

Sidebar Modules: Is there any way to simple disable/remove a module from the sidebar? I'd like to remove/hide the sidebar-quick-stats completely. Or a way to re-order how they display in the sidebar would be nice.

Langy

Sidebar Float: Change your .campaign-public-layout #sidebar CSS to .campaign-public-layout #sidebar .module

Sidebar Modules: If you want to delete *any* element with a specific class, just stick display:none; into its class. So, for example, you can add .sidebar-quick-stats { display:none; } and that'll remove the sidebar-quick-stats module completely.

rpowell138

Thanks for the fast response.

I've also noted that when using preview, anything with h1 or h2 is white text on white background. Its likely something I've done, manageable for now.

Thorvaldr

I have written up a "guide on how to Inspect Elements":https://tyellador.obsidianportal.com/wikis/exploring-your-site for anyone that's new to CSS or site editing. It walks through a simple example of turning the text in the right sidebar black.

-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/

MarkGiguere

@Thorvaldr : Thanks for this!! EXACTLY what I was looking for!

Thorvaldr

@MarkGiguere: Glad I could help! If anything's not clear, please let me know. And of course, if you have any other questions, feel free to ask!

-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/

Basileus

Nice job Thorvaldr! Some good basic explanation of CSS concepts mixed in as well.

PurpleSteve

@Thorvaldr I've just been playing around with your (excellent) character page code, and it occured to me that your clear:none idea could work to fix a problem i've been tangling with for a while- how to minimise those bloody background options on the styles page without completely removing the whole section, and it worked! You're officially my hero, next time you're in Wales I'll buy you a pint :D

If you want to see what I'm nattering on about, slap this code in.

bc. /* Compressed Styles Page */
#background-selection {float: left; width: 65%;}
#background-selection li {border: 3px; padding: 0 3px 3px 6px; clear:none !important; position:relative !important; max-height: 60px; max-width: 90px; width: 16% !important}
#banner-upload .preview-area {margin:0px !important;}
#current-banner {height:60px !important; background-position: left top !important; }
#upload-background {float:left; width:35%;}

Thorvaldr

@Basileus: Appreciate it!

@PurpleSteve: That is awesome! I am definitely stealing that code. And yeah, that clear:none code took me hours to figure out. And you've been warned: My girlfriend is currently studying in England, so when I visit, I may take you up on that!

-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/

Taellosse

So I'm putting together a page for a new campaign I'm going to be starting soon, and I was trying to customize the look of it. I'm sort of fumbling with the whole CSS thing - I'm figuring it out by trial and error (LOTS of error!), but I am now sort of stuck on something. I see that, back in March (and thus some time before the Reforging went live), there was a discussion about almost exactly what I want to do, raised by Savannah: that being create a background for the content section that looks like a sheet of parchment with natural edges on a transparent background. However, I don't want it to be spanning the different columns (navbar on left and sidebar on right), just the central content. I found the code that Thorvaldr uses on his own site, where it defines classes that are then implemented on each page, and got that working just fine, but I'd really rather do it in pure CSS, so that I don't have to manually add the div codes to every new page (and so that when players create a page, it shows up correctly).

I tried to do it with multiple background-images, so the images that are meant to look like the top and bottom of the scroll are set not to repeat and the piece in the middle set to repeat vertically, but then the middle piece repeats to the edges of the container, behind the "top" and "bottom" of the parchment image. So is there any way to do this inside a single content container? I saw in the discussion back in March that there may have been a solution, but none of the linked examples look right anymore, so I can't really tell if they do what I want or not.

PurpleSteve

@Taellosse I was about to post saying this was impossible, but decided to have a crack at it and it's actually surprisingly easy. There are enough nested divs to set 3 separate backgrounds on a page. So far I've only made this work on a wiki page, but if you want it for any other pages let me know and I'll have a go.
You can see what it looks like "here":https://purplesteve-css-test.obsidianportal.com/wikis/main-page

bc. .wiki-page {background: url(http://cdn.obsidianportal.com/assets/257310/header.jpg) no-repeat top left !important;}
.wiki-page-container {background: url(http://cdn.obsidianportal.com/assets/257308/body.jpg) repeat-y top left !important; }
.wiki-page .post-section {background: url(http://cdn.obsidianportal.com/assets/257311/footer.jpg) no-repeat bottom left !important;}

Ideally you want the header, footer and body images to be the same height, otherwise you'll need to play around with the background positions on the body to get the tiling right, but otherwise this should work.

Thorvaldr

@PurpleSteve: I see what you did there! ...that's a clever way of doing it, spreading the parchment over 3 different classes... I was about to say that I love your idea, but it might not work for _my_ parchment specifically, because I need top and bottom offsets... but, it actually might work. (And trust me, having to cut/paste my code into every wiki page drives me insane.) I'm going to have to finagle with that when I get home, and if that works for me, I owe you a drink next time you're in the East Coast of the US. :D

-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/

PurpleSteve

I tangled with using the highlight container for the header texture and offestting the positions, but any position offset you do on the body can make it overlap with the header/ footer. I'm fairly sure you can make any tiling work at the top by just tweaking the background position so that the first body tile appears in the right place, but i'm not sure that'll work at the bottom so well.

Taellosse

It looks like that might work. I had to make some adjustments for my images, but I was able to fiddle with them so they line up properly. My only sticking point now is that the content of each page is running closer to the edges than I want. All of the tags I can figure alter the background as well as the content (padding, margin, position). The only solution I've managed to come up with is to insert a line like this:

@.wiki-page p, h1, h2, h3, h4, h5, h6 {margin:20px;}@
but that also puts excess space around each element inside the pages, not just around the edges. Is there a solution for that?

Langy

Make it margin-left:20px;margin-right:20px; instead. As-is, you've got margins on top and bottom set at 20px, too.

Taellosse

Okay, fair enough, but is there another way to create some extra space along the top and bottom? On the campaign landing page, the text runs too close to the top with only side margins - there's a nail in the top of the "paper", and on longer pages, I'm getting text overlapping part of the footer image that I don't want it to - the bottom is a partially-rolled scroll, and I want the text to stop before the roll starts (the bottom margin didn't seem to be helping with that anyway, for some reason).

Thorvaldr

@Taellosse: You can always try padding! It's like space inside of a margin... "this might give a better explanation though.":http://www.htmldog.com/guides/css/beginner/margins/

So padding will squeeze things inward from your margins. You can use "padding-top:_______;" and "padding-bottom:____;".

-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/

Taellosse

Where are you suggesting I place the padding, though? Putting it in with the margin tag above just does the same thing - adds space above and below each paragraph and header - and placing padding on the container elements either doesn't seem to do anything, or moves the background elements along with the text.

Thorvaldr

@Taellosse: If padding doesn't work, something along the lines of having

bc. position:relative; top:___px;

might work. Top will either move the element up or down (from the top), depending if you use positive or negative offsets. Could you post a link to what you're working? That could give us a better idea of what we're working with.

Also, if you're doing something cool with parchment, I want to know so I can steal it for my site! :D

-Thorvaldr
DM of "Tyellador":https://tyellador.obsidianportal.com/

dawnhawk

@Taellosse - If you ONLY want to change the positioning of the text inside the landing page content section the padding goes in here:

.campaign-landing-show .campaign-landing-page-container .section{
padding-top: 10px;
padding-bottom: 10px;
}

Alternatively
.campaign-landing-show .campaign-landing-page-container .section{
padding: 10px 0px 10px 0px;
}

(padding reads like compass points - Top (north), right (east), bottom (south), left (west) )

You need to add the padding to the "section", not the text itself.

Taellosse

Thanks, Dawnhawk - that takes care of my problem on the landing page. I can't figure out how to replicate it for wiki pages, though. I've tried

@.wiki-page-show .wiki-page-container [email protected]

and several other variations, but none of them seem to do anything at all. I'm obviously not addressing it the right way.

Thorvaldr, I just turned the campaign public so you could see. It's here: https://dark-moon-rising.obsidianportal.com, though please excuse the mess - the CSS is a little disorganized right now, and I haven't got everything else squared away yet, either - the colors need work in several places, for example, to be more readable.