Help cleaning up some Code

Dragnmoon
Dragnmoon
edited August 2012 in Campaign Portal Building
Hey hoping I can get some Help in cleaning up some code on my page, I am not a Code guru most of the information I got from Arsheesh on his page "Here":http://www.obsidianportal.com/campaign/age-of-legends/wikis/html-templates-for-age-of-legends.

Here is the page I am working on "Pathfinder Society San Antonio":http://www.obsidianportal.com/campaigns/pathfinder-society-san-antonio

The Code works great on the Home Page, but when I add it to the Wiki Page "I get this":http://www.obsidianportal.com/campaign/pathfinder-society-san-antonio/wikis/main-page which ii all messed up on the placement. I tried adjusting the top placement but it won't go any higher.

Here is the Code I am working with, if any can give me some advice it would be appreciated, I am think I should be placing the page content some where in the code to correct this, but I am uncertain (remember not a code guru ;) . I have been placing the Text originally after the Code.

What I am adding is Navigation Menu Template to go above Default, Custom Background, and a Side Navigation Bar.

Comments

  • Langy
    Langy
    Posts: 364
    The code for the background and the nav menu that replaces the original are both no longer necessary - you can do both with the custom CSS that has recently been released, and it'll automatically apply to all pages.

    The sidebar looks like it should work fine, and I see nothing wrong with it in the page.
  • Dragnmoon
    Dragnmoon
    Posts: 26
    Langy I was just figuring that out, trying to track down the code for that though. Any links to posts that have posted the code for that? And thanks!
  • Langy
    Langy
    Posts: 364
    The background image is easy. Just use this:

    body {
    background-image:url('http://cdn.obsidianportal.com/assets/142346/Seamless_pattern_2.png');
    }

    The tab might require a little work, but it might be _something_ like:

    li .home{
    background-image:url('http://cdn.obsidianportal.com/assets/142545/Home.png');
    border-style:none;
    font-size:0px;
    width:121px;
    height:74px;
    }

    Then do a new one for each of .adventure-log, .characters, .map, etc.

    To be honest, I'm not sure if an image-based tab bar will work with this or not. Experiment!
  • Dragnmoon
    Dragnmoon
    Posts: 26
    I removed the Code from my Main Wiki page.

    Going to search about and see if I can find some advice on these forums on how I can get my Home page look using Custom CSS instead of what I am currently doing.

    If anyone has a link for that, it would be greatly appreciated!

    What I am looking for is CSS code for my Background Image

    CSS code from my Navigation Menu using the images I have and align it with the Campaign Banner

    Side Menu CSS code using the images I have,
  • Dragnmoon
    Dragnmoon
    Posts: 26
    Thanks Langy!
  • Dragnmoon
    Dragnmoon
    Posts: 26
    Ekkk

    When I try to add the background image i Get a Internal Server Error (500)
  • Dragnmoon
    Dragnmoon
    Posts: 26 edited August 2012
    Got the Back ground Image to work, This is what I did

    body{
    background-image: url(http://cdn.obsidianportal.com/assets/142346/Seamless_pattern_2.png);
    background-position:fixed;top:0px;left:0px;z-index:-100;
    background-repeat: repeat;
    background-attachment:fixed;
    }
    Post edited by Dragnmoon on
  • Savannah
    Savannah
    Posts: 188
    I believe you just need

    body{
    background-image: url(http://cdn.obsidianportal.com/assets/142346/Seamless_pattern_2.png);
    background-attachment:fixed;
    }

    The others should be the defaults for background images.
  • Dragnmoon
    Dragnmoon
    Posts: 26
    Yup, that is all I needed.

    Now to figure out how to get my Nave Bar and Side Menu to work in CSS.

    Thanks guys
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Langy (and all other CSS gurus)- Trying desperately to make the image based nav bar work in CSS, but it seems to not be capable. Have tried changing background image to display image, tried 1 tab and whole bar, and cannot seem to make it work. Anyone having any luck here?

    Just trying to help out.

  • Langy
    Langy
    Posts: 364
    Try using:

    li .home{list-style-image:url('http://cdn.obsidianportal.com/assets/142545/Home.png;');
    }

    etc.

    Background image/display image/etc probably aren't supported by list elements. I'm doubtful this will work out all that great, either:/
  • arsheesh
    arsheesh
    Posts: 850
    Huh, I'm behind the times here. At some point I am going to have to look into up-dating my site as well. Thanks for the heads up Langy.

    Cheers,
    -Arsheesh
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Thanks for the try Langy- unfortunately did not work.
    Anyone having any luck with nav bar or side bar images in CSS?
    killervp
    "A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
    "Duskreign's First Ever COTM":http://www.obsidianportal.com/campaigns/wyrmshadow/wiki_pages/112011
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

    PS- Arsheesh, we cannot wait until you come back with a new, phenomenal wiki!!

    Just trying to help out.

  • Langy
    Langy
    Posts: 364
    You could always give the tab-container div a background in order to create something that *looks* a bit like an image link bar, but you'd probably have to settle for using the normal text links. So, for example, you could have that nice paper bit connecting the campaign banner to the link bar, but you'd then have to overlay that paper background with actual text links. Links you aren't using you can just make disappear. This should work out something like:

    div .tab-container {
    background-image:url('image-url-here');
    width:726px;
    height:74px;
    }

    .tabnav{
    display:inline-block;
    width:auto;
    margin:1px auto 34px auto;
    border-style:none;
    background:none;
    }

    .tabnav a:link,.tabnav a:visited,.tabnav a:active,.tabnav a:hover{
    background:none;
    border-style:none;
    color:Maroon;
    font-size:13pt;
    margin:0px 0px 0px 0px;
    padding:0px 7px 0px 7px;
    }

    .tabnav a:hover{
    color:Red;
    }

    .tabnav a.active:link,.tabnav a.active:visited,.tabnav a.active:active,.tabnav a.active:hover{
    background:none;
    border-style:none;
    color:Red;
    font-weight:bold;
    margin:0px 0px 0px 0px;
    padding:0px 7px 0px 7px;
    }

    li .adventure-log {
    display:none;
    }

    etc.

    You might need to play with a few other settings in order to make it work out nicely, and you'll probably want to change the font styling a bit to make it work better for you.
  • tic
    tic
    Posts: 44 edited August 2012
    You've got some tags in that bar, right?

    li .home a {display: block; background-image: url(bla bla bla); width: 100px; height: 30px; font-size: 0px;}

    Block or inline block, not sure which one would be favourable in this situation without playing around with it. Adjust code to suit your background image URL width and height.
    Post edited by tic on
  • Dragnmoon
    Dragnmoon
    Posts: 26
    Langy I Think I can Work with that.

    Though I have a couple of questions.

    "As you can see":http://www.obsidianportal.com/campaigns/pathfinder-society-san-antonio there is a slight space now between the Nav bar image and the Banner, is there a way to ouch the image up?

    Which part of the code can I adjust the Font type?

    Which part of the code can I adjust the Font Size?

    Which part of the code can I adjust the Space between the Nav bar links so I can more evenly space them out?

    Thanks a lot guys you have been extremely helpful
  • tic
    tic
    Posts: 44
    WHITE SPACE: Add/change to your .tab-container DIV:

    Top: -10px;
    Position: relative;

    The top value won't do anything until you set the position :)

    FONTS:

    Set your fonts in ul.tabnav to do them all at once, or in li.home, li.adventure-log, li.wiki, etc etc to set them separately.
  • Dragnmoon
    Dragnmoon
    Posts: 26
    Perfect! Thanks!
  • tic
    tic
    Posts: 44 edited August 2012
    You're so welcome!

    Also, Langy, you're a mad genius. It never would have occurred to me to use the existing nav menu now that we have external CSS control, but it is so obvious and such a fantastically efficient use of the tools! I'm SO excited to bust out the CSS and convert my own alt nav. Won't have time to until probably Wednesday, though, and aaaaaagh the excitement is killing me here.
    Post edited by tic on
  • Dragnmoon
    Dragnmoon
    Posts: 26
    One last thing... Which numbers do I play around with to adjust the Nav links around to spread them apart to make them even across and push them down a bit to make them even up and down?

    And once again guys thanks! I know a few people were looking for this.
  • tic
    tic
    Posts: 44 edited August 2012
    Set a margin value on the individual classes (li.home, li.adventure-log, li.wiki, bla bla bla)

    Something like __li.home {margin: 0 20px;}__ will space the home link out 20 px on its left and right, though it'll leave it alone top/bottom-wise.

    When defining margin...

    Margin: 1px; = top, bottom, left and right are all 1
    Margin: 1px 2px; = top and bottom are 1, left and right are 2
    Margin: 1px 2px 3px; = top is 1, left and right are 2, bottom is 3
    Margin: 1px 2px 3px 4px; = top is 1, right is 2, bottom is 3, left is 4
    Post edited by tic on
  • Dragnmoon
    Dragnmoon
    Posts: 26
    Thanks!

    "It is looking Good":http://www.obsidianportal.com/campaigns/pathfinder-society-san-antonio
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