expand/contract CSS

[wasatchconsulting]

I am using NetTalk 14.18

I would like to apply a different transform scale to the icons for the expand/contract icons (need to make them bigger since it appears to small on mobile screens). I have placed the new CSS in the CUSTOM.CSS file, but I am not seeing where I can place the class name.

Thanks
Ken Watts

[Bruce]

what does your new CSS look like?

[wasatchconsulting]

I have placed this CSS into the CUSTOM.CSS

.ui-iconexp {
   width: var(--icon-size);
   height: var(--icon-size);
   background-image: var(--icons);
   transform: 1.0;
}

Ken

[Bruce]

Hi Ken,

>> but I am not seeing where I can place the class name.

That's not the right question. A better way of phrasing this question is;
"What selector can I use to attach my CSS class to the element I want to attach it to".

Does that question make sense to you? (honest question, I need to know what your level of understanding is.)
Can you _answer_ the question yourself if framed in that way?

Cheers
Bruce

[wasatchconsulting]

I have a browse form with vertically contract/expand row. I would like to increase the size of the Contract and Expand icon. Where would I include the custom CSS to these icons?

Ken

[Bruce]

>> "What selector can I use to attach my CSS class to the element I want to attach it to".
>> Does that question make sense to you?

I'm going to take that as a "no"?

The custom CSS would of course be included in your custom.css file. I think you're happy with that.

What you want to know though is how to attach the custom css to the elements in question.
You're getting bogged down because you are considering only one kind of selector - the class name.

In the HTML the class list is set as
class="whatever something whoknows".
And in your CSS you "select" for a class name using a period (.)

So you wrote your CSS as
.ui-iconexp
meaning "apply this to elements that contain the class ui-iconexp".
In other words you used a "selector" which matched on classname.

This is a good start, and certainly forms the basis for using CSS. NetTalk lets you add class names all over the place, and so this approach makes sense.

But other selectors also exist. And in some cases make "more sense".
For example, say you have 10 browses with this feature. By adding a classname in each procedure that's 10 time the work. Where'as it's fair to say if you want to make the change, you want it changed everywhere. So if you pick a selector that's already there, then you don't need to change the app, you just edit your custom css file, and use whatever is already there to construct the selector.

You can read up a lot on selectors on the internet of course. It's an incredibly powerful part of CSS, and one which is under used. Chrome Explorer has a brief primer here (https://www.capesoft.com/docs/chromeexplorer2/ChromeExplorer.htm#Selectors). Take a moment to read through that then use your browser tools to inspect the generated HTML to see if anything jumps out at you.
(For best results do that now, before you read on.)





ok, so maybe you say another attribute for the element;
data-do="cv"
and maybe you wondered what that was?

data-do is added by NetTalk in many places to describe the "function" of something. This attribute is used as a selector in JavaScript (which is how "code" is attached to the element) and also in some cases for CSS.

As you saw in the Chrome Explorer docs, you can select for an attribute using [ ]
Which means you can change your Custom CSS to

[data-do="cv"] {
   width: var(--icon-size);
   height: var(--icon-size);
   background-image: var(--icons);
   transform: 1.0;
}

notice, you're not using a class selector here (the .) but rather an attribute selector [ ]

Selectors are a _really_ powerful part of CSS, and you can select on all kinds of crazy things. They're well worth exploring.

Cheers
Bruce

[wasatchconsulting]

Thanks for the direction. Always learning.