WolfLord
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
Comments
Unconquered Kingdoms, July 2016 CotM
- Kallak
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
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
(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;
}
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
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/
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
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.
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
"Age of Heroes":https://heroes-of-hellas.obsidianportal.com/
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
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
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
-SkidAce
"Alfaysia - campaign hub":https://alfaysia.obsidianportal.com/
"Unconquered Kingdoms - current campaign":https://unconquered-kingdoms.obsidianportal.com/
Unconquered Kingdoms, July 2016 CotM
Thanks Skid! Basileuse and Madartiste get 100% cred though haha. Front page looks great at least even if i dont figure this anomaly out
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
Edit: What browser and version are you using? Don't think it would cause that particular problem, but worth checking.
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
@.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).
(Here's a "Screenshot":http://i1233.photobucket.com/albums/ff386/danbadour/examp_zps9e717a31.png in case you aren't seeing the same thing)
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
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?
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
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.
"Age of Heroes":https://heroes-of-hellas.obsidianportal.com/
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
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
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/
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011
Code looks fine. Maybe the image source? Could try uploading it to OP instead of the third party.
DM, Current Campaign: The Godlands: Rise of the Blood Moon Kings
DM, Previous Campaign: Avatar: Conquest of the Imperial Order - CotM: November 2011