Custom CSS Beta Discussion

11920212325

Comments

  • weasel0
    weasel0
    Posts: 435
    Okay, so unless someone can let me know if there's a simple global override for these, I guess I just have to inspect each element I run across and target them specifically.
  • Basileus
    Basileus
    Posts: 585 edited May 2014
    "campaign-dashboard-layout" is the corresponding class for private areas to "campaign-public-layout" for public areas. So to turn all h1 headers in your public site would be:

    @.campaign-public-layout h1 {color: red;}@

    While to turn all h1 headers in your private site would be:

    @.campaign-dashboard-layout h1 {color: red;}@

    So code to turn all headers in both public and private areas of your campaign red is:

    @.campaign-dashboard-layout h1, .campaign-dashboard-layout h2, .campaign-dashboard-layout h3, .campaign-dashboard-layout h4, .campaign-dashboard-layout h5, .campaign-public-layout h1, .campaign-public-layout h2, .campaign-public-layout h3, .campaign-public-layout h4, .campaign-public-layout h5 {color: red;}@

    EDIT: Although, honestly, I'm not sure why the "h1, h2, h3, h4, h5" selector didn't work. It might be that there is more specific CSS set in the application, so this might be one of the few good use cases for the !important tag.
    Post edited by Basileus on
  • weasel0
    weasel0
    Posts: 435 edited May 2014
    It does seem there're colors specifically set pretty far down the chain in OPs CSS that overrides. Here's what's worked for me to change all of the ones i wanted.

    .campaign-link,h1,h2,h3,h4,h5,h6
    {
    color:red !important;
    }

    The !important tag worked on the public and dashboard side. All except the big giant campaign title that sits on all the dashboard pages.



    A curiosity: I have GM only text on my Front page. It keeps vanishing but will display if i re-save it. Any thoughts?
    Post edited by weasel0 on
  • Basileus
    Basileus
    Posts: 585
    The big title actually isn't header text at all (even though it looks like it) - it has both the .campaign-link class and the #content ID, and is an a element. Try this:

    @#content a.campaign-link {color: red;}@

    As for the disappearing GM Text, I haven't the foggiest idea. I would submit a Help ticket.
  • Pils
    Pils
    Posts: 149
    Hi,
    With only a few months out of OP, my knowledge of CSS is totally rusty... Who could help me??

    Here is my query: on my "adventure log page":https://dark-sun-a-trova.obsidianportal.com/adventure-log, I want to catch the fade out and change the height of each box (to make each adventure banner full).

    Thank you

    (it seem that my english too is gone rusty, sorry...)

    -Pils
    "Dark Sun / La Décade des Héros":https://dark-sun-a-trova.obsidianportal.com/: Face the Fire of the Dark Sun... a World ravaged by Sorcery!

    -Pils

    Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)

    Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!

    (And I'm so soooorry for my poor english...)

  • SkidAce
    SkidAce
    Posts: 830
    This should fix the fade out.

    @/* ADVENTURE LOG TEST */
    .overflow-fade-out {background: none !important;}@

    Example "Here":https://unconquered-kingdoms.obsidianportal.com/adventure-log
  • SkidAce
    SkidAce
    Posts: 830
    This is the entirety of my Adventure Log code:

    @/* ADVENTURE LOG TEST */
    .adventure-log-post {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%;}
    .adventure-log-post-container .post-date {background-color: transparent; color:green;}
    .overflow-fade-out {background: none !important;}
    .adventure-log-index .adventure-log-new-container {background: none;}
    .adventure-log-show .post-header-container {background-image: url(https://db4sgowjqfwig.cloudfront.net/assets/265269/DSF_Emma_paper2.jpg?1385084264);}@
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,994
    Pils, I have updated my CSS page as well- give it a good look
    "CSS Page for Rebuilt":https://a-god-rebuilt.obsidianportal.com/wikis/css

    Just trying to help out.

  • Pils
    Pils
    Posts: 149
    Thanks SkidAce & Killervp!

    -Pils
    "Dark Sun / La Décade des Héros":https://dark-sun-a-trova.obsidianportal.com/: Face the Fire of the Dark Sun... a World ravaged by Sorcery!

    -Pils

    Dark Sun ● La Décade des Héros : Face the Fire of the Dark Sun... a World ravaged by Sorcery! (CotM - Dec 2012)

    Les Royaumes Oubliés : A D&D 5e old school style Forgotten Realms campaign!

    (And I'm so soooorry for my poor english...)

  • dr_venture
    dr_venture
    Posts: 32 edited August 2014
    Hey, I could use some help: I'm trying to fix the color of the "Quotes" text, which are actually tags within . The current light grey is super hard to read, so I'm trying to make it much more usable. I've tried these options (one at a time -- not all at once) but none of them work:

    blockquote {color:#482200 !important;}
    .blockquote {color:#482200 !important;}
    .campaign-public-layout blockquote {color:#482200 !important;}

    Clearly I'm grasping at straws here - any knowledgeable help here would be appreciated.
    Post edited by dr_venture on
  • NikMak
    NikMak
    Posts: 379
    someone with more skill and knowledge than myself will be along shortly to help you, but in the mean time...

    Not sure if it makes a difference, but I always use the set names or a three digit code for colour changes (NOTE - i have not tried either of these suggestions, just suggesting things that have worked for me in the past)


    e.g. instead fo #482200, try #480 instead?

    also may be easier to just try

    .campaign-public-layout blockquote {font-color: black;} and see if that works

    let me know if either helps!
  • Keryth987
    Keryth987
    Posts: 1,040
    OK...something I'm trying tof igure out, and don;t know if it can even be done.

    Is there a way to redirect the Standard Link for the Characters page from the default page to a different page? I've tinkered and toyed with the Character Page on the site for my new campaign I am working on, but it still does not meet my liking and would be much easier if I could take that page out completely with a custom one of ym own.

    As always, thanks.


    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/

  • NikMak
    NikMak
    Posts: 379
    Im sure you have thought of this already - but what about hiding the nav buttons completely and putting your own nav bar in place...

    Or is that not the solution your looking for?
  • Keryth987
    Keryth987
    Posts: 1,040
    Not the solution I am looking for. Want to use the Menu that OP provides. Used my own Nav Bar in the shadows Site and it was far more trouble than it was worth.

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/

  • Wildhunt78
    Wildhunt78
    Posts: 17
    I used to be able to make images a button to other pages but how the embedded image works now seems to have changed. How do I add a URL or wiki link to an image to create a button?
  • twiggyleaf
    twiggyleaf
    Posts: 2,000
    Hey Wildhunt78

    I also encountered this problem when the picture codes changed. I think I got around it by RIGHT CLICKING on the picture and using COPY URL and pasting that into the code I had previously used to create the picture link.

    twiggyleaf
    CURRENT CAMPAIGN: "Mysteria":http://www.obsidianportal.com/campaigns/mysteria - set in Wolfgang Baur’s MIDGARD.
    Previous CotM Aug 2012: "Shimring":http://www.obsidianportal.com/campaigns/shimring

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • Eck
    Eck
    Posts: 4
    When copying the url, I notice a parameter at the end:

    ........StandardUrlStuff..../ImageName.jpg?1408383774

    What is the: "?1408383774" parameter at the end?

    It seems to work just fine whether I include that parameter or not. What's the best practice here?

    - Eck
  • Basileus
    Basileus
    Posts: 585 edited August 2014
    Without speculating about its purpose, the old image code included it by default when you inserted an image into the wiki, so it isn't being generated dynamically on page-load.

    In the absence of any reason to get rid of it, I'd leave it intact just in case the devs are currently or plan in the future on using it for something.

    Interestingly, you can also replace it with any other arbitrary string with no noticeable effect.
    Post edited by Basileus on
  • twiggyleaf
    twiggyleaf
    Posts: 2,000
    Thanks again, Basileus.

    twigs

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • Eck
    Eck
    Posts: 4
    The current "Embed Image" code also generates that number parameter when selecting an image to insert. (as of Aug 26, 2014 at least)

    Also of note, it seems like the character portraits don't get the little parameter. Weird.

    The programmer in me tells me to remove extra nonsense that doesn't do anything, but I'll leave it be for now.

    I've got my eye on you strange numbers... -.-

    - Eck
  • jtokay
    jtokay
    Posts: 6 edited September 2014
    Had fun messing around with CSS quite a bit before the revamp, but it’s been a long time, a lot has changed, and almost all of it has drained out of the brain.

    Now, just looking for a way to fade the background in the main text blocks. I found the total transparent code, but that’s not what I’m looking for. Right now I have:

    .main-content-container{ background-color:#FFF; opacity: 0.5 !important}
    .campaign-landing-page-container{ background-color:#FFF; opacity: 0.5 !important}
    .post-main{ background-color:#FFF; opacity: 0.5 !important;}

    But this is also fading the text, which I want strong. It’s just the background I want faded. Any way to do this?
    Post edited by jtokay on
  • Basileus
    Basileus
    Posts: 585 edited September 2014
    Remove the opacity property and use an rgba value for the background-color instead. Example:

    @.main-content-container {background-color: rgba(255,255,255,0.5);}@

    The last value in an rgba color is the alpha channel, which will have the same effect as opacity but won't be inherited by child objects (such as the text contained in the wiki page).
    Post edited by Basileus on
  • jtokay
    jtokay
    Posts: 6
    Awesome, worked like a charm, thanks!
  • Keryth987
    Keryth987
    Posts: 1,040
    Still trying to redirect the default Characters button
    Inspect Element reveals the following:









    So, what i need, i assume, is CSS to replace the /characters in the href. Question is, HOW?

    anyone? Please?

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/

  • Wildhunt78
    Wildhunt78
    Posts: 17
    Maybe not CSS specific (though maybe if I cannot get it to work).

    I am trying to place three images side by side. In several of my older campaigns, I had rows of portraits on my main page and I would just have to size them to fit but otherwise, they slid next to each other no prob. Since the change of how pics are coded, I have had no-end of issues. It will only ever show the first pic, even if I use the align codes.

    What do I have to do now? Any ideas?

    For an idea of what I want, here is my old campaign page:

    https://adelaide-jade-regent.obsidianportal.com/wikis/main-page
  • NikMak
    NikMak
    Posts: 379 edited November 2014
    Two ideas not really code dependent 1) use a table, 2) create your multiple images as a single image and upload that. Also should be possible to implement as an image with absolute positioning, if no one gives a better answer before hand I will take a look when I'm on a PC and not my phone! :)

    ____________

    edit

    ok assuming you only want to use it on a page or two try this (obviously replacing the URL with the image url you want to use; it looks a bit like this - see the three centered buttons in underneath the 'test text' written in white on this page :- https://practice2.obsidianportal.com/wiki_pages/why

    you can do that like this

    solution 3







    Solution 4

    if you decide you want to use this format over and over again, consider making an 'image box' div class that you can put where you want (that is the floating three buttons in a triangle formation on the same page

    so in the CCS front panel put something like this (once again slect the urls you need for your back ground, and play around with your positioning, padding and other style commands, dont forget you can make the 'image box' itself invisible as well if thats what you want) ...



    .imagebox {padding:10px;margin:1px; position:absolute !important; z index:-100; right:375px; width:175px; top:-150px; background-image: url("https://db4sgowjqfwig.cloudfront.net/images/2151701/labyrinthV4.jpg"); font-size:bold; ;color:#3F3; font-size:large; padding:1px; border-color:green; border-style:solid; border-width:1px;}


    then on the individual wiki pages where you want to use the image box you put on each page something like this









    ok, hope that helps, as its about the upper limit of my Web-Fu!

    if it does not help, Im sure some one more knowledgeable will be along shortly :)

    cheers

    Nick
    Post edited by NikMak on
  • SkidAce
    SkidAce
    Posts: 830
    I can give you the code for this;

    "Unconquered Kingdoms Wiki":https://unconquered-kingdoms.obsidianportal.com/wikis/main-page

    if that's what you mean, its a mix of CSS and on page code.
  • NikMak
    NikMak
    Posts: 379
    speak of the devil ;)
  • Wildhunt78
    Wildhunt78
    Posts: 17
    @NikMak - Thank you for the ideas but I couldn't get the table concept to work and I do need them to be separate images as I will make buttons out of them.

    @ SkidAce - Your layout is perfect, that is what I am trying to achieve. I used to be able to do that and not sure why I cannot now. If I could have your magic code, I would be most appreciative.
  • SkidAce
    SkidAce
    Posts: 830
    I cribbed instruction and code from "Dresden Files Dallas":https://dfd.obsidianportal.com/wikis/css-3 , re: wolfhound. After some pms and such, I modified it for my campaign.

    Here is the CSS portion;

    @/* MAIN WIKI MENU BOX */
    .tribox {position:relative;left:10px;width:684px;height:122px;padding:0px;margin:0px;margin-bottom:5px;text-align:center;background-color:none;vertical-align:bottom;}
    .tribox.left {position:absolute;left:0px;top:3px;width:220px;height:110px;background-color:white;border-style:solid;border-width:2px;background-image:url('http://cdn.obsidianportal.com/assets/160661/BookbacksDark.jpg');}
    .tribox.center {position:absolute;left:230px;top:3px;width:220px;height:110px;background-color:white;border-style:solid;border-width:2px;border-color:black;padding:0px;background-image:url('http://cdn.obsidianportal.com/assets/160661/BookbacksDark.jpg');}
    .tribox.right {position:absolute;left:460px;top:3px;width:220px;height:110px;background-color:white;border-style:solid;border-width:2px;border-color:black;padding:0px;background-image:url('http://cdn.obsidianportal.com/assets/160661/BookbacksDark.jpg');}
    .overtext {position:absolute;top:34%;left:0px;text-align:center;font-size:large;font-weight:bold;text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 0px 0px 4px black;width:220px;color:SkyBlue;}
    .overtext:hover {color:yellow;}
    a.rollover {position:relative;display:block;width:220px;height:110px;text-decoration: none;background:url('http://cdn.obsidianportal.com/assets/165211/GlowingBorderRollover.png');background-color:transparent;}
    a.rollover:hover {background-position:-220px 0px;}
    @
Sign In or Register to comment.

November 2023
Violet Hill

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