A Totally Unofficial CSS Help & Tips FAQ

1235»

Comments

  • Krothos
    Krothos
    Posts: 230

    Thank you! I would have never figured that one out.  :)

     

  • Keryth987
    Keryth987
    Posts: 914

    Well, I been thinking of using the Accordion to make my NPC listings easier.

    So, right now I have the HEading: Goverment Agents

    Click on that and it opens a page that is sub-divided into NYPD, The Agency, etc, with their corresponding NPC's beneath the heading

    I'm hoping to use the Accordion to have

    Government Agents

         NYPD

            NYPD NPCs

        The Agency

            The Agency NPCs

    ...

    Keelah Se'lai,

    Keryth

  • cgregory
    cgregory
    Posts: 772 edited January 2020

    @Kallak

    @Krothos

    You shouldn't need the !important for the CSS Kallak provided because you are providing more specificity than the base obsidian css which is just using the 'a' tag in the css for color.

    Post edited by cgregory on

    They are among us!

    image

    Current Campaign: XCom: Defiance - Campaign of the Month November 2016

                                           My Campaign CSS

                              Unlocking The Portal: A Guide to OP CSS                                    

     

     

  • Krothos
    Krothos
    Posts: 230

    @cgregory

    Confirmed, thank you for the additional information.

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 230 edited January 2020

    I've got an idea for the next big in the campaign, and I love the idea of putting a big ominous countdown clock right smack in the middle of the front page to freak out my players and intruige visitors. That being said, I've spent the last few days playing with widgets, combing through and fidgetinging with examples from w3school and similar sites, and just can't quite seem to get it. Is there a way to just imbed the generated script like this:


    <iframe src="http://free.timeanddate.com/countdown/i74ua1ox/n810/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac000/cpc000/pcfff/tcfff/fs100/szw320/szh135/tatTime left to Event in/tac000/tptTime since Event started in/tpc000/mac000/mpc000/iso2020-01-31T00:00:00&quot; allowTransparency="true" frameborder="0" width="180" height="69"></iframe>

    from one of these sites? Or am I looking at a slog of divs and css both front and back end?

    Thanks!

    Post edited by Conan_Lybarian on

  • nuadaria
    nuadaria
    Posts: 18

    I as well am curious about iframe embeds and thus far am unable to get them working.


    • Are they working at the moment?

    • Are they an ascendant only thing?

    • Do they work with both editors? (I have tried with both and no luck thus far)

    • Is there something specific I need to do?

    Thanks in advance!

  • thaen
    thaen
    Posts: 580

    @nuadaria, the "iframe" tag is intentionally disabled.  Same for the "script" tag.  These are too easy to use for malicious behavior, so OP just doesn't allow them to be used in the Campaigns.  Sorry for the confusion!

    Obsidian Portal Developer

  • nuadaria
    nuadaria
    Posts: 18

    No worries, I thought that might be the case until I saw them in the editor. I'll just link to my external content the old fashioned way!

  • weasel0
    weasel0
    Posts: 413

    Unless something has changed, the "script" filter will also block things it is contained in. ie- "description" cant be a tag/div/whatever as it has the word script in it. 

  • GM_Trent
    GM_Trent
    Posts: 5

    I'd like make changes to the way the character index and specific character looks.

    I've tried using CSS to do this, but I don't know what I am doing wrong

     

    Here is my specific CSS code


    /*CHARACTER APPEARANCE*/
    body.character-index {
    background-color:#731809 !important;
    opacity:0.9;
    }
    body.character-show {
    background-color:#731809 !important;
    opacity:0.9;
    }

     

  • Kallak
    Kallak
    Posts: 1,090

    I created a series of layout changes for the character index page a while back, and made a demo campaign sample for to show people how it was done. Checking out what I did there might help you get started with the changes you want to make. Feel free to borrow and modify anything you like from there.

    All the best,
    - Kallak
  • GM_Trent
    GM_Trent
    Posts: 5

    Thanks Kallak!

    Gives me some ideas but not exactly what I am trying to achieve. Im trying to change the background color to red and slightly transparent  for all entries in the character index.

    Then when a character is clicked on that will also be the same color of red and transparency.

  • thaen
    thaen
    Posts: 580

    @GM_Trent, if I understand the effect you're going for, I think what you're seeing is that the background image is not letting the color show through.  So you need to make the background image transparent, not the body.  Try this ...


    .character-index {
    background-color: #731809;
    }

    .character-index .page-background {
    opacity:0.5;
    }

    .character-show {
    background-color: #731809;
    }

    .character-show .page-background {
    opacity:0.5;
    }

     

    Obsidian Portal Developer

  • GM_Trent
    GM_Trent
    Posts: 5

    @Thaen

    Here is the url for my campaign

    https://blood-batleth.obsidianportal.com/

    What I'm trying to do is something like below.

    Here is the front page

     

    Here is the wiki page

    What I am trying to do is change the character index to look similarly.

    I'd like the white boxes to be the red color and slightly transparent.

    I've edited a screenshot image and put a green box around them to illustrate.

    Character Index

    Character Template

     

    Hope this helps

    Trent

     

  • thaen
    thaen
    Posts: 580

    @GM_Trent, looks like an awesome Campaign!

    Got it!  In that case, I think you're going to need the "how to fish" explanation rather than the "here's a fish" explanation.  : )

    If you right-click anywhere on the white part of Character Quick Search, you'll see a menu option for "Inspect" or "Inspect Element".  That will open the Developer Tools area of the browser, and will show you the HTML for what you're looking at.  You can then hover the mouse over the HTML pieces and it will highlight sections of the page to show you which pieces those HTML lines refer to.  Then you can look at the HTML to figure out which HTML class refers to the part you want to style.  This works for any element on an HTML page.

    For example, on the Character Quick Search, you'll see that HTML is:

    <div class="character-quick-search"

    So the class you want to style for the Character Quick Search is "character-quick-search".

    In the Developer Tools, when you click on an HTML section to select it, you can then also "on the fly" add styling in the right-hand sidebar to see how it might look, without having to save that styling to the CSS.  For example:

     

    Play around with that, and see if it gets you where you want to go.  I'm assuming the next thing you're going to want to do is change the styling of the text labels on the Character Quick Search, which works exactly the same way ... right-click on the text, find the class, test out some styling in the browser, then add it to the Custom CSS for your Campaign.  Feel free to ask any further questions you have!

    Obsidian Portal Developer

  • GM_Trent
    GM_Trent
    Posts: 5

    Thanks so much @thaen

    After doing some inspecting of elements I was able to find the css to use

    :)

  • thaen
    thaen
    Posts: 580

    That's excellent!  Huzzah!!

    Obsidian Portal Developer

Sign In or Register to comment.

July's Campaign of the Month is The Coldfall Sanction!

Read the feature post on the blog!
Or 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