Thanks Killervp! One more page I do not know of your giant size campaign!
-Pils
Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Dark Sun / La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova
I include too the CCS coding I use under my site, it's "HERE":http://www.obsidianportal.com/campaign/dark-sun-a-trova/wikis/codes-css
-Pils
Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Dark Sun / La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova
Use gimp to make seamless, or to stretch- or use paint to stretch. GIMP is free!
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/
Or you can use the CSS property background-size.
"Here's some info on that":http://www.w3schools.com/cssref/css3_pr_background-size.asp
If you use cover or contain it will size it to fit the entire screen. Contain can cause it to change the aspect ratio of the image and older browsers don't all have support for this feature. Just make sure you pick a large enough image that it won't pixelate at large screen sizes.
A-ha! (background-size:cover;) is what I was looking for.
Now, what if I wanted it to look like text was written on a scroll? Can I use a scroll image and set borders for the text or should I instead use one image for the background of the scroll and somehow add a header and a footer that are the furled ends of the scroll?
Are you planning on using the scroll as the background for your entire page? If so, wouldn't recommend cutting the image up. It would be hard to make it stretch properly... It would probably be easier to just to set some padding on your content.
If you want the scroll for just a particular section, it's not too hard to do:
background-image: url(URL FOR TOP IMAGE),
url(URL FOR BOTTOM IMAGE),
url(URL FOR MIDDLE IMAGE);
background-position:center top, center bottom, center top;
background-repeat:no-repeat, no-repeat, repeat-y;
Make sure that you go top, bottom, middle for the order, though, or the middle image will cover the bottom.
"If you take a look at this page":http://www.obsidianportal.com/campaign/sanction/wikis/templates-and-tools and scroll down to the section with the large parchment template, you can download or view the three files separately and get an idea of how you can make your three images blend together seamlessly.
What was the final call on making the obsidian portal logo at the top of the page a transparent gif or png file? I see that chainsaw posted a transparent gif on page 2, but no posts since on the topic. I'm hopeful because some serious code's been done since then and this is a relatively minor correction in comparison by my assumption.
Hey did something change on the css processor today? I have code that's been working for a while and stopped today. I inspected the page code and its changing all apostraphes to ' so its breaking background tags with the url('whatever.jpg') value
I am having the same issue with my Google Fonts and background images. I submitted a support ticket.
Thought I was going crazy.
Edited To Add Ticket Link
For any one else having this issue here is the ticket: http://help.obsidianportal.com/discussions/problems/7886-google-font-issue
So I setup campaign using many of the techniques that I learned about in this thread. "Valdorian Age":http://www.obsidianportal.com/campaigns/valdorian-age-rising-power-on-the-frontier But the background parchment seems to be gone...
Huh. You're right. No idea why the wiki-page-main-page ID is on its own special DIV inside the campaign-content area rather than the body of the page; would make much more sense up there along with the wiki-page class.
Ok...so really like the idea that I can use CSS to do some basic things globally to replace some of the coding that needs to be continuously duplicated to format new pages etc.
I snagged some code from "Pils":http://forums.obsidianportal.com/account.php?u=44745 to change the backgrounds (thanks!), cuz now I don't have to enter that background code EVERYWHERE!
So now, I have a couple of things I'd like to accomplish next:
1. Wipe out the stock navtabs (looking back through this thread I see someone already presented a line of code for that). I'm not clear on exactly how the code must be organized yet. Do things need to be in any particular order in the CSS box?
2. Change fonts and font colors for text and links so they show up better against my blue background. I know how to do this for individual wiki pages...but for the pre-existing links on the adventure logs and forums etc, I have know idea how/if it can be done. Also, can I declare a default font for ALL content using CSS? If so, are there special circumstances that require specific code ie. adventure log page/forum page etc. Can I also declare a default font and color for the various links I create?
If you pop onto the site and take a look at the adventure logs you'll see how the black text, and the little boxes for switching to newer and older logs, really don't show up well against the background. I really like the background, so I'd prefer to change the text if possible.
Any direct advice or help is greatly appreciated...also...where to go to do a little self-teaching would be cool.
Don't hesitate to pm me (or other GMs) if you want some advices or precisions. I learned how to use CSS with the help of many from OP: Wolfhound, Lord Ao, Milkawel and Kallak.
You could also install Firefox, who has a page inspector tool that you can use to examine the structure and layout of a page.
-Pils
"Dark Sun -- La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova: Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Al-Qadim -- Golden Voyages":http://www.obsidianportal.com/campaigns/aq-golden-voyages: Who Among you Dares to Challenge the High Seas?
Comments
-Pils
Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Dark Sun / La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova
-Pils
Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)
Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!
(And I'm so soooorry for my poor english...)
-Pils
Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Dark Sun / La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova
-Pils
Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)
Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!
(And I'm so soooorry for my poor english...)
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.
"Here's some info on that":http://www.w3schools.com/cssref/css3_pr_background-size.asp
If you use cover or contain it will size it to fit the entire screen. Contain can cause it to change the aspect ratio of the image and older browsers don't all have support for this feature. Just make sure you pick a large enough image that it won't pixelate at large screen sizes.
Now, what if I wanted it to look like text was written on a scroll? Can I use a scroll image and set borders for the text or should I instead use one image for the background of the scroll and somehow add a header and a footer that are the furled ends of the scroll?
If you want the scroll for just a particular section, it's not too hard to do:
background-image: url(URL FOR TOP IMAGE),
url(URL FOR BOTTOM IMAGE),
url(URL FOR MIDDLE IMAGE);
background-position:center top, center bottom, center top;
background-repeat:no-repeat, no-repeat, repeat-y;
Make sure that you go top, bottom, middle for the order, though, or the middle image will cover the bottom.
"If you take a look at this page":http://www.obsidianportal.com/campaign/sanction/wikis/templates-and-tools and scroll down to the section with the large parchment template, you can download or view the three files separately and get an idea of how you can make your three images blend together seamlessly.
.post-time {
opacity: 0;
}
But I'd like to recover the space where the post-time is located. Is there a better way to actually delete/ignore the whole post-time entry?
Heroes Unchained: CotM 2013
- Kallak
Heroes Unchained: CotM 2013
What was the final call on making the obsidian portal logo at the top of the page a transparent gif or png file? I see that chainsaw posted a transparent gif on page 2, but no posts since on the topic. I'm hopeful because some serious code's been done since then and this is a relatively minor correction in comparison by my assumption.
#logo h1 a {
background-image: url('/images/logo_transparent.png');
}
Age of the Dragons - Homebrew Fantasy | Edurance of Hope - Age of Rebellion
Nominate a Campaign for Campaign of the Month!
Thought I was going crazy.
Edited To Add Ticket Link
For any one else having this issue here is the ticket: http://help.obsidianportal.com/discussions/problems/7886-google-font-issue
Just trying to help out.
Age of the Dragons - Homebrew Fantasy | Edurance of Hope - Age of Rebellion
Nominate a Campaign for Campaign of the Month!
Help.
Just trying to help out.
Just trying to help out.
Thanks for getting this fixed so quickly.
.page-title {
display: none;
}
Heroes Unchained: CotM 2013
#wiki-page-main-page .page-title {display:none;}
I snagged some code from "Pils":http://forums.obsidianportal.com/account.php?u=44745 to change the backgrounds (thanks!), cuz now I don't have to enter that background code EVERYWHERE!
So now, I have a couple of things I'd like to accomplish next:
1. Wipe out the stock navtabs (looking back through this thread I see someone already presented a line of code for that). I'm not clear on exactly how the code must be organized yet. Do things need to be in any particular order in the CSS box?
2. Change fonts and font colors for text and links so they show up better against my blue background. I know how to do this for individual wiki pages...but for the pre-existing links on the adventure logs and forums etc, I have know idea how/if it can be done. Also, can I declare a default font for ALL content using CSS? If so, are there special circumstances that require specific code ie. adventure log page/forum page etc. Can I also declare a default font and color for the various links I create?
If you pop onto the site and take a look at the adventure logs you'll see how the black text, and the little boxes for switching to newer and older logs, really don't show up well against the background. I really like the background, so I'd prefer to change the text if possible.
Any direct advice or help is greatly appreciated...also...where to go to do a little self-teaching would be cool.
Thanks!
dlaporte7271
"Violent Skies":http://www.obsidianportal.com/campaigns/violent-skies
1. If I understand, you want to catch the original navtab ? (excuse my poor english...). I use this code for wipe out the calendar tab:
li.calendar {display:none;}
You have to make that for each tabs.
2. Here others codes I use for fonts and links:
/* FONTS */
#campaign-content {font-family:Underdog;text-align:justify;padding-left:3px;padding-right:3px;}
/* LINK */
#campaign-content a:link {color:darkred;text-decoration:none;}
#campaign-content a:visited {color:darkred;text-decoration:none;}
#campaign-content a:hover {color:darkred;text-decoration:underline;}
#campaign-content a:active {color:darkred;text-decoration:none;}
Don't hesitate to pm me (or other GMs) if you want some advices or precisions. I learned how to use CSS with the help of many from OP: Wolfhound, Lord Ao, Milkawel and Kallak.
You could also install Firefox, who has a page inspector tool that you can use to examine the structure and layout of a page.
-Pils
"Dark Sun -- La Décade des Héros":http://www.obsidianportal.com/campaigns/dark-sun-a-trova: Face the Fire of the Dark Sun... a World ravaged by Sorcery!
"Al-Qadim -- Golden Voyages":http://www.obsidianportal.com/campaigns/aq-golden-voyages: Who Among you Dares to Challenge the High Seas?
-Pils
Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)
Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!
(And I'm so soooorry for my poor english...)