Update to Custom Campagin Background Images

arsheesh
arsheesh
edited January 2012 in Campaign Portal Building
Hey all,

Some of you know about and are using the code I've listed "here":http://www.obsidianportal.com/campaign/age-of-legends/wikis/html-templates-for-age-of-legends for uploading your own images to be used as custom background skins/wallpapers. Well, if so you may have noticed at least one bothersome aspect of using this code: you need to manually enter in the height (in px) that you want the background image to display at. This may not be a problem if all of your pages are roughly the same height, but if you are given to writing long adventure logs for instance, then you may find yourself constantly having to adjust the height in the code of each page. I had initially set the height within the code of my pages between 4,500-8,500px, thinking that this would give me sufficient room for page length. However I never counted on having the "Fans" section of my site fill up so much that it extended my page length beyond that of the default px height. So now I'm having to go through once more and change the code on each page so that the background image extends to the bottom of the page. To prevent having to do this again however, I've altered the code to the following:



By setting the "height" to 100% and changing the "position" to "fixed", your background image will now always extend to the bottom of the page, regardless of the height of that page. I don't know how helpful this will be, and some of you probably are already aware of this trick, but I thought I'd just throw it out there for anyone who isn't aware of it.

Cheers,
-Arsheesh

Comments

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,966
    Thanks again Arsheesh... I am aware of that now, but not willing to go through all 500 pages to edit. I am sure eventually it will bug me enough.
    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

    Just trying to help out.

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,966
    Bump on this and a suggestion- how about getting this added to the FAQ page?

    Just trying to help out.

  • Invictus
    Invictus
    Posts: 54
    this tip was super useful for me.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,966
    Here is a bump because I referred someone to it yet again....
    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/

    Just trying to help out.

  • dlaporte7271
    dlaporte7271
    Posts: 94
    OOOO...that looks enticing...I knew I'd seen a discussion about custome backgrounds SOMEWHERE before. Thanks for the bump. I'm assuming that this code goes at the top of EVERY page? Any tips on choosing/creating a background image? I seem to recall another post re size and avoiding stretched/skewed/pixelated backgrounds. Also, any cautions for adding this without affecting other elements on the pages?

    dlaporte
    "violent skies":http://www.obsidianportal.com/campaigns/violent-skies
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,966
    Yes, it goes on every page, but not necessarily at the top (I put it after the verbage before my buttons at the bottom personally). Yes, you should use either a huge image or something made seamless that looks good repeated.
    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/

    Just trying to help out.

  • dlaporte7271
    dlaporte7271
    Posts: 94
    Any specific dimensions to consider? Whats the minimum for hugeness?
  • arsheesh
    arsheesh
    Posts: 850
    Been away for a bit and just saw that this received some more attention. I didn't put it in the FAQ initially because (a) I've already got a link to my wiki templates there, and (b) there wasn't room enough in the FAQ to add much more. However, now that I've created more space there, and because it seems there is ongoing interest in this, I'll go ahead and move it into the FAQ.

    Cheers,
    -Arsheesh
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,966
    Thanks Arsheesh. Been having a # of people ask, and your template goes across your page, so it is a little hard to see

    Just trying to help out.

  • Job
    Job
    Posts: 24
    I'm not sure what the minimum size of a background image is, but I recently loaded the background image for my portal at 1700 (width) X 750 (height) that fills just a bit more than the actual screen size, so the minimum size is probably a little smaller. I run my PC screen resolution at 1920 X 1080, in a 16X9 format.

    Job.
  • Jp12x
    Jp12x
    Posts: 9
    I'm still trying to get better with OP. What am I doing wrong here?
  • Jp12x
    Jp12x
    Posts: 9
    Somehow, logging in again has fixed the issue?
  • Coppermane
    Coppermane
    Posts: 7 edited June 2012
    I am having a dickens of a time trying to get the Custom Background Borders to work on my page. I liked the look of the leather on the Age of Legends page so I wanted to test out a black leather theme on mine, but it is not working.

    Is it because I am running on the Textile 4 instead of Textile 3?

    I've been trying to find an answer, but to no avail.
    Post edited by Coppermane on
  • Jp12x
    Jp12x
    Posts: 9
    On one of my pages (http://www.obsidianportal.com/campaigns/world-of-darkness-reloaded), I used the following code for a background:




    I introduce it with a
    to make it a bit cleaner or more organized looking. As far as I know, the Textile isn't an issue.
  • Coppermane
    Coppermane
    Posts: 7
    Let's pretend like I've never coded anything ever.

    What do you mean when you say you introduced it?

    Did you put the
    at the top of the page or right before the
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,966
    They are not silly questions. I just visited your 2 sites, and saw no custom background. Are you cutting and pasting the code? If you are, it will never work. The forums change the quote style, and therefore change the code. If after you change the quotes you are still having issues, feel free to send me a pm and I will work through it with you.
    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/

    Just trying to help out.

  • Coppermane
    Coppermane
    Posts: 7
    Oh frabjous day!
    It works!

    For the record, I did everything you had said already. I read the posts. I copied the code. I changed the quotes.
    I tried it in Textile 3 and 4. I tried posting it, signing off, and then signing back on to see if it refreshed.
    None of that worked.

    You know what worked?
    Using a picture from another file.

    So it wasn't the code that was the problem. It was a problem with my image link.

    Thank you all for helping with this. I really do appreciate it and I'll probably be back with more questions.
    I'm still learning. =)
  • Jp12x
    Jp12x
    Posts: 9
    FYI:

    Chunks of code start with a div style and end with a /div. If you start the div on a new line and put the /div on its own line, you can make things easier to read.


    is a "break". It just skips a line and doesn't affect the look of the page most of the time. I like to use it to make a big gap in the code to make sections more obvious. You can have an empty line, then a break, then another empty line. You can do it more if you want. So, my main page code has text, then a gap with a break, background code, a gap, then sidebar code.

    Code spacing example:

    h1. Goal
    The World of Darkness is a long-established game setting. Veterans of the setting may often guess critical plot elements and lose the sense of mystery and unease which can be integral to the novice's enjoyment of the game. The New World of Darkness setting allowed enough change to ameliorate some of this. With new races, societies, conspiracies, and struggles, World of Darkness: Reloaded aims to change everything you know about the setting while keeping the feelings the same.
  • Ceronomus
    Ceronomus
    Posts: 5
    What I cannot figure out is how to set the custom background on the Characters, items, forums, Calender, and Maps pages. Home, Adventure Lag, Wiki, and comments I have figured out, but I just cannot figure out where to insert the code on these other pages...
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,966
    This is why many of us went wiki only! Do it now, before there is too much information. Please send me a PM if you need help.
    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/

    Just trying to help out.

  • Jp12x
    Jp12x
    Posts: 9
    You can only add backgrounds to pages that allow an entry. So, no custom on the main characters page. You can, however, enter an image on a character's page. Put the code in description or biography.

    Here's an example of an image on a char page (it's ugly but just for show).
  • Jp12x
    Jp12x
    Posts: 9
    http://www.obsidianportal.com/campaigns/world-of-darkness-reloaded/characters/yoyo-booboo
  • AnonymousOne
    AnonymousOne
    Posts: 20
    Neeto, I was wondering how people were doing this. I have a background image up now but I'll continue to play with various images in photoshop CS.

    Now I just need to convince the DM to let me redo the sidebar and try to figure out how to turn the text into links like Arsheesh has.

    Do you save an image as a backgroundless .gif file and then insert it using the code in his FAQ?
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,966
    Please check out the wonderful "Unofficial FAQ page":http://forums.obsidianportal.com/comments.php?DiscussionID=1114&page=1 or my own "Site Appearance":http://www.obsidianportal.com/campaign/a-god-rebuilt/wikis/site-appearance-and-how-we-role page.
    To directly answer Anonymous most of us save the pictures directly to OP.
    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/

    Just trying to help out.

  • AnonymousOne
    AnonymousOne
    Posts: 20
    "To directly answer Anonymous most of us save the pictures directly to OP."

    Except that is you're not a premium member then OP limits the total upload space.

    I'm trying to push this as far as possible without my DM having to cough up extra cash. However the FAQ looks interesting and I'm sure I'll be spending lots of time digging through it see what I want/can use.

    As always Thanks Killer! You're my HTML/CSS muse.
  • AnonymousOne
    AnonymousOne
    Posts: 20
    Hey guys... just a quick update. I used .png images of text created in Photoshop, saved to a third party hosting service, and linked back.

    Here you can take a look at the new homepage. Still lots of updates to come:

    http://www.obsidianportal.com/campaign/the-lost-continenta/wikis/home-page

    Thoughts?
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,966
    Here is a link to "The Lost Continent":http://www.obsidianportal.com/campaign/the-lost-continenta/wikis/home-page
    Definitely coming along! Good work!
    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/

    Just trying to help out.

  • twiggyleaf
    twiggyleaf
    Posts: 1,911 edited July 2012
    Hey Anonymous One

    For what it's worth, that's what I did. I like the way you have two different styles of Navigation Bar, according to where you view it from.
    Site is looking good and navigation is easy, which is always a great help!


    twiggyleaf
    "Shimring - The Faces of Divinity":http://www.obsidianportal.com/campaigns/shimring
    (a multiplanar 3.5 D&D campaign)
    Post edited by twiggyleaf on

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • AnonymousOne
    AnonymousOne
    Posts: 20
    Thanks for the props Killervp. You've been holding my hand through a lot of the HTML.

    And twiggy, I hate to burst your bubble but ALL of the side navigation bars are getting changed but I'm not going to go back in and do that until I get the Navigation bar that runs across the top of the page taken care of. I'm current;y trying to work out how to build what I need in Photoshop.

    So basically I have two kinds of Sidebars right now because I don't want to have to go back through ALL of the pages to put the new nav code in. Essentially, I'm trying to measure twice and only have to copy/pasta the code in one go all the way through the site.

    I also got the banner up on the site, I think it looks good, we just need a sexy layout for our homepage.

    Ugh ... so much frackin' work to do.

    And of course our DM is buried in backlog for the adventure log.... Sigh ... No rest for the Chaotic Neutral.

    "Urda: The Lost Continent":http://www.obsidianportal.com/campaigns/the-lost-continenta
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