Custom CSS Beta Discussion

1111214161725

Comments

  • HumAnnoyd
    HumAnnoyd
    Posts: 291
    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.

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Cyberpunk Red: Night City

  • Langy
    Langy
    Posts: 364
    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
    LiamGray
    Posts: 7 edited October 2013
    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/
    Post edited by LiamGray on
  • HumAnnoyd
    HumAnnoyd
    Posts: 291 edited October 2013
    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.
    Post edited by HumAnnoyd on

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Cyberpunk Red: Night City

  • HumAnnoyd
    HumAnnoyd
    Posts: 291 edited October 2013
    And here it is for the other sheet:

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

    All better now. :D
    Post edited by HumAnnoyd on

    November 2012 CotM:  Dresden Files RPG: The Emerald City

    June 2016 CotM:  Star Wars: Rise of the Infinite Empire

    June 2020 CotM & 2020 CotY:  Mass Effect Accelerated

    Current Campaigns:  Dresden Files Accelerated:  Emerald City-Requiem  & Cyberpunk Red: Night City

  • Pils
    Pils
    Posts: 149
    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

    -Pils

    Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)

    Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!

    (And I'm so soooorry for my poor english...)

  • Thorvaldr
    Thorvaldr
    Posts: 141
    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
    Pils
    Posts: 149
    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

    Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)

    Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!

    (And I'm so soooorry for my poor english...)

  • Pils
    Pils
    Posts: 149 edited November 2013
    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!
    Post edited by Pils on

    -Pils

    Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)

    Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!

    (And I'm so soooorry for my poor english...)

  • rpowell138
    rpowell138
    Posts: 11
    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
    Langy
    Posts: 364
    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
    rpowell138
    Posts: 11
    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
    Thorvaldr
    Posts: 141 edited November 2013
    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/
    Post edited by Thorvaldr on
  • MarkGiguere
    MarkGiguere
    Posts: 53
    @Thorvaldr : Thanks for this!! EXACTLY what I was looking for!
  • Thorvaldr
    Thorvaldr
    Posts: 141
    @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
    Basileus
    Posts: 589
    Nice job Thorvaldr! Some good basic explanation of CSS concepts mixed in as well.
  • PurpleSteve
    PurpleSteve
    Posts: 12 edited November 2013
    @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%;}
    Post edited by PurpleSteve on
  • Thorvaldr
    Thorvaldr
    Posts: 141 edited November 2013
    @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/
    Post edited by Thorvaldr on
  • Taellosse
    Taellosse
    Posts: 15
    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
    PurpleSteve
    Posts: 12 edited November 2013
    @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.
    Post edited by PurpleSteve on
  • Thorvaldr
    Thorvaldr
    Posts: 141 edited November 2013
    @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/
    Post edited by Thorvaldr on
  • PurpleSteve
    PurpleSteve
    Posts: 12
    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
    Taellosse
    Posts: 15
    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
    Langy
    Posts: 364
    Make it margin-left:20px;margin-right:20px; instead. As-is, you've got margins on top and bottom set at 20px, too.
  • Taellosse
    Taellosse
    Posts: 15
    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
    Thorvaldr
    Posts: 141
    @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
    Taellosse
    Posts: 15
    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
    Thorvaldr
    Posts: 141
    @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
    dawnhawk
    Posts: 113
    @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
    Taellosse
    Posts: 15
    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.
Sign In or Register to comment.

November 2022
Curse of the Crimson Throne

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