CSS help with NEW Wiki Page and NEW Adventure Log Post Backgrounds

GM_Corrad
GM_Corrad
edited May 2016 in Campaign Portal Building
Thank you in advance . . .

Most of my Portal is looking acceptable. Where I am stuck is with the NEW Wiki Page and NEW Adventure Log Post backgrounds. I want those pages to be transparent as well.

http://swlotl.obsidianportal.com/


So here's my CSS:

.flame-dragon {display: none;}

.post-section, .campaign-landing-page-container, .adventure-log-post, .post-date, .post-header-container, .character-list-item, .character-quick-search, #character-details, .map-placard { background-color: rgba(0,0,0,0.0) !important; color: yellow; }
.adventure-log-new-container { background-color: rgba(0,0,0,0.0) !important; }
.overflow-fade-out { display:none; }

.campaign-public-layout .main-content h1, .campaign-public-layout .main-content h4, .campaign-public-layout .main-content h6 { color: yellow; }
.campaign-public-layout .main-content h2, .campaign-public-layout .main-content h3, .campaign-public-layout .main-content h5 { color: orange; }

P.ccrlttl { text-align: center; font-family: Franklin Gothic; font-weight: bold; }
P.ccrlbdy { text-align: center; font-family: Franklin Gothic; font-weight: normal; }


EDIT: Any help with any unnecessary redundancies in my CSS is most appreciated, as well.

Comments

  • ketherian
    ketherian
    Posts: 18
    Hi.
    I'm assuming you want the edit screen to be mostly transparent?
    If so, you need to use

    bc. section.main-section {background:transparent;}

    You'll have to fool about with the various headings in the section to make them more visible though as they are black by default.
    The buttons in @.campaign-textarea-container .markItUp@ become almost unreadable on my background; on a black star-lit background, I suspect it's far worse.

    Hope this helps.

    PS: Textile help

    to add a line of code, use the @ sign before and after (touching) the phrase.
    use

    bc. to denote multiple lines.
    test
    test

    A blank line closes the bc.

    html links - text to be displayed is in quotes, followed by a : then the URL .

    --
    Ketherian
    "Signs & Portends":swtwc.obsidianportal.com - Winter court is coming.
    "Dwarves of Koldukar":dwarves-1.obsidianportal.com - Dwarves!
    "In a certain realm":inacertainrealm.obsidianportal.com - Where Faerun meets Russian myth.
  • GM_Corrad
    GM_Corrad
    Posts: 4
    That is super helpful, thank you very much!
  • GM_Corrad
    GM_Corrad
    Posts: 4 edited May 2016
    OK, I ran into another issue along similar lines (my apologies if I should've made a new discussion):

    I'm customizing some different block quote classes. The background color and borders are working great but, they are inheriting the base blockquote text color, ignoring my CSS.

    @.flame-dragon {display: none;}
    .post-section, .campaign-landing-page-container, .adventure-log-post, .post-date, .post-header-container, .character-list-item, .character-quick-search, #character-details, .map-placard { background-color: rgba(0,0,0,0.0) !important; color: yellow; }
    .adventure-log-new-container { background-color: rgba(0,0,0,0.0) }
    blockquote.npc { background-color: #751312; font-style: italic; border-radius: 1em; color: #D2855B !important; }
    blockquote.sdbr { background-color: #3E3E3E; border-radius: 1em; color: #CCCDC8 !important; }
    blockquote.ex { background-color: #C7C8C3; border-radius: 1em; color: black !important; }
    section.main-section { background-color: rgba(0,0,0,0.0) color: yellow; }
    .campaign-textarea-container .markItUp { color: white; }
    .overflow-fade-out { display:none; }
    .campaign-public-layout .main-content h1, .campaign-public-layout .main-content h4, .campaign-public-layout .main-content h6 { color: yellow; }
    .campaign-public-layout .main-content h2, .campaign-public-layout .main-content h3, .campaign-public-layout .main-content h5 { color: orange; }
    P.ccrlttl { text-align: center; font-family: Franklin Gothic; font-weight: bold; }
    P.ccrlbdy { text-align: center; font-family: Franklin Gothic; font-weight: normal; }@

    It seems there's no way to "break" inheritance - does anyone have any ideas?

    Wiki Page example:
    "Star Wars Chronicles: Last of the Lost":http://swlotl.obsidianportal.com/wikis/main-page
    Post edited by GM_Corrad on
  • ketherian
    ketherian
    Posts: 18
    Hi GM_Corrad.
    No worries, one thread or several, whatever you're comfortable with.

    Is the problem that the blockquote.ex doesn't have black text? For it to have black text, you need to add the following to your CSS.

    @blockquote.ex p {color:black;}@

    Or something like it. If there's no p tag inside the blockquote.ex region, the text is black. But the p tag already has a colour. And one tag doesn't override another by default.

    In addition, you shouldn't have to use !important inside each of the blockquote statements; they have unique names and so should override the default blockquote without issue. Try to limit your use of !important. It can be tricky to debug a CSS if there's a lot of these statements in it.

    --
    Ketherian
    "Signs & Portends":swtwc.obsidianportal.com - Winter court is coming.
    "Dwarves of Koldukar":dwarves-1.obsidianportal.com - Dwarves!!
    "In a certain realm":inacertainrealm.obsidianportal.com - Where Faerun meets Russian myth.
  • GM_Corrad
    GM_Corrad
    Posts: 4
    Wow, thank you again. The site is just for fun family use - and this has really gottem me close enough to where I wanted to be. Can't say thanks enough for such a helpful, rapid response.
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