Custom CSS Beta Discussion

1568101125

Comments

  • Pils
    Pils
    Posts: 149
    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

    -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
    Pils
    Posts: 149
    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

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

  • Lord_AO
    Lord_AO
    Posts: 38
    Thanks Pils, that was helpful =) I had been wondering how you did your character list and such. Thanks again.
  • WoozleWozzle
    WoozleWozzle
    Posts: 9
    I can't figure out how to stretch an image to fill the background. Any tips?
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    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/

    Just trying to help out.

  • madartiste
    madartiste
    Posts: 328
    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.
  • WoozleWozzle
    WoozleWozzle
    Posts: 9
    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?
  • madartiste
    madartiste
    Posts: 328
    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.
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    So I'm trying to figure out how to make the post-time entry non existent. I figured out that I can do this:

    .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
    Kallak
    Posts: 1,090
    display:none ?
    All the best,
    - Kallak
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    That worked! Thank you Kallak.

    Heroes Unchained: CotM 2013

  • labianca
    labianca
    Posts: 3
    Hi all -

    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.
  • Langy
    Langy
    Posts: 364 edited January 2013
    Just add the following code to your CSS file to turn the logo transparent:

    #logo h1 a {
    background-image: url('/images/logo_transparent.png');
    }
    Post edited by Langy on
  • labianca
    labianca
    Posts: 3
    Thanks Langy. It's appreciated.
  • saethone
    saethone
    Posts: 153
    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
  • berdman
    berdman
    Posts: 46 edited January 2013
    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
    Post edited by berdman on
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Same issues... will piggy back berdman's ticket.

    Just trying to help out.

  • saethone
    saethone
    Posts: 153
    cool, i added in what I found. Caught me off guard too, haha.
  • bluesguy
    bluesguy
    Posts: 127
    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...

    Help.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    They are aware of the problem and are working on it

    Just trying to help out.

  • bluesguy
    bluesguy
    Posts: 127
    Thank you for the information.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Working! Thanks guys!

    Just trying to help out.

  • berdman
    berdman
    Posts: 46
    It is working.

    Thanks for getting this fixed so quickly.
  • bluesguy
    bluesguy
    Posts: 127
    Excellent! Great support.
  • NinjaFlashX
    NinjaFlashX
    Posts: 94
    Is there a way to get rid of the page-title but only for the main wiki page? I know this will get rid of all of them:

    .page-title {
    display: none;
    }

    Heroes Unchained: CotM 2013

  • Langy
    Langy
    Posts: 364
    No, doesn't look like it:(
  • Savannah
    Savannah
    Posts: 188
    Yes there is:

    #wiki-page-main-page .page-title {display:none;}
  • Langy
    Langy
    Posts: 364
    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.
  • dlaporte7271
    dlaporte7271
    Posts: 94
    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.

    Thanks!

    dlaporte7271
    "Violent Skies":http://www.obsidianportal.com/campaigns/violent-skies
  • Pils
    Pils
    Posts: 149 edited February 2013
    Hi Dlaporte7271,

    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?
    Post edited by Pils on

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

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