How to add CSS and apply to a button on a netwebform

[JHojka]

I have a custom css file located in

application folder\web\styles\custom.css

I added a class like the following

.msc-OptionButton {
 display: block;
 width: 5em;
 height: 2em;
 border: none;
 background-color: red;
 color: black;
 padding: 1px 1px;
 font-size: 48px !important;
 text-align: center;
 }

I the NetTalk ThisWebServer under Settings->styles->Files->CSS Style Files  have my Custom.css file listed 'Custom.css' Browser all and is included in themese.css checked.

Under NetWeb Form->Actions->Fields->Properties->Field BUTTON properties->CSS->Button CSS Class='msc-optionbutton'

When I inspect the element in chrome I see the following

<button type="button" name="WebLookup_AccountDetail_btn" id="WebLookup_AccountDetail_btnh8o8" value="Account Detail" class="nt-flex msc-optionbutton ui-button ui-corner-all ui-widget" onclick="location.href='WebLookup_AccountDetailMenu?&amp;PressedButton='" data-form="weblookup_accountpage">Account Detail</button>

I first see that my css class is listed before the ui-button class. I also can not get my button to use the css class.

Can someone help me put together the step I am missing? Is there a step by step on how to start using CSS?

Jeff Hojka
Khojant LLC

[ntnewbies]

Hi Jeff,
Just checking. did you put the css as 'msc-optionbutton' without a space?
try this:
' msc-optionbutton'

run gzip for both style and script just in case.

sometimes, if you are using the chrome, might need to clear the browser cache to see the new changes.



Jason

[JHojka]

I noticed a small mistake in my message which i already corrected in my code. .msc-OptionButton should be .msc-optionbutton since CSS is case sensitive. I tried your idea to add a space but this did nothing different.

Does it look like I am doing this correctly?

Jeff

[Bruce]

Make sure the app itself is in "performance debug" settings while you are editing CSS and testing.
WebServer procedure, NetTalk Extension, Performance Tab, Debug button.

cheers
Bruce