Items and Characters

Conan_Lybarian
Conan_Lybarian

Thanks to some searching and some help from some awesome people here on the forums, I've been able to accomplish a lot with my campaign pages. There's still a few things I'm trying to get nail down though. 

Does anyone have the codes to add backgrounds to the items section, and the individual items themselves? Also, each character I've been able to add the backgrounds too, but I have to have an entry for each individual one. Is there a common code that would just add it to all of them without having to do it one at a time? I'm trying to keep my code to a minimum so I don't screw up my pages somehow. Any tips would be a huge help. Thanks!

Comments

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    Oh- and the line that would change the text color for the titles of adventure logs. Thanks!

  • SkidAce
    SkidAce
    Posts: 830

    Use the inspect on this page, or let me know and I will see if I can paste the proper CSS.

     

    https://unconquered-kingdoms.obsidianportal.com/items

  • Abersade
    Abersade
    Posts: 417

    Adventure Log Titles from the Adventure Log main screen:



    .adventure-log-index .adventure-log-post-container.teaser .adventure-log-post-title a {color: red;}

     

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 417 edited January 2019
    Hopefully that's helpful. I had another code snippet here but it no longer functions so I've removed it.
    Post edited by Abersade on

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    Thanks the tip @SkidAce! I've been doing it all on my phone or Mac in safari, so I'm going to start using firefox so I can actually inspect elements in the future

    Thanks for the code @Abersade! Having an exact code makes it easier than trying to finagle with stuff

  • SkidAce
    SkidAce
    Posts: 830

    /* ITEM TEST */
    .item-show .main-content section {background-color: transparent; background-image: url(https://db4sgowjqfwig.cloudfront.net/assets/265269/DSF_Emma_paper2.jpg?1385084264); background-repeat: no-repeat; background-size: 100% 100%;}

     

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    @SkidAce- That code sucessfully changes the background for the items once I go to its page, but not on the main item listing page

    @Abersade - That code does work on the main listing for the adventure logs, but it's once I'm actually looking at an adventure log page that the tite is unreadable (see link below)

    https://starbreaker.obsidianportal.com/adventure-log/updates-coming-soon

    I'm trying to do some inspections of different pages now that I'm actually on firefox, to see what's out there and to go through all my own code again.

  • Johnprime
    Johnprime
    Posts: 252

    To get the title on the log page itself, use the following.


    .adventure-log-post-title.title { color: #D00 !important; }

    Obviously you wan to use whatever color you decide to make the title in place of the #D00. I hate having to use the important tag, but if you don't, your color choice will get overridden.

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • SkidAce
    SkidAce
    Posts: 830

    Strange, I have custom tiles for my items....in the item listing.  Iet me investigate further after work.

  • SkidAce
    SkidAce
    Posts: 830

    I see.  The character plate and the item plate are the same thing. (character-item-something...)

    Try parts of this....

     


    /* CHARACTER PAGE TEST */
    #content .character-list-item-container {position: relative; width: 360px; height: 125px; background-image: url(https://db4sgowjqfwig.cloudfront.net/assets/317621/Character_Plate.jpg?1397575599); background-size:94% 97px;background-position:10px 0px; background-repeat :no-repeat ;opacity: 1; display: inline; clear: none !important; color: transparent; background-position: center top}
    .character-list {width:110%;}

     

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    I'm going to play with it tonight. Thanks for all the tips! BTW- @Abersade just posted on my thread about the character templates being intertwined with items lol

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    @SkidAce For some reason that isn't working either. But I did realize if characters and items are essentially the same, then I can treat it the same way as characters and just do it individually per item. If I knew how to do that little text box thing the way everyone does I'd share the code. My Css logs are getting ridiculous long at this point lol

    @Johnprime That worked! Any hint on the subtitle? Ive been playing with it a lot and just can't seem to nail it down. 

  • SkidAce
    SkidAce
    Posts: 830

    What items are you working on?  I went to starbreaker and did not see items listed on the left menu...

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    I'm playing with it in my other Cold Truce. I'll just transpose it with the right background image. The items are under "cargo"

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    *other campaign 

  • Johnprime
    Johnprime
    Posts: 252

    The CSS class for the sub-title should be...


    .adventure-log-post-subtitle.subtitle { color: #C0C0C0 !important; }

    Again, using whatever color you want. I noticed while I was looking at the code, the social media icons above your sub-title use the same class, but that shouldn't matter as they are icons, and not text. If for some reason they change as well, you could also try...


    h3.adventure-log-post-subtitle.subtitle { color: #C0C0C0 !important; }

    But I'd try the top one first. Keep me updated on whether that works or not! :-)

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    That totally worked @Johnprime! Now it's just a matter of the different section titles. like "Bio" and "description'". https://starbreaker.obsidianportal.com/characters/fen-fenton for example. Although I've taken the recommendation from @SkidAce and have been inspecting elements, so I might be able to figure it out. I appreciate all the help!

  • Johnprime
    Johnprime
    Posts: 252

    Another thing you can do with Firefox is use the styles pane to find out what to name the style class definition. I'm sure you can do it with other browsers like Chrome, but I'm most familiar with Firefox, but the concept should be pretty much the same.

    Once you've right clicked on the item you are interested in inspecting and selected the Inspect Element entry on that menu, should be toward the bottom of the menu, you'll have 3 window tabs/panes come up. The first has the following menu items across the top, 'Inspector', 'Console', 'Debugger', etc. If you look at the very next tab/pane, at the top should be a field that contains the text 'Filter Styles'. Below that is the following CSS...


    element {
    }

    If you right click in that part of the tab, the right menu will have a command, 'Add New Rule'. Select that command and the browser will create an empty style definition that contains the class names that you need. It should appear at the bottom of that tab and be highlighted. I would click on that entry to make sure your cursor is active there. If you click to the right of the curly bracket {, it should put the cursor inside the definition. As long as you know what style definition to use, then you can experiment to see what happens to the style on the page.

    Let me know if I've explained that procedure well enough.

     

    John

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    That's exactly the kind of direction I've been looking for. Thanks! There's a lot of complicated jargon online, and this makes way more sense. 

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    I really appreciates everyone's help! I finally figured out the CSS lines for both the character and item backgrounds as 1 line instead of doing each individually

    .character-index.campaign-public-layout .character-list-item, .item-index.campaign-public-layout .character-list-item {background-image:url(http://cdn.obsidianportal.com/assets/234074/indaris_parchment.jpg);}

    Plus, the code for changing the color, and even font, of those lines from Star Breaker that were driving me nuts!

    .campaign-public-layout .main-content h6 {color: #C0C0C0!important;}

    .campaign-public-layout .main-content h6 { font-family: 'Righteous'}}

    You guys rock. Now I just need to play the damn games instead of fidgeting at baubles lol

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