Forum | Appery.io

I'm doing good with my first Tiggzi project. It does a good job of building your app and writing the code for you. As I am new to how Tiggzi works, yet quite familiar with HTML and CSS styling, I am hopeful to be able to apply some extra styling I need.

Simple case, how do I style the background-color of a screen object, such as a Label?

In standard HTML code, I might make a CSS entry like:

label {
background-color: #FFFFCC;
}

I have tried the class label and label.ui-input-text. I have tried adding a CSS doc in the builder. I have tried entering these parameters in Properties / More properties. I have tried the Pallette Panel for entering HTML code. Having spent WAY too much time on this, I am now looking for some clues.

What is the best way to apply CSS styles to screen objects in the context of the Tiggzi builder?

All the method might work, you just need to make sure you are setting the right CSS property. The best way is to run the app in the browser and then use Firebug or Chrome Developer Tools to see which CSS properties you need to set/overwrite.

Here is another way: https://getsatisfaction.com/tiggzi/to...

Thanks for the reply Max.
While you are correct that "All the method might work," thats not good enough for paying customers.

There needs to be much better documentation and examples of how to access and control screen elements. Your given example doesnt work.

The label has a name of 'myLabel'.

code
Tiggzi('myLabel').css('color', 'blue');
/code
same as above, just without using Tiggzi function (straight jQuery):
code
$('div[dsid="myLabel"]').css('color', 'blue');
/code

You can try it here: http://project.tiggzi.com/mobile-fram...

To manipulate any component, you select it with jQuery and then can apply any styles, add attributes, etc. It does require good understanding of how jQuery works, and what attributes to set.

There are more examples here:
http://help.gotiggr.com/getting-start...

OK good, that what I am trying to do.
Thanks for some clues, Max.

I'm sure I am not alone in trying to figure out exactly where to apply such code within the Tiggzi app builder. I see this JavaScript:

mobilescreen1.js

• JS for mobilescreen1 generated by Exadel Tiggzi

  // screen elements handler
  screen_4459_elementsEvents = j_0_elementsEvents = function() {
  $("a :input,a a,a fieldset label").live({
  click: function(event) {
  event.stopPropagation();
  }
  });
  $('#j_3 [name="mobilebutton3"]').die().live({
  click: function() {
  if (!$(this).attr('disabled')) { //Tiggzi('myLabel').css('color', 'blue');
  $('div[dsid="myLabel"]').css('color', 'blue');
  }
  },
  });
  }

  Since we can't edit mobilescreen1.js directly, is this code the result of custom JavaScript built into the "Click" event on the button?

  Would we attach such code in the "Load" event of a page ?
  Thanks

[quote:]
is this code the result of custom JavaScript built into the "Click" event on the button?
[/quote]
Yes, it's the click event plus our custom code.

code
Would we attach such code in the "Load" event of a page ?
/code
You could.

You always start with an HTML5 browser app. So, you can do anything the browser supports or you can do via JavaScript.

[quote:]"Thanks for the reply Max.
While you are correct that "All the method might work," thats not good enough for paying customers."[/quote]

As A Pro user/customer I'd like to add a thought.
Keep in mind... The ability to create custom JS and alter, create elements etc. Is what makes Tiggzi great ! And sets them apart from ALL others.
Helping us with custom JS, CSS etc is I think polite and voluntary.
Kinda like buying a car and expecting the car mfg to teach you how to drive it ?

Neil - Shut the fuck up. Nobody needs your Bullshit mouth.