Custom CSS Beta Discussion

17810121325

Comments

  • Kallak
    Kallak
    Posts: 1,090
    @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?
    All the best,
    - Kallak
  • ChainsawXIV
    ChainsawXIV
    Posts: 530 edited March 2013
    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.
    Post edited by ChainsawXIV on
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    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

    Just trying to help out.

  • Lord_AO
    Lord_AO
    Posts: 38
    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;
    }

    .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:
  • Lord_AO
    Lord_AO
    Posts: 38
    Ok so I was able to figure this out, but...I end up creating 2 wiki Stars.. one next to each other and not sure how to make it a single pic/link.

    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?
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998 edited April 2013
    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/
    Post edited by GamingMegaverse on

    Just trying to help out.

  • saethone
    saethone
    Posts: 153
    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
  • Lord_AO
    Lord_AO
    Posts: 38
    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
  • madartiste
    madartiste
    Posts: 328 edited April 2013
    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.
    Post edited by madartiste on
  • dlaporte7271
    dlaporte7271
    Posts: 94
    Hey Lord_AO

    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
  • ImmortalDM
    ImmortalDM
    Posts: 17
    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/
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    I could figure this out- That the following needed to be changed-
    Author:
    change to
    Owner:
    but I could not figure out how.

    Just trying to help out.

  • madartiste
    madartiste
    Posts: 328 edited May 2013
    Hmmm....
    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;}@
    Post edited by madartiste on
  • Langy
    Langy
    Posts: 364 edited May 2013
    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.
    Post edited by Langy on
  • madartiste
    madartiste
    Posts: 328 edited May 2013
    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:

    @.tabnav li.adventure-log a, .tabnav li.adventure-log a.active {font-size:0pt;}
    .adventure-log a:before {content: "Journals";font-size:9pt;}@
    Post edited by madartiste on
  • Kallak
    Kallak
    Posts: 1,090
    @madartiste, snagged for the Compilation thread, with credit added. I also fixed a minor issue I had when I tried it out.
    All the best,
    - Kallak
  • madartiste
    madartiste
    Posts: 328
    @Kallak, what was the issue? I didn't run into any problems when I tested it. I'm curious what I missed! And thank you! :)
  • Kallak
    Kallak
    Posts: 1,090
    @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.
    All the best,
    - Kallak
  • madartiste
    madartiste
    Posts: 328
    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.
  • Kallak
    Kallak
    Posts: 1,090
    I'll add that as a note in the compilation thead:

    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.
    All the best,
    - Kallak
  • madartiste
    madartiste
    Posts: 328 edited May 2013
    Awesome! I didn't know about the @ thing. I'll go change my posts. You're full of helpful info!
    Post edited by madartiste on
  • Langy
    Langy
    Posts: 364
    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.
  • madartiste
    madartiste
    Posts: 328
    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.
  • SkidAce
    SkidAce
    Posts: 830
    Interesting...but now my head hurts...
  • ImmortalDM
    ImmortalDM
    Posts: 17
    @madartiste, Thank you!! I finally got back to the OP today - work has been busy to say the least. The Author to Owner CSS works perfectly!

    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/
  • madartiste
    madartiste
    Posts: 328
    No problem, ImmortalDM. I'm just glad I could help. :)
  • weasel0
    weasel0
    Posts: 435
    I tried to do a search and have been coming up with no useful results. Can CSS reformat the order of the tags in the Wiki page side bar?
  • wolfhound
    wolfhound
    Posts: 354
    Obviously with the new Kickstarter changes most of these are going to no longer work. :)
  • madartiste
    madartiste
    Posts: 328
    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.
  • MattBowyer
    MattBowyer
    Posts: 2
    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.
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions