Not signed in (Sign In or Register)

Discussion Tag Cloud

Vanilla 1.2.1 is a product of Lussumo. More Information: Documentation, Community Support.

  1.  

    Hey there! I’m hoping I could get some feedback on a new development I’ve put into my campaign: I call it the sidebar

    It’s a bit different from your ordinary sidebar: I don’t know if anyone’s successfully implemented it, or if it’s annoying, or if it even works on your particular flavor of web device. I know it behaves differently at various resolutions and zoom levels, but I’d love to hear some feedback!

  2.  

    Um, wow, that’s kind of awesome. I am impressed, and as soon as I have time, I’m going to try and sort the code out – unless you’re kind and generous enough to post it here first ;-)

  3.  

    I just need to test the coding insertion of the forum…

    <pre>
    <b> Bolded Text Goes here?</b>
    </pre>
    <b>Bold</b>

    •  
      CommentAuthorRase Cidraen
    • CommentTimeOct 5th 2010 edited
     
    OKAY! Here goes nothing. My advice: Stuff this code at the very bottom (Many Enter lines worth) of the Edit page, so you can continue to edit the rest of your page in a manner that is quite nice. The nice thing about the code is you can just insert it as you create pages, and it'll stay current. It's a pain if you ever want to change things up, though, because you have to go through and change every instance.






    <div style="position: fixed; width: 125px; top:15%; left:7px;">
    <div style="background-image:url('http://i306.photobucket.com/albums/nn274/apmunson/Planescape/spire.jpg?t=1286293212');color:#FFFFFF;font-weight:bold;width:125px;font-family:exocet;font-size:12px;">
    <a href="/campaign/planescape-campaign/wikis/main-page">Main Page</a>
    <a href="/campaign/planescape-campaign/wikis/gaming-sessions">Timeline</a>
    <a href="/campaign/planescape-campaign/wikis/laws-of-the-multiverse">House Rules</a>
    <a href="http://www.obsidianportal.com/campaign/planescape-campaign/wikis/legends">Legends</a>
    <a href="http://www.obsidianportal.com/campaign/planescape-campaign/wikis/memorable-quotes">Quotes</a>
    <center>REFERENCES</center><hr>
    People
    * <a href="/campaign/planescape-campaign/wikis/cast-of-characters">Cast</a>
    * <a href="/campaign/planescape-campaign/wikis/mercenaries-merchants-and-more">Groups</a>
    * <a href="http://www.obsidianportal.com/campaign/planescape-campaign/wikis/factions">Factions </a>

    <hr>
    Places
    * <a href="/campaign/planescape-campaign/wikis/sigil">Sigil</a>
    * Planes
    ** <a href="/campaign/planescape-campaign/wikis/the-outer-planes">Outer</a>
    ** <a href="/campaign/planescape-campaign/wikis/the-inner-planes">Inner</a>

    <hr>
    Weaponry
    * <a href="http://www.obsidianportal.com/campaign/planescape-campaign/wikis/weapons-of-the-planes">Planar Weapons</a>
    * <a href="http://www.obsidianportal.com/campaign/planescape-campaign/wikis/magic-items">Artifacts</a>
    </div>
    </div>
    •  
      CommentAuthorCurufea
    • CommentTimeOct 5th 2010
     

    Yes, sadly you don’t get php includes or HTML iframes (or even frames) to make the maintenance of headers, footers or navigation menus simpler :(

    It could potentially be abused – although a form of membership for OP that allows it might be an idea. Spam – or the linking to spam sites – are less likely to occur in subscription sites such as OP. Even more so if privileges or special memberships must be earned somehow and the member runs the risk of banning.

    On a side note, however – some wikis (such as dokuwiki) use templates that treat headers, footers and sidebars as wiki pages. It’s a bit like a CMS that way – in that a single page shown on a browser is made of multiple sub parts. Possibly in the future, OP may integrate such a template.

  4.  
    I think that that kind of template integration would be incredible. But I suppose we have to hack together what we can until such a thing comes to pass.
    •  
      CommentAuthorDarkMagus
    • CommentTimeOct 5th 2010
     

    That looks amazing, I don’t know how you did it. I see the above code you posted but it just looked like this to me : “MAGIC!”, yeah.

    •  
      CommentAuthorChainsawXIV
    • CommentTimeOct 6th 2010 edited
     

    Nice work Rase! To me, it’s only distracting when it hangs over the content of the page, so I’d suggest draping it off the left side of the content, which is pretty easy. Replace the first line of the code above with the two below, and add an extra </div> tag to the end of the code to close things up, and it will always hang out just to the left of the page in the margin area, like so.

    <div style=“position:relative;left:-140px;”>
    <div style=“position:fixed;width:125px;top:190px”>

    •  
      CommentAuthorCurufea
    • CommentTimeOct 6th 2010
     

    DSTs are currently including in character wiki pages, something similar could be done for the main wiki pages. I’ve been pondering the use of jquery for navigation of the main wiki :)

  5.  
    Chainsaw, that's amazing! I couldn't figure out how to get it to stay in that spot, so it got relegated to a % from the left. I'm cobbling this HTML stuff together as I go. Thanks for the refinement!
  6.  

    Sure thing. Nesting fixed elements inside relative elements to position them is pretty counterintuitive, but it works. I use a similar sidebar on my own personal page, so I have the advantage of having solved the problem before. :)

  7.  
    Oh man, did I just reinvent the wheel? :)
  8.  

    The tech may be a known quantity, but the application is where the value is. :)

  9.  
    Hooray for proper application! I've just gone and updated every last tidbit of my site to include your much appreciated addition!
    •  
      CommentAuthorGrokkit
    • CommentTimeOct 6th 2010 edited
     

    Great idea! Simple but effective. Too bad there are no file includes… I just updated my site with this handy nav as well… though I dread the update process :(

    Thanks!

    p.s. Got an update from one of my players. It looks like this code does not play nice on some mobile devices because the left side of the page is cropped. Hey Chainsaw, any ideas on this one? I don’t think we can do browser detection… so, my guess is mobile users are just S.O.L.?

    Return of the Lich Queen

  10.  

    Well that just looks awesome! Thanks to you Rase for coming up with this brilliant application, and to you Chainsaw for refining it to perfection.

    The Blood of Life

    •  
      CommentAuthorRase Cidraen
    • CommentTimeOct 7th 2010 edited
     

    No problem JonVol! I’m glad to contribute to the site! I’m not sure how The Blood of Life looks on your screen, but it seems a bit low on mine (IE9, 1280×800). I’m glad to see so many people implementing it. I’ve been trying to develop things to get them featured on the tips posting, and to help everyone else on the site :) Not necessarily in that order.

    Edit: Yeah, I just checked my site, and that’s too low as well. Must be a resolution thing. If only this code could be made universally awesome. But I’m more than enthralled with it as it is.

    •  
      CommentAuthorGrokkit
    • CommentTimeOct 7th 2010
     

    Hi Rase,

    I have been browser testing your slick nav as well today. It appears to work fine in IE 8 and Firefox, however, as I mentioned above, it does gak on some mobile devices (Blackberry Curve for sure). The issue isnt with the code per se, its because the mobile browser crops the left side of the pages leaving no place for the nav to go except over the wiki page itself.

    Otherwise, the contribution is great. Now we just need a feature request to get support for include files! :)

    Thanks again for the good stuff!

  11.  

    You can adjust the height by reducing the top value in the second div to whatever you like. The value I set there is meant to align the top of the sidebar with the bottom of the campaign banner image, and there’s no reason not to change it. It definitely won’t fit well on smaller resolution screens.

    As for the mobile browsers, I haven’t worked out a good solution. Ideally, I’d place a div in the page that’s wide and to the left, so the page width allows for the side bar, but unfortunately I don’t think I can do that from within the content space of the wiki because of the way that block elements are positioned by the browser.

    •  
      CommentAuthorCurufea
    • CommentTimeOct 7th 2010
     

    I’d put the navigation on the right – out of first view of the mobile browser. Page content is more important IMHO.

    It would be good to see a variant of a print stylesheet for mobiles though.

  12.  

    In my opinion, putting it on the right isn’t near as nice from a layout standpoint, since all of OP’s own sidebar controls are there too. If it is on the right however, you can force the page width at least, thought the technique is hacky, by adding the following before or after the code (adjust width to taste):

    <div style=“width:1250px;height:1px;”></div>

  13.  

    Hacky or not, that could be very useful. I’ve been toying around with some silly ideas, one of which being adding a tacky looking scroll bar to the Menu, for large content menus, which should be as simple as adding a vertical overflow scroll to the first div (I think). “overflow:scroll;” would pry do it. I know my menu doesn’t need it, but others might. I think my favorite part about the menu was the hacky way I matched the background tone. Turns out, 202020 is the new black.

    Gentlemen, I think we are entering the territory of doing things OP is quite capable of, but never expected to be able to do.

  14.  

    You were right Rase, that menu was considerably lower than I intended it to be – I couldn’t tell until I got home last night, though, because our monitors at work are flipping tall, and I usually hover my mouse in the lower half of the screen. I’ve moved them all up a ways, though not as high as you originally had them – I just like to get low.

  15.  

    Swanky! I definitely am digging it. I’m wondering if the background image I have on mine is too much, or if it needs something else. Any thoughts?

  16.  

    Huh, you know, I saw the code line for the background image, but I never actually noticed it until just now. I dropped it on mine, but it doesn’t really interfere with the functionality of yours at all. It’s just hard to see.

  17.  

    I didn’t want it to interfere with the text, so I didn’t wanna make it too terribly bright. My imaging software is not being particularly smart: it won’t recognize the shape for me to take it out, so that was one of the only ways I could get the background to 202020.

    •  
      CommentAuthorgaaran
    • CommentTimeOct 9th 2010
     

    I realize I’ve been quiet of late (been very busy), but I love the look of this tool bar. I really want to go through and update my campaign pages again, I’m getting sick of looking at the same thing over and over again, but it’s going to be a big project. I might work this in somehow though, I like it.

    •  
      CommentAuthorgaaran
    • CommentTimeOct 9th 2010
     

    Oh, and just so you know Rase, in my browser (newest firefox) on your Outer Planes page, the nav bar shows up on the far left.

    •  
      CommentAuthorarsheesh
    • CommentTimeOct 9th 2010 edited
     

    Nice job on this Rase!

    Like Gaaran I’m planning on doing an overhaul on my Age of Legends site. I’d actually experimented with the idea of adding a wiki drop down menu. However, after looking at several HTML and CSS tutorials on the subject, realized that either the code needed to create such a menu is not supported by the Portal, or else my meager coding skills just weren’t up to the challenger (probably the latter). At any rate, in lieu of a drop down menu, I think that I just might go with your sidebar idea. I’m currently still working on the new site layout but, here’s a sneak preview of a page displaying the new site banner, a new parchment background template, and your sidebar.

    Cheers,
    -Arsheesh

    •  
      CommentAuthorCurufea
    • CommentTimeOct 9th 2010
     

    CSS for the pseudo classes must be declared in the head area of a page – this includes things like the hovering, visited and activated subclasses for links.

    So it’s not coding – it’s lack of access to anything other than the body of a page.

    •  
      CommentAuthorCurufea
    • CommentTimeOct 9th 2010
     

    However, that being said – HTML5 may be a viable option if OP changes the schema declaration at the start of each page.

    •  
      CommentAuthorarsheesh
    • CommentTimeOct 9th 2010
     

    Thanks for that clarification Curufea, I’m sort of a rank amateur when it comes to coding.

    •  
      CommentAuthorCurufea
    • CommentTimeOct 10th 2010
     

    No prob. I only read that part of the schema last week myself :)
    Although it was to help answer someone’s question on the style attribute for a tag (again you can’t do pseudo classes)

    •  
      CommentAuthorgaaran
    • CommentTimeOct 10th 2010 edited
     

    I have a question, I’m having trouble making a background image load behind the side bar, but i don’t see a difference in that part of the code from your code. the page is here

    i tried putting the background image in it’s own div, because i had that work in the past once, but no dice on that either.

    •  
      CommentAuthorgaaran
    • CommentTimeOct 10th 2010
     

    Also, i just downloaded google chrome, and this doesn’t work in chrome, the sidebar appears over the body of the page, rather than off to the left.

    •  
      CommentAuthorarsheesh
    • CommentTimeOct 10th 2010
     

    Yep, I just downloaded Google Chrome and verified what Gaaran pointed out. Anyone out there HTML savvy enough to know if there is a work-around?

    •  
      CommentAuthorCurufea
    • CommentTimeOct 10th 2010
     

    Firstly, I wouldn’t put in so many divisions – just use one division with all the styles in a single attribute-
    <div style=“position:relative;left:-170px;display:block;width:150px;top:230px;background-image:url(http://www.flickr.com/photos/49710764@N07/5066647827/);color:#FFFFFF;font-weight:bold;width:155px;font-family:exocet;font-size:12px;”>

    Secondly, I’d put in display block and put in the direct URL to the image, not the Flickr page-
    http://farm5.static.flickr.com/4113/5066647827_39d0ed39d9.jpg

    •  
      CommentAuthorCurufea
    • CommentTimeOct 10th 2010 edited
     

    Here’s some fiddling to have a look at

    Also note – try to use only double and single quotes – not angled quotes (ie don’t copy and paste from this forum which converts to angled quotes).

    •  
      CommentAuthorSkidAce
    • CommentTimeOct 10th 2010
     
    Hmmm, when I first tried it, it floated on the way left. and I could scroll my page up and down and it would stay off to the side floating (which I assume is the intended effect).

    When I replaced the lines of code Chainsaw suggested to bring it in a bit, now its embedded within the page and scrolls with it.
    •  
      CommentAuthorarsheesh
    • CommentTimeOct 10th 2010 edited
     

    Curufea, thanks for your assistance, however your “fiddling” example stays fixed at the top of the screen, whereas the beauty of the original design is that the menu positioning is relative, so when you scroll up and down the screen, it automatically repositions itself relative to the current top of the screen.

    Gaaran, At any rate, I found that if you just flip the two div tags, such that the “position:fixed” div tag is above the the “position:relative” tag, the the menu floats to the far left of the screen in Google.Chrome; e.g.:

    <div style=“position:fixed;width:125px;top:200px”>
    <div style=“position:relative;left:-140px;”>

    Hope that helps.

    •  
      CommentAuthorCurufea
    • CommentTimeOct 10th 2010
     

    True – I think the main problem was just using the flickr image’s page rather than the direct link to the image :)

    •  
      CommentAuthorgaaran
    • CommentTimeOct 11th 2010
     

    good call, when i grabbed the link, i thought it WAS the direct link, thanks for that.

    also, is there a tag for not tiling an image for the backgrounds? although i suppose i know the size of what the image should be, so i can just adjust the .jpg

    thanks for the help

    •  
      CommentAuthorarsheesh
    • CommentTimeOct 11th 2010 edited
     

    This should work:

    background-repeat:no-repeat;

    EDIT: Here’s an example:

    <div style=“background-image:url(http://cdn.obsidianportal.com/assets/8261/Dragon2.jpg);background-repeat:no-repeat;background-position:top center”>

    •  
      CommentAuthorgaaran
    • CommentTimeOct 11th 2010
     

    I saw what arsheesh was working on, so i stole his idea for tabs as well. i thought i’d see what people thought, and also if anyone was having problems in particular browsers. I know the code is messy, but every time that i try to clean it up i break something. here it is!

    •  
      CommentAuthorRase Cidraen
    • CommentTimeOct 11th 2010 edited
     

    IN REVERSE CHRONOLOGICAL ORDER!:

    Gaaran: That is absolutely gorgeous. I think it works marvellously. I wonder if there may be an option in the future to replace the existing tabs with user created images. I mean, it’d be the same functionality, but we’d get to be able to produce the same effect on our own! The only thing I might suggest is replacing the “background” on your image with 202020, which is the same color as the background of Obsidianportal. Other than that it looks bloody fantastic.

    Arsheesh: Hooray for no-repeats! Darnit: in deference to your decision to flip the tags, now I must go and re-update my whole site with that update you concocted! Also, the new site layout you’ve come up with is pure flash, absolutely incredible. I’ve got to get my innovating shoes on to keep up, only I left them at home!

    I have to say I’m quite proud that something I originally created because I was being lazy turned into something that the rest of the world has turned into pure awesome.

    EDIT: Arsheesh, you crafty little bugger. I almost didn’t realize what you had done to the background of the page until I scrolled down all the way. That idea puts mine to shame, sir. I salute you.

    •  
      CommentAuthorGrokkit
    • CommentTimeOct 12th 2010
     

    Thanks Arsheesh for the correction… now the Nav works for Chrome and Safari!

    •  
      CommentAuthorarsheesh
    • CommentTimeOct 12th 2010
     

    Rase and Grokkit, thanks but I was just tinkering with code already set in place by others. In the case of the nav menu, we all have Rase to thank for that. As far as the background image, I got the idea from someone else. I wasn’t lying when I said earlier that I’m not all that savvy with HTML. I’m just glad there are others out there that are so that I can try to figure out how to improve my own sites by backwards engineering the foundation that they’ve laid.

    •  
      CommentAuthorDuskreign
    • CommentTimeOct 13th 2010
     

    Gah! I am so lost in all this fancy, dancy, chancy, plantzy code! (I made most of that last part up, but not the confusion part). I want to integrate some of these ideas, but as I have a metric f#$@ton of wiki pages to change once I settle on something, I want to make sure it’s done right. I want to incorporate a bank of images on the floating-over-the-left-edge-of-the-wiki sidebar, and I also want to figure out how to pretty-up my navigation buttons beneath the campaign banner, but after a few days monkeying around, I threw my hands up and realized I wasn’t going to figure it out on my own.

    I am so impressed by all this. Arsheesh, Rase, will you adopt me? Because I want to be just like you when I grow up.

  18.  

    Never grow up! Never surrender! Dusk, just send me an idea of what you want done, and I’ll try and hash out the code for you, complete with some graphicalization editing if necessary. I’ll have to nip into one of the other’s pages to nab the code for replacing the nav buttons, but I think I’ve got a good idea about that… Hazarding a guess, they used an Image map, or single images strategically placed over a background. Some creative Z-Stacking and it’ll be looking good as new! Hit me up when you’d like me to get started!

    •  
      CommentAuthorDuskreign
    • CommentTimeOct 14th 2010
     

    Thanks Rase! You hooked me up with some lessons in html, and I wound up trying something new on my home page. I am interested in hearing your thoughts on it. I am not 100% sold on the idea, honestly.

    Also, I tried the floating sidebar, and I can’t get it to work right. No matter what I do, it seems to prevent me from clicking anything within a few inches to the right of the sidebar, which infuriates me with the power of a thousand furious suns.