Results 1 to 1 of 1

Thread: [Answers] CSS and theme-2

  1. #1
    Lianja MVP
    Join Date
    Dec 2012
    Location
    Croatia, Zagreb
    Posts
    1,135

    [Answers] CSS and theme-2

    Select a theme from the Form Tools bar and you will see the UI change dynamically.
    Themes reside in \lianja\themes and unsurprisingly have a .theme file extension.
    You can read the sample themes that are provided and see the format of these files which is quite straightforward laud out as key/value pairs.
    Themes can be used to globally assign attributes throughout a complete application.
    You can create a new theme and put it in the themes directory then open an app and assign the theme.



    Also bear in mind that "themes" can be chosen from the "Form Tools Bar" at the bottom of the page builder. When you select a theme it is applied to all the UI elements based on the theme keys as described above.
    This provides the ability to create App templates and apply all the attributes to a complete App at any time.



    Q:
    We are using a theme in our app - Theme2.
    We want to change the colour of read-only fields [probably change the forecolor to grey RGB(192,192,192)] so the users know where data entry is required.
    We can change the data colour attributes but they make no difference to the display either in dev or runtime, even when app is refreshed. The page is being put in to edit mode.
    We can change the textbox label successfully.
    A:
    try setting this as the cssstyle on the section.
    Code:
    lianja_ui_textbox[readOnly="true"] { background-color: beige; }
    This works. Just set it on your pages or in your theme:
    Code:
    app.css = lianja_ui_textbox[readOnly="true"]{background:lightgray;}
    That will change all readonly text boxes to lightgray.

    Q:
    We applied "app.css = lianja_ui_textbox[readOnly="true"]{background:lightgray;}" to the css style property of a page and it changed all the captions but made no difference to the text box itself, either in Dev or Runtime.
    We then tried to change the theme (though we don't know where to put it) by adding as follows :
    Code:
    ################################################## ##############
    # App attributes
    #
    app.pagesectionheadertype=flat
    app.pagesectionheadericonset=white
    app.pagesectionheaderbackcolor=#6B6B6B
    app.pagesectionheaderforecolor=white
    app.pagesectionheaderheight=34
    app.pagesectionheaderfontsize=12
    app.pagesectionheadercss=
    app.css=theme:/Modern.css
    app.css = lianja_ui_textbox[readOnly="true"]{background:lightgray;}
    That made no difference at all. This certainly needs to be at the theme level so that Edit() doesn't change everything.
    A:
    Try this in the theme file:
    Code:
    formitem.cssstyle=lianja_ui_textbox[readOnly="true"]{background:lightgray;}
    The theme files can reference:
    app.attribute=
    page.attribute=
    section.attribute=
    formitem.attribute=
    Also bear in mind that "themes" can be chosen from the "Form Tools Bar" at the bottom of the page builder. When you select a theme it is applied to all the UI elements based on the theme keys as described above.
    This provides the ability to create App templates and apply all the attributes to a complete App at any time.



    What is a QR code?
    http://www.whatisaqrcode.co.uk/
    How can I generate a QR code in Lianja?
    http://larsjung.de/jquery-qrcode/
    Then write a small .rsp page and generate it into a WebView section.
    Where can I get the code from?
    https://github.com/lrsjng/jquery-qrcode



    All topics in [Answers] alphabetically: http://www.lianja.com/community/show...ll=1#post12352
    This same topic is extended to another thread: http://www.lianja.com/community/show...SS-and-theme-1
    Last edited by josipradnik; 2016-10-24 at 03:18.

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Journey into the Cloud
Join us