a thoughtful web.
Good ideas and conversation. No ads, no tracking.   Login or Take a Tour!
comment by insomniasexx
insomniasexx  ·  3646 days ago  ·  link  ·    ·  parent  ·  post: Open Source Hubski  ·  

Alright I'm off my phone.

Basically start with this stylesheet: https://hubski.com/clean.css-4-23-14

Then run it through here: http://www.codebeautifier.com/

Then copy that and put it in your text editor. In google chrome, you can edit live using inspector. However, make sure you copy and paste your live edits to a document you can save often. The second you accidentally click a link, that edited CSS goes "poof".

To do this, right click the page and click inspect element. Click on the icon in the upper right of the bottom bar. It looks like a little square. This will pop it out.

Now, click on head and "clean.css-4-23-14" or whatever you style sheet is. Replace it with your beautiful css. Now, feel free to add, delete, etc. When you get something wonderful, take some screenshots and make a post about it.

You (nor I) can edit the HTML so you have to deal with the built in classes and structure. Everything pretty much has a clearly defined class or ID so it makes it easier to edit. Some things (ie: .box and .score) have two slightly different uses on home page and chatter page, etc. So if you make changes to those, I would recommend putting them in their container in the CSS so you don't accidentally screw the layout on a different page. (ie: .sub .plusminus .score {} rather than just .score)

You'll see when you start playing with it why I choose to play with the styling in stylebot. Enjoy!

D'awww. Thanks for the badge! I stumbled upon this today. Learned a few things. Chrome DevTools Features You May Have Missed





CodeTheInternet  ·  3621 days ago  ·  link  ·  

Stylesheet link is now https://hubski.com/clean.css-5-20-14

(as of May 20, 2014)

insomniasexx  ·  3621 days ago  ·  link  ·  

Yes. We are pushing new css today across all stylesheets to improve responsiveness. I also just saw your question on twitter, and the answer is yes.

forwardslash is our other developer and is working on a lot of backend stuff and some mobile first stuff, etc. You can ping him for further information about what we are working on.

In general, if you want to look at the CSS, you should pull it by viewing source. We make minor tweaks fairly often.