Custom CSS Beta Discussion

1141517192025

Comments

  • Langy
    Langy
    Posts: 364
    That campaign isn't publicly viewable, Mark.

    Changing the blockquote text colors should be as easy as:

    @blockquote {
    color:lightsteelblue !important;
    }@
  • MarkGiguere
    MarkGiguere
    Posts: 53
    uh..yeah...fixed the "private" thingy.... :-)

    as for the code, I tried just that. I even cleared out the little CSS I had and only added your code and nothing.

    Could it be that we CAN'T change that particular text? That it's "protected"?
  • madartiste
    madartiste
    Posts: 328 edited November 2013
    Ah, I think I found it: @blockquote, blockquote p {color:#4E4E4E !important;}@

    I got it to work with this.
    Post edited by madartiste on
  • MarkGiguere
    MarkGiguere
    Posts: 53
    B1ngo! We have a winner! That did it. Thanks!
  • Taellosse
    Taellosse
    Posts: 15
    I return again with a variant on the same problem. I was able to get my parchment design working without too much trouble, thanks to the assistance I got previously, on the landing page, wiki pages, and adventure log. But the characters are defeating me. I can't seem to find enough classes to do the job properly.

    You can see what I've got (and what's wrong with it) here: https://dark-moon-rising.obsidianportal.com/characters/chancellor-thesalia-keldorin-1 I have tried using the #character-details section to compensate for not being able to find enough classes on the page, but I can't find a sequence of background images that works properly. I imagine I'm missing something obvious, but maybe not. Can anyone point out how I can get this working?
  • madartiste
    madartiste
    Posts: 328
    Taellosse, you can stack background images, actually. I've used three of them for a single class before. Is that what you're trying to do?

    Maybe something like
    @ #main-content {background-image: url(http://myimageurl/TOP.jpg),
    url(http://myimageurl/BOTTOM.jpg),
    url(http://myimageurl/MIDDLE.jpg);
    background-position: center top, center bottom, center top;
    background-repeat: no-repeat, no-repeat, repeat-y;}@

    Make sure you go top image, middle image, bottom image, though. The z-index stacks them on top of each other, making the ones you list first on top of the ones that come after.
  • Taellosse
    Taellosse
    Posts: 15
    No, Madartiste, I'm afraid I can't use that method, because the images I'm using involve irregular edges and transparency. The repeating body image would overlap behind the top and bottom ones and be visible.

    The code I'm using on the main wiki pages is as follows:

    @ .wiki-page {
    background: url('https://db4sgowjqfwig.cloudfront.net/assets/257401/Scroll-top.png?1383583830') no-repeat top left !important;
    position: relative;top:-35px;
    }
    .wiki-page-container {
    background: url('https://db4sgowjqfwig.cloudfront.net/assets/257403/Scroll-body.png?1383583842') repeat-y top left !important;
    position: relative;bottom:-35px;
    }
    .wiki-page .post-section {
    background: url('https://db4sgowjqfwig.cloudfront.net/assets/257402/Scroll-bottom.png?1383583836') no-repeat bottom left !important;
    position: relative;bottom:-70px;
    }@

    I'm using something similar on the landing page and adventure log post pages, but I can't seem to turn up enough containers of the right type to do this on the individual character pages.
  • madartiste
    madartiste
    Posts: 328
    Aaah. Right. Well then. That's much trickier for sure.
    Maybe you could do something with the highlight container? I see that you have it set to display:none. You'd have to experiment, but you might be able to absolute position it so that other things stack on top... Otherwise, I'm not really sure. Sorry, I'm not much help here.
  • Kallak
    Kallak
    Posts: 1,090
    @Taellosse, IIRC Chainsaw has posted a method for this somewhere before.
    All the best,
    - Kallak
  • dawnhawk
    dawnhawk
    Posts: 113
    @Taellose - you will run out of scrolls eventually...right? lol

    Actually Madartiste may be on the right track a bit.

    Try this, and see if it does what you want - give or take some padding adjustment.

    .character-show .main-content {background: url('https://db4sgowjqfwig.cloudfront.net/assets/257401/Scroll-top.png'), url('https://db4sgowjqfwig.cloudfront.net/assets/257402/Scroll-bottom.png'), url('https://db4sgowjqfwig.cloudfront.net/assets/257403/Scroll-body.png'); background-position: center top, center bottom, center top; background-repeat: no-repeat, no-repeat, repeat-y; padding:10px;}
    .character-show .main-content section{background:transparent;}
  • dawnhawk
    dawnhawk
    Posts: 113
    er - note - you need to remove the following:

    .character-show .main-content-container {background: url('https://db4sgowjqfwig.cloudfront.net/assets/257403/Scroll-body.png?1383583842') repeat-y top left !important;position: relative;bottom:-60px; left:-15px}
    .character-show .main-content {background: url('https://db4sgowjqfwig.cloudfront.net/assets/257402/Scroll-bottom.png?1383583836') no-repeat bottom left !important;position: relative;padding: 0px 60px 120px 60px !important;}
    #character-details{background-color:transparent;background: url('https://db4sgowjqfwig.cloudfront.net/assets/257401/Scroll-top.png?1383583830') no-repeat top left !important;position: relative;}
  • tommy19
    tommy19
    Posts: 62
    Anyone know how to get rid of the right-side-fade-out for character descriptions on the character page? I could have sworn I saw something about it in the thread but I can't seem to find it now.
  • madartiste
    madartiste
    Posts: 328
    Tommy19, try @.character-list-item .right-side-fade-out {
    display: none;}@
  • tommy19
    tommy19
    Posts: 62
    DISPLAY:none... that's what I was missing! I'd set background-image:none and background-color:transparent and everything! Thanks.
  • Taellosse
    Taellosse
    Posts: 15
    Sorry, Dawnhawk, that doesn't work for the same reason as Madartiste's suggestion - the repeating body background is visible behind the top and bottom portions, because they're all in the same container.

    However, you DID give me an idea that seems to do the trick - put the top and bottom in the main-content-container, put the repeating body in main-content, pad them all so they line up properly, and then shift #character-details up so the gap at the top isn't too big. I don't much care if there's a little extra "paper" at the bottom. Thanks!
  • dawnhawk
    dawnhawk
    Posts: 113
    Clever! Glad it worked Taellosse! Enjoy the long weekend if you have one. I'm officially out of town until Tuesday. :)
  • tommy19
    tommy19
    Posts: 62
    Question. I used a custom side menu (https://ageofdarkness.obsidianportal.com/) and it is really helpful. The problem of course is that it has to be done using div tags and whenever something is changed it has to be copied and pasted. TO. EVERY. SINGLE. WIKI. PAGE.

    Is there any way that I can do this as a custom CSS class that way all I have to do is change the one CSS to make changes to everything?
  • Langy
    Langy
    Posts: 364
    Partially. You can't change the number of items or what they link to using CSS; it's possible to change the text/graphics if you set it up properly (look at default OP sidebar for an example of that), and if you need to change just style="" bits that you stick in the div tags on every single page, that's something CSS classes can always do.

    Basically, CSS classes are just shortcuts to saying 'style="blah"' inside of the div tag. So, for example, if you currently have the following code:

    @@

    You can link that style to a CSS class by changing that code to:

    @@

    And add the following code to your CSS style sheet:

    @.ClassName{
    position:fixed;
    width:0px;
    top:50px;
    }@
  • Bookscorpion
    Bookscorpion
    Posts: 58
    I just copied and pasted my way through this thread, thank you everyone for helping out.

    I have two things I cannot figure out: the grey bar and triangle on the adventure posts. I'd love to get rid of the triangle and change the colour of the bar to my usual background image. I've been rightclicking and inspecting my heart out, but I haven't gotten it.
    "Here's what I mean":https://endland.obsidianportal.com/adventure-log

    Also, I'd love to change the navbar text. Make some items invisible (we don't use the forums for example) and re-name others. How do I do that?

    Shadowrun: The Rat's Nest - COTM  November 2014

  • madartiste
    madartiste
    Posts: 328 edited November 2013
    Looks like the triangle and lines next to the logs are part of a background image: @.adventure-log-index .adventure-log-post-container {
    padding: 0 36px 30px 0;
    background: url(/assets/views/adventure_log/timeline_bar_and_pointer-c18da2c507aa51886094cabd5597ecea.png?2) right top no-repeat;
    position: relative;}@

    Just do background: none instead of the URL.

    I'm not sure what you mean by "grey bar" though. Could you elaborate?

    Navbar items are pretty easy. I think @.campaign-public-layout #campaign-nav .forum {display:none;}@ should get rid of the forums section for you. Each of those list items has it's own class so you just have to target the class for the link on the navbar that you want to remove. What did you want to change about the navbar text? The color? The font?
    Post edited by madartiste on
  • madartiste
    madartiste
    Posts: 328 edited November 2013
    Ah whoops. I just saw that you said you wanted to rename some links. That's not difficult either: @/*Remove current text*/
    #campaign-nav .wiki .nav-text {font-size:0;}
    /*add new text*/
    #campaign-nav .wiki a:after {content:"Whatever I Want it to Say";} @

    Again, each of the links has it's own class, so you just substitute that in for .wiki.
    Post edited by madartiste on
  • Bookscorpion
    Bookscorpion
    Posts: 58
    Thank you, that all works beautifully!

    By grey bar I mean the one on top of the newest post, to the right of the"create a new post"-button. I can't select it when I do 'inspect element', it seems to belong to the button?

    Shadowrun: The Rat's Nest - COTM  November 2014

  • madartiste
    madartiste
    Posts: 328
    Grey bar is: @.adventure-log-index .adventure-log-new-container {
    background: #e8e8e8;
    }@

    Just change background:#e8e8e8 to another color or simply background: none if you don't want anything there at all.
  • Bookscorpion
    Bookscorpion
    Posts: 58
    That worked. Thank you again for your quick help, it's much appreciated!

    Shadowrun: The Rat's Nest - COTM  November 2014

  • madartiste
    madartiste
    Posts: 328
    No problem, Bookscorpion. Glad I could help. :)
  • SkidAce
    SkidAce
    Posts: 830
    @Bookscorpian;

    Thanks to your user name, hundreds of (dozens?) more player characters will tread more cautiously through old libraries henceforth....
  • Bookscorpion
    Bookscorpion
    Posts: 58
    Ha, I love that. I used to keep one as a pet and she always advanced on my finger with raised pincers, warning me to back off. I wouldn't want to meet one the size of a real scorpion, defending its books.

    Shadowrun: The Rat's Nest - COTM  November 2014

  • Teak_Dhara
    Teak_Dhara
    Posts: 62
    Hi everyone,

    Right out the gate I should state that I am NOT a web designer and only vaguely understand CSS. However, I have been informed from the "reforge feedback" forum on this site that many of the headaches that I am experiencing can be cured with CSS (do you have one to get my 13 year old son to clean up his room without being asked? :) ).

    Anyway, I am wondering if there is a CSS script that can be used to display the same custom background that OP lets us upload and "see" when we are on a campaign's "frontpage" and "character" screen on ALL of the pages (e.g., all the wiki pages and the forums)? I feel that I have two different sites because the "theme" and "mood" which is created nicely by the banner logo and the background image is lost as soon as my players go to the forums (which is where we run the actual adventures because the "adventure log" comments can't be edited nor can you imbed images in the comments).

    I would be so grateful if someone could share the "Secret" CSS code that could be used to display the background image on all pages. Thanks in advance!

    Montana
  • madartiste
    madartiste
    Posts: 328 edited November 2013
    Montana, you *should* be seeing the custom background you uploaded on all the wiki pages already. Are you not? Are there specific ones you aren't seeing it on?
    Campaign pages seem to be divided now into a public campaign face, and a dashboard-players only face. The public pages should all have the custom background that you uploaded.

    Getting the same background on the dashboard pages (forums, calendar, dashboard) is rather harder, I'm finding. When you mentioned this in another thread I thought I'd give it a shot, but there's a lot of components that have backgrounds set on them individually, so I'm running into some trouble. If I figure it out, I'll share the code for sure.
    Post edited by madartiste on
  • Teak_Dhara
    Teak_Dhara
    Posts: 62
    I am seeing the background on wikis, but to me the most important place is the forums (again, until they add the feature to edit comments and add images to comments in the adventure log). So if you figure out how to override the background for the forums I would be happy.
Sign In or Register to comment.

May 2022
Revenge on the Kraken's Bane

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