Mojoportal Learning -- using artisteer to quickly create a template for document translation

Sorry for the poor translation.

 

In mojoportal2.3.3.9, we modified the template to support the HTML template generated by artisteer.

Artisteer is a very good design template, and you do not need HTML or CSS knowledge to use it.

Note: The following information applies to mojoportal2341 or later and artisteer2.4.
In artisteer2.4, there are many changes compared with Version 2.3.

The class names in artisteer2.4 are all in lowercase, and thus there is a corresponding change in mojoportal, as the starting point of 2.3 design artisteer-greenlagoon and artisteer-swirl1 cannot

It is used in template design 2.4. We also made a series of templates for the starting point of artisteer2.4 template creation.

Artisteer2.4 supports tree menus during the biggest change. In order to make it more scalable, I have made some work to support vertical menus as the main menu,
 
Or the horizontal menu is used as the top menu, and the vertical menu is used as the sub menu.
 
 
Quick operation guide:
1: Create a folder, such as/data/sites/1/skins/artisteer-custom name
 
2: select an artisteer2.4 template as your starting point
 
(1): artisteer-24topmenu menu at the top of the page, no vertical menu
(2): artisteer-24headermenu menu under the page title picture, no vertical menu
(3): artisteer-24verticalmenu2 menu at the top of the page, there is a vertical menu
(4): artisteer-24verticalmenu1 menu under the page title picture, there is a vertical menu
(5); artisteer-24verticalmenu3 only has a vertical menu
3: select one from the above folder and copy the file. (The images folder cannot be copied)

4. paste the file to the new folder.

5: The generated HTML template contains the following files:

Images folder page.html script. js style.css style.ie6.css style.ie7.css
 
Copy the file to your new template folder.
 
6. Complete 90% of the work. Adjust template width style-artisteer-overrides.css
 
. Art-contentlayout. art_sidebar2 {} is the list on the right.
 
7: because we often do not want the page background color and background image to appear in the WYSIWYG editor, We overwrite the body style as follows:
 
Body {background-color: White; Background-image: none ;}
 
Then select the style.css's body#, and then click style-artisteer-overrides.css.
 
8: Set the character layout. In style.css, select. Art-blockheader. t {} and then click style-artisteer-overrides.css,
In. Art-blockheader. t h2.moduletitle [], the template title in mojoportal can be set in the same way.
 
9: Because the templates generated by artisteer adopt different mechanisms, the background image code in the generated HTML code may be different. You need to compare
The code in the HTML file is similar to the Code in the layout. master file. Replace the code in layout. master.
 
For example, the code in the HTML file is as follows:
 
<Div id = "Art-page-Background-simple-gradient">
<Div id = "Art-page-Background-gradient"> </div>
</Div>
In layout. Master:

<Div id = "Art-page-Background-simple-gradient"> </div>
<Div id = "Art-page-Background-glare"> <Div id = "Art-page-Background-glare-image"> </div>
<Div id = "Art-page-Background-gradient"> </div>

Replace.

10: Other elements may change.

11: you can modify the stylemojo.css file.

12: depending on your color combination, you may need to optimize CSS files of different modules, such

Styleaspcalandre.css styledatacalendar.css styleblog.css and so on, you can copy these files from other similar templates.
 
13: You may want to change the jquery UI template.

Practical artisteer skills

"
The artisteer template allows the layout of 1, 2, or 3 columns. In mojoportal, our template automatically supports 1-3 column adjustment. To make your artisteer Template

CSS supports 1-3 columns. In artisteer, we recommend that you always use two columns of layout, one left column and one wide middle selection.

"
The template in artisteer, for the current display, the width of 1000px may be a good solution, if it is a custom width, you may need

Modify in style-artisteer-overrides.css. Artisteer2.4 practical percentage is used to set the width of the layout column, so no additional settings are required.

If most of your customers use 1024*768 resolution, you may want to use the 960xp width. If the 1000px width is used, a slider may appear on the left.

"
The artisteer template contains 30 pixels at the top of the template, which is used to place logon, registration, and site maps.

"
Do not narrow the layout Column

Important:

......