Share your custom CSS?


(Ethan Kaplan) #1

I know that no themes have been created yet (at least publicly), but I assume some people have started customizing the CSS?

I’m working on my board right now, but am interested in seeing what other people have done.

So, post them here!


(Kris) #2

How-to Geek is the first official partner and I did some basic theming to get that to match the main site - that utilizes the customization feature in the current admin area and simply overrides a lot of the already existing CSS…

I’m also working on a second, full theme for Discourse. So keep an eye out for that over the coming months.

If anyone is working on any theming and has any questions feel free to ask me — I’m pretty familiar with how theming Discourse happens now.


(Ethan Kaplan) #3

Are you willing to share the CSS? I love the How-To Geek one.


(Kris) #4

It’s a bit messy because we turned the whole thing around in the matter of a few days, but the custom CSS simply consists of this:

http://discuss.howtogeek.com/uploads/stylesheet-cache/7e9278bd-51ba-4813-a56a-f7de6ddc007c.css?17ebb74886f14d738ba5c10e8f1979f3

Basically a lot of !important to override the existing styles.


(Ethan Kaplan) #5

Thanks! The css customization part of discourse seems a bit flaky. Did you use that or load it into the CSS directly through source?


(Kris) #6

On the How-To Geek site I actually did a little of both. Probably the first 3/4 were edits to the source and I just copy & pasted those into the customization admin section - and then when we soft launched there were things here and there that I missed (Discourse has a lot of things!) so I made a lot of those minor changes directly within the customization section.

It is a bit flakey, especially when I had Discourse running locally - but it’s gotten even better in the short amount of time since I started the How-To Geek project!

As far as the second theme goes, I’m doing all of that directly through source — there will eventually be some sort of admin interface to not only add custom CSS, but to swap out themes entirely.


(Ethan Kaplan) #7

Cool. I noticed that on Heroku at least, changing the style in the box didn’t necessarily change the CSS displayed, and saving didn’t work all the time, preview didn’t work all the time, etc.

I’ll likely try doing this locally first and do a full restart after change on Heroku. Just FYI for anyone trying to “style on the fly” in Heroku.


(Sam Saffron) #8

How old is your source, are you serving from multiple front ends? this should be working


(Ethan Kaplan) #9

I just updated today, so brand new off master branch.


(Sam Saffron) #10

and your setup is? …


(Ethan Kaplan) #11

Running off Heroku following the readme file. I’ll test this locally before getting into debugging and look at console to see if any errors are returned.

  1. Create a new style
  2. Paste in some CSS
  3. Click “Save”

Preview doesn’t show as an option.

Clicking over to Dashboard then back to Customize and clicking the style, preview now shows up.

Clicking “Preview” doesn’t do anything. Clicking “Enable” then save disappears Preview

Clicking back to Dashboard and back to style after this now shows Preview again.

Preview now works.

Going into CSS and editing it (ie from #CCCCCC to #EEEEEE) does nothing. Appears to be a browser cache issue.

My config is in beta and I can give you admin to it if you want.


(Ethan Kaplan) #12

Just an update here. I put in a custom style sheet that I like, but it only occasionally shows. Most of the times users are getting the default style sheet, not the new one. Often resaving the custom one makes it temporarily visible.

I’m on Heroku.


(Waqas Ahmed) #13

if it isnt too much to ask i would really like a small tutorial please. (you’d probably have to write one eventually when all the Kitteh forums get shifted to discourse.)


(Sam Saffron) #14

I am working on a fix that renames the stylesheet file every time you save, caches seem to be messing us up here.


(Ethan Kaplan) #15

Has anyone had luck getting custom styles to “stick”? I have it enabled but it only sometimes appears. Most often it reverts back to the default style.


(TALlama) #16

@sam I just posted a report on what I’m seeing, which is somewhat related: Site Customizations: Only One Enabled at Once?


(Justin Haglund) #17

After a few days of tweaking, this is what I’m using at the moment. Borrowed a few ideas from @awesomerobot’s howtogeek CSS link.

/* dark gray background in body */
body {
  background-color: #333333;
  height: 100%; }
html {
  background-color: #333333; }

/* lt. gray container around main content area */
#main {
  width: 1110px;
  min-height: 500px;
  background-color: #EEE;
  margin: 0 auto;
  padding: 0 25px 25px; }
  
/* set fixed container sizes */
div.full-width {
  width: 1110px; }
div.container {
  width: 1110px; }
.admin-content {
  width: 1110px; }
#user-menu {
  width: 1110px; }
.modal-outer-container {
  width: 1110px; }

/* keep reply control left justified */
#reply-control {
  left: 0;
  z-index: 999; }
  
/* login button color tweak for consistency */
.btn-primary {
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA); }
  
/* top nav & admin button colors */
.nav-pills li>a:hover { /* inactive button hover (lt. blue) */
  color: #009EDA;
  background-color: #CADCEF;
  border-color: #BDBDBD; }
.nav-pills li.active>a, .nav-pills li>a.active { /* active button static (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image: linear-gradient(to bottom, #00AEEF, #009EDA);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33); }
.nav-pills li.active>a:hover, .nav-pills li>a.active:hover { /* active button hover (dk. blue) */
  border-color: #16617d;   
  background-color:#00AEEF;
  background-image:linear-gradient(to bottom, #00AEEF, #00B0F0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.33),inset 0 -1px 2px rgba(0,0,0,0.2);
  color: white; }
  
/* side nav button colors (profile pages, etc) */
.nav-stacked li.active a, .nav-stacked li.active a:hover { /* active button static */
  background-color: #CADCEF;
  color: #333; }
.nav-stacked .active .icon-chevron-right, .nav-stacked .active:hover .icon-chevron-right { /* arrow bg */
  color: #333;
  background-color: transparent;
  text-shadow: none; }
.nav-stacked li:hover .icon-chevron-right { /* button arrow hover */
  color: #333; }
  
/* topic list table styling */
#topic-list tbody tr:nth-child(even) {
  background-color:#F0F0F0; }
#main #topic-list th {
  background-color:#E6E6E6; }

(Sam Bauch) #18

there has been a little bit of discussion re: heroku and custom styles here, so I thought this might be the best place for this. feel free to move.

I recently needed to edit production.rb for my custom styles to work on heroku:

config.serve_static_assets = true

otherwise, any custom styles (which create .css files in app/public/stylesheet-cache) will 404 on heroku

I’m not thrilled about this as I don’t know what implications the serving of static assets will have on the rest of Discourse, but I don’t know any other way of making this work. I suppose using a CDN could help me here?


(Kane York) #19

I’ve just submitted a PR allowing for export + import of CSS customizations!


https://github.com/discourse/discourse/pull/3482


(Sam Saffron) #20

Been thinking about this … what I really want is a simple share link.

Allow me to share my customisation using:

http://sitename.com/site_customizations/SOME_SECRET/sams-awesome-style

Then I can use that link on any discourse site to import a customization.

V2 can check if the customization changed once a day and notify admin so they update it.