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?
Comments
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!
Just trying to help out.
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
/* 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/
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/
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
DM of "Tyellador:":https://tyellador.obsidianportal.com/ "CotM April '14":http://blog.obsidianportal.com/tyellador-april-cotm-14/
Unconquered Kingdoms, July 2016 CotM
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
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;
}@
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/
I'm still working on the over-view page for characters and items.
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018