Custom CSS Beta Discussion

1121315171825

Comments

  • dawnhawk
    dawnhawk
    Posts: 113
    No worries - if this system made sense all of time these forums would be far less active. ;P

    Try putting it in here:
    body.campaign-public-layout .post-section { }
  • ChainsawXIV
    ChainsawXIV
    Posts: 529 edited November 2013
    If "this":https://chainsawxiv-test-campaign.obsidianportal.com/wikis/main-page is the basic kind of look you're going for, then there's an even easier way. You can use CSS to put more than one background image in the same element, so you can put them right into the space you want to have that look. Like so:

    bc. /* Puts in a three part background with some padding and corner rounding */
    .campaign-public-layout .main-content {
    background:
    url(http://omnichron.net/external/op/src/fc_parchment_top.png) top center no-repeat,
    url(http://omnichron.net/external/op/src/fc_parchment_bottom.png) bottom center no-repeat,
    url(http://omnichron.net/external/op/src/fc_parchment_main.png) top center repeat-y;
    border-radius: 19px 11px 5px 12px;
    padding: 20px;
    }

    bc. /* Turns off the default white background that would cover it up */
    body.campaign-public-layout .post-section.post-main {
    background: none;
    }

    bc. /* Removes the campaign color bar at the top of a wiki page */
    .campaign-public-layout .main-content .highlight-container {
    display:none;
    }

    With the particular images in this example, a width of 1305 is ideal, but this will vary depending on the images you use.

    The only real limitation of this approach is that the tiling center section will tile behind the top and bottom, so if you need edge and corner cut-outs using an alpha channel then this isn't a great approach. But you can still do alpha along the vertical edges and a little corner rounding for a snazzy look with no fuss and no muss.
    Post edited by ChainsawXIV on
  • dawnhawk
    dawnhawk
    Posts: 113
    Oh - one thing I noticed now that I can see what you are doing. In order to get the text to move away from colliding with the right hand edge I had to set the padding-right >= 40px on your current layout.
  • tommy19
    tommy19
    Posts: 62
    So I'm using a modified version of Thorvaldr's code to change the size of the main content container, it also contains a code to essentially create a 'pop-out' side bar menu, which is really cool.

    The problem I'm having is that this code affects the sidebar on an individual character's page, and that happens to be where the character's portrait is. Is there any way that I can have the code affect everything except the individual character pages?

    If it helps, here's the code:

    /* MAIN PAGE LAYOUT*/
    .main-content-container { width:940px !important; font-size:14px;}
    .character-avatar { overflow:hidden;}
    .sidebar-adventure-log-neighbors { overflow:hidden;}
    img { max-width:100%;}
    #sidebar { width:20px; z-index:2; position:absolute; left:930px;background-color:white;border:1px solid Black;border-radius:2px;}
    #sidebar:hover { width:250px; z-index:2; position:absolute; left:930px;background-color:white;border:1px solid Black;border-radius:2px;}
    .module { overflow:hidden;}
    .sidebar-last-updated { overflow:hidden;}
    .highlight-container {height: 0px !important;}
  • Langy
    Langy
    Posts: 364
    Try adding this to that code:

    @
    .character-show .collapsable-nav-row.collapsed .main-content-container {
    width: 58.33333%;
    }
    .character-show .collapsable-nav-row.collapsed .main-content-container {
    width: 75%;
    }
    .character-show #sidebar, .character-show #sidebar:hover {
    width: 25%;
    z-index: 0;
    position: relative;
    left: 0px;
    height: auto;
    }
    @
  • Taellosse
    Taellosse
    Posts: 15
    Thanks so much, Dawnhawk! That did the trick. I've fiddled with the padding some more and got it to where I believe it needs to be. More importantly, perhaps, I think I've got enough of a handle on it (at least for now) that I can adjust further as needed. In gratitude, I award you 10,000 internets!

    Chainsaw, I tried a solution like that earlier, but unfortunately with the specific images I'm using, I couldn't get the body background not to show behind the header and footer images. Your code would work great if the image I were using was more regularly shaped, but it's got little tears in spots along the top, and a notched corner, and a loose scroll of paper along the bottom. So they need to be loaded into separate containers, apparently. Still, Dawnhawk steered me right! Thanks for trying, regardless.

    Now to see if I can't work out some of these color issues...
  • tommy19
    tommy19
    Posts: 62
    That makes the sidebar stay open, but unfortunately it moves it down to the bottom of the screen instead of up at the top where it should be. I set the sidebar width to 250px to match up with what I had in the code and tried adjusting both the 58.33333% and 75% attributes to get it back where it goes to no avail.
  • Langy
    Langy
    Posts: 364
    Huh. Can you link your campaign? I think you may have something else going on there that's screwing that up, since I tested that on my campaign and it worked fine.
  • tommy19
    tommy19
    Posts: 62
    https://lore-of-arda-campaign-setting.obsidianportal.com/characters

    I reset it to your original code.
  • Langy
    Langy
    Posts: 364
    Ah, I see the problem. Stick an !important in the .main-content-container classes for the width attribute, like so:

    @
    .character-show .collapsable-nav-row.collapsed .main-content-container {
    width: 58.33333% !important;
    }
    .character-show .collapsable-nav-row.collapsed .main-content-container {
    width: 75% !important;
    }
    @

    This is needed to cancel out the !important in the base .main-content-container class.
  • SkidAce
    SkidAce
    Posts: 830
    I don't remember having to use !important before, is that a new code reforge thing?
  • Langy
    Langy
    Posts: 364
    No. It's just a requirement because of some of the other code in his custom CSS file.
  • tommy19
    tommy19
    Posts: 62
    Of course, the almighty !important tag. >.< lol
  • wolfhound
    wolfhound
    Posts: 354 edited November 2013
    "It's just to tell the page that no you really mean it":http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
    Post edited by wolfhound on
  • tommy19
    tommy19
    Posts: 62
    Okay, one last thing... for tonight... maybe...

    Anyway, on my individual character pages the list of tags are down in the middle of the character page. Essentially I just want to move them up to where they are even with the 'Description" header. I used inspect element and tried to move it with this code:

    .tags-list {width:250px; z-index:2; position:absolute; left:930px; top:200px !important;}

    but I got nothing... my CSS newb-ery is really shining tonight. lol
  • Langy
    Langy
    Posts: 364 edited November 2013
    Try just sticking this in, replacing your current .tags-list stuff:

    @.character-show .tags-list.inline-list.small-list {
    left: 16px;
    }@
    Post edited by Langy on
  • tommy19
    tommy19
    Posts: 62
    Wasn't exactly what I was looking for, but I was able to use it to get what I wanted. Thanks Langy!
  • Bookscorpion
    Bookscorpion
    Posts: 58
    I'm trying to write a class that will change the text colour of blockqutes - right now they are a very light grey and not that readable.
    Is that even possible? So far my code does nothing: .bq {color:black;} or .blockquote {color:black;}

    Shadowrun: The Rat's Nest - COTM  November 2014

  • madartiste
    madartiste
    Posts: 328
    Bookscorpion, maybe try adding !important?

    @.blockquote {color:black !important;}@

    Disclaimer, I haven't had the chance to try that yet, so no idea if that's truly the issue or not. I've encountered a number of changes that wouldn't stick until I added the !important, though.
  • Thorvaldr
    Thorvaldr
    Posts: 141
    @Bookscorpion: Here's what worked for me:

    bc. #content code {color:black;}

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • madartiste
    madartiste
    Posts: 328
    Ah, Thorvaldr to the rescue!
  • Thorvaldr
    Thorvaldr
    Posts: 141
    Awwww, shucks. Weren't nothin'. :D

    Although seriously, to whomever figured out that "!important" tag... that's the only way I've gotten _anything_ done. I don't know how I ever would have figured that out on my own.
  • Bookscorpion
    Bookscorpion
    Posts: 58
    Thank you both, but neither versions work for me. I also tried .bq {color:black !important;} And I really don't get why it won't work (with two campaigns)

    Shadowrun: The Rat's Nest - COTM  November 2014

  • Thorvaldr
    Thorvaldr
    Posts: 141
    Huh... that is strange then, I did test it on mine. ...could you link me to what you're trying to fix? Maybe I'm trying to fix the wrong thing. :P
  • Langy
    Langy
    Posts: 364
    @.blockquote {color:black !important;}@

    If you're adding this as CSS, there shouldn't be a . there. It should just be

    @blockquote {color:black !important;}@

    The !important probably may not be required, either.
  • Sorceress
    Sorceress
    Posts: 25
    Hey guys,

    Trying to fix a problem I'm having with... the search page. Basically, when I go to the character tab and click on a tag for one of my many characters it
    goes to a search page which check boxes up top: All/Adventure Logs/Characters/Items/Wiki .... and when those boxes are check it shows anything with
    the same tag on it.

    So my problem is when it shows Wiki previews they are absolutely HUGE, way too big for the search.

    I've been trying to style it so I can make them smaller and more manageable but so far I can't seem to track down the correct elements
    without messing up other stuff on my wiki.

    "The is an example":https://the-hero-academy.obsidianportal.com/search?tag=Faculty

    I hope the link works correctly - otherwise just goto the character tab if you could find an NPC with the tag of Faculty (since its a pretty large group) click
    on it and it should open up the search.

    Any help would be greatly appreciated,
    Sorceress
    "The Hero Academy":https://the-hero-academy.obsidianportal.com/
  • Bookscorpion
    Bookscorpion
    Posts: 58 edited November 2013
    Still nothing, this is driving me nuts. "Here's an example":https://ratsnest.obsidianportal.com/characters/diego-de-los-dolores where we used blockquotes / bq). for the character quotes.


    Sorceress, I think the pictures may be the problem? I tried with my own campaign and the list is much more manageable. I host photos for the WIki offsite on Flickr, so they're not shown in the search preview, only as code.
    Post edited by Bookscorpion on

    Shadowrun: The Rat's Nest - COTM  November 2014

  • Sorceress
    Sorceress
    Posts: 25 edited November 2013
    Have you tried..

    bq. .blockquote p {color:black !important;} or whatever it is you're looking to change colors to?

    I dont think you need the !important - but that's me but better safe than sorry I suppose.
    Post edited by Sorceress on
  • Blackroom
    Blackroom
    Posts: 5
    Hello, I have been doctoring my campaign and I have been trying to update the color of the quick description in the character profiles to some more legible with my backgrounds and I have had no luck so far. Any suggestions from the CSS Black-Belts?

    Here is the campaign page in question.

    "Realm Campaign":https://blackroom-games-realm.obsidianportal.com/characters
  • Bookscorpion
    Bookscorpion
    Posts: 58
    Yes! That did it! without the . in front, like Langy said. Thank you so much, I was ready to through my laptop out of the window by now...

    Shadowrun: The Rat's Nest - COTM  November 2014

Sign In or Register to comment.

May 2022
Revenge on the Kraken's Bane

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