How to create templates for ucoz. How to install a template on uCoz. Step-by-step instruction. Added template to uTemplate

Minimalist and sophisticated, colored and plain, dark and light - templates for uCoz, a wide selection of website designs. The uCoz website builder has become popular due to its simplicity, accessibility and versatility. As a rule, users of this engine are beginners who do not want to learn all sorts of programming languages, but just want to create some simple portal. Websites created in the uCoz system are usually gaming portals, online cinemas and Varez. Most of the templates on the site are dedicated to their topics. True, recently, with the development of smartphones, many began to pay serious attention and mobile versions sites, therefore PDA templates- will also not go unnoticed.

Templates for uCoz can be divided not only by “genres” - games, movies, programs, stores, etc. But also in more global sections, namely: Free, Paid, Unique, Adaptations. I would like to highlight adaptations separately, because this is a very popular topic, since many would like to see templates made for some engines on uCoz, or even templates for some sites. In particular, I am in the process of adapting templates, individual elements and scripts from third-party engines and sites - under uCoz.

Not all (except mine) templates for uCoz are equipped with installation instructions, so here I will tell you briefly and in general terms how this is done. Some templates also do not have a designer, that is, they are installed not by installing the main template - which sets the design for the pages of all modules at once, but by installing the template for each specific page separately. For everyone else, this instruction will be relevant.

How to install templates on uCoz?

1. Download the archive with the template and extract all the files from it. Go to the control panel and fill in necessary files to the root of the site, through a file manager or FTP.

2. Installation of the frame. Copy the wireframe code and paste it into the Template Builder.

3. Setting styles. If the CSS style files are in the file manager, then you do not need to insert anything into the CSS template. This is what I do, for example, because when using a special style template, there is a possibility that uCoz will “break” something in the framework, for example, such a system jamb. However, if the downloaded template still uses the “CSS style sheet” template, then find the corresponding document in your archive, copy its contents and paste it into this style template.

Although in this case I would still recommend creating, for example, a file style.css and paste all the styles into it, and upload the file itself to the file manager in the folder css, and then write this file with styles in the template or templates between the tags Thus .

About the uCoz system

UCoz- free hosting and a website builder created back in 2005. On this moment The system has over 20 modules that allow you to create a full-fledged website for a wide variety of purposes. uCoz quickly gained popularity due to its simplicity and accessibility, although many do not like it for this, however, the disadvantages do not discard the advantages. Some statistics: uCoz is one of the 20 most popular Internet resources in Russia, and more than 1 million websites have already been created on it!

Before moving on to the installation process, you need to find a suitable design. I would recommend using templates only from trusted sources, such as the official store from uCoz or on sites that specialize in this area.

In this case, you can be sure of the quality of the template and its performance. Of course, you can google or use various Varezniks - but very often they come across rips, non-working designs, or even worse, files with viruses. Therefore, approach the issue of choosing a source with all seriousness, since not only the success of the operation, but also the security of your site depends on it. For the purpose of this article, I will be installing the free DesktopChaos template from uTemplate.pro.

Uploading a template file

So, download the archive with the template:

Inside the archive there are several subfolders:

• folder with images (images, img);
• folder with scripts (js);
• folder with styles (css);
• folders with codes for Global blocks, Informers, etc.

Also in the archive, as a rule, there are:

• instructions.txt (ReadMe.txt) - I strongly recommend that you read it;
• template designer.txt (tmpl.txt) - general code frame;
• stylesheet.txt (css.txt, style.txt) - file with a set of styles;
• type of materials.txt - contains the code of the type of materials;
• and etc. text files with the codes that are needed to fully install the template.

Note: the contents of your archive may differ from my template (this depends on the type, structure, complexity of the template and other factors).

Making a backup copy of the current template

Before you start installing a new template, I recommend making a backup of the current template (just in case)

To do this, go to the “Control Panel” of your site - “Design” - “Backup templates”:

Click the “Create” button in the upper right corner backup copy", after which you will see a backup archive appear with your current template like "1372338464.zip" with the creation date in brackets:

And, one more thing: before installing a new template I recommend activating all the necessary modules: those you currently want to use and those you might want to use in the future. This is done to ensure that your new template is installed correctly and displayed in all modules.

Step-by-step instructions for installing the template on uCoz:

Installation of the template is done according to the instructions that are inside your archive with the template. As I already said in this article I will show the installation of the template DesktopChaos.

Step 1.

Upload the folder with images images to your server. This can be done in two ways.

First way - via an FTP client, for example FileZilla. Download and install the program: http://filezilla.ru/get/.

After that, on the main page of the Control Panel, click and set a new password:

After that, open the FileZilla ftp manager, enter Host, Username and Password at the very top, click “Quick connection”:

On the left side of the manager, find the folder with pictures of your template, click on it right click mouse, in the menu that appears, click “Upload to server”. Ready. Now the pictures are on our server.

This method is convenient to use if you need to upload a lot of images or other files.

Second way - upload images via File manager . Let's go to home page PU and click on “File Manager”:

In the upper right corner, click Create folder, enter the name images and press Enter:

Let's go to this folder. To upload pictures to it, click “Select file”, select a picture and click Upload file. The green plus sign can be used to add fields for multiple files.

Thus, we upload all the pictures from the images folder to the server.

Step-2.

Set (if necessary) the value of the tag . Go to "CP (Control Panel)" - "Settings" - " General settings" and insert the code into the appropriate field:

Step-3.

Install the Style Sheet. To do this, find the file "Style Sheet.txt" in the archive, open and copy all the code from it (Ctrl+A, Ctrl+C) and paste it instead of the old code into "PU" - "Design" - "Design Management (CSS )" - "Style sheet (CSS)":

Step-4.

Install the code from the "Template Builder" file. Open the file from the archive "Template Designer.txt", copy all the contents and paste it into "PU" - "Design" - "Template Designer", click the "Create Templates" button:

Step-5.

Now, in a similar way transfer the contents of the file "Type of materials.txt" in the form of module materials: “Site News”, “Blog”, “File Catalog”, “Article Catalog”. Go to "PU" - "Design" - "Design Management (templates)":

The code from the file “Type of comments.txt” is similarly copied into “Comments” - “Type of comments”.

Step-6.

We create a Global block. Go to "PU" - "Design" - "Design management (templates)" - "Global blocks":

In the upper right corner, click “Add block”, in the field that appears, write the name of the INFO block and click “Add”:

Find the folder "Global blocks" in the archive and open the file "INFO.txt", copy the contents of the file and paste it into the newly created global block INFO, save:

Step-7.

Set the required values:

• Informer name: Latest news;
• Section: Site News (either “Blog”, or “File Directory”, or “Article Directory”);
• Data Type: Materials;
• Sorting method: Date of addition of material D;
• Number of materials: 5;
• Number of columns: 1.

Click "Create".

After this, a block with the informer we created appears just below, on the right in it we see icons, select the first of them “Informer design management” and in the window that appears, paste the contents of the “Latest news” file from the “Informers” folder, save:

Code for this informer $MYINF_1$ insert it into the global block we created earlier INFO.

An informer for a forum is created in a similar way.

This completes the installation of the DesktopChaos template.

By the way, if you still haven’t figured out how to install a new template on your website, then official store uTemplate.pro you can order a template installation service.

Today I would like to share with you my experience of implementing a design builder on a website. Since I use a non-standard design, I need to make changes so that I can work with the site using the designer.

What will this give me?
Firstly- a convenient way to manage website design and blocks without going into the control panel.
Secondly- quick addition of the blocks I need, which will already be designed in the design I need.
Third- the ability to use the capabilities provided by the system in blocks - for example, gadgets and widgets.
Fourth- the most important advantage. When creating a framework, the system itself will generate all the templates for all modules - and I will not need to change them manually for each module I use. The usefulness is obvious - arm yourself with patience and start making changes.

First, you need to make sure that the designer is activated - you can check this by going to Control Panel, Home » General Settings. If you need the option activated, proceed to setting up the design. To do this, go to the Control Panel, Design Management » Template Builder, and use the prompts to design the future frame properly. The principle of creating frames is simple - the existing page structure is divided into certain zones according to their meaning and purpose. For example, my three-column design, divided into similar zones to create a frame, would schematically look like this:

So, as you can see in the figure, the frame consists of the following main parts:
- in this block I will place the top part (header) of the site.
- here will be the entire middle part of the site, including the left and right columns and the middle part, in which the main content will be displayed. - here will be the bottom part of the site - counters, copyrights, etc. Separately, I would like to dwell on the description of the code
There are certain nuances to using this code that you need to know. In particular, this is due to the use of the Forum module. In my case, if I need to use this module, my framework structure assumes that the module will be located across the entire width of the page, since my container blocks are included in the middle block. When generating a template for the "Forum" module, the system looks at how the middle block is located and allocates the entire area it occupies for the forum output. If I move the container code of the right column outside the boundaries of the middle block, then the forum will take the place of the left and central columns, and the right one will remain in place. If I don't use the middle code at all, then the forum will be placed in the same place where the rest of the content is displayed.

Result: the design is divided into three large parts, each of which has its own meaning. But - in order for me to manage blocks and generate templates for all modules, I need to tell the system what the blocks will look like and where they will be located.
Since the main part of the site (columns) is located in a block
- add the necessary codes to it.
Using code I define an area in my design that will contain blocks such as Polls, Calendar, Search and others. With these codes I tell the system exactly where new blocks are allowed to be placed. In my case, this is the left and right column of the middle part of the page. We write codes into the design, for example like this:
Now I need to somehow tell the system what my future block will look like. When generating templates, the system will generate templates taking this information into account, and all new blocks will be immediately added in the design I need. The great thing about this is that I only need to describe the design of the block once - the system will do the rest itself. I add a block to the container:

TITLE

CONTENT

If the design of the blocks in all containers is the same, then it is enough to form only one block and create the second container empty. The block has two reserved codes" TITLE" And " CONTENT", which respectively mean the "Title" and "Content" of the block.

Separately, I would like to dwell on the reserved frame codes. There are several of them - here they are:
- : page title
- : path to the file with css styles
- : main part of the page
- : copyright of the uCoz system

My pop-up windows will be the same in style as the blocks - so I add the following code:

It is advisable to place this code at the very end of the code, for example after the closing tag- this will help avoid unnecessary confusion when creating the frame.
Also note that in the popup code is written in square brackets, whereas in the block code TITLE written without parentheses. This was done on purpose to be able to distinguish between these two codes.
After everything is ready, I will look at the result of the work. Everything looks fine - so I’ll save what I’ve done by clicking on the “Create templates” button. The system will generate templates for all currently active modules.
Let me sum it up. Refining your unique design so that the design mode works on the site is a fairly simple and quick task, which, however, can bring a lot of convenience in the future. Already, creating my own framework has saved me a lot of time setting up the design for all the modules I need.

Let me remind you that this article was about non-standard designs (created by you). Design mode is supported by all standard

When creating their own website, everyone wants their site to be different from others. This requires a unique design (purchase from a template store). In this article we will look at how to create your own unique design from the standard ucoz design. In order to change the design for yourself, you need to go to the “Design Management” section in the control panel. To do this, log in to the ucoz system webtobe and go to the Design> Design Management (templates) section in the control panel. The corresponding page will open.

In this window you will see what the website design consists of. These are individual components that together make up the overall design. To change them, ucoz has provided several tools that we will now analyze. At the top of the window there is a “Designer” button with which you can edit your site in the browser window directly on the site page. For now, let's look at the tools that are in the site control panel. Click on the “Top of the Site” button and a window for editing this site design template will open.

But many people do not know the html language, so we will choose a different path. We will use a visual editor. Click the Visual Editor button at the bottom of the window. The visual editor at the top of the template will open.

At the top you will see the line $WDAYS$ $DATE$ $TIME$ we will change their order so $DATE$ $WDAYS$ $TIME$. Below it is the line $USERNAME$, |Group "$USER_GROUP$" | RSS which means that you have registered under the name $USERNAME$ and are part of the group "$USER_GROUP$" let's change it to $USERNAME$, |Group "$USER_GROUP$" | IP: $IP_ADDRESS$

IP: $IP_ADDRESS$ shows the ip of the registered user. Next is the entry MY Site, you can change it to anything depending on the name of your site. Next, click the save button to save the changes. This way you can change other templates included in the site design.
To use the edited template without any problems, you need to create a backup copy. It will help if you accidentally spoil the template while editing. To create a backup copy, go to the "edit templates" section and click on the "Backup templates" button and click " backup templates".

Nowadays, many people are familiar with the procedure for creating websites. Nowadays it is quite popular, as many people make a living from it. What should we know about how to create our own template for the ucoz website before we start doing it? The most important thing is that contents I exist to create website templates paid And free.

Content- is one of the most common free systems to create websites. Over the course of 9 years, this company has created more than a million active sites and every day this figure is getting higher and higher. Many users use the system because they know that it will not let them down.

Basic ways to create templates

The necessary basis for knowing how to create your own template for the ucoz website, is knowledge and understanding of the basics of site robots. To begin with, we must be familiar with the principles of constructing the framework of the uCoz template. Instructions for this wireframe can be found in Control Panel » Design Management » Template Builder » Wireframe Example.

There are rubber and fixed templates. Rubber are called templates that stretch across the width of the screen, and fixed- these are those whose template width is specified and does not depend on the width of the user’s computer screen. Website creators recommend creating a fixed one, since working with it is much easier.

1. The first and most common is to create a template from scratch. The template is usually drawn in the program Photoshop, then it needs to be adjusted and adapted to the uCoz website system.

2. You can also create a template from HTML template. One of the most simple ways creating a template, we already have a ready-made template and we only need to mark it according to the rules for creating a uCoz wireframe template.

3. Another way to create is a template from PSD layout. This is a rather difficult method that requires additional knowledge. You have a template in the form PSD file. It needs to be opened in the program Photoshop, cut and adapt, saving as files jpg,png, gif. After that, type up as usual html page.

4. Adaptation of a template from another CMS. The most difficult of all possible ways creating templates for uCoz. To do this, you need to download the CMS file from any site that offers these types of templates and adapt its structure to the structure of the uCoz template.