NetTalk Central

Author Topic: Edit Theme.css no effect?  (Read 4463 times)

JohanR

  • Sr. Member
  • ****
  • Posts: 366
    • View Profile
    • Email
Edit Theme.css no effect?
« on: September 04, 2018, 12:38:49 AM »
Hi,

Just trying to understand the process if I need to edit theme.css
Which file is used and then combined into a zipped version and then what happens at runtime with the server and the browser.


Usually with each NT update there is a line in the theme.css file that I need to comment out, for my specific layout.

It eventually works in the end, but it is a combination of running the build all batch files reloading the server etc...
And I never really know what it is exactly that fixes it

TIA for any info


Johan

JohanR

  • Sr. Member
  • ****
  • Posts: 366
    • View Profile
    • Email
Re: Edit Theme.css no effect?
« Reply #1 on: September 04, 2018, 11:51:45 PM »
Hi,

Think I solved the problem.
After some input from Bruce this is what I did.

The recomended method is to create your own style which overrides the defaults tyles,
but for this specific case I needed to comment out these lines a fix for my layout problems.
*, *::after, *::before {
    box-sizing: border-box;
(I will at a later stage investigate and come up with long-term solution howto co-exist without editing the defaults CSS)


1) edit the nettalk-grid.css file in the clarion10 folder  ( C:\Clarion10\accessory\libsrc\win\NetWeb\web\styles\ )
2) run copyall.bat manually from FileExplorer to update all the files/folders in the dev folder
3) run gzip file again from the IDE

Seems to solve the problem

Johan

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Edit Theme.css no effect?
« Reply #2 on: September 05, 2018, 02:27:58 AM »
Hello Johan,

I wouldn't edit the nettalk-grid.css file in the Clarion 10 folder.

If you use a custom css file (ie., custom.css), you can override nettalk-grid or any other classes as you see fit. 

So, let's say the shipped NetTalk css is something like:

.justifyContentClass {
    justify-content:  justify-between;
}

You could do something like:

.jusifyContentClass  {
    justify-content:  jusify-start;  //Overrides the CSS above
}

Run the gZipAll and, if you have the Include in Theme.Css flag set to true, all of your Theme.Css files will also be updated. 


Also, the ::after and ::before entries can be overidden as well but I'm not quite awake yet as it's 5:19am here and my coffee hasn't kicked in. 

JavaScript can be used to override CSS at runtime but, as Bruce explained to me, that is considered less than ideal.  CSS first then JS (Reference Styling).

I think Bruce covered CSS pretty in depth recently in a NetTalk user group meeting.

Yeah, check out NT User Group Webinar 204, 198.  There are quite a few webinars where Bruce discusses CSS.

See ya Johan and good luck,

Don


« Last Edit: September 06, 2018, 01:51:29 AM by DonRidley »
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11