Quick 'n Dirty Post-Reforge CSS Fix

2

Comments

  • Kallak
    Kallak
    Posts: 1,090
    I saw moments ago that they implemented additional nav links, and they contain the class "section". From looking at your CSS you have:

    @.campaign-public-layout .section {
    width: 730px;
    }@

    I'm assuming this was put in for something else, but now with the "section" class also applied to tabs, it's making them that wide as well. You'll need to narrow in on selectors for whatever that 730 width is you are setting.
    All the best,
    - Kallak
  • WolfLord
    WolfLord
    Posts: 278
    Thanks for the help! I am very much not familiar with CSS and used someone elses code on the forum i will have to figure it out =]

    DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings

    DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011

  • Kallak
    Kallak
    Posts: 1,090
    @Basileus, don't suppose you (or anyone for that matter really) recall the preforge font settings (size, style) by chance?
    All the best,
    - Kallak
  • Thorvaldr
    Thorvaldr
    Posts: 141
    @Kallak: I'm not positive this is correct, but I downloaded some of my pages before the reforge (thank god I kept that reference...), and found this somewhere in the code:

    /* --------------------------------------------------------------

    typography.css
    * Sets up some sensible default typography.

    -------------------------------------------------------------- */
    /* Default font settings.
    The font-size percentage is of 16px. (0.75 * 16px = 12px) */
    /* line 11, ../../app/assets/stylesheets/typography.css.scss */
    body {
    font-size: 75%;
    color: #222;
    background: #fff;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    }

    I _think_ that should help!

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • Kallak
    Kallak
    Posts: 1,090
    I'll give it a whirl, thanks Thor.
    All the best,
    - Kallak
  • Kallak
    Kallak
    Posts: 1,090
    Update of sorts: not sure what that's for, but it's not the default. Way too small.
    All the best,
    - Kallak
  • Thorvaldr
    Thorvaldr
    Posts: 141
    Huh... darn.

    Well, if you want, I cut and paste everything I found from the Style Editor in Firefox "here.":https://tyellador.obsidianportal.com/wikis/old-style-editor (I'd cut and paste all that code into an editor of some sort... it looks like crap on my site. :P) I'm not actually sure what the old font looked like... font-changing was the first thing I learned to do in CSS, so of course it was the first thing I had to do! :P Any chance that those are the fonts though, and some later, more important class overrid the size?

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • PhoenixMark
    PhoenixMark
    Posts: 90
    Too much work. I appreciate all the work you guys are doing, but really? I have no clue what this CSS means. I have no idea when I copy and paste it into my site, what it does, or even IF it does. My tables are not transparent, yet I pasted that code in. It is not worth it. I don't have the time now. Maybe in December after NaNoWriMo. But I will know as little about CSS then as I do now.

    Langy, I appreciate the help. When I get back in December, maybe I can get someone to take my hand and walk me through each of my hundreds of pages with broken code and let me know exactly what I did wrong, that seemed to be fine in the old system, that is broken now, like those extra, or missing, close divs. PM me if any of you have suggestions. Thanks.

    "PhoenixMark":http://www.obsidianportal.com/profile/PhoenixMark

    "CRIMSON SKIES":http://www.obsidianportal.com/campaigns/crimson-skies
    "COTM June 2012":http://blog.obsidianportal.com/crimson-skies-junes-campaign-of-the-month/

    Also "Sactown Blues":http://www.obsidianportal.com/campaigns/sactown-blues and "Shimmering Kingdoms":http://www.obsidianportal.com/campaigns/shimmering-kingdoms
  • Leonidas300
    Leonidas300
    Posts: 275
    @ PhoenixMark,

    Believe me dude, I understand precisely where you are coming from. Please do the OP a favor and return in December, the Vanguards will hopefully be a lot less busy and hopefully the developers will have a few of the major bugs worked through.

    Don't let all of this rob the rest of us of your excellent campaign, come back with fresh eyes and renewed purpose.


    "Leonidas300":http://www.obsidianportal.com/campaign/metzger/wikis/leonidas300
    "A Manifestation of Chaos":http://www.obsidianportal.com/campaign/metzger/wikis/main-page
    COTM - Sept. 2012
  • Basileus
    Basileus
    Posts: 585 edited October 2013
    I wonder if it would be beneficial for the Vanguard program to have access to something like Join.me or GoToMeeting so they could do remote walkthroughs. Teaching a man to fish rather than giving him a fish and all that...
    Post edited by Basileus on
  • krymorin
    krymorin
    Posts: 9
    Okay, using the advice you guys gave me, plus another piece of CSS I found from someone else in another post, I got the pages looking pretty much like I want them. My concern now is that instead of using img { max-width:none; } in the CSS I would like to restrict this only to the personal side bar that I use here: https://dark-horizon-26501.obsidianportal.com/

    I had the same problem that PhoenixMark did in regards to the images for the side bar being shrunken down until I added the img { max-width:none; } to the CSS. However, I don't really want that to carry over to all of the images within the actual wiki text windows etc, it can make things look weird, and if people are using very small screens can cause pictures to break the frame so to speak. It's my understanding that img { max-width:none; } can be used more restrictively on just the images for my side bar using !important in there, but I really am not sure how the syntax of all of it is supposed to go.

    This is what I currently paste into every wiki page to get the side bar format:





    "!http://cdn.obsidianportal.com/assets/243153/Rules_Nav.png(Rules nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/rules
    "!http://cdn.obsidianportal.com/assets/243154/People_Nav.png(People nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/people
    "!http://cdn.obsidianportal.com/assets/243155/Magic_Nav.png(Magic nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/magic
    "!http://cdn.obsidianportal.com/assets/243158/Religion_Nav.png(Religion nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/religion
    "!http://cdn.obsidianportal.com/assets/243162/Places_Nav.png(Places nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/places-of-interest
    "!http://cdn.obsidianportal.com/assets/243159/History_Nav.png(History nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/history
    "!http://cdn.obsidianportal.com/assets/243161/Tools_Nav.png(Tools nav)!":https://dark-horizon-26501.obsidianportal.com/wikis/tools-and-resources



    Can anyone show me the format of what needs to be added in where?

    Btw, I saw your side bar format Langy, but I am not really sure how to implement it.
  • Savannah
    Savannah
    Posts: 188
    Hey, krymorin, just so you know, that sidebar is almost completely off screen for me. If it weren't for the fact that the rightmost edges of a couple of letters showed, I wouldn't even know you had it.
  • krymorin
    krymorin
    Posts: 9
    @Savannah

    I'd like to say I am surprised but I am not, that's what my most recent post is about, formatting for smaller sized screens. If you don't mind me asking, what browser and screen resolution are you using to view it in?
  • Leonidas300
    Leonidas300
    Posts: 275 edited November 2013
    On the adventure log tab is there a way to make those preview boxes bigger? I did custom banners with a summary and link to an expanded log which the way the logs are set up now actually complement that style but I cannot get everything sized correctly so that it can be seen.

    Thanks,


    "Leonidas300":http://www.obsidianportal.com/campaign/metzger/wikis/leonidas300
    "A Manifestation of Chaos":http://www.obsidianportal.com/campaign/metzger/wikis/main-page
    COTM - Sept. 2012
    Post edited by Leonidas300 on
  • madartiste
    madartiste
    Posts: 328 edited November 2013
    Leonidas, there should be a way...
    Maybe:
    .adventure-log-teasers .adventure-log-post {width:1000px;margin-left:-100px;}

    Those pixel dimensions are totally random, by the way. You'd need to use the margin-left to shift the teasers over enough so that they're not running over the sidebar stuff.
    Post edited by madartiste on
  • Savannah
    Savannah
    Posts: 188
    I'm using Firefox (whatever the latest is) and a 1366 x 768 screen resolution. For what it's worth, every side navigation bar I've ever seen prior to the reforge ranged from slightly to three quarters of the way off screen for me, so it's not unique to you (yours was just particularly bad).
  • krymorin
    krymorin
    Posts: 9
    Thanks for the information Savannah. I would imagine it mostly has to do with your screen width. I know the settings on my site are set to stretch the entire body to 1100, and my nav bar is offset from that by another 290, which is why you are just barely catching a piece of it. Based on a number of the threads and posts I have read, probably many others have done similar things in terms of stretching the width from the default. Hopefully, I will eventually figure out how to use Langy's CSS advice to implement on the bar so it simply doesn't show when there isn't enough room. My main concern right now though is figuring out how to keep the nav images sized correctly, without losing the size scaling for all my images located in the wiki content container.
  • Langy
    Langy
    Posts: 364 edited November 2013
    Krymorin:

    Try using the following:

    @[style*="position:fixed"] img { max-width:100%; }@

    And remove the previous max-width:100% tag. That should make it so only the images in your sidebar use it.

    If you don't want your sidebar to display at all if the screen is smaller than, say, 1400 pixels wide, then use:

    @media screen and (max-width: 1400px){
    [style*="position:fixed"] {
    display:none;
    }
    }
    Post edited by Langy on
  • krymorin
    krymorin
    Posts: 9
    Langy:

    The [style*="position:fixed"] img { max-width:100%; } worked extremely well to fix my problem with the size on the nav bar images, though I had to change the 100% to none instead for it to work. That solves the biggest concern I had as the nav bar is good and my wiki images format correctly. You rock sir.

    I also added the @media information in but I don't think that had any effect, at least I couldn't see any even after resizing my window down. The images were still partly visible even though it couldn't fit in the window frame. I was supposed to be adding that line in the Custom CSS code window right?

    Thanks again for the help.
  • Langy
    Langy
    Posts: 364
    Oh, woops, yeah. That should have been 'none', not '100%'.

    The issue with the other one is the curly-quotes; rewrite the "position:fixed" part using normal quotes. It should look like this:

    @[style*=“position:fixed”] { display:none;
    }
    }@

    (I couldn't put that whole thing in a code box (which preserves the correct quotes) because the media query requires the @ symbol, which is what is used to create the code box:/)
  • Leonidas300
    Leonidas300
    Posts: 275
    @ madartiste


    Thanks, with a little tweaking that fixed both my banner and adventure log preview.


    "Leonidas300":http://www.obsidianportal.com/campaign/metzger/wikis/leonidas300
    "A Manifestation of Chaos":http://www.obsidianportal.com/campaign/metzger/wikis/main-page
    COTM - Sept. 2012
  • SkidAce
    SkidAce
    Posts: 830
    How do you make a code box?

    Unconquered Kingdoms, July 2016 CotM

  • Thorvaldr
    Thorvaldr
    Posts: 141
    @SkidAce: I assume you're talking about one of these?

    bc. I have code here.

    You just need to do this:

    bc. bc. I have code here

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • SkidAce
    SkidAce
    Posts: 830
    bc. Test

    Neat, thanks.

    Unconquered Kingdoms, July 2016 CotM

  • GamingMegaverse
    GamingMegaverse
    Posts: 3,001
    There are some awesome bits in this thread that need to get into the CSS sticky, so they don't disappear for later users- Please....

    Just trying to help out.

  • Langy
    Langy
    Posts: 364
    Oh, bc. works too? I just used @ symbols, as that's the only way to make a code box mentioned in the textile markup reference.
  • SkidAce
    SkidAce
    Posts: 830
    @testing the at symbol@

    Learning is the first goal....

    Unconquered Kingdoms, July 2016 CotM

  • krymorin
    krymorin
    Posts: 9
    Langy:

    Yup, that fixed it, it's disappearing as it should on the resize. Thanks so much sir.
  • Ironeyes
    Ironeyes
    Posts: 21
    Hi,

    I'm fairly new to CSS and I wasn't able to find this anywhere. Does anyone know how to change the GM Only section a solid color (preferably black background with white text)?
  • Thorvaldr
    Thorvaldr
    Posts: 141
    @ironeyes:

    Put this in your CSS section:

    bc. .post-gm-only {background-color: black !important; color:white;}
    #gm-secrets {background-color: black !important; color:white;}
    .player-secret {background-color: black !important; color:white;}

    the .post-gm-only takes care of the wiki, the #gm-secrets takes care of GM secrets in chracter pages, and .player-secrets should take care of all the player secrets.

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
Sign In or Register to comment.

April 2024
Season of Strife

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

Categories