Remove right column

Krothos
Krothos
edited August 2015 in Campaign Portal Building
Using CSS, how would I go about removing the right column of information (players, fans, comments, stream, etc.)? Thanks.

Comments

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,883
    You can do this a number of ways- do you want to remove completely, as I have- Here is the "CSS":https://a-god-rebuilt.obsidianportal.com/wikis/css for my site
    Or do you want to hide it, like the amazing "Edgerunners":https://edgerunners.obsidianportal.com/

    Let us know-
    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.  Changed name from killervp to Gaming Megaverse to match other sites.

  • Krothos
    Krothos
    Posts: 230 edited August 2015
    Both of these websites look great! Not sure what the difference would be... removing vs hiding? I'm already using the CSS code of .where-we-game-container {display: none} if that helps.
    Post edited by Krothos on
  • Unknown
    Removing it means it will be gone, hiding means you can still see it but it is not visible by default. On Edgerunner, there is a gray bar on the right side that if you mouse over the right side bar displays. Once you know what way you want to go we can kick you the code.
  • Krothos
    Krothos
    Posts: 230
    Wow, didn't notice that on Edgerunner's site. That is a very cool feature and didn't know it was available. I would like to duplicate that on my site, as long as I'm not breaking creativity copyrights. :) Is there a way to add some text or icon to right-bar when it's not being mouse hovered over? Want to make sure my players see that is something they can interact with. Nothing too complicated, such as the "The Players" or the Stream icon. Hope this isn't getting too beyond the scope of the assist you can provide with this. I really really appreciate you help so far. :)
  • Unknown
    Right on, I may not be able to get to that tonight, but I will take a look at this and see what I can come up with. I think you should be able to sneak in an image on the bar with some use of the :before or :after in the CSS. Of course, if someone has an answer more immediate then me please post it rather than waiting on me!
  • Krothos
    Krothos
    Posts: 230
    Thanks for looking into this!
  • Unknown
    Not a problem. I won't lie, this is a more complex method so it might take me a little bit as my plate is rather full at the moment. You may want to consider sending a message to "Langy":https://www.obsidianportal.com/profile/Langy (the GM of the page) to see if they would be willing to just kick you over the code to do it as it might expedite the process a bit for you.
  • Langy
    Langy
    Posts: 364 edited August 2015
    It's been a while since I set up the CSS for that, and it's a bit intertwined with a few things to make sure it all works - but I think this is the set that's required; it doesn't include the 'note that something is here' bit, as I hadn't thought of doing that before and haven't looked into it yet:

    .character-avatar {
    overflow:hidden;
    }

    .sidebar-adventure-log-neighbors {
    overflow:hidden;
    }


    #sidebar img {
    max-width:100%;
    }

    .sidebar-see-all-wiki-pages {
    overflow: hidden;
    text-align: center;
    }

    #sidebar {
    width:20px;
    z-index:2;
    position:absolute;
    left:980px;
    height:100%;
    }

    #sidebar:hover {
    width:250px;
    z-index:2;
    position:absolute;
    left:760px;
    }

    .module {
    overflow:hidden;
    }

    .sidebar-last-updated {
    overflow:hidden;
    }

    EDIT:

    This should work for adding an indicator that there's something to see:

    #sidebar:after {
    content: "
    Post edited by Langy on
  • Krothos
    Krothos
    Posts: 230
    Thank you for the information, Langy! This is exactly what I needed. I can use this information to advance my CSS learning, and can make my site really nice for my players at the same time. I'll work on this over the next couple of days and let you know how everything works out. :)
  • Unknown
    Post back with any questions, comments, snags, etc. that you might have on it.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,883
    Langy- Great to see you back on the forums, and happy to see Edgerunners still going strong!

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

  • Krothos
    Krothos
    Posts: 230
    Ok, most of the commands work great. It hides the right column and activates when mouse hovered. However, the following code returns an "no advanced javascript supported" error when saved:

    #sidebar:after {
    content: "
  • Langy
    Langy
    Posts: 364
    bq. Also, there is no bar along the right side to indicate where the mouse-hover is supposed to happen. Is there a way to change this?

    Yeah. You'll want to add a background (with a color or image of your choice) to the #sidebar CSS; something like 'background-color: grey;'.

    bq. However, the following code returns an "no advanced javascript supported" error when saved:

    That's odd. Not sure why it'd come out with that error - the parser must not be working properly for it. You can switch out the < for something else (a '{' symbol works, for example), but the angle-brackets don't.
  • Unknown
    I just want to say again how slick that is. Am really considering stealing it myself for the secondary campaign I am working on, or possibly a third I have been flirting around with.
  • Krothos
    Krothos
    Posts: 230
    I was able to play around a bit with this and learned a bit more about CSS programming. Thank you for all of your help with this! Guess it's time to move onto other bigger issues at hand... like prepping for my campaign and keeping up with this awesome site for you!
  • Deadlee
    Deadlee
    Posts: 5
    Hi. Can someone please post the code to remove the right side bar. I know its somewhere in killervp's post, but I can't locate the code to simply remove the side box.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,883
    Interestingly enough, I don't make it disappear- I just shove it really, really far to the right- so most people don't see it, you have to hunt for it.
    ==div#sidebar {position:absolute; left: 1700px !important;}==
    killervp
    "A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

Sign In or Register to comment.

The first Campaign of the Month for 2021 is Gaxim Plague!

Read the feature post on the blog!
Or 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