Transparency on multiple pages

Krothos
Krothos
edited November 2018 in Campaign Portal Building

What is the CSS command to make the background under the text transparent on the following pages?

Front Page, Adventure Log, Wiki, and Characters

With the Wiki, I would also like this to carry over to any sub-pages. I believe I would use {background-color:transparent} but don't know the parent object names.

Thanks!

 

Post edited by Krothos on

Comments

  • Krothos
    Krothos
    Posts: 230

    Any CSS-guru have any suggestions on this? Thanks.

     

  • Abersade
    Abersade
    Posts: 417 edited November 2018

    Try the following:


    /* Landing/Main Page Transparency */
    .campaign-landing-show .campaign-landing-page-container {background: transparent;}

    /* Individual Character/Item Pages Transparency */
    .character-show .main-content section, .item-show .main-content section {background: transparent;}





    /* Adventure Logs and Main Wiki are trickier, use only one of the four groups below depending on what you need */


    /* Transparent Wiki AND Transparent Adventure Logs */
    /* ADVENTURE LOGS */
    /* Adventure Log Screen Transparency */
    .adventure-log-index .adventure-log-post {background: transparent;}
    .adventure-log-index .overflow-fade-out {display: none;}
    .adventure-log-index .date-column {background: transparent;}
    .adventure-log-index .adventure-log-new-container {background: transparent;}
    /* Individual Adventure Log Screens */
    .adventure-log-show .post-header-container, .adventure-log-show .post-main, .adventure-log-show .post-comments, .adventure-log-show .comment-reply textarea{background: transparent;}
    .campaign-public-layout .highlight-container {display: none;}
    .adventure-log-index .post-date, .adventure-log-show .post-date {background: transparent;}
    /* WIKI */
    /* Wiki Transparency */
    body.campaign-public-layout .post-section.post-main {background: transparent;}



    /* Transparent Wiki Only - Adventure Log has Only Solid White/Color Backgrounds */
    /* ADVENTURE LOGS */
    /* Wiki Transparency */
    body.campaign-public-layout .post-section.post-main {background: transparent;}
    /* Individual Adventure Log Screens - Adds white/color back in, just specify the color */
    .adventure-log-post-container.full {background-color: white;}

    /* Transparent Wiki Only - Adventure Log has Background Image */
    /* ADVENTURE LOGS */
    /* Wiki Transparency */
    body.campaign-public-layout .post-section.post-main {background: transparent;}
    /* Individual Adventure Log Screens - Adds background image back in */
    .adventure-log-post-container.full {background-image: url(INSERT YOUR IMAGE URL HERE);}



    /* Transparent Adventure Logs Only - Wiki has Only Solid White/Color Backgrounds */
    /* WIKI */
    /* Wiki Background Color */
    .wiki-page .post-section.post-main{background-color: white !important;}
    /* ADVENTURE LOGS */
    /* Adventure Log Screen Transparency */
    body.campaign-public-layout .post-section.post-main {background: transparent;}
    .adventure-log-index .adventure-log-post {background: transparent;}
    .adventure-log-index .overflow-fade-out {display: none;}
    .adventure-log-index .date-column {background: transparent;}
    .adventure-log-index .adventure-log-new-container {background: transparent;}
    /* Individual Adventure Log Screens */
    .adventure-log-show .post-header-container, .adventure-log-show .post-main, .adventure-log-show .post-comments, .adventure-log-show .comment-reply textarea{background: transparent;}
    .campaign-public-layout .highlight-container {display: none;}
    .adventure-log-index .post-date, .adventure-log-show .post-date {background: transparent;}



    /* Transparent Adventure Logs Only - Wiki has Background Image */
    /* WIKI */
    /* Wiki Background Image - You may have to change the 35 to a different number to get it to look right */
    .wiki-page .post-section.post-main{border-image: url(YOUR URL HERE) 35 fill repeat;}
    /* ADVENTURE LOGS */
    /* Adventure Log Screen Transparency */
    body.campaign-public-layout .post-section.post-main {background: transparent;}
    .adventure-log-index .adventure-log-post {background: transparent;}
    .adventure-log-index .overflow-fade-out {display: none;}
    .adventure-log-index .date-column {background: transparent;}
    .adventure-log-index .adventure-log-new-container {background: transparent;}
    /* Individual Adventure Log Screens */
    .adventure-log-show .post-header-container, .adventure-log-show .post-main, .adventure-log-show .post-comments, .adventure-log-show .comment-reply textarea{background: transparent;}
    .campaign-public-layout .highlight-container {display: none;}
    .adventure-log-index .post-date, .adventure-log-show .post-date {background: transparent;}

    I realize that it isn't best practice to use the !important modifier but I just could NOT get the second to last snippet of code to work without 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

  • Krothos
    Krothos
    Posts: 230 edited November 2018

    Thank you. This is exactly what I was looking for.

    What about for the Characters webpages?

    Also, there is a section within the Adventure Log, when viewing the individual log, to the right, the date information is still showing in white. I was able to get the color changed for the date of the log, but not that yet. What is that object's name?image

    Thank you again!

     

    Post edited by Krothos on
  • Krothos
    Krothos
    Posts: 230 edited November 2018

    I'm actually seeing the white text in same right-hand columns on other web pages.

    image

    image

    So, I'm guessing this a global container type object, where I only need to set the color. Black is fine for the color (#00000). Just need to know the object name to set it.

    Thanks!

     

    Post edited by Krothos on
  • cgregory
    cgregory
    Posts: 780

    @Krothos

    Here is a list of all the classes off of body

    https://unlockingtheportal.obsidianportal.com/wikis/body

    You might be looking for to change your color

    .campaign-public-layout #sidebar {

        color: #000000;

    }

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Krothos
    Krothos
    Posts: 230

    Thank you, and thank you, cgregory!

     

  • Krothos
    Krothos
    Posts: 230 edited November 2018

    So... continued frustration with designing my site. :(

    The individual character pages have a transparent background, thanks to Abersade's code.

    image

    Following the tips from cgregory's Unlocking the Portal and reviewing the CSS of the existing default page, I came up with the following:

    /* Individual Character/Item Pages Transparency */
    .character-show .main-content section, .item-show .main-content section {background: transparent;}
    .character-index .main-content-container {background: transparent;}

    Yet, I'm still stuck with a white non-transparent background.  :(

    image

    Any insight please.

     

    Post edited by Krothos on
  • cgregory
    cgregory
    Posts: 780

    For the list items and characters index you want the following.

    .item-index.campaign-public-layout .character-list-item {

        background-color: transparent;

    }

    .character-index.campaign-public-layout .character-list-item {

        background-color: transparent;

    }

    And the quick search for the items and the character index pages

    .item-index.campaign-public-layout .character-quick-search {

        background-color: transparent;

    }

    .character-index.campaign-public-layout .character-quick-search {

        background-color: transparent;

    }

    I usually use firefox, right clicking on what I want to change and inspect element to find what I need and to play around with the CSS to temporarily see what the changes will do. It is how I built my XCom campaign. Lots of playing around in inspect elements and temporarily adding new CSS rules without having to worry that I am breaking my site. 

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Johnprime
    Johnprime
    Posts: 252

    I do the same as cgregory, inspecting the element in either Firefox or Chrome, modifying the css of the element tag, which is at the top of the CSS inspect window. That way, you are just modifying that element, not all of the CSS on the page!

    I've gone more to Chrome these days as Firefox got rid of Firebug, which was a fantastic plug-in, but the default inspector works well too.

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

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