@Saethone, I'm curious as to why you removed the Obsidian Portal logo instead of just replacing the image to the transparent background version via styling?
For the paper (or whatever other background) there's actually a nice easy way to do it, which you can see an example of "here":http://www.obsidianportal.com/campaigns/hrse. The CSS looks like "this":http://www.obsidianportal.com/campaigns/hrse/themes/custom_css.css?cc=1359252223. If you look at the #content rule you'll see that it uses multiple background images with different positioning tiling. In this case a tiling lined paper image, and a non-tiling image for the top of the page. You can add as many as you like, so you can easily put a special treatment at the bottom as well.
To get the natural looking edges, just use an image format that supports transparency (GIF or PNG, with PNG being the best option because it allows for nicer looking edges). If you do that, obviously you'll want to turn off the borders and corner rounding as well. You'll note I used this technique on the background of the page body as well, with a tiling slate blackboard texture overlain by a white, transparent PNG to create the chalk marks and smudges in the top left corner.
*Edit:* Upon inspection, you'll note that this is basically the same approach used by Saethone in his example above ("CSS":http://www.obsidianportal.com/campaigns/cormyr-rising/themes/custom_css.css?cc=1364516515). Because the tiling part of the background will go behind the other parts and show through transparent areas, getting the top and bottom to look right can be a bit problematic, and his example captures one approach to solving that problem (specifically, the way he divides up the backgrounds between #campaign-header, #campaign-content, and #content), so it's very worth looking at. The only real limitation of his approach is that since the background images don't overlap where #campaign-header and #campaign-content meet, you'll pretty consistently get the visible seam you can see just under the tabs in his example.
An alternative (which allows you to do all this in #content, and avoid the seams by overlapping the images with a little fade-out on the header and footer where they overlap) is to fake the ragged edges, while actually having them be opaque. It will only look good if your main page background is relatively simple, but if it is you can fill in the 'transparent' parts of the image with the background color, and the eye will read it as transparent without even noticing. Which approach will work best for you just depends on what textures you're using.
As always, the absolute best stuff comes from Chainsaw!
If you all want to laugh, and can deal with VERY adult humor (really, some of this stuff is really rated x), you should read the quotes from their games! It is fall down on the ground funny.....
"Link":http://www.obsidianportal.com/campaign/sotfa/adventure-log
hello all,
I had a question if anyone could help me with some css code? Kettle has been guiding me in my CSS journey of adding glow links. I recently finished my wiki page - it has 14 links on it and I wanted to "glow" them also. I am guessing since they are all different shapes I need 14 different CSS codes, but not sure what to add to my actual html code that goes on the wiki page itself. The code for the wiki page already is pretty long so here it is and what I was guessing might be used, but again any help would be great.
So I am guessing id do 14 of these:
/* wiki image glow */
.wikiimageglow {
margin-bottom: 10px;
width: 654px;
height:690px;
display:block;
background:transparent url('nonglow wiki image.jpg') center top no-repeat;
}
Obviously from my last post I have a ton of code for the pic to make the 14 different shaped links and now am adding in more for the glow...it creates a glow/nonglow pic then below that it has my normal wiki pic with links. Is there any way to combine those two lines to only create a single glow/noglow link pic?
Lord Ao- Go "here":http://www.obsidianportal.com/campaign/dfd/wikis/css-5
That should help....
killervp
"A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
hmm, that should be the transparent portal gif on mine. must be a mistake in the code. I will check it out tonight and i'll post my code too so you can see what i'm doing.
I did run into the issue chainsaw mentioned, where the center image would tile over the transparent parts of the top/bottom.
Perhaps we should start a new thread for this since its taking quite a few replies, we can put that new subforum to use :p if there isn't one open by the time i check my code out tonight i'll start it
Killervp, I tried that and no luck. I am throwing myself to the smarter/more experienced CSS'ers out there. I have looked at prob EVERY site for a fix to my problem and can't find any that work. Maybe its impossible or maybe I'm a noob, but anyone have an idea? I'm trying to make the links on my wiki page glow or shadow or rollover on hover or whatever the correct term is, I just want them to do something since there is 14 of them to highlight that they are there.
Of course its more complicated since they are poly coordinate irregular shaped links.
Wiki Page: http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/main-page
Lord_AO, let me see if I understand what you'd like to do...
You've got a single image that you've used html to map links to and you want to make the links glow? That's... seems pretty tough. The times I've seen it done have used flash or jquery.
It might be possible, but I've never seen it done with just CSS.
I can think of a way to do it using css transforms, though it would be pretty work intensive. You could either slice up the image and position everything (tough, I'd think), or you could create a new image without the text (just the background star) and create and position each of thinks with CSS.
If you're not familiar with transforms: http://www.w3schools.com/css3/css3_2dtransforms.asp
You'll want to use the rotate one in conjunction with positioning to get it to the right spot.
Not the easiest answer but it's all I can think of at the moment.
Have you tried using opacity settings? On my site, I've just been messing around with a simple hover effect on my buttons. Not sure if it's the ideal option for you but here's how I made a hover effect on my site "violent skies":http://www.obsidianportal.com/campaigns/violent-skies
i have a class called .blackbutton and in the code I've added the following:
opacity:0.8;
filter:alpha (opacity=80);
the .blackbutton:hover line looks like this
opacity:1.0
filter:alpha (opacity=100)
the "filter:alpha" line is so the effect works in additional browsers...have to look back at w3school to recall the specifics, but anyway...
so...I don't have to used two different background images. Rather set the opacity of the first image to a desired level. You could make it 70 or 75, or whatever looks ok. Then the hover effect is full opacity.
Now, in my page code, I have a div with the image contained like this
I've been trying to figure out how to make the OP item pages display "Author" as "Owner". (http://www.obsidianportal.com/campaigns/myyth-realm-legacy/items/araphm) Anybody have any idea how the global CSS and page html should be written?
Thanks for any help,
ImmortalDM
"Myyth Realm: Legacy":http://www.obsidianportal.com/campaigns/myyth-realm-legacy
"OP's CotM April 2013":http://blog.obsidianportal.com/myyth-realm-legacy-aprils-campaign-of-the-month/
This also works, though I'm not 100% sure that the font size is correct. It might actually be 11pt, though I don't have just right now to dig through their css and find what they used. I'll experiment more later:
@.item-metadata .author span.label {font-size:0;}
.item-metadata .author span.label:before {content: "Owner:";font-size:10pt;}@
Huh. For some reason, I didn't think that the 'content' tag worked, but I guess it does. You should be able to do the same to rename the navbar links, too.
Langy, it may depend on what element you put the content tag into. When I tried to put it in .item-metadata .author, it didn't do anything. But in the .author:before pseudo element, it worked fine. But the :before pseudo-element works fine with links. I actually have used to to do some neat tricks. :)
Renaming the navbar links would be a bit tougher, I think, but possibly do-able. Rather than using display:none (which would also make the :before element invisible), I would set the font size of the different link classes to 0 and set the font-size of the :before element to be whatever you want. I haven't tried this yet, so I can't say for sure it would work...
EDIT: Okay, yeah, this does indeed work. Here you go:
@madartiste, I had the tab go beyond the lower end of the bar, thus making it look like a box was on top of the tab instead of being seamless. Setting the font-size to 10px instead of 9pt and adding the max-height:14px to stop the height from going beyond what was intended fixed the issue for me.
Ah okay. I tested it out on my test site so I had some nonstandard tabs to start with. Worked great there, but definitely an oversight on my part. Thanks for the quick assist! Looks like this code might require some user tweaking depending on the navbar styling.
As an aside, if you add @ on either end of the code you post in the forums, you remove the quotations issue - thus allowing people to copy/paste directly from the forum without incident.
Ah! You're using it with the :before pseudo-element. Yeah, that works (and I've done it before). I had issues with using it to replace text before, though - I think I used something like "display:none" rather than just making the font size 0. It doesn't work that way; works much nicer your way.
Langy, yeah, the display:none was my first try too, but it makes the entire element, including the :before, not visible. I even tinkered with giving the :before a display:inline-block property just to see, but it didn't work.
I'm pretty sure I'll find another work around for change the text in the navbar. But at the moment: Anyone got a line on getting the nabar links to display inline? I seem to be struggling.
I don't know much about custom CSS, but I imagine nothing in here would allow me to change the shading in the edit-text box, right? White text on light gray background is making it very hard to do anything in mine today.
Comments
- Kallak
To get the natural looking edges, just use an image format that supports transparency (GIF or PNG, with PNG being the best option because it allows for nicer looking edges). If you do that, obviously you'll want to turn off the borders and corner rounding as well. You'll note I used this technique on the background of the page body as well, with a tiling slate blackboard texture overlain by a white, transparent PNG to create the chalk marks and smudges in the top left corner.
*Edit:* Upon inspection, you'll note that this is basically the same approach used by Saethone in his example above ("CSS":http://www.obsidianportal.com/campaigns/cormyr-rising/themes/custom_css.css?cc=1364516515). Because the tiling part of the background will go behind the other parts and show through transparent areas, getting the top and bottom to look right can be a bit problematic, and his example captures one approach to solving that problem (specifically, the way he divides up the backgrounds between #campaign-header, #campaign-content, and #content), so it's very worth looking at. The only real limitation of his approach is that since the background images don't overlap where #campaign-header and #campaign-content meet, you'll pretty consistently get the visible seam you can see just under the tabs in his example.
An alternative (which allows you to do all this in #content, and avoid the seams by overlapping the images with a little fade-out on the header and footer where they overlap) is to fake the ragged edges, while actually having them be opaque. It will only look good if your main page background is relatively simple, but if it is you can fill in the 'transparent' parts of the image with the background color, and the eye will read it as transparent without even noticing. Which approach will work best for you just depends on what textures you're using.
If you all want to laugh, and can deal with VERY adult humor (really, some of this stuff is really rated x), you should read the quotes from their games! It is fall down on the ground funny.....
"Link":http://www.obsidianportal.com/campaign/sotfa/adventure-log
Just trying to help out.
I had a question if anyone could help me with some css code? Kettle has been guiding me in my CSS journey of adding glow links. I recently finished my wiki page - it has 14 links on it and I wanted to "glow" them also. I am guessing since they are all different shapes I need 14 different CSS codes, but not sure what to add to my actual html code that goes on the wiki page itself. The code for the wiki page already is pretty long so here it is and what I was guessing might be used, but again any help would be great.
So I am guessing id do 14 of these:
/* wiki image glow */
.wikiimageglow {
margin-bottom: 10px;
width: 654px;
height:690px;
display:block;
background:transparent url('nonglow wiki image.jpg') center top no-repeat;
}
.wikiimageglow:hover {
background-image: url('glow image here.jpg');
}
then not sure about this on the wiki page (and do I need 14 of these?):
but not sure if this goes IN the rest of the code or something different?
here is my wiki code as is:
here is my CSS in the Main Page:
/* wiki image glow */
.wikiimageglow { margin-bottom: 10px; width: 654px; height:690px; display:block; background:transparent url('http://cdn.obsidianportal.com/assets/199195/weird4.jpg') center top no-repeat;
}
.wikiimageglow:hover { background-image: url('http://cdn.obsidianportal.com/assets/199538/adventurelog.jpg');
}
Here is my code on the actual wiki page:
Obviously from my last post I have a ton of code for the pic to make the 14 different shaped links and now am adding in more for the glow...it creates a glow/nonglow pic then below that it has my normal wiki pic with links. Is there any way to combine those two lines to only create a single glow/noglow link pic?
That should help....
killervp
"A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
Just trying to help out.
I did run into the issue chainsaw mentioned, where the center image would tile over the transparent parts of the top/bottom.
Perhaps we should start a new thread for this since its taking quite a few replies, we can put that new subforum to use :p if there isn't one open by the time i check my code out tonight i'll start it
Age of the Dragons - Homebrew Fantasy | Edurance of Hope - Age of Rebellion
Nominate a Campaign for Campaign of the Month!
Of course its more complicated since they are poly coordinate irregular shaped links.
Wiki Page: http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/main-page
You've got a single image that you've used html to map links to and you want to make the links glow? That's... seems pretty tough. The times I've seen it done have used flash or jquery.
It might be possible, but I've never seen it done with just CSS.
I can think of a way to do it using css transforms, though it would be pretty work intensive. You could either slice up the image and position everything (tough, I'd think), or you could create a new image without the text (just the background star) and create and position each of thinks with CSS.
If you're not familiar with transforms: http://www.w3schools.com/css3/css3_2dtransforms.asp
You'll want to use the rotate one in conjunction with positioning to get it to the right spot.
Not the easiest answer but it's all I can think of at the moment.
Have you tried using opacity settings? On my site, I've just been messing around with a simple hover effect on my buttons. Not sure if it's the ideal option for you but here's how I made a hover effect on my site "violent skies":http://www.obsidianportal.com/campaigns/violent-skies
i have a class called .blackbutton and in the code I've added the following:
opacity:0.8;
filter:alpha (opacity=80);
the .blackbutton:hover line looks like this
opacity:1.0
filter:alpha (opacity=100)
the "filter:alpha" line is so the effect works in additional browsers...have to look back at w3school to recall the specifics, but anyway...
so...I don't have to used two different background images. Rather set the opacity of the first image to a desired level. You could make it 70 or 75, or whatever looks ok. Then the hover effect is full opacity.
Now, in my page code, I have a div with the image contained like this
div class=blackbutton>button image goes here
Thanks for any help,
ImmortalDM
"Myyth Realm: Legacy":http://www.obsidianportal.com/campaigns/myyth-realm-legacy
"OP's CotM April 2013":http://blog.obsidianportal.com/myyth-realm-legacy-aprils-campaign-of-the-month/
Author:
change to
Owner:
but I could not figure out how.
Just trying to help out.
I wonder if it can be done with the content tag?
maybe .item-metadata .author span.label {content: "Owner";}
I haven't tried this at all, though. I'll have to give it a go in a bit and see what can be done...
GOT IT:
@.item-metadata .author span.label {display:none;}
.item-metadata .author:before {content: "Owner:";font-weight:bold;}@
That should work.
This also works, though I'm not 100% sure that the font size is correct. It might actually be 11pt, though I don't have just right now to dig through their css and find what they used. I'll experiment more later:
@.item-metadata .author span.label {font-size:0;}
.item-metadata .author span.label:before {content: "Owner:";font-size:10pt;}@
Renaming the navbar links would be a bit tougher, I think, but possibly do-able. Rather than using display:none (which would also make the :before element invisible), I would set the font size of the different link classes to 0 and set the font-size of the :before element to be whatever you want. I haven't tried this yet, so I can't say for sure it would work...
EDIT: Okay, yeah, this does indeed work. Here you go:
@.tabnav li.adventure-log a, .tabnav li.adventure-log a.active {font-size:0pt;}
.adventure-log a:before {content: "Journals";font-size:9pt;}@
- Kallak
- Kallak
As an aside, if you add @ on either end of the code you post in the forums, you remove the quotations issue - thus allowing people to copy/paste directly from the forum without incident.
- Kallak
Unconquered Kingdoms, July 2016 CotM
ImmortalDM
"Myyth Realm: Legacy":http://www.obsidianportal.com/campaigns/myyth-realm-legacy
"OP's CotM April 2013":http://blog.obsidianportal.com/myyth-realm-legacy-aprils-campaign-of-the-month/
~Weasel0
A Parade of Black | ShadowRunHack |
Where I play with CSS code