A Totally Unofficial CSS Help & Tips FAQ

135

Comments

  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    You can use _background-attachment:fixed_, which will simply cause the background image to remain stationary behind your content. Note though that the background image will then be positioned relative to the whole page, not the element you put it on, so you'll have to fiddle with its positioning using _background-position_, and check it at various window widths to make sure it stays in the right place. It may or may not be possible to make it do what you want, depending on what you're using it for. (It also tends to look pretty weird in my opinion, but of course your mileage may vary...)
  • Dropbeartots
    Dropbeartots
    Posts: 96
    I tried both Kallak and Chainsaw's approaches, and the background-attachment:fixed seems to work the best for what I was trying to do. I greatly appreciate both of your replies, thanks :)

  • weasel0
    weasel0
    Posts: 435
    Okay...so last time I really tried to dive into OP was over a year now i think...or roughly a year... Anyway, I'm using some pretty dark colors that tend to blend some areas together(namely the forums and dashboard) and have been using .large-12 to put borders around the sections. This works great....except the title area on the .public side is also .large-12 and I can't for the life of me figure out how to separate the two. The two areas also share the .columns and I havn't been able to figure out any other way to separate the two. I could just make and add a banner and that would hide the outline or just use it as is for separation but I'd rather nix the outline on the header areas.

    "Parade of Black":https://a-parade-of-black.obsidianportal.com/dashboard
  • Basileus
    Basileus
    Posts: 585 edited January 2016
    Without looking at any specifics, if you're just trying to apply CSS to that area and not to similar classes in the public areas, it sounds like you just need to these classes to your selectors:

    @.campaign-public-layout@

    versus

    @.campaign-dashboard-layout@

    So, for example, if you wanted to apply CSS to just items of the .large-12 class in your private pages (dashboard, forums, calendar), you use a selector along the lines of:

    @.campaign-dashboard-layout .large-12 {property: value;}@

    Just remember that whatever you use in your selectors that the order should go from general to specific.
    Post edited by Basileus on
  • weasel0
    weasel0
    Posts: 435
    Thank you Basileus. Like I said, roughly if not well over a year and I hadn't mastered the CSS yet back then. So, much learned has been forgotten. That was perfect.
  • GambleMoments
    GambleMoments
    Posts: 1
    I am having trouble figuring out what class to change background in adventure log when I zoom into it as well as wiki pages
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Are you Ascendant GambleMoments? If so, scroll down to my parchments code on my "CSS Page":https://a-god-rebuilt.obsidianportal.com/wikis/css
    killervp
    "A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
    Over 350 Fans, and Looking for More!

    Just trying to help out.

  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    I recently helped a user in a ticket out with his request to CSS the navigation block into a horizontal bar across the top of the wiki. KillerVP rightly suggested others might find it useful, so here's a "chunk of CSS":http://omnichron.net/external/op/templates/horizontal-nav.css for posterity. Let me know if you have questions.
  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Hey, Chainsaw, thank you so much for your help with that. I do have one more question actually. I was hoping to get the nav bar at the top to center over the wiki pages/character/adventure log ect. instead of centering over the whole page. It just looks a bit odd. I realize that I can play around with the numbers and get it to work on my desktop but is there a way to do that dynamically so it works across platforms? Or could I have the bar itself extend across the whole page with the text in the middle? That might work better visually.

    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

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Thanks Chainsaw! You are awesome!

    Just trying to help out.

  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Easy enough. "Here you go":http://omnichron.net/external/op/templates/horizontal-nav-narrow.css.
  • HumAnnoyd
    HumAnnoyd
    Posts: 298
    Thanks again! You are like the magic CSS fairy!

    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

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • NikMak
    NikMak
    Posts: 379
    the chainsaw fairy: like the tooth fairy, but less fun, and the you need biological enzymes to clean up afterwards...
  • weasel0
    weasel0
    Posts: 435
    I thought maybe it was for when you out grew the baby teeth chainsaw and were ready for more power.


    !http://www.solvencyiinews.com/wp-content/uploads/2012/07/morepower.png!
  • Basileus
    Basileus
    Posts: 585
    Rrrruuh?!

    ^best attempt at the Tim Allen grunt
  • Lxcharon
    Lxcharon
    Posts: 189
    So I have a CSS question, I guess I'll post it here. Twiggyleaf told me I should expand my text area background, and he is completely right, I should, (specifically on my race page, if nowhere else) but I can't seem to get it to expand properly. I can get the image I have to expand, but it ends up just cutting the image off on the sides, rather than expanding the area. (if that makes sense) I've tried a couple of ways, but have included a link to my code to see if anyone can find where I should be expanding it. Or should I just enter a new code for the races page that expands the background?

    Any help is appreciated!

    My "CSS":https://terrasia.obsidianportal.com/wikis/css
  • ketherian
    ketherian
    Posts: 203
    Hi Lxcharon.

    When I examine your site's main-content-container class it's showing a width of 58.33%. I suspect this is due to the margins and padding set elsewhere in your css for main-content class statements. If I go in and expand the main-content-container to 100%; it works; although 80% works better with your forced left-margin. I've not checked how badly doing this mangles your right-side columns.

    Chainsaw XVI posted a few tricks that included expanding the text area on a site and shifting other things about some, he'd be the best one to confirm my suspicions.

    Hope this helps.
    --
    Ketherian
    "Signs & Portends":swtwc.obsidianportal.com - A young family has gone missing in a snowstorm.
    "Dwarves of Koldukar":dwarves-1.obsidianportal.com - Trunau!!
    "In a certain realm":inacertainrealm.obsidianportal.com - Where Faerun meets Russian myth.
  • Lxcharon
    Lxcharon
    Posts: 189
    Jesus, the container! I was adjusting the background image without adjusting the container. Thank you for your help Ketherian!
  • twiggyleaf
    twiggyleaf
    Posts: 2,006 edited March 2016
    Thanks Ketherian!

    For anyone else thinking about this, you can go into Settings|Advanced and click in the "Content Max Width" bar, using arrows at the right of the bar to increase the width of the central text box.

    twigs
    Post edited by twiggyleaf on

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • weasel0
    weasel0
    Posts: 435
    So for anyone still using CSS to make dark edit boxes and light text, the new In-line editor has some extremely local rules that force the background to white but not the text to black under the SOURCE button. So without doing hours of digging to find the right parameters a liberal dose of !important in the Textarea and :focus CSS rules make them readable while using the SOURCE button. I won't touch any old pages like this, mind you, but I may try creating some new pages on an under construction campaign.
  • killervp2
    killervp2
    Posts: 12
    Yet another issue.
  • PhoenixMark
    PhoenixMark
    Posts: 90

    I see it has been a while since anyone has posted here. I am trying to get back into the swing of OP, but am running up against a few issues, not least of which is my abysmal memory. 

    First, I am trying to center a particular interactive map on the page, rather than it being left aligned.

    Second, while trying to make it work, I thought I might add some CSS to see if that would help. For some reason any CSS I add vanishes as soon as I refresh the CSS page. I have no idea how I messed all that up. If anyone can help me fix this, I would be grateful. 

    PhoenixMark

    Shimmering Kingdoms FATE

  • HumAnnoyd
    HumAnnoyd
    Posts: 298 edited October 2018

    OK. So I have my menu up above in my new Cyberpunk 2077 campaign but I am wondering how to get the right sidebar to go below everything and be more of a footnote kind of thing.  Any help would be much appreciated.

    I am hoping that once I move it to the bottom I can center the entire area on the logo. Right now it is to the left leaving space for the sidebar I am guessing.

    Oh. And I want an exception to be the character's page because I do want their photograph to show up on the right on those pages.

    Also I would like to keep the Adventure Log Sidebar like it was originally.
    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

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • HumAnnoyd
    HumAnnoyd
    Posts: 298

    Here is a mockup showing what I am trying to do:

    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

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • cgregory
    cgregory
    Posts: 780

    Just change your sidebar width. You will likely want to move the left of the side bar back to the left.

    #sidebar {

        width: 70%;

        left: -25%;

    }

     

    to make your character sheets ignore this just add

    body.character-show #sidebar {

        width: 25%;

        left: 0;

    }

    Obviously if you change the width of your .columns.main-content-container.dynamic-sheet-width class to something larger (since you no longer have a sidebar) then you will want to change it back for your character sheets using body.character-show .columns.main-content-container.dynamic-sheet-width

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • HumAnnoyd
    HumAnnoyd
    Posts: 298

    Thank you so much cgregory!  That is what I was looking for.  Almost.  The only problem is that now I have the main body too far to the left and the sidebar below too far to the right.  Is there any way to just center them both to the menu and keep them the same width?

    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

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • HumAnnoyd
    HumAnnoyd
    Posts: 298

    Crap. Fix one thing and break another.  How do I keep the Adventure Log sections the same as they were before? I tried a variation of your fix above but it didn't work.

    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

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • cgregory
    cgregory
    Posts: 780

    Try for the side bar using

    width: 90%;

    right: 5%;

    And for the main content

    .columns.main-content-container.dynamic-sheet-width {

        width: 90%;

        left: 5%;

    }

    That should center it. 

     

    As for the adventure logs rather than body.character-show

    body.adventure-log-index  and body.adventure-log-show

    Here is a list of all the body.  locations

    https://unlockingtheportal.obsidianportal.com/wikis/body

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • HumAnnoyd
    HumAnnoyd
    Posts: 298

    Thanks cgregory.  That helped a lot.  However, after some thought I think I will just go back to the regular layout.  I might revisit it later though so that advice will come in handy.

    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

    FEBRUARY 2022 CotM & 2022 CotY: Dresden Files Accelerated:  Emerald City-Requiem 

    Current Campaigns:  Traveller Osmium Buccaneers: Pirates of Drinax, Cyberpunk 2077 Accelerated

  • Vishera
    Vishera
    Posts: 40

    I need help trying to figure out how to get my campaign looking good when viewed on a mobile device, currently it looks all messed up. When viewed on a PC, it looks fine (as far as I can tell)

     

    Campaign: https://terrene.obsidianportal.com/

    also, how do I change "GM" to "DM"?

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