Custom CSS Beta Discussion

1131416181925

Comments

  • Langy
    Langy
    Posts: 364 edited November 2013
    Woops, there was another page. Nevermind this post:D
    Post edited by Langy on
  • Langy
    Langy
    Posts: 364
    Blackroom, that campaign is set to private - I can't view it.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Blackroom, your campaign is set to private, so we can't see it.

    Most of the time however, when a custom style isn't doing anything at all, and when you're sure there are no typos, the issue is precidence. Particularly, the most specific rule for an element trumps, so for example:

    bc. body #content .page-background { background-color:red; }

    Trumps a declaration in your custom css of of just:

    bc. .page-background { background-color:blue; }

    Many of the default styles are _very_ specific in this way, and the best way to find out is to use the inspection feature in FireFox or Chrome. You'll often see some really long, specific selector at the top of the CSS stack, and your custom things need to be _at least_ that specific to have an effect. You can use !important to override that, but it's kind of dirty for a variety of nerdy technical reasons, and it's better to just use the proper level of specificity when you can (which is almost always).
  • Langy
    Langy
    Posts: 364 edited November 2013
    Sorceress: The problem with your search page is the inline CSS in your wiki pages. Specifically, the left: and padding-left: arguments, which alter the size and location of elements.

    The only way to fix that would be to either remove that div or turn it into a CSS class, which you can then style specifically so that the search page ignores it and just pushes the normal look.

    ChainsawXIV: True, but note that some of OP's default CSS rules use !important, and the only way to get around that is with an !important of your own. I don't think the one he's talking about has that problem, though. Instead, it's likely the 'class with 'description' in it' problem.
    Post edited by Langy on
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Thus "almost" always. :p

    If it's the description issue, then he should be getting an error message when submitting his CSS, though it's a bit easy to miss.
  • Sorceress
    Sorceress
    Posts: 25
    Well I fixed the problem without having to mess with the inline. I suppose it was lucky or it just worked out.

    bq. article.search-result.wikipage img {height:130px}
  • Ashpin
    Ashpin
    Posts: 6
    Evening all.

    I was hoping some of my wise peers can provide me with some simple guidance.

    Post the re-forging, whenever i go to upload a new picture to OP, I browse for my chosen graphic, press the upload button and then I get the option to open the upload, save the upload or cancel. None of which seem to actually upload the graphic on to OP.

    Am I doing something wrong? Is this a known bug they are working on? Or am I missing something obvious?

    I just want to reset my maps, upload pictures and set a new tiled background to replace the ugly sepia buildings that are the default.

    Appreciate any advice that can be provided.

    BTW I am using Internet Explorer 9 - is that likely to make a difference post forging?

    Ashpin
  • Sorceress
    Sorceress
    Posts: 25
    Well, I'm not sure maps can be replaced at the moment. At least I can upload them but I can't get rid of or replace them. I'm not sure about uploading a background as I did mine up in CSS.
    If it's like the banner you should see a little thumbnail of your background with a green bar that fills up and ends up with a green check mark when it's done.

    If you're talking about using imbed images it's had some issues but once it's open I haven't heard of it causing problems. All you do is click on upload, browse, double click on your image
    and the browse pop up should close - give it some time and the asset should appear on your image list when its done uploading.

    I hope that helps,
    Sorceress
    "The Hero Academy":https://the-hero-academy.obsidianportal.com/
  • Langy
    Langy
    Posts: 364
    You should be able to drag-and-drop the item to upload it, too (just drag it from the directory it's in and drop it on the button for uploading). I *think* this is available with the image embedding option, but I'm not certain as it doesn't like to open very much.

    IE 9 _might_ be an issue, but I'm not sure. Try using a more modern browser? I know that IE8 and below aren't supported, and there was a deliberate decision not to support some older browsers.
  • Strahd42
    Strahd42
    Posts: 13
    Anyone know how to target the little triangle beside the chosen menu item on the sidebar? i want to remove it, but i can't seem to find a class or ID to point to.
  • Thorvaldr
    Thorvaldr
    Posts: 141
    I can help with that:

    bc. .front-page.active {overflow:hidden;}

    The triangle you see goes outside of the margins of .active (which is the whole coloring/triangle thing on that menu), so setting overflow to hidden will make anything outside of the margins disappear. So, goodbye triangle!

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • Strahd42
    Strahd42
    Posts: 13
    Thorvaldr you magnificent bastard!

    Wish I'd asked 3 hours ago, instead of banging my head repeadedly against this issue
  • Thorvaldr
    Thorvaldr
    Posts: 141
    No no no! The head banging is _part_ of the process, you are being reforged! It's like the Military, they have to break us all down so they can build us back up. :P
  • madartiste
    madartiste
    Posts: 328
    @.campaign-public-layout #campaign-nav li.active:after {
    content: none;}@ should work too.
  • Thorvaldr
    Thorvaldr
    Posts: 141
    Ahhhhh! I had _completely_ forgotten about the after tag! That's awesome!
  • Thorvaldr
    Thorvaldr
    Posts: 141
    For those interested, I've written up a "guide on creating custom CSS classes":https://tyellador.obsidianportal.com/wikis/custom-css-classes for your campaign. It walks through a simple example of making a sub-title class, and shows how to manipulate said class in your wiki.

    -Thorvaldr
    DM of "Tyellador":https://tyellador.obsidianportal.com/
  • madartiste
    madartiste
    Posts: 328
    Thorvaldr, that's great idea and really handy! I'm sure lots of people will find it very useful.
  • Blackroom
    Blackroom
    Posts: 5
    Thanks for the feedback. When I was trying to enter the information I gleaned from inspection, the CSS interface gave me an error message -
    "The following errors occurred: Custom css Invalid or disallowed characters in the CSS. We do not allow Javascript or other advanced CSS, just the basics."

    The page again (now less private)

    "Realm Campaign":https://blackroom-games-realm.obsidianportal.com/characters
  • Langy
    Langy
    Posts: 364
    Blackroom: Yeah, that's probably because you've got the string 'script' in one of your classes. OP doesn't allow that string in the custom CSS:(
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    That is awesome Thorvaldr!

    Just trying to help out.

  • Blackroom
    Blackroom
    Posts: 5
    Thus far, I have been using

    bq. .character-index.campaign-public-layout .character-list-item .quick-description, .item-index.campaign-public-layout .character-list-item .quick-description {
    font-size: 0.75em;
    font-style: italic;
    color: black;
    }

    but it won't accept and I can't quite puzzle a way to make it simpler.
  • SkidAce
    SkidAce
    Posts: 830
    note the word "script" in .quick-description.
  • Blackroom
    Blackroom
    Posts: 5
    Aha! Now it accepts the coding ( still doesn't do what I want, but progress!)
  • Langy
    Langy
    Posts: 364 edited November 2013
    Yeah, I know. It's a puzzle. I think it can be done with nth-child, instead of _needing_ to use quick-description, but it's still annoying.

    Gimme a bit and I'll see if I can find a workaround.

    EDIT: Turns out to be easier than that, since it's the only div in its section.
    Post edited by Langy on
  • Langy
    Langy
    Posts: 364
    Here we go. This should work:

    @.character-index.campaign-public-layout .character-list-item .character-info div, .item-index.campaign-public-layout .character-list-item .character-info div {
    font-size: 0.75em; font-style: italic; color: black;
    }@
  • Blackroom
    Blackroom
    Posts: 5
    Success! Many Thanks! That one was driving me up a wall.
  • MarkGiguere
    MarkGiguere
    Posts: 53
    Would like to see if I can modify the behavior of the blockquote. Presently, it's grey text and a rather thin line to the right. What do I need to use to modify its attributes?

    .blockquote

    ?
  • madartiste
    madartiste
    Posts: 328
    MarkGiguere, try just blockquote without the . in front of it.

    "Here's a post on it from Langy":http://forums.obsidianportal.com/comments.php?DiscussionID=2637&Focus=27658#Comment_27658
  • MarkGiguere
    MarkGiguere
    Posts: 53
    Hmmm...very strange. I am affecting it. I stole some come from the Internet and combined it with Langy's. I now can have a border, a background and so on, but no matter what I do, the text is ALWAYS grey. Even with the !important tag.

    Any ideas?
  • MarkGiguere
    MarkGiguere
    Posts: 53
    here's my campagin:
    https://path-to-the-north.obsidianportal.com/wikis/home-page
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