Creating a template - step by step instruction. LINK tag for attaching CSS sheets.

To create the template go to the Template tab in the "Resource Panel on the left". If the panel is not visible, you can enable it in the Display menu. Another way is to use the keyboard shortcut (F9 by default), or use the "Display or hide the resource panel on the left" icon on the main toolbar.

You can also open and go directly to the Templates tab using the keyboard shortcut Ctrl+4

In the Templates tab, select (or create) a category in which to place the new template. Grouping templates into categories allows you to keep your templates organized.

Then click the "Add new template" icon.

Preparations

Before proceeding, it is a good idea to think about what the template will do. This will allow you to prepare it optimally. In this case, the assumptions will be as follows:

  • tag will only be inserted in the HEAD section of the HTML document. All content will be in the "Left section of the template",
  • using template is to copy the CSS sheet to the place where the document, where the tag will be inserted, is saved.

After opening the Template Editor, choose a name for it. In this case, the best one would be "LINK - attach CSS"

The template type can remain the default - "Just template".

Create a tag skeleton

It is most convenient to create the tag skeleton in the editor using the appropriate Spider tools for each tag. However, for an example as simple as the template currently being created, you can type the content manually.

In the "Left part of the template", type the following:
<link rel="stylesheet" href="" type="text/css" />

At the moment, the path to the file with CSS sheets is not defined yet. To specify it, a variable of the "Link to documents" type will be used.

Specifying the path to a CSS file using the variable

To create a variable, click on the "Add New Variable" icon in the menu above the template content editing window.
  • In the "Variable name" field, enter a name (e.g. "CSS file").
  • The "Hidden variable" option will remain unchecked (a user using the template must see it in the inspector to change the file path).
  • Variable type - select the "Link to documents" type. This type of variable (similarly to "Links to graphics") has a special property - the file indicated in such a variable will be copied to the folder where the document, into which the macro code is inserted, is saved.
  • Finally, you can fill in the "Default path value" field. You can enter the path manually, or point to the file using the window that opens when you click the "Select default file path" icon (on the right).

Once a variable is created, it will appear in the list of variables. To insert it into the macro code content, place the cursor between the quotes of the href attribute value and click the "Insert selected variable" icon.

At this time, the template should be in the form of:
<link rel="stylesheet" href="%pvar%CSS file%pvar%" type="text/css" />

Now you can close the window with the OK button - the template is ready!

You will be able to use the template using the options:

  • "Insert template at cursor position" - if the cursor is within the HEAD section of the HTML document
  • "Insert macro code with left part into HEAD". - in this case, the cursor can be placed anywhere - the left part of the template will always be placed in the HEAD section of the HTML document

Related topics

To top