| A | B | C | D | E | F | |
|---|---|---|---|---|---|---|
1 | MTPC Presset Classes (last revison 22/06/2022) | |||||
2 | — | |||||
3 | ||||||
4 | Class Name | Usage Level | Description (What's the class can do) | Remarks | ||
5 | Page Layouts & Alignment Tweaks | |||||
6 | page-title-left | body | section | block | This class aligns the page title to the left. | |
7 | page-title-center | body | section | block | This class aligns the page title to the center. | |
8 | page-title-right | body | section | block | This class aligns the page title to the right. | |
9 | layout-fixed | body | section | block | This class sets the entire page layout to a fixed width of 1280px. | works for individual pages |
10 | layout-full | body | section | block | This class sets the page layout to a full 100% width. | works for individual pages |
11 | no-footer-margin | body | section | block | This class removes the margin between the page footer and the last section. | |
12 | align-center | body | section | block | This class aligns the elements to the center. | |
13 | align-left | body | section | block | This class aligns the elements to the left. | |
14 | align-right | body | section | block | This class aligns the elements to the right. | |
15 | Block Tweaks | |||||
16 | mtpc-hide-desktop | body | section | block | This class hides the block/section in desktop view | |
17 | mtpc-hide-tablet | body | section | block | This class hides the block/section in tablet view | |
18 | mtpc-hide-mobile | body | section | block | This class hides the block/section in mobile view | |
19 | block-border-left | body | section | block | This class creates a border at the left of the block. | desktop & tablet border set to left side mobile boder set to top |
20 | block-border-right | body | section | block | This class creates a border at the right of the block. | desktop & tablet border set to right side mobile boder set to bottom |
21 | block-top-20 | body | section | block | This class set a 20px padding to the top of the block. | |
22 | no-overflow | body | section | block | This class reset the overflow to unset | |
23 | no-margin | body | section | block | This class removes the default margins (if exists). | |
24 | mtpc-well | body | section | block | This class adds a rounded border around an element with a gray background color and some padding | |
25 | well-dark | body | section | block | This class is an option for the mtpc-well class, it darkens the background and the border | You must use mtpc-well class first before use this class |
26 | section-dark | body | section | block | This class set the color of the elments (p, li, and image caption) to white color | |
27 | no-padding | body | section | block | This class removes the default paddings (if exists). | |
28 | space-top-0 | body | section | block | This class removes all the top spacing of the block./section | |
29 | space-top-5 | body | section | block | This class set a 5px padding to the top of the block/section. | |
30 | space-top-10 | body | section | block | This class set a 10px padding to the top of the block/section. | |
31 | space-top-15 | body | section | block | This class set a 15px padding to the top of the block/section. | |
32 | space-top-20 | body | section | block | This class set a 20px padding to the top of the block/section. | |
33 | space-top-30 | body | section | block | This class set a 30px padding to the top of the block/section. | |
34 | space-top-40 | body | section | block | This class set a 40px padding to the top of the block/section. | |
35 | space-top-50 | body | section | block | This class set a 50px padding to the top of the block/section. | |
36 | space-bottom-0 | body | section | block | This class removes all the bottom spacing of the block./section | |
37 | space-bottom-5 | body | section | block | This class set a 5px padding to the bottom of the block/section. | |
38 | space-bottom-10 | body | section | block | This class set a 10px padding to the bottom of the block/section. | |
39 | space-bottom-15 | body | section | block | This class set a 15px padding to the bottom of the block/section. | |
40 | space-bottom-20 | body | section | block | This class set a 20px padding to the bottom of the block/section. | |
41 | space-bottom-30 | body | section | block | This class set a 30px padding to the bottom of the block/section. | |
42 | space-bottom-40 | body | section | block | This class set a 40px padding to the bottom of the block/section. | |
43 | space-bottom-50 | body | section | block | This class set a 50px padding to the bottom of the block/section. | |
44 | 2 Column Layout Tweaks | |||||
45 | l25_75 | body | section | block | This class sets the left and right columns to 25% and 75%, respectively. | 2 columns section only |
46 | l75_25 | body | section | block | This class sets the left and right columns to 75% and 25%, respectively. | |
47 | l30_70 | body | section | block | This class sets the left and right columns to 30% and 70%, respectively. | |
48 | l70_30 | body | section | block | This class sets the left and right columns to 70% and 30%, respectively. | |
49 | l35_65 | body | section | block | This class sets the left and right columns to 35% and 65%, respectively. | |
50 | l65_35 | body | section | block | This class sets the left and right columns to 65% and 35%, respectively. | |
51 | l40_60 | body | section | block | This class sets the left and right columns to 40% and 60%, respectively. | |
52 | l60_40 | body | section | block | This class sets the left and right columns to 60% and 40%, respectively. | |
53 | l45_55 | body | section | block | This class sets the left and right columns to 45% and 55%, respectively. | |
54 | l55_45 | body | section | block | This class sets the left and right columns to 55% and 45%, respectively. | |
55 | sidebar_left | body | section | block | This class fixes the sidemenu width and position if side menu is in left side. | Default width is 300px |
56 | sidebar_right | body | section | block | This class fixes the sidemenu width and position if side menu is in right side. | |
57 | sidebar_left_250 | body | section | block | This class fixes the sidemenu width and position if side menu is in right side. | Default width is 250px |
58 | sidebar_right_250 | body | section | block | This class fixes the sidemenu width and position if side menu is in right side. | |
59 | bottom-line | body | section | block | This class adds a line at the bottom of the section with no margin between the image and the gray line | *. 2 columns section only *. Image has to be on the left container ( if you need to put the image on right side, you can simply use reverse row option) |
60 | valign-middle | body | section | block | This class vertically align the content of (left side/right side) to the middle of the section container | default is (Top) |
61 | valign-bottom | body | section | block | This class vertically align the content of (left side/right side) to the bottom of the section container | default is (Top) |
62 | Background Image Tweaks | |||||
63 | bg-attachment-fixed | body | section | block | The background image is fixed and does not scroll with the rest of the page. | |
64 | bg-repeat | body | section | block | The background image is repeated both vertically and horizontally. | |
65 | bg-repeat-x | body | section | block | The background image is repeated horizontally only. | |
66 | bg-repeat-y | body | section | block | The background image is repeated vertically only. | |
67 | bg-no-repeat | body | section | block | The background image is not repeated. | |
68 | bg-size-cover | body | section | block | This class resizes the background image to cover the entire section. | |
69 | bg-size-contain | body | section | block | This class resizes the background image to ensure that it is fully visible. | |
70 | bg-position-x-left | body | section | block | The background image is set horizontally to the left. | |
71 | bg-position-x-right | body | section | block | This class sets the background image horizontally to the right. | |
72 | bg-position-x-center | body | section | block | This class sets the background image horizontally to the center. | |
73 | bg-position-y-top | body | section | block | This class sets the background image vertically to the top. | |
74 | bg-position-y-center | body | section | block | This class sets the background image vertically to the center. | |
75 | bg-position-y-bottom | body | section | block | This class sets the background image vertically to the bottom. | |
76 | body-bg-position-y-bottom | body | section | block | This class sets the body background image vertically to the bottom. | Do NOT use with section classes |
77 | Navigation Menu | |||||
78 | sub-r-position | body | section | block | Set the position of a sub menu to right position | Default is left Except last item (always right) |
79 | sub-large-width | body | section | block | set the width of a sub menu to 300px | Default is 205px |
80 | sub-xlarge-width | body | section | block | set the width of a sub menu to 450px | Default is 205px |
81 | sub-full-width | body | section | block | set the width of a sub menu to full width (item text will be set to nowrap) | Default is 205px |
82 | Tables | |||||
83 | tbl-scroll | body | section | block | This class enables the horizontal scroll to any table | add it as additional class e.g. tbl-bg tbl-scroll |
84 | Specific Blocks | |||||
85 | Slideshow block | |||||
86 | text-bg-shadow | block | This class show a drop shadow behind the slide show texts | |||
87 | ||||||
88 | ||||||
89 | ||||||