New skin "new-school"

205 views
Skip to first unread message

Jason Graves

unread,
Apr 14, 2016, 5:32:32 PM4/14/16
to Light Table Discussion
Hello everyone,

With LightTable being my favorite editor of all time, I decided to do a little tweaking to the dark theme and add a few features that I thought might make it just a bit cooler looking (just my opinion of course), I called this skin "new-school".  I'd be happy to know what you think feedback wise.  Thanks.

To use the new skin, add the file to your core/css/skins directory, change your set-skin to use "new-school" and add the following entry to your behaviors file:

[:app :lt.objs.style/provide-skin "new-school" "core/css/skins/new-school.css"]

Design wise the changes I have made are the following:

I rounded out the right-bar search input and added the same background as the editor color to make it more distinct that it is a search field from the list of items below it.  I also modified the font to match the items in the right-bar.

Next, I added a drop shadow to the side and right-bar to give it more of an overlay feel.

Finally I changed the background color of the console window to match the right-bar and side and set the z-index to be lower than the bars.


new-school.css

MarcusE1W

unread,
Apr 28, 2017, 2:29:16 PM4/28/17
to Light Table Discussion
Hi Jason.

I am using your style and like it a lot.

It made me think of trying a few canges myself.
Unfortunately I almost know nothing about css and could not figure out where to start.

I was thinkking about trying to remove the shadow for the left and right bar and maybe make the corners less roundish.

Could you point me at the style elements that controll this ?

Best regards,
Marcus

Jason Graves

unread,
Apr 28, 2017, 3:23:44 PM4/28/17
to light-table...@googlegroups.com
Hi Marcus,

Round of corners is controlled by a property called: "border-radius".  You can get rid of rounding by setting border-radius: 0;  Shadow I believe was controlled by "box-shadow", which can be set to box-shadow: none;

Thanks.

--
You received this message because you are subscribed to a topic in the Google Groups "Light Table Discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/light-table-discussion/P54T27Wy_V4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to light-table-discussion+unsub...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

MarcusE1W

unread,
Apr 28, 2017, 4:27:17 PM4/28/17
to Light Table Discussion
Super, it works :-)

Do you know how to get the left and right bar reach to the top of the window? I have some gab of aprox. 10 pixel there.
At the bottom it goes down to the window frame, at the top not.
Any idea?



Thanks very much for your help already. 

Jason Graves

unread,
Apr 28, 2017, 4:28:55 PM4/28/17
to light-table...@googlegroups.com
I'm not sure what that space is, you may need to locate it by using the developer tools element selector.  once you find it you can probably either hide it or set the rest of the content below it to 10px taller.

--
Reply all
Reply to author
Forward
0 new messages