Survey: How do you style Blockly?

[Rachel Fenichel]

Hey Blockly developers,

How do you usually go about styling Blockly?  Specifically, how do you change things like font and text size?

Cheers,
Rachel

[Chris Johnson]

I use this CSS:

.blocklyText, .blocklyHtmlInput, .blocklyTreeLabel {

  font-family: 'Kanit', sans-serif !important;

}

.blocklyTreeLabel {

  font-size: 24px !important;

}

.blocklyTreeRow {

  height: 28px !important;

  margin-top: 5px !important;

}

The !importants are required because the Blockly specificity trumps mine. If there's a better way, I'd welcome knowing.

- Chris

[Lyssa Neel]

I edit the css.js file

There's a lot more I would like to do, like adding images to the menu items, but I can't figure out how to do it. 

[Neil Fraser]

On 8 November 2016 at 13:42, Lyssa Neel <lys...@gmail.com> wrote:

There's a lot more I would like to do, like adding images to the menu items, but I can't figure out how to do it. 

This is unrelated to CSS, but is this what you are looking to do?  If so, it's coming really soon.

--

Neil Fraser
https://neil.fraser.name

[Amin Marashi]

We also do it the same way.

[Lyssa Neel]

That's cool, Neil, and we'll be using that when it's available!
But what I meant was that I would like to add images to the toolbox items. I'm going to try using custom icon font, do you think that would work?

[Lyssa Neel]

[Rachel Fenichel]

Ah, do you mean replacing the names of categories with icons in the toolbox?

On Wed, Nov 9, 2016 at 12:21 PM Lyssa Neel <lys...@gmail.com> wrote:

That's cool, Neil, and we'll be using that when it's available!
But what I meant was that I would like to add images to the toolbox items. I'm going to try using custom icon font, do you think that would work?

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Lyssa Koton Neel]

Ideally, an icon and the word, side by side. For kids who are/aren't readers. 

On Wednesday, November 9, 2016, 'Rachel Fenichel' via Blockly <blo...@googlegroups.com> wrote:

Ah, do you mean replacing the names of categories with icons in the toolbox?

On Wed, Nov 9, 2016 at 12:21 PM Lyssa Neel <lys...@gmail.com> wrote:

That's cool, Neil, and we'll be using that when it's available!
But what I meant was that I would like to add images to the toolbox items. I'm going to try using custom icon font, do you think that would work?

--
You received this message because you are subscribed to the Google Groups "Blockly" group.

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/hwKvS197laU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

-- Phyllis Koton Neel, Ph.D.

[Rachel Fenichel]

I see.  Custom icon font will probably work.  If you want to use actual images, here's a pull request from adding icons over on scratch-blocks--it might be helpful as a starting point.

[Lyssa Koton Neel]

Thanks, I'll check it out!

On Wednesday, November 9, 2016, 'Rachel Fenichel' via Blockly <blo...@googlegroups.com> wrote:

I see.  Custom icon font will probably work.  If you want to use actual images, here's a pull request from adding icons over on scratch-blocks--it might be helpful as a starting point.

--

You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/hwKvS197laU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rachel Fenichel]

This should fix needing !important.

Cheers,

Rachel