How would I make various page components background translucent to display more of the wallpaper?

LordGroan
LordGroan
edited December 2015 in Campaign Portal Building
Good afternoon.

On my portal site (https://pathfinder-skull-shackles-2014.obsidianportal.com/dashboard), I would like to make the various component backgrounds translucent to allow more of the wallpaper through. The blocks such as: Forum, adventure log, stream and player group. Right now, the background is gray.

However, I noticed other users have figured this out: https://symphony-of-time.obsidianportal.com/

Could anyone point me to where I could go to modify my own page accordingly?

Thanks.
B.

Comments

  • berdman
    berdman
    Posts: 46
    You will need to use CSS to accomplish this. If you are ascendant then you can use the custom css on the advanced tab under settings, if not I am not sure how you will do this on a page by page basis.

    The important style is background-color:rgba(255, 255, 255, 0.65098) !important. This sets the color, the first three numbers in the rgba and the opacity which is the decimal number. A value of one is not transparency and value of 0 is completely transparent, so you adjust this value to see more or less of the background. The background-color:transparent !important; style settings are to remove other layers that will prevent the effect from working.

    This css will handle the campaign wiki.
    .campaign-public-layout .main-content {background-color:transparent !important;}
    .campaign-public-layout .campaign-landing-page-container {background-color:transparent !important;}
    .campaign-public-layout .section {background-color:transparent !important;}
    .campaign-public-layout .post-main {background-color:transparent !important;}
    .campaign-public-layout .post-main.post-section {background-color:transparent !important;}
    .campaign-public-layout .post-section.post-main {background-color:rgba(255, 255, 255, 0.65098) !important;}

    This css will handle the Character List Page:
    .character-index.campaign-public-layout .character-list-item {background-color:rgba(255, 255, 255, 0.65098) !important; border-radius: 5px 5px 5px 5px;}

    This css will handle the Search Box on the Character List Page:
    .character-index.campaign-public-layout div.character-search-area div.character-quick-search {background-color:rgba(255, 255, 255, 0.65098) !important;}
    .character-index.campaign-public-layout .filter-options {background-color:rgba(255, 255, 255, 0.65098) !important;}

    This css will handle the Character Page:
    .character-show .main-content section {background-color:rgba(255, 255, 255, 0.55098)}


    You can see what it looks like here:
    Wiki Page Example: https://drahatan.obsidianportal.com/wikis/main-page
    Character List Example: https://drahatan.obsidianportal.com/characters
    Character Page Example: https://drahatan.obsidianportal.com/characters/baroness-deularla-blythswan

    I originally got this from Basileus from this page: https://outremer.obsidianportal.com/wikis/iglass (There is a lot of additional CSS that is here as well).

    I have not work on any of the other sections of the site, so I don't have CSS handy for it, but others may.

    I think I got everything from my CSS that you need, but I may have missed something so let me know if this doesn't work for you.

    If you have any questions I will be happy to try and answer them.
Sign In or Register to comment.

April 2024
Season of Strife

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

Categories