Local Dischorse CSS



  • Continuing the discussion from Poll: Circular Avatars:
    @RaceProUK said:

    What other stuff are you running for here? I might have a play

    @tar said:
    FWIW I'd be interested to see that as well...

    @PJH said:
    If there's stuff that you think everyone else would appreciate, share.

    As requested.

    Most of this was done by others, I've added credit where I remember who it is but if I missed someone or got it wrong let me know.

    ####Styled quotes (@abarker)

    aside.quote {
        background-color: white;
        border: solid 1px #0088cc;
        border-left-width: 5px;
        border-radius: 5px;
    }
    
    aside.quote > blockquote {
        background: none;
        border: none;
    }
    
    aside.quote div.title {
        background: none;
        border: none;
    }
    
    blockquote {
        background-color: white;
        border: solid 1px #0088cc;
        border-left-width: 5px;
        border-radius: 5px;
    }
    

    ####Remove padlock from 'restricted' category in category/topic view (@PJH, I think)
    From:

    To:

    .badge-category i.fa.fa-lock:before { content: ""; }
    

    ####Restores highlighting of visited URLs on topic list (@PJH)

    .topic-list a.title:visited:not(.badge-notification) {
      color: #919191;
    }
    
    .topic-list.categories a.title:visited:not(.badge-notification) {
      color: #38bdff;
    }
    

    ####Adds arrows to gutter links to show inbound vs outbound (@ChaosTheEternal)
    DEPRECATED - added to TDWTF Default 28 Apr 2015

    .gutter .track-link { padding-left:0; }
    a.outbound::before {
      content: "\f061\00a0";
      font-family: FontAwesome;
    }
    a.inbound::before {
      content: "\f060\00a0";
      font-family: FontAwesome;
    }
    

    Left out anything which has since been added into the site CSS here (widescreen+min, square avatars).

    Anyone with anything else useful share away!


  • mod

    @loopback0 said:

    Restores highlighting of visited URLs on topic list

    IIRC, that was @PJH.


  • mod

    Here's some others I put together:

    Add background color to category slugs to clearly tie the text to the color bar(s)

    a.badge-wrapper.bar {
        background-color: #eaeaf0;
        padding-left: 0;
    }
    

    And to get a color that looks a bit better in the header:

    
    div.extra-info-wrapper a.badge-wrapper.bar {
        background-color: #cadce6;
        border-radius: 4px;
    }
    

     

    Make Chrome implement a more complete unicode set
    Note the frist: This requires installing the Symbola, Wakor, and Andgagii font sets. The CSS below is based on the default font-family already used by Duckhorse.

    Note the second: Credit to @Choonster for expanding on my original implementation.[Cite]

    /* Base style */
    html {
        font-family: Helvetica, Arial, Symbola, Wakor, Andagii, sans-serif;
    }
    
    /* Code blocks */
    body code, body pre {
        font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", Symbola, Wakor, Andagii, monospace;
    }
    
    /* Post editor */
    textarea#wmd-input {
        font-family: "Helvetica Neue", Helvetica, Arial, Symbola, Wakor, Andagii, sans-serif;
    }
    

  • mod

    New one I just created (I've heard it spoken of, but never seen samples, so I'm not giving anyone else credit):

    Alter font for editor text box
    This specific version sets up to use monospace.

    textarea.wmd-input {
        font-family: monospace;
    }
    

    Edit: Updated to reflect changes required after Discourse 1.4.0 beta6.




  • :belt_onion:

    so you can see all the posters' avatars in the OP, including the ones that get cut off thanks to duckwhores' fixed height:
    .topic-map .avatars { height:auto; }

    Or has that been fixed by duckwhores main branch / @PJH already?

    For awesome :heartpulse: use
    [code]
    button.like,button.has-like{
    width:45px;height:34px;overflow:none;
    text-align:center;padding-top:4px !important;
    }
    button.like .fa-heart:before {
    font-family:Segoe UI Symbol;
    content: "\1f494" !important;
    }
    button.like:hover
    {
    padding-top:3px !important;
    background: none !important;
    -webkit-animation: animatelikes 1s infinite; /* Chrome, Safari, Opera /
    animation: animatelikes 1s infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    }
    button.has-like:hover .fa-heart:before {
    font-family:Segoe UI Symbol;
    content: "\1f494" !important;
    }
    button.has-like:disabled .fa-heart:before {
    font-family:fontawesome;
    content: "\f004" !important;
    }
    button.has-like:hover
    {
    background: none !important;
    -webkit-animation: animatelikes 1s infinite; /
    Chrome, Safari, Opera /
    animation: animatelikes 1s infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    }
    button.has-like .fa-heart:before {
    font-family:fontawesome;
    content: "\f004" !important;
    }
    button.like:hover .fa-heart:before {
    font-family:fontawesome;
    content: "\f004" !important;
    }
    /
    Chrome, Safari, Opera /
    @-webkit-keyframes animatelikes {
    0% {opacity: 1.0;font-size:10px;}
    20% {opacity: 1;font-size:14px;}
    40% {opacity: 1;font-size:20px;}
    50% {opacity: 1;;font-size:25px;}
    60% {opacity: 1;font-size:20px;}
    80% {opacity: 1;font-size:14px;}
    100% {opacity: 1.0;font-size:10px;}
    }
    /
    Standard syntax */
    @keyframes animatelikes {
    0% {opacity: 1.0;font-size:10px;}
    20% {opacity: 1;font-size:14px;}
    40% {opacity: 1;font-size:20px;}
    50% {opacity: 1;;font-size:25px;}
    60% {opacity: 1;font-size:20px;}
    80% {opacity: 1;font-size:14px;}
    100% {opacity: 1.0;font-size:10px;}
    }
    [/code]



  • I'm going to :fa_bookmark: this thread in the naïve hope that I'll be able to find it again, after noting that a discosearch for motherfucking CSS wasn't able to...


  • :belt_onion:

    interesting... bold code! is bold. not bold code! is not bold.

    [spoiler] interesting... bold code! is bold.[/spoiler]

    [code]bold code![/code]
    [code]bold code![/code]

    bah does not render as previewed ;(



  • I'd forgotten about that - I have it in Stylish at work, but not here at home.


  • :belt_onion:

    When i visit meta.d, it is off-putting to see those sad lifeless hearts. I much prefer the pulsating hearts. I refuse to implement my style on meta.d because I feel it is appropriate that their hearts are pitiful.



  • There's also this, which keeps the blue highlight on the most recent poster in a topic list.

    Makes no difference here, until the next Discoupdate™.

    a.latest img.avatar.latest:not(.single) {
      box-shadow: 0px 0px 6px 1px #4eabda;
    }
    

  • Winner of the 2016 Presidential Election

    This thread:

    +ฒ


  • Winner of the 2016 Presidential Election

    Off topic: TIL there's a goalpost Unicode character...


  • sockdevs

    There's a racecar one too: 🏎
    Doesn't show on my machine though :worried:


  • Winner of the 2016 Presidential Election



  • [b]Non-blurry Spoilers[/b]

    .spoiled { 
      background-color: rgb(0,0,0) !important; 
      color: rgb(0,0,0) !important; 
      cursor: auto !important; 
      text-shadow: none !important; 
    } 
    .spoiled * { filter: none; visibility: hidden; }
    .spoiled:hover { color: rgb(255,255,255) !important; }
    .spoiled:hover * { visibility: visible; }
    

    I opted for white text on black background, I know @abarker went for a bit different choices. Obviously not mobile friendly, and probably can't be due to the Discodevs doing the "unspoiled" content as inline styles, not a class change.

    It does have some minor hiccups when spoilering some elements, like <kbd> that I'm not too worried about correcting.


    [b]There are no such things as "coldmaps"[/b]
    [b]Also, no more heatmaps or greymaps[/b]

    .heatmap-high a, .heatmap-med a, .heatmap-low a, 
    body .heatmap-high, body .heatmap-med, body .heatmap-low,
    body .coldmap-high, body .coldmap-med, body .coldmap-low { color:#919191 !important; }
    

  • mod

    @ChaosTheEternal said:

    Non-blurry Spoilers
    I opted for white text on black background, I know @abarker went for a bit different choices

    Yeah, mine starts as a dark gray area, and then goes to light gray with black text on hover. I've also added a small corner rounding just because I can.

    .spoiled {
        background-color: #888888;
        color: #888888;
        cursor: auto;
        text-shadow: none;
        border-radius: 3px;
    }
    
    .spoiled * {
        filter: none;
        visibility: hidden;
    }
    
    .spoiled:hover {
        background-color: #cccccc;
        color: Black;
    }
    
    .spoiled:hover * {
        visibility: visible;
    }
    

  • :belt_onion:

    @ChaosTheEternal said:

    Non-blurry Spoilers

    screwing up my [spoiler]spoilerplating of all the things[/spoiler]



  • I Jeffed 20 posts to an existing topic: Discosearch and/or @tar's failings


  • Winner of the 2016 Presidential Election

    Anyone got any kind of dark(ish) theming done? I don't mean black background necessarily, I'd actually prefer dark grey.

    I'd do something myself, but time constraints..,


  • area_deu

    Someone on meta.d is doing that. He found a few bugs while doing so, too.


  • Winner of the 2016 Presidential Election

    +1



  • @aliceif said:

    He found a few bugs while doing so, too.

    Shocker :laughing:


  • :belt_onion:

    * { background-color:dimgray !important; color:whitesmoke !important;border-color:black !important;}

    DARK ALL OF THE THINGS.

    Doesn't work 100% because they also battle you with !important csses of their own on some of the backgrounds.


  • mod

    To customize topic summary area:

    div.topic-map {
        background-color: #E4EEF4;
        border-radius: 5px;
        border: solid 1px #0088cc;
    }
    
    div.topic-map nav.buttons button.btn {
        color: #0088cc;
        background-color: #cce7f5;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    
    div.topic-map nav.buttons button.btn:hover {
        color: White;
        background-color: #0088cc;
    }
    
    div.topic-map section.links table.topic-links span.clicks {
        color: #0088cc;
        background-color: #cce7f5;
    }
    

    Collapsed:

    Collapsed with hover:

    Expanded:


  • Winner of the 2016 Presidential Election

    You're making it look like GTK3 now.

    Not sure how I feel about that.


  • mod

    It's up to you to implement or not. I'm just putting it here for reference.


  • Winner of the 2016 Presidential Election

    As someone who's never touched CSS, how does one apply these changes? People mention Stylish like it's something obvious, but is that a browser extension or something else? Is there boilerplate that has to goo around what people add or can you just paste the snippets directly into Stylish, whatever that is?



  • It's a browser extension indeed - you can just paste the CSS in as it's listed here, configure the URLs to apply the style to, and that's about it.


  • Winner of the 2016 Presidential Election

    @Jaloopa said:

    People mention Stylish like it's something obvious, but is that a browser extension or something else?

    Yes, it's an extension. You should be able to find it in your browser's extension manager.

    @Jaloopa said:

    Is there boilerplate that has to goo around what people add or can you just paste the snippets directly into Stylish, whatever that is?

    You can just paste things. The only thing you might want to set up is which pages it applies to.


  • area_deu

    @loopback0 said:

    words

    @Onyx said:

    the same words but differently

    I almost wanted to say the same things, now I'm glad that I didn't get :hanzo::hanzo:'d


  • Winner of the 2016 Presidential Election

    @loopback0 said:

    words

    @Onyx said:

    the same words but differently

    @aliceif said:

    reason for not saying words

    ok, thanks. I should probably install it and start learning some of the basics of CSS. I don't do web dev, but at some point I'll probably have to learn...


  • Winner of the 2016 Presidential Election

    CSS is not hard. It's just infuriating.


    Filed under: CSS is awesome


  • area_deu

    You can always hack around in the inspector of your favorite browser's dev tools until the CSS looks pretty enough ...


  • area_deu


  • Winner of the 2016 Presidential Election

    Names need moar orange on usernames.

    Also, pls email me teh codez for wrench icon that does evil stuff to posts!


  • area_deu

    TODO:
    Open a GitHub repository for a Ubuntu-style Discourse CSS collection.


  • Winner of the 2016 Presidential Election

    I'd do an Amiga Workbench styled one if I had the time.


  • area_deu

    @Onyx said:

    I'd do an Amiga Amie Workbench styled one if I had the time.

    DTFY


  • Winner of the 2016 Presidential Election

    Yes, that's where the idea came from :stuck_out_tongue:


    Filed under: BBS reader worked at least!, Where's that NTTP interface now?



  • @Onyx said:

    Filed under: Where's that NTTP interface now?

    I got it out of the freezer, it's thawing as we speak. Once that's done, I'll resume working on it.



  • @Onyx said:

    Where's that NTTPNNTP interface now?

    FTFY


  • mod

    @Jaloopa said:

    As someone who's never touched CSS, how does one apply these changes? People mention Stylish like it's something obvious, but is that a browser extension or something else?

    As @loopback0 and @Onyx have metnioned, Stylish is a browser extension. I personally use Stylebot for Chrome. I like the backup method, which makes it really easy to share changes between my home and work systems. Stylebot also has a live preview, which is nice because you don't need to hack around in dev tools and the n copy the finished work over to your local CSS extension.



  • I tried Stylebot for the backup feature, but the same CSS that works in Stylish doesn't all work in Stylebot? :wtf:Fixed it.


  • Winner of the 2016 Presidential Election

    Stylish applies immediately after clicking save, too. So.. close enough.

    Also, one time when you'd want your shortcuts overrridden, they are not. CtrlS in Stylish I mean. ViolentMonkey overrides it though. I'd assume TamperMonkey does as well.



  • @Onyx said:

    Also, one time when you'd want your shortcuts overrridden, they are not

    Overridden to what? Ctrl + S saves in Stylish.


  • Winner of the 2016 Presidential Election

    So it does. Weird. I'm sure one of those plugins didn't do that. I am confuse now.



  • I'm not sure it's always done it. I only realised it did it a few days ago.


  • :belt_onion:

    CTRL+S didn't save in stylish the last time I used it.... it tried to save the stylish editor page as a file to my harddrive.

    *goes to try it now...

    oh hey, it got fixed. wonder if it was a Chrome update or Stylish update that did the fixing.



  • @darkmatter said:

    oh hey, it got fixed. wonder if it was a Chrome update or Stylish update that did the fixing.

    Pass - like I said, was only recently I noticed.


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.