Custom CSS Beta Discussion

1679111225

Comments

  • dlaporte7271
    dlaporte7271
    Posts: 94
    Merci Pils!

    Je voudrais alais a la sal de bain! (How's my french?) I think, I either told you you were a really great help...or...I have to go to the bathroom...;)

    Anyway, I'll mess around with this and see what happens. I'll def send you a PM.

    dlaporte7271
  • dlaporte7271
    dlaporte7271
    Posts: 94
    Thanks again Pils,

    So far it's all worked fine! I haven't made any changes to the font yet. I think I want to explore the google fonts thing first and see what I might want to use. Of course, i'll have to go back through the pages and wipe out/change any of the code that defines fonts (grrrrrr).

    Take a look at the "effect":http://www.obsidianportal.com/campaign/violent-skies/adventure-log

    The navtab is gone and the links are white...turning yellow with an underline when you hover. You might notice the black text on the post time. That's something else I'd like to change. It show's up fine on some monitors, but I notice it's hard to read on others.

    Ahh...the constant tweaking!

    dlaporte7271
    "Violent Skies":http://www.obsidianportal.com/campaigns/violent-skies
  • saethone
    saethone
    Posts: 153 edited February 2013
    On the party list side bar the word "by" is not inside any tags, would it be possible to move this into the player span tag so we can style that? we can style font and color by using the tag for the campaign-party-info-sidebar but as you can see "here":http://www.obsidianportal.com/campaigns/age-of-the-dragons i've moved that by (player) down to the next line by using display:block, and it'd be nice to be able to position that line separate so we can do things like indent that line.

    pretty minor but it'd be handy.
    Post edited by saethone on
  • Pils
    Pils
    Posts: 149
    Hi Saethone,

    I just try to change the color of the "by" with this code, and it worked:

    #campaign-party-info-sidebar{color:red;}

    Maybe you can do some work with this... (and congratulation for Age of the Dragon, very good design!)

    @dlaporte: I think I understand your state of mind, you have to preserve your sanity :) I will pm you soon!

    -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...)

  • wolfhound
    wolfhound
    Posts: 354
    Sorry guys, I know several of you have asked me some CSS questions and I fully intend to update my tutorials, just time seems to elude me at the moment. :(

    Tá brón orm (I'm sorry)
  • EverRaven
    EverRaven
    Posts: 6
    I seem to be experiencing the same issue that madartiste reported earlier. I can use some google fonts, but any google font that has the word "Script" in its name bugs out on me and refuses to work. I get a pretty little red box informing me I'm being naughty.

    Has anyone figured out how to work around this?
  • saethone
    saethone
    Posts: 153
    the same thing occurs if you try to modify any of the "description" tags, i'm pretty sure its their anti java script feature just disallowing anything with that word in it.
  • PhoenixMark
    PhoenixMark
    Posts: 90
    I wanted to thank "Wolfhoud":http://www.obsidianportal.com/profile/wolfhound for his "fancy rollover buttons tutorial":http://www.obsidianportal.com/campaign/dfd/wikis/css-5. I am not CSS pro, in fact I am totally new to it. After a touch of tweaking, I was able to finally do what I was wanting to do with a couple of easter eggs on my "wiki page":http://www.obsidianportal.com/campaign/sactown-blues/wikis/main-page. Thanks Wolfhound, and everyone else for all your help!


    ~Mark
    "Crimson Skies":http://www.obsidianportal.com/campaigns/crimson-skies *COTM June 2012* - _Pathfinder_
    "Sactown Blues":http://www.obsidianportal.com/campaigns/sactown-blues - _Fate/Dresden Files RPG_
    "Shimmering Kingdoms":http://www.obsidianportal.com/campaigns/shimmering-kingdoms - _Pathfinder_
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    OOOO, secret laptop! Nice work PhoenixMark!

    Just trying to help out.

  • madartiste
    madartiste
    Posts: 328
    That looks great! I really like how the links look like they came from a label maker. Very cool. :)
  • wolfhound
    wolfhound
    Posts: 354 edited February 2013
    One of my pure simple joys in this life is being able to help folks create really cool things to express whatever artistic/game related thing they want to do. What you've done PhoenixMark with the rollover is really, really brilliant.
    Post edited by wolfhound on
  • Keryth987
    Keryth987
    Posts: 1,047 edited March 2013
    OK, putting together a new site for a campaign (way down the line. Shadows is just starting) using the CSS. Mostly to tinker aorund with and learn it.
    However, I am using the navbar code posted way earlier here by NinjaFlashX, modified of course, but it does not move with the page, it stays constant. I know I'm missing something, as I've seen this used on other sites and it scross along fine.

    Here's my code:

    .tabnav a:link, .tabnav a:visited, .tabnav a:active, .tabnav a:hover {
    color: midnightblue;
    font-size: 12pt; font-family:'Audiowide';
    text-shadow: 1px 2px 1px white, -1px -2px 1px white;
    }

    .tabnav a:link, .tabnav a:visited {
    background: none repeat scroll 0 0 transparent;
    border: medium none transparent;
    line-height: 20px;
    }

    .tabnav {
    background: none repeat scroll 0 0 transparent;
    padding-left: 0;
    position: absolute;
    width: 130px;
    }

    .tabnav a.active:link, .tabnav a.active:visited {
    background: none repeat scroll 0 0 transparent;
    border: inherit;
    color: black;
    }

    .tabnav a {
    margin-bottom: 5px;
    }

    .tab-container {
    left: -125px;
    padding-left: 0;
    position: relative;
    }
    li.forum {display:none;}
    li.calendar {display:none;}
    li.maps {display:none;}
    li.items {display:none;}

    Thanks for your help.

    Peace and long Life,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    Post edited by Keryth987 on

  • NinjaFlashX
    NinjaFlashX
    Posts: 94 edited March 2013
    Add the position: fixed to your .tabnav instead of the position:absolute

    .tabnav { background: none repeat scroll 0 0 transparent; padding-left: 0; position: fixed; width: 130px;
    }

    "Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained
    Post edited by NinjaFlashX on

    Heroes Unchained: CotM 2013

  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    Interesting, as I was retesting my code from my earlier post, I noticed that Chrome doesn't display the navtab position correctly on my HoB campaign. Does anyone else see that when visiting my "Heart Of Barsaive":http://www.obsidianportal.com/campaigns/heartofbarsaive campaign with Chrome? IE and Firefox display it correctly....Hmm.... Anyone have any ideas what Chrome is hanging up on?

    "Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained

    Heroes Unchained: CotM 2013

  • FrankSirmarco
    FrankSirmarco
    Posts: 250
    It does the same thing when I view the page on Chrome.
  • Keryth987
    Keryth987
    Posts: 1,047
    Thanks NinjaFlashX, that did the trick

    Peace and long Life,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york

  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    Thanks to Keryth, I found out that my CSS NavTab code didn't work correctly in Chrome (I didn't test in anything but Firefox back in the day....PFFT! Who still uses IE anyways?!?!?! Let alone Chrome!!! Just kidding, my bad for not thoroughly testing). Anyways, I have since fixed and corrected on my code. Still located "here":http://www.obsidianportal.com/campaign/heroesunchained/wikis/wiki-code

    Flash
    "Heroes Unchained":http://www.obsidianportal.com/campaigns/heroesunchained - _Where Slaves Become Legends_

    Heroes Unchained: CotM 2013

  • Savannah
    Savannah
    Posts: 188
    I'm vaguely familiar with how one would go about putting a parchment background on the content of a page (div with top border, div with repeating middle section and text, div with bottom border). However, I greatly desire to turn the entire #content into a sheet of parchment, so that the header, right sidebar, and page contents appear to be on a single sheet. I know how to change the color or use a single background image, but I'm not sure how to go about making a parchment page that adapts to the amount of text entered. Is this possible?
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Don't know on header and right sidebar, but I have the content of pages on different sidebars without the 3 divs- just CSS.
    My CSS is "here":http://www.obsidianportal.com/campaign/a-god-rebuilt/wikis/css under parchments. Good question, as usual, Savannah.

    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.

  • Savannah
    Savannah
    Posts: 188
    I've used that approach before, but find I dislike the white background that is still behind everything. My current workaround is "here":http://www.obsidianportal.com/campaigns/the-wrong-guys, where I've just put a single paper texture with sharp edges. What I'd love to be able to do is put ragged edges on it somehow, but I'm not sure it's possible.
  • kettle
    kettle
    Posts: 72
    So I am revising my adventure log. You can see the changes here: http://www.obsidianportal.com/campaign/rise-of-the-dead/adventure-log

    I can not seem to change the color of the time stamp in the CSS. If you look at the post called Adventure log, the time stamp is white, but if you look at the timestamp the individual sessions (for example :session 7) it keeps the black text color.

    Any ideas on how to change the timestamp on all the posts to white?

    I used the folowing css code to try to change the date and time for the individual logs.

    #campaign-content h4.post-tagline {border-bottom:none;color:white;}
    #campaign-content h5.post-time {border-bottom:none;color:white;}

    Is there a class I just don't know about? I am going to download firebug to look for this, but thought someone might know.

    Thanks,

    Kettle

    "Rise of the Dead":http://www.obsidianportal.com/campaigns/rise-of-the-dead
  • Savannah
    Savannah
    Posts: 188
    After the super-scientific 'messing around with Firefox's Inspect Element feature' (which I find far more useful than Firebug for working out classes, by the way), I would suggest trying .post-header h5 or, if that doesn't work, .post-header h5 .post-time. Also, you could try putting a space between h5 and .post-time in what you have now -- I have no clue if that will be helpful, but I seem to recall one time I couldn't get something like that to work and adding a space fixed it. Can't hurt to try, I guess.

    By the way, you can cut down on your lines of code by changing multiple things at once, if there's one style you want to use. Just list them before the brackets with a comma between. So:

    #campaign-content h4.post-tagline, #campaign-content h5.post-time, .post-header h5 {border-bottom:none; color:white;}
  • kettle
    kettle
    Posts: 72
    Thanks Savannah. The .post-header h5 worked like a charm. I appreciate the help.

    Kettle

    "Rise of the Dead":http://www.obsidianportal.com/campaigns/rise-of-the-dead
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Savannah- Like the way it looks! If someone comes up with an answer to her question, I would sure appreciate it- I will do much the same!
    Kettle- Told you someone awesome would figure that one out...

    Just trying to help out.

  • Savannah
    Savannah
    Posts: 188 edited March 2013
    -...okay, this is weird.-

    -I put a background image on .adventure-log-page, which works great on the list view, but is for some strange reason appearing as the main background (where the standard backgrounds appear) in addition to appearing as the text background when you are on the page for a single log.-

    -I'm temporarily making my test campaign public so you can take a look. Correct positioning image- "here":http://www.obsidianportal.com/campaign/testingtestingtesting/adventure-log. -Weirdness- "here":http://www.obsidianportal.com/campaign/testingtestingtesting/adventure-log/second-log-post.

    -Relevant bit of CSS is:-
    -.page-body, .adventure-log-page-
    -{-
    -background-image:url('http://cdn.obsidianportal.com/assets/198573/Notebook_Texture.png');-
    -}-

    -Can anyone tell me what the hell's going on?-

    EDIT: never mind, I solved it -- you have to use #campaign-content .adventure-log-page when putting in the background image and not just .adventure-log-page. No idea why, but it's solved, so I don't really care :P
    Post edited by Savannah on
  • arsheesh
    arsheesh
    Posts: 850 edited March 2013
    h1. ATTENTION ALL:

    _As per "this request":http://forums.obsidianportal.com/comments.php?DiscussionID=2955&page=1#Item_5, I've gone ahead and created a new category within the forums to discuss CSS related items. So, given that this thread has become rather large and unwieldy, I suggest that all new topics be migrated over to their own threads under the CSS Discussion section._

    Cheers,
    -Arsheesh
    Post edited by arsheesh on
  • saethone
    saethone
    Posts: 153
    Savanah, about the parchment, its difficult. I got it working-ish though, you can check my code here:

    http://www.obsidianportal.com/campaigns/cormyr-rising

    you're free to use/modify it and you can use the parchment i created as well if you'd like
  • madartiste
    madartiste
    Posts: 328
    Saethone, that is a very cool effect. Nice work!
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Nice Saethone! Hope that you will publish the code, rather than having everyone "inspecting". Besides, some folks can't/won't do that...
    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.

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