Custom CSS Beta Discussion

1151618202125

Comments

  • dawnhawk
    dawnhawk
    Posts: 113
    Mildly intrigued - and confused. Not saying it can't be done - just not entirely sure I understand what it is you actually want done?

    There is "background" per say to the dashboard (well no, that's not true - there is, but it's covered up with stuff - so you'd never see it anyway) - so where exactly do you want the background?

    The dashboard is made of a LOT of blocks. Um...here a visual aid. This is NOT complete, and not exact, I just lined out part of it real quick to show why I'm confused.

    "Dashboard":http://www.tentacle.net/~occultation/temp/backgroundDiv.png

    Any one of those blocks you could play around with in CSS. The question is what do you want to do with them? The forums page has the same top and side blocks - and then different inside blocks...but I'm still not sure I understand which of those blocks you want to alter and how.
  • SkidAce
    SkidAce
    Posts: 830
    I think I understand.

    The navigation menu and the "xxx update" extreme left and right should be transparent and show the background like it does on the wiki pages.
  • dawnhawk
    dawnhawk
    Posts: 113 edited November 2013
    Ok...well let's see if we can take this one bit of a time.

    To apply the background to the LEFT side bar (navigation), is the following:

    .campaign-dashboard-layout #dashboard-main-nav{
    background-image: url(https://yourimagehere.png);
    }

    @Skid - help me out again - what is "xxx update"? Totally not seeing that on my screen, or I'm way too tired and missing something obvious.

    Edit - should also note - this is going to look REALLY wonky depending on what your background image actually is! Because you are applying it as separate images into multiple boxes - best done with a "neutral" or "abstract" background...


    Edit 2:

    THIS will do the following - it sets the ACTUAL background for the dashboard (ie the part that's covered up...or as it turns out MOSTLY covered up...this looks real odd if you ONLY do this part without any further edits, so bare with me while I sort out exactly what you want visible and what you don't!), and then sets the NAV to transparent and removes any image that is covering the background.

    .campaign-dashboard-layout {
    background-image:url(https://yourimagehere.png);
    }
    .campaign-dashboard-layout #dashboard-main-nav{
    background-color:transparent;
    background-image:none;
    }
    Post edited by dawnhawk on
  • SkidAce
    SkidAce
    Posts: 830
    "xxx update" was shorthand for the stream...dawnhawk updated, RaynaDasha updated etc.

    Sorry for the confusion.

    I think your Edit 2 has the spirit of Montana's request. He (imho) wants to see his custom background on all screens, dashboard, forums, etc, not just wiki and front page.
  • dawnhawk
    dawnhawk
    Posts: 113
    Ah ok...well, hm - so many boxes.

    So then...

    .campaign-dashboard-layout .content-row
    {
    background-color:transparent;
    }

    This takes out the next "layer" - this will make some boxes vanish because they don't have a background other than this layer - but it's gotta go or other boxes can't be transparent. Easier to turn it off and then turn the ones you want ON back on.


    So now...

    For whichever boxes you want to show the background set background-color:transparent; If you want the box ON - leave it alone, or if it's not on, turn it on with a background-color:yourcolor;

    Disclaimer there may be some errors in here I'm working on the fly - and trying to pack for a 5 day vacation and do laundry to pack at the same time...But it should at least get you started turning blocks on and off as you want!

    Turned ON by default on Dashboard main page
    .campaign-dashboard-layout .calendar-module-container = The "Upcoming Events" Box
    .campaign-dashboard-layout .forum-module-container = The Recent Forum Posts Block on the main dashboard page
    .campaign-dashboard-layout .stream-module-container = The Stream ("xxx update")


    FORUM PAGES
    Main body sections
    .campaign-forum-index .forum-main-body
    .campaign-forum-manage .forum-main-body
    .campaign-forum-edit .forum-main-body

    Post Sections
    .campaign-forum-index .posts-section
    .campaign-forum-manage .posts-section
    .campaign-forum-edit .posts-section

    .campaign-forum-index .posts-section .post-section-wrapper = just the thread itself and not the whole section (I think?)


    Turned off by default - and No..."good" div to use to turn it back on
    .campaign-dashboard-layout .module-container = The only div that corresponds to "Recent Adventure Log Posts" block on main dashboard page. Would have to experiment more to see what ELSE uses this id though.


    Turned On by default and requires both a background-color:transparent and a background-image:none to turn OFF
    .campaign-forum-index .forum-page-header - header bar on forum page that says "Forums"
    .campaign-forum-manage .forum-page-header - Manage Forums "button"
    .campaign-forum-edit .forum-page-header - header bar that on Edit Forum page that says "Forum"
  • NikMak
    NikMak
    Posts: 379
    Hi All,

    I am still doing the post reforge shuffle, and need help with the 'last updated' side bar on right (apologies if this has been dealt with else where).

    i intend to put my own custom nav bar on the right of screen, and it currently underlays the 'last updated' side bar as you can see here - https://the-great-pendragon.obsidianportal.com/wikis/main-page

    how do I force the 'last updated' side bar to a position of my choosing? (probably in / under the 'footer' links would be best)

    thank in advance

    Nick
  • dawnhawk
    dawnhawk
    Posts: 113
    Hi Nikmak - what if you tried something similar to Langy's Edgerunners code that "hides" the portal sidebar unless there is a hover, thus keeping it outside the "menu sidebar" are that you have created?

    You can see the effect here: "Langy's Wiki":https://edgerunners.obsidianportal.com/wikis/armor

    If you like it - he has posted the "how of it" in a couple of places - including I think somewhere on page 7-9 or so of this thread?
  • NikMak
    NikMak
    Posts: 379
    thanks for the quick reply Dawnhawk

    that would be a work around i could live with,though not exactly what i was after - i could find where langy was talking about the effect i think (near the bottom of page 7), but not the code itself; anyone else got that code to hand?
  • Kallak
    Kallak
    Posts: 1,090
    @NikMak, if you're just looking to push the sidebar down a bit to get it out of the way, you can do something easy like add a "margin-top:00px" entry to the wiki sidebar (class is .wiki-page-show #sidebar). Replace 00 with however many pixels you would need to fit the bar in above it.

    If you're looking to reposition it entirely, it'll be slightly different based on how you want it to be displayed. One example would be to add "position:absolute" to the sidebar, and then use "top:00px", and/or "left:00px"/"right:00px" values to move it elsewhere.
    All the best,
    - Kallak
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Another answer, if you don't want the bar at all, is to put it to the background completely, by putting the z index to a negative number
    div#sidebar {z-index: -100 !important;}

    That is what we did for our site.
    killervp
    "A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
    Here to help anyone- Send me a PM

    Just trying to help out.

  • NikMak
    NikMak
    Posts: 379
    thanks for the help all, i will play around with it later and see what works best.
  • Teak_Dhara
    Teak_Dhara
    Posts: 61
    Thank you to everyone who posted code ideas for how to have the forums pages display the background the way same the "frontpage", "Character" and "wiki" pages do. I tried all of the codes you posted and nothing changed the forums at all. Still tons of white space with the menu bar on the left, followed by the forum name in the middle column, and then the forum message to the right.
  • NikMak
    NikMak
    Posts: 379
    thanks once again to all who offered advice

    in the end i could not get the 'z axis' command from KIlverp to work (not sure why...) so for now am positioning the update sidebar under the reduced icons (standard) thanks to Kallak.

    /*Space pages to fit screen better*/
    .wiki-page-show #sidebar {position:absolute !important; top:365px ; width:10%; min-width:50px;}
    .wiki-page-show .main-content-container {width:85% !important; min-width:300px;}
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    @NikMak- Feel free to check out my full CSS on this "page":https://a-god-rebuilt.obsidianportal.com/wikis/css and ask me any questions.
    killervp
    "A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
    Here to help anyone- Send me a PM

    Just trying to help out.

  • saethone
    saethone
    Posts: 153
    Montana, each part's background needs to be removed individually. You can take the bits and pieces you want to customize it, or take it all to make your background show through everything. I did not put the code for the settings page, since you are the only one who sees that, however if you'd like I can get you the code for those too...it will just take some time. I tested this on my campaign and it seems to work OK, if it doesn't just let me know - a screenshot of the offending piece would be helpful also.

    /* Removes the white background on the left bar */

    .campaign-dashboard-layout #dashboard-main-nav {
    background:none;
    }

    /* Removes the white background on the forum title bar */

    .campaign-forum-index .forum-page-header {
    background:none;
    }


    /* Removes the white background on the forum topics bar */

    .campaign-forum-index .topics-section {
    background:none;
    }

    /* Removes the white background on the footer */

    .campaign-dashboard-layout #main-footer {
    background:none;
    }


    /* dashbord module white background removal */

    .campaign-dashboard-layout .forum-module-container {
    background:none;
    }

    /* upcoming events white background remover */
    .campaign-dashboard-layout .calendar-module-container {
    background:none;
    }

    /* main dashboard white background remover */

    .campaign-dashboard-layout .content-row {
    background:none;
    }


    /* player bars on dashboard */

    .campaign-dashboard-layout .player-group-module .dashboard-player {
    background:none;
    }


    .campaign-dashboard-layout .player-group-module .game-master.dashboard-player .player-info {
    background:none;
    }

    .campaign-dashboard-layout .player-group-module .game-master.dashboard-player {
    background:none;
    }

    /* event right bar*/

    .campaign-calendar-index .sidebar {
    background:none;
    }

    /* event right bar and calander */

    .campaign-dashboard-layout .content-row {
    background:none;
    }

    -----
    "Theophagie":https://theophagie.obsidianportal.com/ - Houseruled D&D 3.5 in Alternate History Earth
    "Zeroed":https://zeroed.obsidianportal.com/ - GURPS Cyberpunk-Sci-Fantasy
  • Teak_Dhara
    Teak_Dhara
    Posts: 61
    Thank you Saethone for going through the effort to give me all that code. I put that in my custom CSS (under the advanced settings) and sadly all it did was suppress my toolbar on the right (making it invisible until I moused out over it) but didn't display any background images-- the entire forums were simply white. --Sigh-- I guess I am just going to have to live with this and hope and pray that they allow us to post images in the adventure log "comments" so my background images can be seen.
  • saethone
    saethone
    Posts: 153
    hmm, well the one i used had my body background done differently too, try adding this above all of that code:

    body {
    background-image: url('xxxxxx');
    }


    replacing the x's with the url for your background

    If that doesn't work then I don't know, might be something that a vanguard will need to play around with.
  • Teak_Dhara
    Teak_Dhara
    Posts: 61
    (Please Note: I am not a web programmer and a complete rookie for linking things).

    With that caveat, how I do find the URL for my background that I uploaded to this site? I looked under the setup and I can see a small thumbnail of my background picture but I can't see the URL for it. To get your code to work do I need to upload my picture to another site (like smugmug.com)? If yes, what is the exact way I HTML language I would need? Is it something link image_ref:www.mysite.com/image_name.jpg? Thanks in advance!
  • saethone
    saethone
    Posts: 153
    Well, how to find it depends on what browser you are using. What browser are you using - IE, Chrome, Firefox? Or if you just link me to your campaigns, as long as they aren't set to private I can pull the URLs for each one for you.

    Before you go that far though, I'd just plug in this url for right now to test it, if it works, it should turn your background black. Either way, you can just add it, see if it works, then take it out.

    If it does work, we can find the backgrounds for your pages - its fairly easy once you know how.

    body { background-image: url(‘http://cdn.obsidianportal.com/assets/250567/black.jpg’);}
  • SkidAce
    SkidAce
    Posts: 830
    Right click on that thumbnail and select copy link.
  • Teak_Dhara
    Teak_Dhara
    Posts: 61
    Ok, I tried inserting your background image using this code (but still just white and menu bar on left is invisible.
    Here is one of my campaigns -- it should be public.

    https://clarkes-third-law.obsidianportal.com/
  • Teak_Dhara
    Teak_Dhara
    Posts: 61 edited November 2013
    Oh, we are getting close-- i was able to find the background URL using SKidAce's tip. I used your code and now the forums are much better EXCEPT the text in the message area of each post. Is there a code to have the background be a semi-transparent grey so the background image kind-a-bleeds through but it is easier to read?

    Here is the link to the forums:

    https://clarkes-third-law.obsidianportal.com/forum/adventure-log-current

    and another one my campaigns with the code fix provided from Saethone (thanks!)

    https://the_approaching_storm.obsidianportal.com/forum

    Also, is there a way to take my banner, which the frontpage, wiki and character page is center, and center it on the forum page (right now it is off in a weird top right placement).
    Post edited by Teak_Dhara on
  • Teak_Dhara
    Teak_Dhara
    Posts: 61
    So I googled semi-transparent CSS colors and found how to change colors and make them transparent so my forums are ALMOST there

    My remaining wish list for forum tweaks:
    1. The actual content of a forum post has no background. While cool, it does make it hard to read. I would like to either (1) be able to change the font color so its white FONT or find the code to color the background color of the forum post itself (and then I will put opacity setting to make it readable).
    2. Move my banner from the far right of the screen to center on the forums (like it appears on the frontpage).

    So far the code I am using (again huge thanks to Saethone!) is as follows (you can see my forum at


    "https://clarkes-third-law.obsidianportal.com/forum" [SORRY STILL CAN'T seem to get HTML code to link in this forum]




    /* Removes the white background on the forum title bar */

    .campaign-forum-index .forum-page-header { background:#9FB6CD;
    opacity:0.7
    }


    /* Removes the white background on the forum topics bar */

    .campaign-forum-index .topics-section { background:none;
    opacity:0.7
    }

    /* Removes the white background on the footer */

    .campaign-dashboard-layout #main-footer { background:none; }

    /* dashbord module white background removal */

    .campaign-dashboard-layout .forum-module-container { background:none; }

    /* upcoming events white background remover */
    .campaign-dashboard-layout .calendar-module-container { background:none; }

    /* main dashboard white background remover */

    .campaign-dashboard-layout .content-row { background:none; }

    /* player bars on dashboard */

    .campaign-dashboard-layout .player-group-module .dashboard-player { background:none; }

    .campaign-dashboard-layout .player-group-module .game-master.dashboard-player .player-info { background:none; }

    .campaign-dashboard-layout .player-group-module .game-master.dashboard-player { background:none; }

    /* event right bar*/

    .campaign-calendar-index .sidebar { background:none; }

    /* event right bar and calander */

    .campaign-dashboard-layout .content-row { background:none; }

    body { background-image:url('//db4sgowjqfwig.cloudfront.net/assets/263239/planet1.jpg?1384657762')}
  • saethone
    saethone
    Posts: 153 edited November 2013
    1> I believe we could do this either way, whichever you prefer for your color scheme. From a design perspective, I'd suggest using white text on a slightly transparent gray background, based on your campaign colors. (it would look like the icons on the nav bar on the wiki pages), or simply black text on white background so that your forum posts look the same as your wiki pages.

    2> This should not be terribly difficult either. Just a little bit of numbers tweaking is all.

    Unfortunately I most likely won't have time to check on this till Monday.

    In the mean time, just let me know what you'd like the posts to look like. If nobody else has tackled it by Mon I'll take a look at it.


    By the way, to make your links clickable in (these) forum posts, make sure you bubble in "Textile" above the submit button
    -----

    "Theophagie":https://theophagie.obsidianportal.com/ - Houseruled D&D 3.5 in Alternate History Earth
    "Zeroed":https://zeroed.obsidianportal.com/ - GURPS Cyberpunk-Sci-Fantasy
    Post edited by saethone on
  • Teak_Dhara
    Teak_Dhara
    Posts: 61
    "link to Clarke's Third Law Forum":https://clarkes-third-law.obsidianportal.com/forum/adventure-log-current You will likely need to actually click the link to see a forum post.

    LordMisha (one of my players and another GM on this site that is frustrated with the site) gave me some code that made the forum posts themselves readable by adding a semi-black ground with white text (thanks!).

    That leaves my wish list as follows:
    1. White text for the forum heading row (the row that contains the links to the forum and subforum that appears as a horizontial line across the top of the page (below the banner).
    2. Moving the banner to center and not flush right (and small) on the forums
    3. Forum posts on dashboard also need a semi-black back ground and white text)



    Here is the code that I am using now

    /* Removes the white background on the forum title bar */

    .campaign-forum-index .forum-page-header { background:#9FB6CD;
    opacity:0.7
    }


    /* Removes the white background on the forum topics bar */

    .campaign-forum-index .topics-section { background:none;
    opacity:0.7
    }

    /* Removes the white background on the footer */

    .campaign-dashboard-layout #main-footer { background:none; }

    /* dashbord module white background removal */

    .campaign-dashboard-layout .forum-module-container { background:none; }

    /* upcoming events white background remover */
    .campaign-dashboard-layout .calendar-module-container { background:none; }

    /* main dashboard white background remover */

    .campaign-dashboard-layout .content-row { background:none; }

    /* player bars on dashboard */

    .campaign-dashboard-layout .player-group-module .dashboard-player { background:none; }

    .campaign-dashboard-layout .player-group-module .game-master.dashboard-player .player-info { background:none; }

    .campaign-dashboard-layout .player-group-module .game-master.dashboard-player { background:none; }

    /* event right bar*/

    .campaign-calendar-index .sidebar { background:none; }

    /* event right bar and calander */

    .campaign-dashboard-layout .content-row { background:none; }

    body { background-image:url('//db4sgowjqfwig.cloudfront.net/assets/263239/planet1.jpg?1384657762')}

    .posts-section, .campaign-forum-index li {
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    }
    .posts-section p, .posts-section label, .posts-section h4, .posts-section span, .timeago-weekonly-reformat, .campaign-forum-index li.topic a, .campaign-forum-index li.topic .post-count {
    color:#fff;
    }
  • Pils
    Pils
    Posts: 149
    Hi,

    I want to delete the "description" and "bio" titles on each character's page. Who can help me please?

    -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...)

  • madartiste
    madartiste
    Posts: 328 edited November 2013
    Hmm... I think bio would be @.bio h6 {display:none;}@
    Description is tougher because of the "script" part. Give me a bit and I'll figure that out.

    EDIT: Here you go. This piece of code should get ride of both at once: @.character-show .bio h6, .character-show .tagline + div h6 {display:none;}@
    Just don't use an H6 header anywhere else in those sections or they won't show up. :)
    Post edited by madartiste on
  • labianca
    labianca
    Posts: 3
    Hi all -

    Came back to my OP site and found it all on molly.. man I feel for the devs. Fastest way to fix this is to wipe my campaign and reload stuff after I fix the layout.

    So I have a question: The huge gap between the top of the page and my first adventure log entry.. how the heck do I clear it?

    Thanks folks.
    A
  • Pils
    Pils
    Posts: 149
    Your're really a King, Madartiste! Thanks!

    @labianca: maybe try other browser, I have the same problem with Safari (a huge gap between the top of every page), but it work fine with Mozilla Firefox. I seems to be the Obsidian Portal dragon icon who become oversized...

    You can also use this CSS code, it will delete the OP dragon and the title of your campaign:

    .campaign-public-layout #campaign-summary-row .row {opacity: 0.0; height: 30px}

    -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...)

  • Teak_Dhara
    Teak_Dhara
    Posts: 61
    anyone know if you can use textile in adventure post comments? Will it work?
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