Parchment Questions

hallnatec

I don't have a ton of html or css experience but I have a basic understanding. I have been trying to get parchment on my wiki (and later Adventure Log), like "Tyellador's":https://tyellador.obsidianportal.com/wikis/main-page and "Morwindl's.":https://morwindl.obsidianportal.com/wikis/main-page

"Here":https://the-island-of-misfit-toys.obsidianportal.com/wikis/pathfinder is what I have been able to do so far. But the top and bottom of the parchment is not aligned with the body. Any help or suggestions would be greatly appreciated.

Further what do I need to do to make the body of the entry wider, much like what they have done?

hallnatec

Actually, it looks like I figured it out. But I am still open to any tips or ideas. Thanks.

GamingMegaverse

The easiest solution is using Gimp or Photoshop, and make the parchment seamless. That way no matter the size there are no seams. Gimp is free, and is what I use.
killervp
"A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
Over 300 Fans, and Looking for More!

Bortas

Looks like you've nailed it to me! Nice work :-)

-bort
"Morwindl":http://morwindl.obsidianportal.com

hallnatec

Thanks. Still figuring out how to use the CSS, but getting there.

Bortas

I find the act of coding easy, but figuring out which tag to use quite a bit more difficult, and editing images the hardest. Sure, I can code like a boss, but look at "Thorvaldr's Tyelledor":http://tyellador.obsidianportal.com/ - it's friggin beautiful - and it was MY inspiration for my campaign!

-bort
"Morwindl":http://morwindl.obsidianportal.com

Unknown

If you are using that particular parchment then you may be interested to know I have been working on making it responsive for mobile users. Right now it is working pretty well, but the right side of the images get cut off (resulting in one smooth side for the parchment). I'll be working to correct that, just been taking some effort, but the new CSS is here:

/* PARCHMENT PAGES */
.parchmentTop {
position:relative;
max-width:100%;
top:25px;
line-height:normal;
background:url(https://db4sgowjqfwig.cloudfront.net/campaigns/57369/assets/377938/Parchment-Body.png) repeat-y;
}

.parchment {
position:relative;
top:-25px;
max-width:100%;
height:38px;
background: url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/412593/top_large.png) no-repeat;
}

.parchmentBottom {
position:relative;
bottom:-18px;
right:-6px;
max-width:99%;
height:38px;
background: url(https://db4sgowjqfwig.cloudfront.net/campaigns/103824/assets/412592/bottom_large.png) no-repeat;
margin-bottom:40px;
}

.parchmentBody {
max-width:100%;
padding: 1px 40px 2px 60px !important;
}
/* END PARCHMENT PAGES */

--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/

Thorvaldr

For an idea of how I went about with the parchment, "here":https://tyellador.obsidianportal.com/wikis/parchment-coding is a guide I wrote a while back. That should give you an idea of how I went about with the CSS and why I did. Also, how I made the parchment in GIMP if you want to make one. (Basically, I followed "this":http://www.instructables.com/id/Making-Images-seamless-horizontally-or-vertically-/ guide.) It works _decently_ with mobile. :P I probably need to allow it to go thinner which Alex's does.

But as Killervp said, GIMP is awesome. Small learning curve, I'm definitely not great with it, but there are tutorials out there for everything!

And I _know_ I had that right-side cutoff problem before... trying to remember how I fixed it. Can't for the life of me. Maybe something to do with padding in one of the higher level classes?

I was about to check my guide to make sure it had my latest code... but apparently my Ascendant membership ran out, so I can't look at my CSS... So, hopefully it's all up to date!

-Thorvaldr
DM of "Tyellador:":https://tyellador.obsidianportal.com/ "CotM April '14":http://blog.obsidianportal.com/tyellador-april-cotm-14/

ikabodo

I've still got some work to do to finish up my CSS but I've managed to create parchment without "on page" html or divs on "my page":https://a-tale-of-blood-and-honour.obsidianportal.com/.

I use the :before and :after codes in css. I takes some fiddling around to get right with some pages, but I'm almost done.

The code looks something like this on the main page, I'm still fiddling around with a few of the settings, so some of the code is probably not needed or leftover from some cut-and paste. I'll post a less dirty version later if people want it.

@.wiki-page {
background-color : transparent;
background-image: url(http://my.page.com/parch_3.png);
background-position:center;
background-size:100%;
position:relative;
}@

@.wiki-page:after, .wiki-page:before{
background-color : transparent;
background-size:100%;
position:absolute;
background-repeat:no-repeat;
background-width:100%;
left:-2px;
width:100%;
height:34px;
content:"";
}@

@.wiki-page:before{
background-image: url(http://my.page.com/parch_3_top.png);
top:-14px;
background-position: center center;
}@

@.wiki-page:after{
background-image: url(http://my.page.com/parch_3_bottom.png);
bottom:-14px;
background-position: center center;
}@

Thorvaldr

ikabodo! That is brilliant! I never thought of using the :before and :after tags with this! I have spent hours upon hours trying to figure out how to do something like that! And I've even used those tags for other parts of the wiki... that makes everything _SO_ much cleaner! Thank you for sharing that!

-Thorvaldr
DM of "Tyellador:":https://tyellador.obsidianportal.com/ "CotM April '14":http://blog.obsidianportal.com/tyellador-april-cotm-14/

SkidAce

Wow...I might need a tutorial...but I think I understand.

Bortas

Holy moly, that blows my mind... duh! When presented with the obvious. And would save so so much coding on each individual page. Nice job!!

-bort
"Morwindl":http://morwindl.obsidianportal.com

ikabodo

Thanks. Glad you guys like it. :D

I have done some adjustments to the code, mainly added the character and the items pages. Again, there are probably some tags that aren't needed left over from experiments, I'll clean it up later.

@/* THIS SETS THE BASIC BACKGROUND FOR THE PAGES AND ADJUSTS THE WIDTH */
.wiki-page, .wiki-edit, .post-main, .character-show .main-content section, .item-show .main-content section{
background-color : transparent;
background-image: url(http://my.page.com/parch_3.png);
background-position:center;
background-size:100%;
position:relative;
}@

@/* THIS SETS THE BASE SETTINGS FOR THE BEFORE AND AFTER TAGS */
.wiki-page:after, .wiki-page:before, .character-show .main-content section:after, .character-show .main-content section:before, .item-show .main-content section:after, .item-show .main-content section:before{
background-color : transparent;
background-size:100%;
position:absolute;
background-repeat:no-repeat;
background-width:100%;
left:-2px;
width:100%;
height:34px;
content:"";
background-position: center center;
z-index:10;
}@

@/* THIS SETS ADDS THE PICTURE AND ADJUSTMENT FOR THE TOP PARCHMENT */
.wiki-page:before, .character-show .main-content section:before, .item-show .main-content section:before{
background-image: url(http://my.page.com/parch_3_top.png);
top:-14px;
}@

@/* THIS SETS ADDS THE PICTURE AND ADJUSTMENT FOR THE BOTTOM PARCHMENT */
.wiki-page:after, .character-show .main-content section:after, .item-show .main-content section:after{
background-image: url(http://my.page.com/parch_3_bottom.png);
bottom:-14px;
}@

Unknown

Very awesome indeed. I am now running a modified variation of this on my own Campaign, just need to go through and clear out some pointless divs around the place but it is looking pretty nice for what I was shooting for now. I need to clean my CSS up a bit more before posting it back up again, but by doing so it will become more of a CSS template since it will be very refined for my specific page to get the most efficient loading possible.

Thanks again on this one, great to see some community work on getting things a bit more responsive for the mobile age.

--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/

ikabodo

Looks great! Glad it works for others as well.

I'm still working on the over-view page for characters and items.

Unknown

Yea, characters is an area I have not done a whole heck of a lot with yet to get it looking nice. That will likely be the next area I dig into.

--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/

Bortas

That is a really great update, thanks tons!

-bort
"Morwindl":http://morwindl.obsidianportal.com