• Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Menu
  • Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Intermediate > Dynamic Article Styles Tutorial
Dynamic Article Styles Tutorial
Intermediate
  
September 7, 2017
  
admin

Dynamic Article using the Style Map and Stylesheet properties

Overview

The Dynamic Article displays HTML content in your Project that you can maintain in Umajin’s Cloud Services, http://cloud.umajin.com. Setting and changing styling rules for your HTML content can be done for each dynamic article.

Style Map property: allows you to assign app global styles as CSS rules to your dynamic article’s HTML content. This is fed into the stylesheet.
Stylesheet property: contains any CSS rules you want to employ plus mapped styles.

Uses: you may wish to have a full article displayed on one page yet only its heading and ellipsis content on another. The content of the two dynamic articles is the same but their CSS rules are different.
 
Not all CSS rules are supported, see HTML – CSS selector and properties support for a list.

In this tutorial we’ll be using the Umajin Editor and the Cloud Services site to map styles to our content and access our stylesheet.

Prerequisites

  1. Umajin Editor downloaded and installed
  2. Be competent working with components and their properties.
  3. Have completed the tutorial on dynamic articles.
  4. Have a basic understanding of HTML and CSS

Instructions

For style continuity reasons we use the Style Map property to match HTML <P> and <H> tags of your dynamic article to those of your project. It prevents style of your dynamic article content from being mismatched if you alter your project’s global styles. This tutorial continues on from the tutorial on dynamic articles.

Step 1) Umajin Editor: In your project create some global styles after the “default” style. E.g, “H1 orange”, “H2 sweet” and “P mellow”. This is accessed in the top “File” menu under “Style” of the Umajin Editor.

Step 2) In Cloud Services create a Dynamic Article containing a heading (H1), subheading (H2) and a paragraph (P). Leave any other font settings as they are.

Step 3) Umajin Editor: Select your new document in your Dynamic Article

Step 4) From the Properties panel select Style Map

Step 5) In the pop up assign your project’s global styles to the P, H1 and H2 HTML tabs of your dynamic article via the drop-down selectors.

Step 6) The result is project-relative styling based on your global styles

Step 7) The styles you selected have been appended to the Stylesheet property of you dynamic article. By selecting the stylesheet property you can see these style rules after the style comment,  /*style map*/, in the stylesheet. You can add any further style rules before this comment.
Important Note: any rules written after this comment will be overwritten on changes to global styles if you have those styles mapped to your dynamic article. Style rules you want to keep must be added before the style map comment. The following example shows a body rule that won’t be overwritten.

  • Umajin
  • Developers
  • Support Home
Menu
  • Umajin
  • Developers
  • Support Home