My new layout

gaaran
gaaran
edited October 2010 in Campaign Portal Building
Well, I've been hard at work on a new design for my main page, and with some help from Arsheesh and Rase, I think it's looking pretty good. Before I made the switch though, I wanted to ask if any one had any pointers or suggestions, or if things didn't look right in a particular browser. Thanks for the help guys, couldn't have made it without you!

"Click Here":http://www.obsidianportal.com/campaign/melekar-test/wikis/main-page
«13

Comments

  • Yergi
    Yergi
    Posts: 6 edited October 2010
    Point 1: I am jealous of your skillz.

    Point 2: I'm using Chrome on a 1280x800 display, and your navbar on the left is cutting off the first few letters.

    Point 3: This is more personal preference, but I think the different entries on your header are a little too close together (Especially between "Forums" and "Maps", for example).
    Post edited by Yergi on
  • gaaran
    gaaran
    Posts: 740
    How many letters does it cut off?
  • Yergi
    Yergi
    Posts: 6
    I'll use the "Main Page" link as an example. I can only see the last half of the "n" in "Main". I can see more of the other links due to them being bulleted.
  • arsheesh
    arsheesh
    Posts: 850
    I think it looks fabulous Gaaran!

    One word of caution though regarding the custom navigation menu you have appended to your new campaign banner. While this nav menu should not cause any editing problems on your Home page, or any Wiki pages, depending on the size of the image, if you attach the menu to any of the Character pages, Adventure Logs or Forums you may find that you can no longer edit certain pages. I found this out myself when I created a new character and then inserted my new nav menu at the top of the page. Turns out the new image was too close in proximity to the "edit" options for that character, thus rendering me unable to edit that character. Likewise, since edit options for adventure logs and forums pages are located at the top of those pages, you might run into the same problem.

    Course, your nav menu is smaller than mine so you may not run into the same problems I did. At any rate, good work.

    Cheers,
    -Arsheesh
  • gaaran
    gaaran
    Posts: 740
    Thanks guys!

    Yergi: thanks for the input, sounds good, I'll see if I can cut it down, as 1280x800 isn't uncommon for a laptop, but i might just have to live with it.

    Arsheesh: I noticed that as well, with the way it works, at least in google chrome, there's a "ghost" of the left side nav bar that appears over your main page, so you can click on anything that would be in that space. almost got in trouble with a blank test page, i couldn't click on the edit page box :P. That shouldn't cause any problems for users though, so as long as I'm careful, it should work out okay :)

    One last question I have, other than welcoming any further input, is: are you guys sure that the background on OP is 202020? cause that's the color i use in photoshop when I'm making my image, and it seems slightly darker than the OP background. Thanks again!
  • Curufea
    Curufea
    Posts: 161 edited October 2010
    I'm not keen on text as image for accessibility reasons. At least make sure you have alt text and preferably a title as well for mouseovers. Also the navigation menu is offscreen if viewed on a monitor with 1024 width (such as my secondary monitor).

    I've also noticed when doing a routine zoom in/out that there appear to be two header banners - if you're using one for spacing, you should change it to a div of specific size instead.
    Post edited by Curufea on
  • gaaran
    gaaran
    Posts: 740
    thanks for the input curufea, I've adjusted to make it work for a 1280 display, but the menu won't work at all on a 1024 display. I understand your concern with the image as text, but I'm not going to be doing that much, for anything other than titles. I'm not TOO concerned with that part, as this is just a hobby site.

    I'll keep my eye open for that sizing issue, as I haven't seen it on my browsers.
  • vstraydogstrutv
    vstraydogstrutv
    Posts: 209 edited October 2010
    It all looks absolutely lovely. I'm especially digging the hell out of your outer floating menu and -would love to know how that was done-*. What background are you talking about? The one for your top menu (Home, Adv Log, etc)? Or for the floating menu out in the gray of space?

    *Ah I think I see. Just floated it into the negatives?
    Post edited by vstraydogstrutv on
  • gaaran
    gaaran
    Posts: 740 edited October 2010
    On there Two pages, I have included the exact same code, I copied and pasted from one to the other. Yet, on the first one, everything lines up how I want it, and on the second, there is a gap between my banner and the link buttons. Could anyone tell me why that is? Or should i just adjust the code on the live page?

    "Test Campaign Page":http://www.obsidianportal.com/campaign/melekar-test/wikis/nations

    "Live Campaign Page":http://www.obsidianportal.com/campaign/melekar/wikis/Geography

    Edit: I just went ahead and redid it on the live version. If it doesn't show up correctly, please let me know, I've tested it in firefox, chrome and IE.
    Post edited by gaaran on
  • gaaran
    gaaran
    Posts: 740 edited October 2010
    Well, yet another update: I think I have completed the layout I'm going to use going forward, but before I make all the changes, I want to sit on it for a day or two, and see if I think of anything to change, or if anyone else has any new suggestions. I give you the two pages with the layout added:

    "The Main Page":http://www.obsidianportal.com/campaign/melekar/wikis/main-page

    "The Map Room":http://www.obsidianportal.com/campaign/melekar/wikis/Geography

    Thanks for all the help and input guys, couldn't have done it without you. Especially Rase and Sheesh for the two design templates.
    Post edited by gaaran on
  • Curufea
    Curufea
    Posts: 161
    Need to change the semicolon to a colon there :)
  • Duskreign
    Duskreign
    Posts: 1,085
    Sorry this took so long...

    *Jealousy is setting in, Gaaran!* I love it! I want to hug it and kiss it and CENSORED FOR DECENCY it, in fact. However, I tried to implement just one of those fancy codes, and my whole site seemed like it was heading down a dark and stormy road of browser incompatibility.

    Seeing as how I have hundreds of wiki pages to update whenever I change anything even remotely substantial, I'm sitting back and waiting until it seems like everyone doing this new wiki-prettification thing get further along in their own bug-fixing efforts.

    Gaaran, I think that aesthetically, your side bar would look nicer if it was a bit higher, perhaps with the top white line above the first row of text parallel to the top of the campaign banner? Also, since the Chronicler is referring to the side bar as a card catalog, perhaps it should be decorated as such? I don't know how, but you axed for suggestions. Which hurt, by the way. Next time, ask instead. :)
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Dusk, I missed the punnery. I did. I think I went into withdrawl.

    Gaaran, that's amazing. I have a sidebar fix for you. (And as for the 202020 thing, I just did a screencap of the background and edited the photo on pixlr.com No idea if it's actual-factual, that's just what it told me.) Sidebar Fix: To have clickable links on the left of the page: Decrease the size of the "width" div to 10px. I learned this while developing code "here":http://www.obsidianportal.com/campaign/planescape-campaign/wikis/dusktest That'll give you the proper ability to click anywhere you want to do your editing.
  • gaaran
    gaaran
    Posts: 740
    hey rase, thanks for the fix, i've added it to the updated pages :). what does that width div represent then? wait, is it there, be cause it has to have some width, it creates the box in the body of the page, but then you offset the content into the negatives so it isn't actually in that box, which is now an empty frame? am I right (and does that even make sense)? just curious. as for the 202020, when i did a screencap and brought it into photoshop, that's what it told me it was too, but when using 202020, it doesn't match perfectly. it's strange :P

    thanks dusk! I'm actually taking a page out of your book though, as far as content is concerned, Instead of having tons of wiki pages with very little on them, I've going to be making longer wiki pages split into sections. This project is going to take a long time as i'm not just changing the layout, but re-arranging the content as well... but i think it'll be worth it in the end, I already think it looks 10 times better (on my arbitrary scale of betterness).
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Anytime Gaaran! You totally answered your own question. You have to create a box for it to be offset from. It just has to be there, otherwise the offset exists in nowhere. Theoretically you can go with a 1px box and be fine, but I didn't wanna push it. I would be interested in seeing what the differences in your image and the background are. (I see you have taken it down at the mo'). My guess is that the color of your background image is 404040 (When you screencap and compare). I guess this because (from memory) it seemed twice as dark. Which speaks to me of perhaps a .png with an overlay? I'm using a .jpg to get mine to blend in. I could see it having a big issue with .pngs. A transparent png with no background would work fine, for sure.

    I think we need a scale or betterness. It could be measured in Truthiness units, or perhaps Awesomes? Maybe Coolrads, or something suitably nifty. ...I kind of want to go the Duskroute, but It's so haaaaaaaaaaaaard... (Waaah). Mostly, I'm lacking content, so I've been compartmentalizing, to try and make it look like it's more awesome than it really is :P
  • gaaran
    gaaran
    Posts: 740 edited October 2010
    ah, on the main main page, i don't have the side bar i have the links on the main page, but if you go to the first page of the "wiki":http://www.obsidianportal.com/campaign/melekar/wikis/main-page it's still there.

    edit: oh, and i like coolrads, those sound fun
    Post edited by gaaran on
  • gaaran
    gaaran
    Posts: 740
    oh, i see what you mean... odd, i didn't intend for that to no longer be there...
  • RaseCidraen
    RaseCidraen
    Posts: 890
    The ridiculous thing is, I can still right click and view the image. I'm startled and confused.
  • gaaran
    gaaran
    Posts: 740
    I think the "10 px" change made it not appear, as it looks like there's a strip down the side...
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Aha. I see what the issue is. My bad. You can't use a background when you're using the box... So what you've got to do is put it in as an image instead of a background div. That way it'll overflow the div and fit the way you wanted it to.
  • gaaran
    gaaran
    Posts: 740
    is there a div tag for background size? otherwise how do I put it in as an image behind the text? also, i might be taking dusk's suggestions and making it look like a card catalog (good idea, dur :P) in which case that's a moot point.
  • Duskreign
    Duskreign
    Posts: 1,085
    I am thrilled with your card catalog drawers. Absolutely freaking thrilled. I wish I could give your site another five stars on top of the five it had already earned from me.
  • gaaran
    gaaran
    Posts: 740
    Haha, thanks dusk, it was a great idea :).
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Hey gaaran - I can't see the CC for some reason, which I think may be related to me being dumb, but I see the link substitutes. To insert the image, you can just appropriate the code I designed for "Dusk":http://www.obsidianportal.com/campaign/planescape-campaign/wikis/dusktest
  • gaaran
    gaaran
    Posts: 740
    interesting... just to be sure, the campaign home page doesn't have the card catalog on it here: "http://www.obsidianportal.com/campaigns/melekar":http://www.obsidianportal.com/campaigns/melekar

    only the wiki pages do, here and some others: "http://www.obsidianportal.com/campaign/melekar/wikis/main-page":http://www.obsidianportal.com/campaign/melekar/wikis/main-page

    i've tested it in chrome, FF and IE, so i think i'm good...
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Most excellent! I hadn't checked the wiki pages... I'm a bit of a dunce like that. Boo to me. (Sorry, really excited... finally getting my new car back from the Autobody shop!)
  • gaaran
    gaaran
    Posts: 740
    haha, that's awesome :) and thanks again for the help, i think i've (finally) settled on the layout and am not making any more changes to it :P
  • JimTriche
    JimTriche
    Posts: 483
    Holy crap I didn't know you could do that.

    I totally want my tabs to be thematically tied to by banners and backgrounds. I totally don't wanna learn how to do it either. Is there a cheat sheet?
  • gaaran
    gaaran
    Posts: 740
    lol, arsheesh figured it out first, and i just reverse engineered his code. i can give you the code if you like
  • JimTriche
    JimTriche
    Posts: 483
    That would be super.
Sign In or Register to comment.

August 2022
In Over Their Heads

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