Share your custom CSS?


(Kane York) #21

Hmm, wouldn’t that require a central registry or hosting somewhere? I was going for the use-case of “the style is shared as a topic on Meta”. (For that reason, I changed the extension to .dcstylejson instead of .dcstyle.json.)

You could probably add a column, update_url, and have that included in this export; then add a third option to the modal to paste a URL.


New Category request: "themes"
(Sam Saffron) #22

No need for a registry, just allow all sites to share customizations simply with a link, you can already reverse engineer a customization if you have the guid, this is just simplifying the process


(Kane York) #23

What about people with internal installations or otherwise not accessible to the internet at large? login_required counts for this, too. Or otherwise don’t want N sites sending them a request every day?

I made a file for your “minimal topic list design”:

{"site_customization":{"id":12,"name":"Sam's Design","key":"4bbac8e4-a930-4264-a8aa-b17af5987789","enabled":false,"created_at":"2015-05-17T03:30:23.263Z","updated_at":"2015-05-17T03:30:23.263Z","stylesheet":".topic-list \u003e tbody \u003e tr:nth-child(odd) {\n    background-color: white;\n}\n\n.topic-list \u003e tbody td {\n    border-bottom: 1px solid #eee;\n}\n\n.topic-list a.title:not(.badge-notification) {\n    color: #4a6b82;\n    color: #3b5998;\n    #color: #0066C0;\n    font-weight: normal;\n    font-family: 'Helvetica Neue', Helvetica, Arial, Utkal, sans-serif;\n    font-size: 18px;\n}\n\n.topic-list a.title:not(.badge-notification):hover {\n    text-decoration: underline;\n}\n\n.topic-list .creator, .topic-list .editor {\n    font-size: 13px;\n    display: block;\n    margin-top: 3px;\n}\n\n.topic-list .main-link {\n    width: auto;\n}\n\n.topic-list {\n    td, .creator a, .editor a {\n        color: #888;\n    }\n}\n\n.topic-list td {\n    padding-bottom: 10px;\n}\n\n.topic-list th {\n    color: black;\n    background-color: #fafafa;\n}\n.topic-list {\n    border-top: none;\n}\n\n.topic-list td:first-of-type {\n    padding-bottom: 10px;\n    padding-left: 10px;\n    padding-top: 10px;\n}\n\n.topic-list {\n    .fa-tag {\n        opacity: 0.7;\n        font-size: 10px;\n        margin-right: -2px;\n    }\n    .num.posts-map {\n        position: relative;\n        font-size: 17px;\n        a {\n            color: #888 !important;\n            font-weight: normal;\n        }\n        a.heatmap-high {\n            color: #c66 !important;\n            //font-weight: bold;\n            \n        }\n        a.heatmap-high1:after{\n            content: \"\";\n            background-color: #e55;\n            color: white;\n            border-radius: 5px;\n            //padding: 1px 5px;\n            left: 75px;\n            font-size: 12px;\n            font-weight: bold;\n            position: absolute;\n            height: 9px;\n            width: 9px;\n            top: 28px;\n        }\n        width: 100px;\n    }\n}\n\n.topic-list td.last-post, .topic-list th.activity {\n    width: 160px;\n    \n    .relative-date {\n        color: #666;\n    }\n}\n\n.topic-list .creator .relative-date {\n    margin-left: 8px;\n}\n\n.badge-category-bg {\n    opacity: 0.8;\n}\n\n .badge-wrapper .badge-category {\n    //  color: #333 !important;\n }\n\n.topic-list .badge-wrapper.bar {\n    .badge-category {\n      color: #9a9a9a !important;\n      font-weight: 600;\n      font-size: 12px;\n      padding: 2px 6px;\n    }\n    .badge-category-bg {\n        top: -1px;\n    }\n}\n\n.last-post {\n    .poster-avatar {\n        margin-right: 10px;\n    }\n    .poster-avatar, .poster-info {\n        float: left;\n    }\n}\n\n.topic-list .posts {\n    width: auto;\n}\n\n\n/* topic page */\n#topic-progress {\n    background-color: #f1f1f1;\n    //border: 1px solid #e2e2e2;\n    color: #666;\n    font-weight: normal;\n    \n    .bg {\n       background-color: #bee9e9;\n    }\n}\n\nnav.post-controls button.has-like {\n    color: #08c;\n}\n\n.title-wrapper .discourse-tag {\n    border-radius: 5px !important;\n    border: 0px solid #D0D0D0 !important;\n    padding: 1px 6px !important;\n    color: #1D1D1D !important;\n    background-color: #F1F1F1 !important;\n}\n\n.badge-wrapper.bullet span.badge-category {\n    color: #333 !important;\n}\n\n.creator .badge-wrapper.bullet span.badge-category {\n    color: #888 !important;\n    margin-top: 2px;\n}\n\n\nimg.avatar {\n    border-radius: 3px;\n}","header":"\u003cscript type='text/x-handlebars' data-template-name='list/topic-list-item.raw'\u003e\n\n\u003ctd class='main-link clearfix'\u003e\n  {{raw \"topic-status\" topic=topic}}\n  {{topic-link topic}}\n  {{#if controller.showTopicPostBadges}}\n    {{raw \"topic-post-badges\" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}\n  {{/if}}\n\n  {{raw \"list/topic-excerpt\" topic=model}}\n  \u003cdiv class='creator'\u003e\n  {{#if showCategory}}\n     {{category-link topic.category}}\n   {{/if}}\n  {{~#if topic.creator ~}}\n  \u003ca href=\"/users/{{topic.creator.username}}\" data-auto-route=\"true\" data-user-card=\"{{topic.creator.username}}\"\u003e{{topic.creator.username}}\u003c/a\u003e \u003ca href={{topic.url}}\u003e{{format-date topic.createdAt format=\"tiny\"}}\u003c/a\u003e\n  {{~/if ~}}\n   {{raw \"list/action-list\" topic=topic postNumbers=topic.liked_post_numbers className=\"likes\" icon=\"heart\"}}\n   \u003c/div\u003e\n\u003c/td\u003e\n\n\n\n{{#if controller.showLikes}}\n\u003ctd class=\"num likes\"\u003e\n  {{number topic.like_count}} \u003ci class='fa fa-heart'\u003e\u003c/i\u003e\n\u003c/td\u003e\n{{/if}}\n   \n{{#if controller.showOpLikes}}\n\u003ctd class=\"num likes\"\u003e\n  {{number topic.op_like_count}} \u003ci class='fa fa-heart'\u003e\u003c/i\u003e\n\u003c/td\u003e\n{{/if}}\n\n{{raw \"list/posts-count-column\" topic=topic}}\n\n\u003ctd class=\"last-post\"\u003e\n\u003cdiv class='poster-avatar'\u003e\n\u003ca href=\"{{topic.lastPostUr}}\" data-user-card=\"{{topic.last_poster_username}}\"\u003e{{avatar topic.lastPoster usernamePath=\"username\" imageSize=\"medium\"}}\u003c/a\u003e\n\u003c/div\u003e\n\u003cdiv class='poster-info'\u003e\n\u003ca href=\"{{topic.lastPostUrl}}\"\u003e\n{{format-date topic.bumpedAt format=\"tiny\"}}\n\u003c/a\u003e\n\u003cspan class='editor'\u003e\u003ca href=\"/users/{{topic.last_poster_username}}\" data-auto-route=\"true\" data-user-card=\"{{topic.last_poster_username}}\"\u003e{{topic.last_poster_username}}\u003c/a\u003e\u003c/span\u003e\n\u003c/div\u003e\n\u003c/td\u003e\n\u003c/script\u003e\n\n\u003cscript type='text/x-handlebars' data-template-name='topic-list-header.raw'\u003e\n  {{raw \"topic-list-header-column\" order='posts' name='topic.title'}}\n  \n  {{#if showLikes}}\n     {{raw \"topic-list-header-column\" sortable='true' order='likes' number='true' forceName='Likes'}}\n  {{/if}}\n  {{#if showOpLikes}}\n     {{raw \"topic-list-header-column\" sortable='true' order='op_likes' number='true' forceName='Likes'}}\n  {{/if}}\n  {{raw \"topic-list-header-column\" sortable='true' number='true' order='posts' forceName='Replies'}}\n  {{raw \"topic-list-header-column\" sortable='true' order='activity' forceName='Last Post'}}\n\u003c/script\u003e\n\n\u003cscript\u003e\n\nDiscourse.TopicListItemView.reopen({\n    showCategory: function(){\n        return !this.get('controller.hideCategory') \u0026\u0026\n                this.get('topic.creator') \u0026\u0026\n                this.get('topic.category.name') !== 'uncategorized';\n    }.property()\n});\n   \n   Discourse.Topic.reopen({\n       creator: function(){\n           var poster = this.get('posters.firstObject');\n           if(poster){\n             return poster.user;\n           }\n       }.property(),\n       lastPoster: function() {\n           var poster = this.get('posters.lastObject');\n           if(poster){\n             if (this.last_poster_username === poster.user.username){\n                 return poster.user;\n             } else {\n                 return this.get('creator');\n             }\n           }\n       }.property('posters'),\n       replyCount: function(){\n           return this.get('posts_count') - 1;\n       }.property(),\n       hasReplies: function(){\n           return this.get('posts_count') \u003e 1;\n       }.property()\n       \n   });\n\n \n\u003c/script\u003e","footer":null,"top":null,"mobile_stylesheet":null,"mobile_header":null,"mobile_footer":null,"mobile_top":null,"head_tag":null,"body_tag":null}}

I get that sharing a URL is easy and everyone knows how to do it, but I don’t think it would work for the “share with everyone on Meta” use-case.


(Jeff Atwood) #24

I think file export is a very good starting point, no need to delay what we can improve today based on imagineering some magical better future solution…


(Sam Saffron) #25

It’s not imagineering, it’s solving very annoying problem I face each time I update my theme

This particular change does zero to improve my workflow each time I modify my theme


(Badr) #26

Thanks for this!! I was looking for a starting point where I could customize the CSS in my discourse and this helped me a lot…

the only part im still having a problem pinpointing is the badge-notification-new-posts that is a sharp blue and I can’t change it to something else…

I think it’s a.badge.badge-notifications.new-posts

any ideas?


(Badr) #27

did you ever release that full custom theme for Discourse?


(Lev Lazinskiy) #28

The Discuss CircleCI Discourse Site uses a custom theme that matches the look and feel of our general outer page.

We would be glad to share any tips if you are interesting in using any part of our theme. :slight_smile:


(Renee Yeh) #29

Love the design!!! It is so clean and sleek. Would you share the CSS with us?
Thank you!!!


(Badr) #30

I was wondering the same thing… I particularly have a problem with CSS because its not my forte, so I am trying to learn it while modifying our discourse… Being able to see your CSS would help me at least follow how to modify our discourse some more.

Something my users have been crying about is how they can’t differentiate when a post ends, so they want to have a horizontal line between posts so they can see when someone’s post starts and ends…

I also like how the topic list is clean and readable and your buttons looks really good. I have seen how other Topic lists display the Likes for a post and a bit more information to them… do you know how to set that up?

Thanks!


(Tom Newsom) #31

Our customisations are mostly concerned with moving all the meta to the left-hand gutter. We’d been using Slack a lot and liked the “continuous flow” of conversation. We’ve also hidden the Topic Info bar because our users found it confusing and cluttered.

It’s got some bugs and missing features, so I wouldn’t recommend using it on your site, but we like it :smile:

// Hide Topic Map - it's just extra cruft

.topic-map {
    display:none;
}

// Use paperclip for upload button instead of up-arrow

.wmd-image-button::before {
  content: "\f0c6";
}
// ==== CUSTOM SLMS TOPIC LAYOUT ====
// In-line meta+post content for better conversation flow

@media all {

// Main containers

.container {
    max-width: 906px;
    padding: 0px 10px 0px 10px;
}

// Inline replied-to post - NEEDS WORK

.topic-body.offset2 {
    margin-left: 0px;
    padding:0px;
    width: calc(100% - 160px);
}

// ==== Topic Avatar ====
// 55px wide overall
// padding centers it vertically next to meta details

.topic-avatar {
   padding: 11px 5px 11px 5px; // top, right, bottom, left
}

// ==== Topic Body ====
// holds Meta (150px) and Content

.topic-body {
    padding: 5px 0px 0px 5px; // top, right, bottom, left
    width: calc(100% - 65px);
}

// ==== Topic Meta ====

.topic-meta-data {
    width: 150px;
    height:45px;
    float:left;
    display: block;
    padding-bottom:5px; //Is this needed?
}

// Now we fiddle all the Meta info bits into place

/*.topic-meta-data .username a{
    display:none;
}*/
.topic-meta-data .username {
    clear:left;
    float:left;
}
.topic-meta-data .full-name {
    clear:left;
    float:left;
}
.topic-meta-data .user-title {
    clear:left;
    float:left;
}
.topic-meta-data .post-info {
    display:block;
    clear:left;
    float:left;
}
.post-info.via-email.raw-email {
    clear:none;
    padding-left:2px;
    float:left;
}
.post-info.edits {
    clear:none;
    padding-left:4px;
    float:left;
}

// Push the "who liked" bits back under the post

.who-liked {
    clear:both;
    padding-top:5px;
}
// Tidy up the "in reply to" bit
.reply-to-tab {
    margin: 0px 25px 0px 0px !important;
}
.reply-to-tab span{
    display:none;
}

// ==== Topic Contents ====

.topic-body .regular {
    float: right;
    width: calc(100% - 150px);
    margin-top:0;
}

.post-menu-area {
    float: right;
    margin: 0px;
    zoom: 85%;
    vertical-align:bottom;
}


// Embedded posts (ie replies and replied-tos)

.embedded-posts .reply {
    clear: both;
}
.embedded-posts .reply .topic-body {
    padding-top: 10px;
    width: calc(100% - 65px); //It's narrower by a whole extra avatar's width
}
.embedded-posts .reply .topic-body .cooked {
    display: inline;
}

.embedded-posts .reply .topic-meta-data {
    display: none; // This prevents the overflow of text under the meta data. Wish there was a better way.
}
.embedded-posts .reply .topic-body .fa-arrow-down {
    float: left;
}

.embedded-posts .reply .topic-body .relative-date {
    display: none; //float:left gets overridden. WHY?! hide it instead for now
}

//  Make "Show hidden posts" gap bar a consistent width

.jagged-border {
    width: 100%;
}

// Fix multi-topic-select overlap

#selected-posts {
    margin-left:0px;
}

// Make Wiki edit icons more obvious

.post-info.wiki::after {
    font-family: Helvetica,Arial,sans-serif;
    content: " Edit this wiki post";
}

// No limit on category length in dropdown or breadcrumb

.badge-wrapper span.badge-category {
    max-width: none;
}
.list-controls .category-dropdown-menu .badge-wrapper.bullet .badge-category {
    max-width: none;

}

// ==== Responsive Design Elements ====

// Preserve Gutter at expense of left margin as window shrinks
@media (max-width: 1270px){
.container {
    margin-right: 160px;
}
}
// But kill it altogether once it's offscreen
@media (max-width: 950px){
.gutter {
  display: none;
}
}

// Drop post content under meta when window is narrow

@media (max-width: 600px){
.topic-meta-data {
    clear: right;
}
.topic-body .contents {
    padding-top: 10px;
    clear: left;
    float: left;
    width: 100%;
}
}

@media (max-width: 1139px){
.container {
  width: 100%;
}
}

// Why there is a special rule that forces an exact px width for
// containers within this 139px range is beyond me.
// I'm sure there's an explanation, but for now: Stop it!

@media (max-width: 1139px) and (min-width: 1000px){
.container, .full-width {
  width: 100% !important;
}
}

// And stay there!

@media (max-width: 1139px){
.container {
  width: 100% !important;
}
}

// Horrible hack to make Select Posts work

.select-posts {
    float:right;
    position: static !important;
    padding: 0px;
    margin: 0px;
    height: auto !important;
}

// Horrible hack to hide attempt to fix the "reply as new topic" button

.gutter {
    position: static;
    display: none;
    float: right;
    overflow: hidden;
    //right: 00%;
    z-index: 500;
    top: 8px;
    width: 150px;
    height: 40px;
    padding: 0px;
    margin: 0px;
}

(Lev Lazinskiy) #32

Hey @Renee_Alfred and @badr we are more than happy to share our theme. We made the repo public here so please check it out!

The design itself was created by one of our designers at CircleCI and was implemented by @projectfrank who is a frontend guru. :smile: He is planning on writing up a blog post about his experience because we had to do some dark magic to get some of the aspects of this working.


(@SenpaiMass) #33

Thanks for sharing it. Should I install this like any other plugin install? Also can I tweak it to a dark theme?


(Renee Yeh) #34

Thank you!!! We are building our forum now. Please come visit when it is ready!!!


(Daniela) #35

I like your theme and I used some elements in my forum. But I see some errors that must be fixed.
Your #topic-progress-expanded is misaligned and appears in the middle of the page:

and the .badge-category-bg is not aligned to the text

Great theme anyway!


(mountain) #36

These bugs are Firefox-specific.

I somehow remembered your browser-pref from another FF-related UI bug you reported and I confirmed. Those elements render the expected behavior, from Chrome. I tested @levlaz’s community link in Firefox and can confirm the screenshots you posted here.

And aye, @levlaz; damn awesome theme; thank you for sharing.

EDIT: My mistake. #topic-progress-expanded bug also shows up in Chrome.

.badge-category-bg bug does not; renders intended behavior in Chrome.


(DjCyry) #37

Here you have the css converted on lesscss.org :

css_theme.txt (29.5 KB)


#38

Anyone from https://tekinvestor.no/? Would love to have some heads up on how to make listing look alike.


#39

And how they ( https://tekinvestor.no/) created a Transparent Full Page Sign Up?


(| full stack virgin) #40

it’ll be interesting if we can play with their codes as well. hope they’ll be happy to share :smiley: