Theme Builder Plugin

[All Adaptavist Apps]

Page tree

Versions Compared

Old Version 3

changes.mady.by.user Sharon Hinde

Saved on

compared with

New Version 4

changes.mady.by.user Sharon Hinde

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Introduction

The Skin Layout Editor Resources screen is a file upload and management tool.

Managing resources

Creating new text resources

Image Added

Editing

Image Added

Image Added

Resource Notation

Any image or text file can be uploaded to the Theme Builder Resources, and is then available to a skin layout using the resource notation.

SkinIDLAYOUT::ResourceName

Note the double colon between the skin layout and file name :: . This tells Theme Builder to look in its own resources for the file.

...

Note: Text includes CSS, JS etc. You must use the 'Save' button in the Skin Layout Editor after changing any text file in the Resources screen.

...

To use a resource with the image macro:

 

Wiki Markup

 


Code Block
{image:resource=layout::image.ext}

 

CSS Usage

Image resources can be used in the ThemeBuilder 5 CSS screen for background images. The code is added with the url in resource notation.

...

Add a background image to a HTML div in a panel or page.

...

Code Block
.my-background

...

 {
    background-image: url("

...

layout::ResourceName.ext");

...


}

 

Image in Resource screen


CSS screen

...

 

Code Block
.my-background {
    background: url("MYSKINMYLAYOUT::flying-pig.png") repeat left bottom #CC3300;
    color: #FFFFFF;
    height: 340px;  
}

 

Div Added to Page

...

The image is added as a background to the div.


Example Usage- CSS/JS

Text files can be used as additional resources for CSS and JavaScript code, or as a way to hold code separate from your skin layout that then gets imported into a panel e,g, a place to hold chunks of text that are re-used throughout your skinlayout...

CSS/JS Resource

See Skin Editor - HTML for an example of how to reference a CSS or JS resource file.

...

  1. Use the 'New text resource' button top open the text editor.
  2. Add the name of your file in the 'Name' text field and press 'Enter'



  3. A popup will display with the file name in the tab, and a simple text editor. The example shows HTML added in a file called company-address.txt.
    The text file extension can be used as this will be imported into a panel that outputs XML/HTML.



  4. In the Theme Builder layout use the Import macro to include the contents of the resource in your panel. Use resource notation to reference the file.

    Code Block
    {import:layout::company-address.txt}

Result

Output HTML

 

<p>My Company</p>
<p>The Building</p>
<p>The Street</p>
<p>The Town</p>
<p>The District</p>
<p>The Code</p>

Code Block
<p>My Company</p>
<p>The Building</p>
<p>The Street</p>
<p>The Town</p>
<p>The District</p>
<p>The Code</p>
 
 
Notes
You will need to click the 'Save' button to apply any changes made in the 'Resource' screen.
...
flaglogic.wiki contains the conditional logic used to control the display of confluence content when using a Theme Builder layout.
Managing resources
Creating new text resources
Image Removed
Editing
Image Removed
Image Removed