Custom CSS Beta Discussion

191012141525

Comments

  • Thorvaldr
    Thorvaldr
    Posts: 141
    Ah! @Basileus! You have an official Quick’n‘Dirty CSS Fix thing going on! Yes, please add anything there, it is extraordinarily helpful having everything all in one post/place. Thanks for taking the time to comb through the forums and combine everything!
  • PurpleSteve
    PurpleSteve
    Posts: 12
    Huge thanks to @Madartiste for getting me on the right track with the horizontal navbar.
    I've managed to get rid of the annoying arrow too, just stick this line in:

    #campaign-nav li.active:after {display:none}

    "Here":https://things-to-do-in-denver.obsidianportal.com/ is what I've managed so far. Seriously in awe of everyone who's managed to completely convert their campaigns already, impressive stuff :)
  • madartiste
    madartiste
    Posts: 328 edited October 2013
    @PurpleSteve: Sweet! I'm glad it helped someone. :) I actually got around to removing the arrow myself later, but then totally forgot to put the code in, so thanks! Your nav bar looks sweet - and the rest of the page too!

    I've also got some code for removing the nav link text all together and replacing it with images if anyone wants it.
    Post edited by madartiste on
  • felanor
    Posts: 1
    Getting an error when trying to save the following addition to my custom CSS:

    .wiki-page { font-family: "caflisch-script-pro"; }

    Just trying to add a typekit family to my wiki pages. Anyone have any thoughts?
  • Langy
    Langy
    Posts: 364
    You can't have anything with the word 'script' in your CSS, unfortunately. That means you won't be able to use that font:(
  • Belrathius
    Belrathius
    Posts: 206
    Hi folks,

    I have the following line in my CSS

    .campaign-settings #style-settings #custom-css-field {color:white;background-color:black;}

    which does convert my CSS text area to white on black, but only until I click in the text area itself. At that point, it goes to white on dark grey. How can I address this? I have tried :active and :focus, but neither provide a solution. Anyone know what it is that I'm missing?
  • PurpleSteve
    PurpleSteve
    Posts: 12 edited October 2013
    Belrathius, stick an extra line in there like so:

    #style-settings textarea:focus {background-color: black !important;}
    Post edited by PurpleSteve on
  • Belrathius
    Belrathius
    Posts: 206
    Thanks Steve! Your line reminded me that changes don't necessarily take unless you use the !important flag. Adding just that element was sufficient to solve the problem, so the issue is seemingly one of prioritization.

    Don't forget, folks, that just making CSS changes may not be enough to override settings without the !important flag (that so many others have already incorporated into their snippets, thankfully).

    I would also like to thank (again) all the great folks contributing snippets of style code for the CSS to help us get back to a semblance of order.
  • pjrichert
    pjrichert
    Posts: 6
    Editing my front page immediately takes me to my wiki, and doesn't allow me to edit my front page....yeah, this is so much easier...
  • PurpleSteve
    PurpleSteve
    Posts: 12
    I'm pretty sure that's how it always worked. Your front page is just another wiki page presented slightly differently.
  • pjrichert
    pjrichert
    Posts: 6
    Changing my default background and dropping in a different background doesn't change my default background, I still have the city buildings
  • Belrathius
    Belrathius
    Posts: 206
    pjrichert, what finally worked for me was picking a different "theme" (which changed the colors) AND deselecting the default background checkbox at the same time - doing it separately didn't work. Really stupid when what you really want is simply no background at all.

    Try uploading your background and deselecting the default checkbox in the same save session.
  • pjrichert
    pjrichert
    Posts: 6
    Thanks Belrathius, that fixed it for me too.
  • Belrathius
    Belrathius
    Posts: 206
    Always glad to help, if I can.
  • pjrichert
    pjrichert
    Posts: 6
    Has anyone figured out how to sort characters by PC or NPC? It's a mess with them all jumbled together now.
  • Belrathius
    Belrathius
    Posts: 206
    That's currently on the list of problems, with no identified work-around (tags are possibility, but they are having issues at the moment too).
  • Savannah
    Savannah
    Posts: 188
    Has anyone tried to change the appearance of the top bar? I can change the color of everything except the three sections that have dropdowns (Welcome [your user name], Campaigns, and +New). As you can see "here":https://ageofworms-ap.obsidianportal.com/ I've got an odd mishmash of coloring going on up there... I've used inspect element to try to figure out what those are called, but have had no luck. Anyone else tried and succeeded?
  • Langy
    Langy
    Posts: 364
    They're styled under .top-bar-section .dropdown li a for the 'normal' style and .top-bar-section ul li.hover>a for the 'hovering over it' style.
  • Savannah
    Savannah
    Posts: 188
    Hmm...that effects the dropdown menus themselves (thanks!) but not the visible sections on the top bar that you hover over to get the dropdown menus. Am I doing something wrong?
  • Langy
    Langy
    Posts: 364 edited October 2013
    Oh, sorry. That's styled under .top-bar-section li a:not(.button) when not hovering over it and .top-bar-section ul li.hover>a when you hover over it.

    When inspecting those elements, the thing that's styled is the a element, the link, not the list element.
    Post edited by Langy on
  • Langy
    Langy
    Posts: 364
    Oh, the user bit isn't styled as either of those - it's styled as #top-bar .welcome-user when not hovering and there's no difference when hovering.
  • Savannah
    Savannah
    Posts: 188
    Found my problem with #top-bar .welcome-user -- you can't change the background color unless you also tell it to not display the background image. No idea why they'd do it that way, but oh well. I've got it working perfectly, thanks! :)
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Savannah, please share the whole code for that bar- there are plenty of folks that would like to alter it!

    Just trying to help out.

  • Savannah
    Savannah
    Posts: 188
    Sure thing. There may be a way to do this more efficiently (if so, please tell me!), but this is what I came up with.

    Here's how to modify the appearance of the new top navigation bar (note that mine is a black background with white text and a green underline):

    bc. #top-bar /*Change overall background color and borders here*/
    {
    background-color:black;
    border-bottom:2px solid #073704;
    }
    #top-bar .welcome-user, .top-bar-section li a:not(.button), .quick-link, #campaign-search-container, #top-bar #sticky-toggle
    {
    background-color:transparent;
    background-image:none; /*BOTH of these are necessary for the appearance you set above to show through*/
    color:white;
    }
    .top-bar-section .dropdown li a
    {
    background-color:black !important;
    }
    #top-bar li.divider
    {
    display:none;
    }
  • Savannah
    Savannah
    Posts: 188 edited October 2013
    Also, I just discovered something REALLY COOL (seriously, my dog thinks I'm crazy for being this excited over the computer...then again, I'm pretty sure she already thought I was crazy...). I'm putting it in a separate post to make it easier to share a link later.

    Okay, so a lot of people are disappointed with how narrow the main text area is on the new layout. I found out a way to make it wider AND have it still shrink automatically if you adjust the width of your browser window! Now, personally I kinda like the narrower size on the home page, but only the home page. Check out the "home page of my Age of Worms campaign":https://ageofworms-ap.obsidianportal.com/. That's unmodified Reforged OP widths. Now check out the "main wiki page of the same campaign":https://ageofworms-ap.obsidianportal.com/wikis/main-page. As you can see, I've shrunk down the last edited by sidebar to make my main text area much wider, and that area will adapt to narrower monitor/browser widths without forcing a horizontal scroll bar. Now, this trick does require you to collapse the front page menu (there's bound to be a way around that, but since I wanted the menu collapsed anyway I haven't gone looking for it). Even better, it's two lines of code:

    bc. .wiki-page-show #sidebar {width:10%; min-width:50px;}
    .wiki-page-show .main-content-container {width:90% !important; min-width:300px;}

    You can adjust the percentages as desired. The .wiki-page-show restricts it to only the wiki pages, leaving your home page and all other pages untouched.

    Thanks to Thorvaldr for the idea to put in min-width, which prevents it from getting any smaller than a certain point for readability's sake on a tiny screen.
    Post edited by Savannah on
  • Thorvaldr
    Thorvaldr
    Posts: 141
    @Savannah: That's a great way of doing it! I might also recommend throwing a "min-width: ___px;" in there, just to make sure it can't get to 5 pixels in width. :P

    Also, thank you for the nav bar code! I'm sure I'll be changing that soon enough.

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • Savannah
    Savannah
    Posts: 188
    Ooh, nice idea, Thorvaldr -- I had realized that would be a problem, but didn't know how to fix it! I'll go edit that in to the code.
  • PurpleSteve
    PurpleSteve
    Posts: 12 edited October 2013
    @Savannah Thanks a million for both of those.
    I've put together a version of your navbar code that uses transparency, for people who use a custom background and want it to show through. You can see what it looks like "here":https://things-to-do-in-denver.obsidianportal.com/

    bc. /* Top Bar */
    #top-bar {
    background-color: rgba(40,40,40,0.5)
    }
    #top-bar .welcome-user, .top-bar-section li a:not(.button), .quick-link, #campaign-search-container, #top-bar #sticky-toggle{
    background-color: transparent;
    background-image: none;
    color:white;
    }
    .top-bar-section .dropdown li a {
    background-color: rgba(40,40,40,0.8) !important;
    }
    .top-bar-section .dropdown li a:hover {
    background-color: rgba(40,40,40,1) !important;
    }
    Post edited by PurpleSteve on
  • Thorvaldr
    Thorvaldr
    Posts: 141
    So I spent all of last night trying to get my "Characters":https://tyellador.obsidianportal.com/characters page back to what it was before the reforge. There are still a few kinks to work out, but in the most part it's there. The hardest part by far was getting rid of the two-column standard Obsidian Portal put in. And as with most difficult things, hours of work are boiled down to one line of code. :P

    Anyways, here is a quick "guide/template":https://tyellador.obsidianportal.com/wikis/custom-characters-page I wrote up last night for how to customize your Characters page. This will let you have as many (or few) columns as you like, manipulate the text/images, and put in custom backgrounds or colors.

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
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