Dumb Question because My Brain's Shut Down

[Aidan Grey]

I want to create buttons with borders and background colors that change on hover. I know that can be done all in CSS, but what if I want to change the icons for the various toolbars/functions and include the borders and background effects?

I think I can just replace the images, and add the new formatting to a class, but how do I get the class applied to the new buttons? DO I need to do it some other way?

Thanks,

A

[Mat]

If the change is to take place on *click* then just use the revealwidget (see Accordion/slider in docs)

But you can do it on hover with CSS also. I'm not sure what it is you don't know about how to proceed though. just target the class that you set in the button widget e.g <$button class="apple"> and .apple:hover {background:red;} the background can also be an image like so.

<:-)

[Aidan Grey]

That I know. It's dealing with the built-ins that has me confused. I know that the class on the edit image is tc-image-edit, but.... after that, not sure what I need to do. Do I just replace the image on the tiddler and then add a bit of css on .tc-image-edit:hover?

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/286da5f4-be53-4ef8-a7c9-b658dfcd9228%40googlegroups.com.

[Mat]

Simplified example using only a color:

<$button class="mycolor">
adf
</$button>

<style>
.mycolor {background:red}
.mycolor:hover {background:yellow}
</style>

<:-)

[Aidan Grey]

I got that. What do I do for the edit icon? Or the open all tiddlers icon? Create a button from scratch - I got it. Interact with built in icons? No clue. And what I’ve tried isn’t working.

--

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

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8eb42c1d-8748-49f7-8954-f53a51fe9294%40googlegroups.com.

[Mohammad]

Added to TW-Scripts

[bimlas]

Aidan,

You can use the SVG's classname to select them directly:

Some of the icons has a dedicated setting in $:/ControlPanel -> Apperance -> Palette -> Show Editor -> toolbar-*-button (toolbar-cancel-button, toolbar-close-button, ...).

[bimlas]

Example: create a tiddler, add "$:/tags/Stylesheet", set type to "text/css" (example tiddler is attached).

.tc-editor-toolbar .tc-image-heading-1 {
  background: blue;
  fill: red;
}
.tc-editor-toolbar .tc-image-heading-1:hover {
  background: green;
  fill: yellow;
}

It's not perfect, because we should set the colors of button, but I cannot target the parent of the icon, thus I can manipulate only it.

[Mohammad]

Added to TW-Scripts

[Ton Gerner]

Hi bimlas,

It's not perfect, because we should set the colors of button, but I cannot target the parent of the icon, thus I can manipulate only it.

Have a look at https://groups.google.com/forum/#!msg/tiddlywiki/hpBJ1peI4zU/6jo61Kb1BQAJ

Cheers,

Ton

[Aidan Grey]

Let me get more precise. You guys have continuously repeated what I already said I knew how to do about 5 times now.

This is the icon I want to replace the info button icon with:

This is where I replaced the icon  in the core/ui/buttons/info

And this is what I get

What's wrong with it:

- the icon isn't replaced (and I intend a global replacement, why is why I'm only selecting .tc-image-info-button)

- the formatting appears WITHIN the existing button, not instead of it

- for some reason, the code doesn't set the foreground color correctly

- which is weird, because on custom buttons, it works perfectly.

- as I've said repeatedly, it's the built-in icons that are giving me issues.

The CSS:

.tc-image-info-button {
    width: 35px;
    height: 35px;
    line-height: 30px;
    border-radius: 10px;
    border: 4px solid #1B3518; 
    overflow: hidden;
    background-color: #7bc072;
    color: black; 
    display:inline-block;
    cursor:pointer;
    font-family: uglyquaregular;
    font-size: 20px;
    font-weight:bold;
    padding: 0px 3px;
    text-align: center;
    vertical-align: middle;
}

..tc-image-info-button:hover {
    background-color: #F9DC39;
}

[Aidan Grey]

Note, because i checked: if i leave in the .tc_edit_toolbar as recommended.... NONE of my changes show up. Without, at least i get the colors.

--

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

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1d06d9e1-73ec-43d4-bbec-d0f796841acd%40googlegroups.com.

[Mat]

..tc-image-info-button:hover {
    background-color: #F9DC39;
}

At least one problem is the ".." at the start there.

<:-) 

[Mat]

Also targeting svg's sometimes requres specifying svg in the selector like so

svg .tc-image-....  {....}  OR maybe it is  .tc-image-... svg {...}

<:-)

[PMario]

Hi,

Can you post a link to the "six.svg" image? or post the image itself.

-m

[Aidan Grey]

LOL that was  a type - I didn't delete everything from my test with the .tc-editor-toolbar...

[Aidan Grey]

https://thenounproject.com/search/?q=faith&i=556626

I have no idea why they call it "faith", but that's the image.