Campaign custom side boarders?

WolfLord
WolfLord
edited February 2014 in Campaign Portal Building
Alright people im asking a lot from you wizards this time...

Is there any way to have an image be placed along the edges of the content part of all the pages on your site, outside of the content box? My goal is to take the image of a Greek Column, split it in half, and have one half on each side of the page (and have this be replicated throughout my campaign...) The campaign i am trying to accomplish this on is Age of Heroes, but alas i have roughly ZERO css knowledge haha. Is such an idea possible to implement?

"Age of Heroes":https://heroes-of-hellas.obsidianportal.com/
"Avatar: Conquest of the Imperial Order":https://avatar_adventures.obsidianportal.com/
"COTM November 2011":http://blog.obsidianportal.com/november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order/?utm_source=rss&utm_medium=rss&utm_campaign=november-11-campaign-of-the-month-avatar-conquest-of-the-imperial-order
«1

Comments

  • SkidAce
    SkidAce
    Posts: 830
    I only know how to do it as a picture/background "inside" the content. Outside is beyond me.
  • Kallak
    Kallak
    Posts: 1,090
    You should be able to accomplish this without too much difficulty. I think worst case scenario you'd be looking at having to alter the background position.
    All the best,
    - Kallak
  • WolfLord
    WolfLord
    Posts: 278
    Hmmm yeah i will see what i can do... the only thing i THINK i could figure out is getting it inside the content box given my lack of CSS experience haha. Let me know if you guys come up with anything for getting a tall image to run alongside the content on either side. (with a top and bottom image for each at the ends)
  • madartiste
    madartiste
    Posts: 328 edited February 2014
    It might be possible to give the main-content div the background and then make the actual content slightly smaller and centered. For instance, the front page content seems to be contained inside .campaign-landing-page-container .wiki-page section while the content for the character page is in .character-list.

    I know you can also basically stack background images within an item, so you could try specifying the location of those as top right and top left and making them repeat vertically... ("https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds":https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds )

    Another option would be to make use of CSS's border image property: "http://www.w3schools.com/cssref/css3_pr_border-image.asp":http://www.w3schools.com/cssref/css3_pr_border-image.asp
    Post edited by madartiste on
  • WolfLord
    WolfLord
    Posts: 278
    http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-image

    (Apologize for my lack of CSS knowledge disclaimer...) So what would you do (assuming it can be done) to put this on the page. this is from one of the links you sent me it basically would stretch one image around the page if i am not mistaken

    #myDIV
    {
    border:15px solid transparent;
    width:250px;
    padding:10px 20px;
    border-image:url(http://i1233.photobucket.com/albums/ff386/danbadour/greek-columns-background-eps-15898311_zps6c748eb4.jpg) 30 30 stretch;
    }
  • madartiste
    madartiste
    Posts: 328 edited February 2014
    I'm going to be honest and say I've never actually tried using border-images myself. I was just tossing out ideas for ways it could be done. I think theoretically that's what it's supposed to do, but you might need to alter some of the dimensions to get it to look correct. For instance, you might want to stretch the top and the bottom part and repeat the sides.
    I think this might be better tutorial and explanation than I can give currently: "http://css-tricks.com/understanding-border-image/":http://css-tricks.com/understanding-border-image/
    Post edited by madartiste on
  • WolfLord
    WolfLord
    Posts: 278
    Alright this is proving more difficult then i wanted... would it be easier to do slender columns inside the content along each side?
  • madartiste
    madartiste
    Posts: 328
    Tolsimir, it probably would indeed be easier. You could probably give #main-content the columns as background images that repeat vertically. If you give #main-content the right amount of left and right padding it should make sure that the content stays inside the columns.
  • Basileus
    Basileus
    Posts: 585 edited February 2014
    The various iterations of the border-image property seem to behave wildly differently between browsers and always seem to do some sort of distortion, but after a bit of testing this is what I got...

    This is a simple, one-line job that does a reasonable job on the current versions of browsers (except Safari, which seems to handle border images completely differently and requires specifying the -webkit-border-image with different values to get it to behave nicely).

    @.campaign-public-layout .main-content-container {border: 32px solid transparent; border-image:url(//db4sgowjqfwig.cloudfront.net/assets/300019/fullborder.png?1393289817) 64 64 64 64 round;}
    @

    This will automatically cut out the middle and tile the edges. It will cause some sort of distortion (which varies depending on browser). You can also use images with transparency if your background texture is something you want to show through. The "border" property determines the size of the border you create, and the values in the "border-image" property should then be adjusted to make your image fit appropriately.

    You can also play with these for better browser compatibility (but I found them to be more trouble than they are worth):

    @-o-border-image /* OPERA */
    -webkit-border-image /* SAFARI */
    -moz-border-image /* MOZILLA */
    @

    I messed with a tiling image a bit, but the results weren't much better.

    ---

    @Tolsimir: The image in the example above is a scaled version of the sample one you provided. If you copy that image to your campaign, you should be able to just copy and paste the above code (replacing the URL) into your CSS to get the effect you want. I'll leave the image uploaded in my campaign for a while if you just want to copy the code to see the effect before going to the trouble of setting it up in your campaign.

    ---

    ***EDIT: You could also set the "border-image-outset" property and adjust the border width to make the border extend outside your content area.
    Post edited by Basileus on
  • WolfLord
    WolfLord
    Posts: 278
    You rock Basileus, working on getting it to fit around my content right now
  • WolfLord
    WolfLord
    Posts: 278
    YES!!! Got everything working on my end, does it fit right for you guys?

    "Age of Heroes":https://heroes-of-hellas.obsidianportal.com/
  • WolfLord
    WolfLord
    Posts: 278 edited February 2014
    oh weird... actually seems like i can only get it to work when i change "main-content" to "campaign landing page". For campaign landing page i can totally get it to work (albeit only on the home page) but when i do main-content like your code it floats off to the left

    Edit: i checked to see if this was caused by other CSS i have but even after deleting everything except this it still floats off to the left of the content
    Post edited by WolfLord on
  • SkidAce
    SkidAce
    Posts: 830
    Looks Great!

    -SkidAce
    "Alfaysia - campaign hub":https://alfaysia.obsidianportal.com/
    "Unconquered Kingdoms - current campaign":https://unconquered-kingdoms.obsidianportal.com/
  • WolfLord
    WolfLord
    Posts: 278
    Here is a "screenshot":http://i1233.photobucket.com/albums/ff386/danbadour/example_zps1ad32a0e.png with the difference between doing "main-content" and "campaign-landing-page"

    Thanks Skid! Basileuse and Madartiste get 100% cred though haha. Front page looks great at least even if i dont figure this anomaly out
  • Basileus
    Basileus
    Posts: 585 edited February 2014
    Huh... I will have to think about that. Didn't get anything like it when I was testing - that line alone did the trick for the wiki and front page. Maybe I had some other CSS that was preventing that, and just wasn't aware of it.

    Edit: What browser and version are you using? Don't think it would cause that particular problem, but worth checking.
    Post edited by Basileus on
  • WolfLord
    WolfLord
    Posts: 278
    Newest version of chrome i believe. If you want i could make you co-gm if you wanted to fiddle around with my code, idk what it could be since i tried getting rid of everything else as well
  • Basileus
    Basileus
    Posts: 585 edited February 2014
    Should look better now. Basically there are a couple extra properties of OP default code that shift the positioning around when the "collapsed-nav-row" option is enabled. So I just needed to add an extra line to force the positioning back to normal (but leave the collapsed nav row. All in all you end up with the original border-image code:

    @.campaign-public-layout .main-content-container {border: 32px solid transparent; border-image:url(//db4sgowjqfwig.cloudfront.net/assets/300019/fullborder.png?1393289817) 64 64 64 64 round;}@

    Plus a line to force the collapsed navrow positioning back to normal:

    @.collapsed.collapsable-nav-row .main-content-container {width: 70%; left: 5.06em; padding-left: 0em;}@

    This did interact with one other part of your custom CSS that had set the width by pixels, so I changed it to percentage (percentages usually work better than raw pixels anyway). The code is just a few lines up and now looks like this:

    @.campaign-public-layout .main-content-container {width:100%; padding: 0px;}
    .campaign-public-layout .campaign-landing-page-container {width:100%; padding: 0px;}@

    Take a look and let me know if it is what you are looking for? I'm not at home so don't have access to the "big five" browsers at the moment, just IE.

    ---

    EDIT: If you want to expand the width of your content area now, you can also replace these lines:

    @.campaign-public-layout .section {width:730px;}
    .campaign-public-layout .post-main {width:730px;}
    .collapsed.collapsable-nav-row .main-content-container {width: 70%; left: 5.06em; padding-left: 0em;}@

    With these:

    @.campaign-public-layout .section {width:100%;}
    .campaign-public-layout .post-main {width:100%;}
    .collapsed.collapsable-nav-row .main-content-container {width: 75%; left: 5.06em; padding-left: 0em;}@

    Should give you a nice little chunk of extra room (uses up what is currently just dead space between the main content and the sidebar).
    Post edited by Basileus on
  • WolfLord
    WolfLord
    Posts: 278
    Yeah it looks great! The only thing seems to be it is dropping down below the edge of the white on the bottom instead of hugging the edge like before, but that is a very minor issue compared to before with it being off to the side. Would that be caused by something else I have in my CSS? if so i could probably get rid of whatever is causing the conflict.
    (Here's a "Screenshot":http://i1233.photobucket.com/albums/ff386/danbadour/examp_zps9e717a31.png in case you aren't seeing the same thing)
  • WolfLord
    WolfLord
    Posts: 278
    Oh awesome, yeah i wanna try and kill as much of that dead air as possible haha. The more room for pics and content the better!
  • Basileus
    Basileus
    Posts: 585 edited February 2014
    Agh, margins! And some extra sections at the bottom that don't have background-colors set (page footers, GM only section, etc...)

    Okay, extended background color to the whole main-content-container, and set a border on the GM Only sections to they are still distinct.

    How does it look now?
    Post edited by Basileus on
  • WolfLord
    WolfLord
    Posts: 278
    PERFECT!!! You sir are a wizard
  • WolfLord
    WolfLord
    Posts: 278
    If anyone is reading this we now have fully working border image code haha, tip your hats to Basileus gents
  • Basileus
    Basileus
    Posts: 585 edited February 2014
    Awesome!

    Guess we have IE and Chrome covered. If someone with Mozilla, Opera, and/or Safari could confirm if/how the other browsers look, that would be good (or I can confirm when I get back home). I don't expect Safari will behave nicely, but the others should.

    Removed myself from the campaign. Everything still looks kosher as a non-member/non-DM.
    Post edited by Basileus on
  • Savannah
    Savannah
    Posts: 188
    Page borders look fine in Firefox. (Your left navigation menu is 90% off screen for me, though -- this is an issue with my computer, as it does it to all left navigation menus people've added to their OP sites, but I wanted to let you know in case you have something important there, as it may not be visible to everyone.)
  • madartiste
    madartiste
    Posts: 328
    Man, that border looks sharp! I like it. I really need to play with that at some point myself.
  • WolfLord
    WolfLord
    Posts: 278
    Yeah one of my players has the nav menu a little off too Sav, he just zooms out a little when on the wiki, thanks for the info though! I think I should be okay ive got the little nav bar up top as a backup haha. Yeah man it is looking awesome thanks so much again for the help Basileus!!!!

    "Age of Heroes":https://heroes-of-hellas.obsidianportal.com/
  • Maesenko
    Maesenko
    Posts: 325
    I'm taking a look at that screenshot you posted a while back, Tolsimir, and I'm not seeing any borders on my end. Did you remove the border work?
    The banner is also overflowing or something. I'm seeing it cut off on the top and bottom.

    Everything else looks good. Love the fonts!

    _~Mae_
    "Whispers in Tamris":https://whispers-in-tamris.obsidianportal.com/

    ~Mae

    CotM Selection Committee

  • WolfLord
    WolfLord
    Posts: 278 edited February 2014
    Really? No both the screenshots i posted show borders for me, they were just orange at the time. I got everything working good now though we solved all the issues :) Yeah the fonts are awesome! I have MorganWilliams to thank for the Greek looking one i found that through his campaign "Scion":https://scion-taking-it-to-the-titans.obsidianportal.com/

    Edit: Does everything look good border wise for you when you look at my page now? Not the screenshots? If anything looks off throw a screenshot up of how it looks for you and let me know what browser you are using if you dont mind
    "Age of Heroes":https://heroes-of-hellas.obsidianportal.com/
    Post edited by WolfLord on
  • Basileus
    Basileus
    Posts: 585
    Negative on the border for me at the moment (IE 11).

    Code looks fine. Maybe the image source? Could try uploading it to OP instead of the third party.
  • WolfLord
    WolfLord
    Posts: 278
    Alright how about now? I uploaded the image to OP and put that in the code
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