MODX Revolution - Basic tutorial. MODX Revolution - Basic Tutorial Basic Tuning of MODX Revolution

Official website of MODX

http://modx.com/

Primary materials about the creation of sites onMODx

Parameters of snippets

http://wiki.modxcms.com/index.php/Category:Snippets

The rest of the distribution can be downloaded at http://modx.com/download/evolution/

The sequence of creation of the site onMODxevolution

1. Create a data base with the same prefix, which is designated by the hoster, so that you do not edit the config.inc.php file.
2. Install MODx. Zrobiti nalashtuvannya.
3. Copy the template to the site in the assets/templates folder.
4. Copy the index.html template code from the Minimal Templates template.
5. All in the middle write a way

   .

6. Write paths to scripts, pictures, styles (img, link, scrypts). For example,

7. Designate the link templates on the site.
8. Seeing the bedrooms for all sides of the part of the stench will be chunks. Chunks appear at the underwire curly temples. For example, ((HEAD))
9. The smut menu of the site can be blamed on an okremy chunk. .
10. Site menu This sitemap is rendered as a Wayfinder snippet. Description of the Wayfinder snippet.
11. The list of resources for that number with descriptions, pictures, messages ... is displayed with the Ditto nippet. Describe and attach the Ditto snippet.
12. The navigation lantern "Breadcrumbs" is displayed in the Breadcrumbs snippet. Description of the Breadcrumbs snippet.
13. Searching the site is done with the AjaxSearch snippet. Description of the AjaxSearch snippet.
14. The form zvorotny zv'azku- Snippet eForm. The butt of a folding form of a zvorotny zv'yazku using the eForm snippet.
15. Plug-in Phx assignments for rechecking the presence of the image in the TV-parameters, indicating the father's powers and int.
16. It is necessary to additionally prescribe a sprat of styles.
17. After transferring the site to the hosting:

Hello everyone, friends! Tse basic lesson from CMF MODX Revo solution As far as we know from the MODX system, we will install the necessary plugins and we will install the basic framework.

Clap

Zapiniti

Resources for a basic MODX lesson:

• pdoTools Documentation: docs.modx.pro/components/pdotools/

Installing and customizing MODx plugins

Installable Advanced MODx version, at the time of installation, it is indicated that the folder will be named for the administrator super.

Must-Have Plugin MODx

The most popular and most often wicked additions for MODx:

1. Ace- MODx code editor;
2. Collections- introduction and management of collections of resources;
3. pdoTools- Set of basic tools MODx;
4. FormIt- robot with forms in MODx;
5. phpThumbOf- robot with images in MODx;
6. TinyMCE/CKEditor (optional)- Text WYSIWYG editor for MODx;
7. translit- URL transliteration for MODX;
8. MIGX- Added fields to be added in MODx;
9. autotemplate- "Intelligent" automatic recognition of resource templates.

Basic tweaks to MODx Revolution

Go to " Systemic adjustment".

1. Shared: Friendly URL

   • Transliteration of pseudonyms: Russian;
   • Whisk friendly URL: So;
   • Suvory friendly URL mode: So;
   • Change to duplicate URI in all contexts: So;
   • Featured Contributions URL: So;
   • Don't forget to change the name too ht.access in .htaccess at the root of the site.

2. Razdіl: Panel keruvannya

   • Show description on top menu: Ni.

3. Rozdil: Website

   • Storinka pardon 404 "Document not found": Resource ID 404;
   • For lockdown: So;
   • Site name: Name your project.

4. Rozdіl: System and server

   • Nadsilati header X-Powered-By: Ni.

5. Namespace: ace

   • Font size: 18px;
   • Soft tabulation: Hi;
   • Rozmir tabulation: 2;
   • Editor's theme (optional): ambiance, chaos, chrome, clouds, clouds_midnight, cobalt, crimson_editor, dawn, dreamweaver, eclipse, github, idle_fingers, katzenmilch, kr, kuroir, merbivore, merbivore_soft, mono_indrk, tomorrow_night, tomorrow_night_blue, tomorrow_night_bright, tomorrow_night_eighties, twilight, vibrant_ink, xcode;
   • Besides, you can change the topic material with editor Ace. Instruction:

     MODx Ace Material Theme 1. System Customization > "ace" Namespace: Font Size: 15px Edit Area Height: 560 Invisible Characters: Tak Soft Tab: N Tab Size: 2 Editor Theme: tomorrow_night 2. Files: super > default > css > index.css: (Add to css) !important) .ace_gutter(color:#666E79!important) .ace_active-line,.ace_gutter-active-line(background-color:#2A2F38!important) .ace_scroller,.ace_gutter (background-color: #272B33!important) . ace_meta.ace_tag(color:#A6B2C0!important) .ace_meta.ace_tag.ace_tag-name(color:#DF6A73!important) .ace_entity.ace_other.ace_attribute-name(color:#D2945D!important) !important) 3. Clear cache through the menu.

Creation of basic resources

1. Storinka 404- the side for fixing the document was not found. Do not show at the menu;
2. sitemap- resource for vision [] . Empty template. Do not display on the menu. Type in place: XML. Not available for prank. Don't tag the HTML editor;
3. robots- resource for vision robots.txt. Empty template. Do not display on the menu. Type in place: Text. Not available for prank. Don't tag the HTML editor.

In the past lessons, we installed and fixed modx, as well as installed packages that will be necessary for the creation of the site. Today's tutorial is about porting great HTML/CSS/JS to MODX Revo design. Where can you get the design, I wrote in the article: MODX templates - what is it, what is it? For my site, I have selected ready paid responsive bootstrap template on theforest for 17$ under the name brightbox (click on the name to look through the yoga demo and description). You can beat it absolutely be it, it’s all the same without any cost - so you understand the whole principle of stretching more and more quickly.

Theme HTML Structure

Practical skin theme can have html, css, js and image files + have more php files- Obrobnik forms.

In my view, in the assets folder there are css and js files (in the separate directories), in the images folder - images and red files (you can have them not red - everything is stored in the browser installed behind the lock) - these are html files.

Porting a template to Modx

The simplest way is to just upload all files with folders (cream html) at the root of the website. Ale, I'll follow a folding path. Since I don’t have modx files and assets directories, I’ll upload assets (css and js subfolders) to the root of the site and images to the root.

Previously, I created the template directory and uploaded all the files from it - you can do it yourself.

Editing the base template

In the language tree, go to the “Elements” tab and open the cob pattern (you can just click LMB or RMB and select edit).

We can see it and replace it with the code from index.html (we didn’t put it in the root of the site).

You can open an HTML file with the help of a great notepad, or better yet, write special editor for example

Let's go to the main page of the site.

Main side at the same time looking crooked.

It happened to the one who changed the paths to scripts and css.

Correction of ways

The paths look like this at once.

Until the speech of the troch, the topic is marvellous, sound the way through the slash /, and \, correct it.

If you already installed the ace package, you can easily and simply search for a replacement, for which you can click on the code and then click on the Ctrl + H keys (working on Linux and windows), at the top field enter \, and in the bottom / i click all.