JSN Sun Framework User's Guide
|
|
- Jeffery Burns
- 5 years ago
- Views:
Transcription
1 JSN Sun Framework User's Guide Getting Started Layout Overview & Key concepts To start with layout configuration, Go to Extension Template JSN_template_default The first tab you see will be the Layout tab, where you can have the ultimate control of the template layout. Layout Overview Sun Layout Builder is a very flexible and powerful tool which gives you the ability to build and customize the existing template with the intuitive drag-and-drop interface. The Layout Builder consists of 3 main areas: 1. Layout Items: list of items which you can drag & drop into the layout. 2. Layout: including the main layout and 4 off-canvas regions. There are areas where your template s layout items are positioned and built. 3. Setting panel: all the settings related to layout items which are being configured. Concepts Sun Framework s layout concepts: 1. Page: Overal settings for the layout 2. Section: Section is a division of a page. A section is automatically created when you add a row to an empty area in the layout. It contains one or more row in which you can add Layout Items. 3. Row 4. Column 5. Layout items: These are smallest pieces in the layout. Each item is made up of one column. Layout Control Undo & redo Sun Layout Builder allows you to undo and redo the actions that you made. Simply hit Undo to switch back or Redo to go forth. This tool will surely save you a huge amount of time and efforts. Worry-free if you accidentally make a mistake. Save layout Sun Framework offers Ajax save button for each settings tab. Changes will be saved quickly without having to re-load the setting pages.
2 Save as custom layout This option gives you the ability to save the current layout and use it later on. To save the current layout as a custom one, just click on Save on custom layout. After that, type the name of the layout. Load custom layout This button enables you to load custom layout that you saved. Building a layout Drag & drop
3 You can start building your own layout by drag & drop items on the left panel into the layout area. After that, you can adjust their settings via the right panel. If you drag a new item into a blank area of the layout, it will automatically create a row, a column and section wrapped around this item. If you drag a new item below an existing row, a new row which contains this new item will be created. These two rows will be in the same section. If you drag a new item below an existing item/row in a column, these two items will be wrapped in the same column. You can drag an existing item in the layout to any position simply by clicking on the drag icon in the item and bringing it to anywhere you want. Adjusting column width To change a column width, simply move your mouse cursor on the dividing line between two columns and drag it left or right, depending on how you want it to go. Sun Framework utilizes Bootstrap 3, which means there will be 12 columns in the layout. Common settings Most of the items in Sun s layout share the following settings Hide Clone Delete Custom classes: for custom styling Responsive display: hide or display item in different viewports (applied for columns/items)
4 Page settings This panel is the first thing you see when opening the Layout tab. It contains general settings for the page layout. Enable responsive Show desktop switcher Boxed layout Margin Show Go to Top button Turn on or off responsive layout mode. This feature is on by default Display an icon that allows you to switch from mobile view to desktop view. Change from full-width layout to boxed layout. Upon selecting this option, you can set the width for your layout. Set margin values for the page Display go-to-top button near the bottom of the website. Upon selecting this option, you can select proper icons for this button. Section settings A section is automatically created when you drag a Layout Item into a blank area in the layout Section settings will appear when you select any section in the layout. See the available settings for a section in the screenshot below: Enable full width Enable sticky Margin Padding Set full-width layout for a section Set sticky mode for a section. This feature is often used for header section Set margin values for a section Set padding values for a section Row settings Row settings will appear when you select any row in the layout. See the available settings for a row in the screenshot below:
5 Row settings will appear when you select any row in the layout. See the available settings for a row in the screenshot below: Margin Padding Custom classes Set margin values for a section Set padding values for a section Specific CSS classes for custom styling Column settings Column settings will appear when you select any column in the layout. See the available settings for a column in the screenshot below. Margin Padding CSS classes Display in layouts Set margin values for a section Set padding values for a section Specific CSS classes for custom styling Set visibility of columns in each viewport: mobile, tablet, laptop, desktop Layout item settings Layout items The list of layout items can be found on the left sidebar. These items include Logos, Menu, Module position, Module, Social Icons, Custom HTML, Flexible Space. Item-specific settings Logo
6 The Logo item enables you to set the image you want to use as your website logo. With this item, you can add your logo to the site in any position of Layout Builder. With this item, you can set up separate logos for desktop and mobile view. Custom logo link can also configure. If left blank as default, the logo will be linked to the homepage. Logo Mobile logo Logo Alt text Logo link CSS classes Browse the image that appears as the logo Browse the image that appears as the mobile logo Alt text for logo image By default, the home page is used. Users can set a custom URL the logo links to when needed. Specific CSS classes for custom styling Menu Menu item allows you to place any Joomla menu in a position in the layout. Menu Base item Start Level End Level Show icon The name of the menu you want to assign to the menu item Sets the base item path for the menu item Sets the starting level for the menu. Sets the deepest level at which the menu particle renders the menu. Display icon for menu item
7 Show description Sub-menu effects Show submenu Mobile Target Display description for menu item Select effects applied for submenu Display sub-menu Collapse menu in mobile view. This is useful when you have multiple menus in the layout, but you only want one menu to be used as mobile menu (with hamburger icon). Module Position To create a position in the layout, simply drag the item name Module position into the layout, type the position name and click OK. Position name Custom CSS Name of the module position. Specific CSS classes for custom styling Single Module
8 This item gives you the ability to add a module instance anywhere in the layout without going to Joomla s module manager section. This item comes with a module picker, which enables you to quickly select a relevant Joomla module using module name. Name Module Configure module Backend name of the module, for administration purposes only. Front-end users will not see this name. Use the module picker to select a module. To change module-related settings at Joomla's Module Manager. Mainbody (component) This item shows the contents of Joomla mainbody. You can turn it on or off on frontpage. Note that this item does not have any settings. Social Icons
9 The Social Icons item enables you to select and add social icons, including their links, sizes and colors, into the layout. Name Add social icons Icon color Icon size Link target Backend name of the module, for administration purposes only. Select the icons for each social channel Select color for icons Set the size for icons Set how selected links will open: in the current browser window, or a new one. To add an icon, first click on Add social icon, then click on the hamburger button to open a pop-up that contains additional fields to configure each individual social item. Social network Social profile link Social icon Select social network, such facebook, twitter, etc. Set the link for the social network Select the icon related to the social network selected above Custom HTML The Custom HTML item allows you to add custom HTML content to your page via Layout Builder and takes the place of the Custom HTML module in Joomla. HTML Custom HTML content
10 Flexible Space Flexible Space allows you to add an empty space between items in the layout. This item doesn't have any special function but merely a styling tool. Off-canvas section This section give you the ability to place menus, modules and positions in a special off-canvas sidebar, used for both desktop and mobile view. The Sun framework offers 4 off-canvas sections, which are located on the top, right, bottom and left side of the layout. To set up a off-canvas section, you only need to click on one of the toggle buttons, which are available on each side of the layout builder, depending on where you want the off-canvas section to display on the front end. Width Height Padding Toggle position Custom classes The width of the off-canvas section (Applied for left and right off-canvas only) The height of the off-canvas section (Applied for top and bottom off-canvas only) Set the padding value, including top, right, bottom and left padding Set the position of the toggle button Add custom CSS classes for the off-canvas section. Responsive layout The responsive mode is enabled by default. If you don t want to use Responsive Layout, go back to Page and deselect Enable Responsive. You can adjust the width of each item in tablet and mobile, as well as their visibility in each viewport, by going to each viewport and change its settings. The responsive viewport of Sun Framework layout is similar to that of Bootstrap 3. For further information, please see it. Working with Layout Items Drag & drop
11 You can start building your own layout by drag & drop items on the left panel into the layout area. After that, you can adjust their settings via the right panel. If you drag a new item into a blank area of the layout, it will automatically create a row, a column and section wrapped around this item. If you drag a new item below an existing row, a new row which contains this new item will be created. These two rows will be in the same section. If you drag a new item below an existing item/row in a column, these two items will be wrapped in the same column. You can drag an existing item in the layout to any position simply by clicking on the drag icon in the item and bringing it to anywhere you want. Adjusting column width To change a column width, simply move your mouse cursor on the dividing line between two columns and drag it left or right, depending on how you want it to go. Sun Framework utilizes Bootstrap 3, which means there will be 12 columns in the layout. Layout Common settings Most of the items in Sun s layout share the following settings Hide Clone Delete Custom classes: for custom styling Responsive display: hide or display item in different viewports (applied for columns/items)
12 Page settings This panel is the first thing you see when opening the Layout tab. It contains general settings for the page layout. Enable responsive Show desktop switcher Boxed layout Margin Show Go to Top button Turn on or off responsive layout mode. This feature is on by default Display an icon that allows you to switch from mobile view to desktop view. Change from full-width layout to boxed layout. Upon selecting this option, you can set the width for your layout. Set margin values for the page Display go-to-top button near the bottom of the website. Upon selecting this option, you can select proper icons for this button. Section settings A section is automatically created when you drag a Layout Item into a blank area in the layout Section settings will appear when you select any section in the layout. See the available settings for a section in the screenshot below:
13 Enable full width Enable sticky Margin Padding Set full-width layout for a section Set sticky mode for a section. This feature is often used for header section Set margin values for a section Set padding values for a section Row settings Row settings will appear when you select any row in the layout. See the available settings for a row in the screenshot below: Margin Padding Custom classes Set margin values for a section Set padding values for a section Specific CSS classes for custom styling Column settings Column settings will appear when you select any column in the layout. See the available settings for a column in the screenshot below. Margin Padding CSS classes Display in layouts Set margin values for a section Set padding values for a section Specific CSS classes for custom styling Set visibility of columns in each viewport: mobile, tablet, laptop, desktop Layout Items Layout items The list of layout items can be found on the left sidebar. These items include Logos, Menu, Module position, Module, Social Icons, Custom HTML, Flexible Space.
14 Item-specific settings Logo The Logo item enables you to set the image you want to use as your website logo. With this item, you can add your logo to the site in any position of Layout Builder. With this item, you can set up separate logos for desktop and mobile view. Custom logo link can also configure. If left blank as default, the logo will be linked to the homepage. Logo Mobile logo Logo Alt text Logo link CSS classes Browse the image that appears as the logo Browse the image that appears as the mobile logo Alt text for logo image By default, the home page is used. Users can set a custom URL the logo links to when needed. Specific CSS classes for custom styling Menu
15 Menu item allows you to place any Joomla menu in a position in the layout. Menu Base item Start Level End Level Show icon Show description Sub-menu effects Show submenu Mobile Target The name of the menu you want to assign to the menu item Sets the base item path for the menu item Sets the starting level for the menu. Sets the deepest level at which the menu particle renders the menu. Display icon for menu item Display description for menu item Select effects applied for submenu Display sub-menu Collapse menu in mobile view. This is useful when you have multiple menus in the layout, but you only want one menu to be used as mobile menu (with hamburger icon). Module Position To create a position in the layout, simply drag the item name Module position into the layout, type the position name and click OK. Position name Custom CSS Name of the module position. Specific CSS classes for custom styling
16 Single Module This item gives you the ability to add a module instance anywhere in the layout without going to Joomla s module manager section. This item comes with a module picker, which enables you to quickly select a relevant Joomla module using module name. Name Module Configure module Backend name of the module, for administration purposes only. Front-end users will not see this name. Use the module picker to select a module. To change module-related settings at Joomla's Module Manager. Mainbody (component) This item shows the contents of Joomla mainbody. You can turn it on or off on frontpage. Note that this item does not have any settings. Social Icons
17 The Social Icons item enables you to select and add social icons, including their links, sizes and colors, into the layout. Name Add social icons Icon color Icon size Link target Backend name of the module, for administration purposes only. Select the icons for each social channel Select color for icons Set the size for icons Set how selected links will open: in the current browser window, or a new one. To add an icon, first click on Add social icon, then click on the hamburger button to open a pop-up that contains additional fields to configure each individual social item. Social network Social profile link Social icon Select social network, such facebook, twitter, etc. Set the link for the social network Select the icon related to the social network selected above Custom HTML
18 The Custom HTML item allows you to add custom HTML content to your page via Layout Builder and takes the place of the Custom HTML module in Joomla. HTML Custom HTML content Flexible Space Flexible Space allows you to add an empty space between items in the layout. This item doesn't have any special function but merely a styling tool. Off-canvas section This section give you the ability to place menus, modules and positions in a special off-canvas sidebar, used for both desktop and mobile view. The Sun framework offers 4 off-canvas sections, which are located on the top, right, bottom and left side of the layout. To set up an off-canvas section, you only need to click on one of the toggle buttons, which are available on each side of the layout builder, depending on where you want the off-canvas section to display on the front end. Width Height Padding Toggle position Custom classes The width of the off-canvas section (Applied for left and right off-canvas only) The height of the off-canvas section (Applied for top and bottom off-canvas only) Set the padding value, including top, right, bottom and left padding Set the position of the toggle button Add custom CSS classes for the off-canvas section. Responsive layout
19 The responsive mode is enabled by default. If you don t want to use Responsive Layout, go back to Page and deselect Enable Responsive. You can adjust the width of each item in tablet and mobile, as well as their visibility in each viewport, by going to each viewport and change its settings. The responsive viewport of Sun Framework layout is similar to that of Bootstrap 3. For further information, please see it here: Style The Sun framework enables you to create custom style for almost everything on the template. General Section Module Menu Overall styles for the layout Style options for all the sections Style options for all the modules Style options for all the menus This section covers the basics of style customization in {jsn_ld_param key=template-full-name /} and other templates powered by Sun Framework. Further details about the use of styling tools in Sun Framework can be found in Sun Framework Documentation (/joomla-hub/sunframework-documentation.html) General Style Page style This area gives you the ability to edit overall styles for both page outer and page inner. If boxed layout is disabled, only settings for page outer style will be displayed: Boxed layout is disabled
20 Boxed layout is disabled If boxed layout is enabled, settings for both page outer and page inner style will be displayed: Boxed layout is enabled Page outer Background color Background image Background image settings Page inner Background color Border Boxed shadow These settings are visible ONLY when boxed layout is enabled Background color of the page outer. Background image of the page outer. when background image is used. Background color of the page inner. Page border values. Visible only when boxed layout is enabled. Used when boxed layout is enable Color style To set up the style color for main and sub in the template, click on Main color and sub color in the preview panel on the left side and change their settings on the right panel. Style color for main and sub in the template Heading style To set up the style for all the headings in the template, click on any heading in the preview panel on the left side and change their settings on the right panel.
21 Style all heading in the template Content style To set up the style for content text, click on the paragraph text area under the heading in the preview panel on the left side and change their settings on the right panel. Style for content text in the template Button style To set up the style for buttons, including default and primary button, click on each of these buttons on the preview panel and change its settings on the right panel. Link style Style for buttons in the template To set up the style for links, click on the link in the preview panel on the left side and change its settings on the right panel.
22 Style for link in the template Section Style Go to the Stye tab, you will see the same section names and many styling options for each of them. For example, the style for section "Top" in layout tab will also be under section "Top" in style tab. This makes it easy for you to locate where the customization can take place. Section container You can change the style of each section s container simply by clicking on the area around the border of the section that you want to have custom style, and change its settings on the right panel. Style section's container Section heading By default, section headings style will be inherited from General style. If you want to have different styles for section headings, click on Use custom settings to activate custom style settings. Section content Style section's heading
23 Section content By default, section content style will be inherited from General style. If you want to have different style for section content, click on Use custom settings to activate custom content style settings. Style section's content Section button By default, section button style will be inherited from General style. If you want to have different style for section button, click on Use custom settings to activate custom button style settings. Style section's button Section link By default, section link style will be inherited from General style. If you want to have different style for section link, click on Use custom settings to activate custom link style settings. Style section's link Module Style First, Go to tab Style --> Module From here you will see some module styles provided by the template. The Sun Framework comes with 4 highly flexible module styles, and you can customize each of them in the same way with Section.
24 The Sun Framework comes with 4 highly flexible module styles, and you can customize each of them in the same way with Section. Module container Similar to section container style, you can change the style of each module s container simply by clicking on the module that you want to have custom style, and change its settings on the right panel. Module Title Style module's container To change the style of a module s title, click on the title of the module style that you want to customize in order to see its available settings. Style module's title Module content To change the style of a module s content, click on the content area of the module style that you want to customize in order to see its available settings. Style module's content
25 Module button By default, the button style of the module is inherited from the General settings. To enable custom style for module settings, select Use custom setting to open custom style options and make changes as you want. Module link Style module's button To change the style of a module s hyperlink, click on link in the module style that you want to customize in order to see its settings. Style module's link To apply a style to a module: Open a module in Joomla Module Manager Go to Advanced tab: 1. Select a style from the list in the dropdown 2. Add FontAwesome code in Header Class to have icons for your module heading Apply a style to a module More FontAwesome icons can be found here: Menu Style To change a menu style, go to tab menu and change their style settings in the right panel. To change a parental menu style, click on any parental menu item to open its settings and customize it.
26 Style for menu root To change a sub-menu item style, click on the submenu in the preview panel to open the settings. Style for menu dropdown Sun Megamenu Sun Framework, as well as templates built with this framework, allows you to create a mega menu for site navigation and usability enhancement. They provide a visual way to create a mega menu with clicks and drag-n-drop function, without touching a single line of code. Everything is done in a similar way the Layout is built. To set up mega menu, click Mega Menu on top bar of the template framework. Set up Mega menu Megamenu in templates powered by Sun Framework can be built with the following steps: Select the menu & language of the menu that you want to config Drag menu item into the main menu panel. for each of these items will be available on the right panel. Config menu container, row and column in the same way you do with the Layout. Mega Menu Layout & Style Menu container
27 Menu row Menu column Mega Menu Item General function Similar to items in the layout, each of the Mega Menu item, row and column shares the following functions, which are available in the right panel. Hide: temporarily hide item/row/column Clone: clone item/row/column Remove: remove item/row/column Megamenu items Apart from submenu item, Megamenu includes items similar to those in Layout builder, namely Module, Position, Custom HTML, Image. Details about their settings can be found in Layout chapter. System
28 Assets Compression With Sun Framework, we put great effort into optimizing our templates performance with multiple techniques like image sprites application, clean html code output and now one new step CSS/JS Compression. What it does is combining all continuous CSS/JS files into compressed files and delivering it in GZIP compressed state to browser. The order of CSS/JS files is the same before and after the compression. This feature significantly reduces http request number to server as well as overall loading size, which results in significant performance boost. You can configure the compression settings in the tab Advanced section Assets Compression : Compress CSS/JS: Allows you to select to compress both CSS and JS, Only CSS, Only JS or nothing. Max File Size: Defines the maximum size a compressed file should be. Exclude from compression: Set a list of files you don t want to be compre Cache Directory: Specify the directory for storing compressed CSS/JS file Custom code You can define where to insert the code by template parameter Analytics Code Position. There are two options to choose from: Before tag Before tag
29 Custom files For all customization purposes, Sun framework allows you to load multiple CSS / JS files you customized without altering the template core files. Just put custom CSS/JS files to template's CSS/JS folder and define them in template parameter Custom CSS File(s) and Custom JS File(s); each file name at a line. Please note: If you enable CSS/JS Compression feature, all custom CSS files will be compressed as well. Cookie Consent To enable Cookies consent, go to Extras Cookie Law Select Enable Cookie Consent to config its layout styles and contents. Enable Cookie ConsentChoose whether to use Cookie Law. Style There are 2 styles of Cookie Law to choose from: Light and Dark Banner Placement Select position of initial consent slide-down notification Message Cookie law content: You can use either a simple text message for cookie law, or use an article to display the message. Accept Button Text The label of the accept button Read More Button TextThe text shown on the link to the cookie policy (requires Your Cookie Policy Link to be set) Cookie Policy link The url of the Cookie Policy. If left blank, the link will be hidden. Once the cookie law is enabled, you will have two options: Enter your cookie law notification message Use an article as cookie law: this option is perfect when you want to create a multilingual cookie law notification Using a simple cookie law message In the box Message, select Text Enter your cookie law notification message in the text box as well as config other params
30 Using an article to display a cookie law message This option is important when you want to have a multi-lingual cookie law message To use this option, in the box Message -> Select Articles. Then browse the article that you want to use as your Cookie Law message Menu Assignment This is where you assign the template style to specific menu items. All of your menu items will be listed here. After assigning the menu item for your template, click Save Assignment to save the settings. Import/Export
31 The Sun Framework enables you to export and import your template settings. You can export all the setting that you configured to save as a backup file or reuse it somewhere. To import/export template settings, go to the top menu Maintenance select Import or Export Please note: When you import the backup file, your current template settings will be overwritten. Configuration Layout Overview & Key concepts To start with layout configuration, Go to Extension Template JSN_template_default The first tab you see will be the Layout tab, where you can have the ultimate control of the template layout. Layout Overview Sun Layout Builder is a very flexible and powerful tool which gives you the ability to build and customize the existing template with the intuitive drag-and-drop interface. The Layout Builder consists of 3 main areas: 1. Layout Items: list of items which you can drag & drop into the layout. 2. Layout: including the main layout and 4 off-canvas regions. There are areas where your template s layout items are positioned and built. 3. Setting panel: all the settings related to layout items which are being configured. Concepts Sun Framework s layout concepts: 1. Page: Overal settings for the layout 2. Section: Section is a division of a page. A section is automatically created when you add a row to an empty area in the layout. It contains one or more row in which you can add Layout Items. 3. Row 4. Column 5. Layout items: These are smallest pieces in the layout. Each item is made up of one column. Layout Control Undo & redo Sun Layout Builder allows you to undo and redo the actions that you made. Simply hit Undo to switch back or Redo to go forth. This tool will surely save you a huge amount of time and efforts. Worry-free if you accidentally make a mistake. Save layout Sun Framework offers Ajax save button for each settings tab. Changes will be saved quickly without having to re-load the setting pages. Save as custom layout
32 Save as custom layout This option gives you the ability to save the current layout and use it later on. To save the current layout as a custom one, just click on Save on custom layout. After that, type the name of the layout. Load custom layout This button enables you to load custom layout that you saved. Building a layout Drag & drop
33 You can start building your own layout by drag & drop items on the left panel into the layout area. After that, you can adjust their settings via the right panel. If you drag a new item into a blank area of the layout, it will automatically create a row, a column and section wrapped around this item. If you drag a new item below an existing row, a new row which contains this new item will be created. These two rows will be in the same section. If you drag a new item below an existing item/row in a column, these two items will be wrapped in the same column. You can drag an existing item in the layout to any position simply by clicking on the drag icon in the item and bringing it to anywhere you want. Adjusting column width To change a column width, simply move your mouse cursor on the dividing line between two columns and drag it left or right, depending on how you want it to go. Sun Framework utilizes Bootstrap 3, which means there will be 12 columns in the layout. Common settings Most of the items in Sun s layout share the following settings Hide Clone Delete Custom classes: for custom styling Responsive display: hide or display item in different viewports (applied for columns/items)
34 Page settings This panel is the first thing you see when opening the Layout tab. It contains general settings for the page layout. Enable responsive Show desktop switcher Boxed layout Margin Show Go to Top button Turn on or off responsive layout mode. This feature is on by default Display an icon that allows you to switch from mobile view to desktop view. Change from full-width layout to boxed layout. Upon selecting this option, you can set the width for your layout. Set margin values for the page Display go-to-top button near the bottom of the website. Upon selecting this option, you can select proper icons for this button. Section settings A section is automatically created when you drag a Layout Item into a blank area in the layout Section settings will appear when you select any section in the layout. See the available settings for a section in the screenshot below: Enable full width Enable sticky Margin Padding Set full-width layout for a section Set sticky mode for a section. This feature is often used for header section Set margin values for a section Set padding values for a section Row settings Row settings will appear when you select any row in the layout. See the available settings for a row in the screenshot below:
35 Margin Padding Custom classes Set margin values for a section Set padding values for a section Specific CSS classes for custom styling Column settings Column settings will appear when you select any column in the layout. See the available settings for a column in the screenshot below. Margin Padding CSS classes Display in layouts Set margin values for a section Set padding values for a section Specific CSS classes for custom styling Set visibility of columns in each viewport: mobile, tablet, laptop, desktop Layout item settings Layout items The list of layout items can be found on the left sidebar. These items include Logos, Menu, Module position, Module, Social Icons, Custom HTML, Flexible Space. Item-specific settings Logo
36 The Logo item enables you to set the image you want to use as your website logo. With this item, you can add your logo to the site in any position of Layout Builder. With this item, you can set up separate logos for desktop and mobile view. Custom logo link can also configure. If left blank as default, the logo will be linked to the homepage. Logo Mobile logo Logo Alt text Logo link CSS classes Browse the image that appears as the logo Browse the image that appears as the mobile logo Alt text for logo image By default, the home page is used. Users can set a custom URL the logo links to when needed. Specific CSS classes for custom styling Menu Menu item allows you to place any Joomla menu in a position in the layout. Menu Base item Start Level End Level Show icon Show The name of the menu you want to assign to the menu item Sets the base item path for the menu item Sets the starting level for the menu. Sets the deepest level at which the menu particle renders the menu. Display icon for menu item
37 Show description Sub-menu effects Show submenu Mobile Target Display description for menu item Select effects applied for submenu Display sub-menu Collapse menu in mobile view. This is useful when you have multiple menus in the layout, but you only want one menu to be used as mobile menu (with hamburger icon). Module Position To create a position in the layout, simply drag the item name Module position into the layout, type the position name and click OK. Position name Custom CSS Name of the module position. Specific CSS classes for custom styling Single Module
38 This item gives you the ability to add a module instance anywhere in the layout without going to Joomla s module manager section. This item comes with a module picker, which enables you to quickly select a relevant Joomla module using module name. Name Module Configure module Backend name of the module, for administration purposes only. Front-end users will not see this name. Use the module picker to select a module. To change module-related settings at Joomla's Module Manager. Mainbody (component) This item shows the contents of Joomla mainbody. You can turn it on or off on frontpage. Note that this item does not have any settings. Social Icons
39 The Social Icons item enables you to select and add social icons, including their links, sizes and colors, into the layout. Name Add social icons Icon color Icon size Link target Backend name of the module, for administration purposes only. Select the icons for each social channel Select color for icons Set the size for icons Set how selected links will open: in the current browser window, or a new one. To add an icon, first click on Add social icon, then click on the hamburger button to open a pop-up that contains additional fields to configure each individual social item. Social network Social profile link Social icon Select social network, such facebook, twitter, etc. Set the link for the social network Select the icon related to the social network selected above Custom HTML The Custom HTML item allows you to add custom HTML content to your page via Layout Builder and takes the place of the Custom HTML module in Joomla. HTML Custom HTML content
40 Flexible Space Flexible Space allows you to add an empty space between items in the layout. This item doesn't have any special function but merely a styling tool. Off-canvas section This section give you the ability to place menus, modules and positions in a special off-canvas sidebar, used for both desktop and mobile view. The Sun framework offers 4 off-canvas sections, which are located on the top, right, bottom and left side of the layout. To set up a off-canvas section, you only need to click on one of the toggle buttons, which are available on each side of the layout builder, depending on where you want the off-canvas section to display on the front end. Width Height Padding Toggle position Custom classes The width of the off-canvas section (Applied for left and right off-canvas only) The height of the off-canvas section (Applied for top and bottom off-canvas only) Set the padding value, including top, right, bottom and left padding Set the position of the toggle button Add custom CSS classes for the off-canvas section. Responsive layout The responsive mode is enabled by default. If you don t want to use Responsive Layout, go back to Page and deselect Enable Responsive. You can adjust the width of each item in tablet and mobile, as well as their visibility in each viewport, by going to each viewport and change its settings. The responsive viewport of Sun Framework layout is similar to that of Bootstrap 3. For further information, please see it. Working with Layout Items Drag & drop
41 You can start building your own layout by drag & drop items on the left panel into the layout area. After that, you can adjust their settings via the right panel. If you drag a new item into a blank area of the layout, it will automatically create a row, a column and section wrapped around this item. If you drag a new item below an existing row, a new row which contains this new item will be created. These two rows will be in the same section. If you drag a new item below an existing item/row in a column, these two items will be wrapped in the same column. You can drag an existing item in the layout to any position simply by clicking on the drag icon in the item and bringing it to anywhere you want. Adjusting column width To change a column width, simply move your mouse cursor on the dividing line between two columns and drag it left or right, depending on how you want it to go. Sun Framework utilizes Bootstrap 3, which means there will be 12 columns in the layout. Layout Common settings Most of the items in Sun s layout share the following settings Hide Clone Delete Custom classes: for custom styling Responsive display: hide or display item in different viewports (applied for columns/items)
42 Page settings This panel is the first thing you see when opening the Layout tab. It contains general settings for the page layout. Enable responsive Show desktop switcher Boxed layout Margin Show Go to Top button Turn on or off responsive layout mode. This feature is on by default Display an icon that allows you to switch from mobile view to desktop view. Change from full-width layout to boxed layout. Upon selecting this option, you can set the width for your layout. Set margin values for the page Display go-to-top button near the bottom of the website. Upon selecting this option, you can select proper icons for this button. Section settings A section is automatically created when you drag a Layout Item into a blank area in the layout Section settings will appear when you select any section in the layout. See the available settings for a section in the screenshot below: Enable full width Set full-width layout for a section
43 Enable full width Enable sticky Margin Padding Set full-width layout for a section Set sticky mode for a section. This feature is often used for header section Set margin values for a section Set padding values for a section Row settings Row settings will appear when you select any row in the layout. See the available settings for a row in the screenshot below: Margin Padding Custom classes Set margin values for a section Set padding values for a section Specific CSS classes for custom styling Column settings Column settings will appear when you select any column in the layout. See the available settings for a column in the screenshot below. Margin Padding CSS classes Display in layouts Set margin values for a section Set padding values for a section Specific CSS classes for custom styling Set visibility of columns in each viewport: mobile, tablet, laptop, desktop Layout Items Layout items The list of layout items can be found on the left sidebar. These items include Logos, Menu, Module position, Module, Social Icons, Custom HTML, Flexible Space.
44 Item-specific settings Logo The Logo item enables you to set the image you want to use as your website logo. With this item, you can add your logo to the site in any position of Layout Builder. With this item, you can set up separate logos for desktop and mobile view. Custom logo link can also configure. If left blank as default, the logo will be linked to the homepage. Logo Mobile logo Logo Alt text Logo link CSS classes Browse the image that appears as the logo Browse the image that appears as the mobile logo Alt text for logo image By default, the home page is used. Users can set a custom URL the logo links to when needed. Specific CSS classes for custom styling Menu
45 Menu item allows you to place any Joomla menu in a position in the layout. Menu Base item Start Level End Level Show icon Show description Sub-menu effects Show submenu Mobile Target The name of the menu you want to assign to the menu item Sets the base item path for the menu item Sets the starting level for the menu. Sets the deepest level at which the menu particle renders the menu. Display icon for menu item Display description for menu item Select effects applied for submenu Display sub-menu Collapse menu in mobile view. This is useful when you have multiple menus in the layout, but you only want one menu to be used as mobile menu (with hamburger icon). Module Position To create a position in the layout, simply drag the item name Module position into the layout, type the position name and click OK. Position name Custom CSS Name of the module position. Specific CSS classes for custom styling
46 Single Module This item gives you the ability to add a module instance anywhere in the layout without going to Joomla s module manager section. This item comes with a module picker, which enables you to quickly select a relevant Joomla module using module name. Name Module Configure module Backend name of the module, for administration purposes only. Front-end users will not see this name. Use the module picker to select a module. To change module-related settings at Joomla's Module Manager. Mainbody (component) This item shows the contents of Joomla mainbody. You can turn it on or off on frontpage. Note that this item does not have any settings. Social Icons
47 The Social Icons item enables you to select and add social icons, including their links, sizes and colors, into the layout. Name Add social icons Icon color Icon size Link target Backend name of the module, for administration purposes only. Select the icons for each social channel Select color for icons Set the size for icons Set how selected links will open: in the current browser window, or a new one. To add an icon, first click on Add social icon, then click on the hamburger button to open a pop-up that contains additional fields to configure each individual social item. Social network Social profile link Social icon Select social network, such facebook, twitter, etc. Set the link for the social network Select the icon related to the social network selected above Custom HTML
48 The Custom HTML item allows you to add custom HTML content to your page via Layout Builder and takes the place of the Custom HTML module in Joomla. HTML Custom HTML content Flexible Space Flexible Space allows you to add an empty space between items in the layout. This item doesn't have any special function but merely a styling tool. Off-canvas section This section give you the ability to place menus, modules and positions in a special off-canvas sidebar, used for both desktop and mobile view. The Sun framework offers 4 off-canvas sections, which are located on the top, right, bottom and left side of the layout. To set up an off-canvas section, you only need to click on one of the toggle buttons, which are available on each side of the layout builder, depending on where you want the off-canvas section to display on the front end. Width Height Padding Toggle position Custom classes The width of the off-canvas section (Applied for left and right off-canvas only) The height of the off-canvas section (Applied for top and bottom off-canvas only) Set the padding value, including top, right, bottom and left padding Set the position of the toggle button Add custom CSS classes for the off-canvas section. Responsive layout
49 The responsive mode is enabled by default. If you don t want to use Responsive Layout, go back to Page and deselect Enable Responsive. You can adjust the width of each item in tablet and mobile, as well as their visibility in each viewport, by going to each viewport and change its settings. The responsive viewport of Sun Framework layout is similar to that of Bootstrap 3. For further information, please see it here: Style The Sun framework enables you to create custom style for almost everything on the template. General Section Module Menu Overall styles for the layout Style options for all the sections Style options for all the modules Style options for all the menus This section covers the basics of style customization in {jsn_ld_param key=template-full-name /} and other templates powered by Sun Framework. Further details about the use of styling tools in Sun Framework can be found in Sun Framework Documentation (/joomla-hub/sunframework-documentation.html) General Style Page style This area gives you the ability to edit overall styles for both page outer and page inner. If boxed layout is disabled, only settings for page outer style will be displayed: Boxed layout is disabled
50 If boxed layout is enabled, settings for both page outer and page inner style will be displayed: Boxed layout is enabled Page outer Background color Background image Background image settings Page inner Background color Border Boxed shadow These settings are visible ONLY when boxed layout is enabled Background color of the page outer. Background image of the page outer. when background image is used. Background color of the page inner. Page border values. Visible only when boxed layout is enabled. Used when boxed layout is enable Color style To set up the style color for main and sub in the template, click on Main color and sub color in the preview panel on the left side and change their settings on the right panel. Style color for main and sub in the template Heading style To set up the style for all the headings in the template, click on any heading in the preview panel on the left side and change their settings on the right panel.
51 Style all heading in the template Content style To set up the style for content text, click on the paragraph text area under the heading in the preview panel on the left side and change their settings on the right panel. Style for content text in the template Button style To set up the style for buttons, including default and primary button, click on each of these buttons on the preview panel and change its settings on the right panel. Link style Style for buttons in the template To set up the style for links, click on the link in the preview panel on the left side and change its settings on the right panel.
52 Style for link in the template Section Style Go to the Stye tab, you will see the same section names and many styling options for each of them. For example, the style for section "Top" in layout tab will also be under section "Top" in style tab. This makes it easy for you to locate where the customization can take place. Section container You can change the style of each section s container simply by clicking on the area around the border of the section that you want to have custom style, and change its settings on the right panel. Style section's container Section heading By default, section headings style will be inherited from General style. If you want to have different styles for section headings, click on Use custom settings to activate custom style settings. Section content Style section's heading
53 By default, section content style will be inherited from General style. If you want to have different style for section content, click on Use custom settings to activate custom content style settings. Style section's content Section button By default, section button style will be inherited from General style. If you want to have different style for section button, click on Use custom settings to activate custom button style settings. Style section's button Section link By default, section link style will be inherited from General style. If you want to have different style for section link, click on Use custom settings to activate custom link style settings. Style section's link Module Style First, Go to tab Style --> Module From here you will see some module styles provided by the template. The Sun Framework comes with 4 highly flexible module styles, and you can customize each of them in the same way with Section.
54 Module container Similar to section container style, you can change the style of each module s container simply by clicking on the module that you want to have custom style, and change its settings on the right panel. Module Title Style module's container To change the style of a module s title, click on the title of the module style that you want to customize in order to see its available settings. Style module's title Module content To change the style of a module s content, click on the content area of the module style that you want to customize in order to see its available settings. Module button Style module's content
55 Module button By default, the button style of the module is inherited from the General settings. To enable custom style for module settings, select Use custom setting to open custom style options and make changes as you want. Module link Style module's button To change the style of a module s hyperlink, click on link in the module style that you want to customize in order to see its settings. Style module's link To apply a style to a module: Open a module in Joomla Module Manager Go to Advanced tab: 1. Select a style from the list in the dropdown 2. Add FontAwesome code in Header Class to have icons for your module heading
56 Apply a style to a module More FontAwesome icons can be found here: Menu Style To change a menu style, go to tab menu and change their style settings in the right panel. To change a parental menu style, click on any parental menu item to open its settings and customize it. Style for menu root To change a sub-menu item style, click on the submenu in the preview panel to open the settings. Style for menu dropdown Sun Megamenu Sun Framework, as well as templates built with this framework, allows you to create a mega menu for site navigation and usability enhancement. They provide a visual way to create a mega menu with clicks and drag-n-drop function, without touching a single line of code. Everything is done in a similar way the Layout is built. To set up mega menu, click Mega Menu on top bar of the template framework.
57 Set up Mega menu Megamenu in templates powered by Sun Framework can be built with the following steps: Select the menu & language of the menu that you want to config Drag menu item into the main menu panel. for each of these items will be available on the right panel. Config menu container, row and column in the same way you do with the Layout. Mega Menu Layout & Style Menu container Menu row Menu column Mega Menu Item General function
58 Similar to items in the layout, each of the Mega Menu item, row and column shares the following functions, which are available in the right panel. Hide: temporarily hide item/row/column Clone: clone item/row/column Remove: remove item/row/column Megamenu items Apart from submenu item, Megamenu includes items similar to those in Layout builder, namely Module, Position, Custom HTML, Image. Details about their settings can be found in Layout chapter. System Assets Compression With Sun Framework, we put great effort into optimizing our templates performance with multiple techniques like image sprites application, clean html code output and now one new step CSS/JS Compression. What it does is combining all continuous CSS/JS files into compressed files and delivering it in GZIP compressed state to browser. The order of CSS/JS files is the same before and after the compression. This feature significantly reduces http request number to server as well as overall loading size, which results in significant performance boost. You can configure the compression settings in the tab Advanced section Assets Compression : Compress CSS/JS: Allows you to select to compress both CSS and JS, Only CSS, Only JS or nothing. Max File Size: Defines the maximum size a compressed file should be. Exclude from compression: Set a list of files you don t want to be compre Cache Directory: Specify the directory for storing compressed CSS/JS file
59 Custom code You can define where to insert the code by template parameter Analytics Code Position. There are two options to choose from: Before tag Before tag Custom files For all customization purposes, Sun framework allows you to load multiple CSS / JS files you customized without altering the template core files. Just put custom CSS/JS files to template's CSS/JS folder and define them in template parameter Custom CSS File(s) and Custom JS File(s); each file name at a line. Please note: If you enable CSS/JS Compression feature, all custom CSS files will be compressed as well. Cookie Consent To enable Cookies consent, go to Extras Cookie Law Select Enable Cookie Consent to config its layout styles and contents.
60 Enable Cookie ConsentChoose whether to use Cookie Law. Style There are 2 styles of Cookie Law to choose from: Light and Dark Banner Placement Select position of initial consent slide-down notification Message Cookie law content: You can use either a simple text message for cookie law, or use an article to display the message. Accept Button Text The label of the accept button Read More Button TextThe text shown on the link to the cookie policy (requires Your Cookie Policy Link to be set) Cookie Policy link The url of the Cookie Policy. If left blank, the link will be hidden. Once the cookie law is enabled, you will have two options: Enter your cookie law notification message Use an article as cookie law: this option is perfect when you want to create a multilingual cookie law notification Using a simple cookie law message In the box Message, select Text Enter your cookie law notification message in the text box as well as config other params Using an article to display a cookie law message This option is important when you want to have a multi-lingual cookie law message To use this option, in the box Message -> Select Articles. Then browse the article that you want to use as your Cookie Law message Menu Assignment
61 This is where you assign the template style to specific menu items. All of your menu items will be listed here. After assigning the menu item for your template, click Save Assignment to save the settings. Import/Export The Sun Framework enables you to export and import your template settings. You can export all the setting that you configured to save as a backup file or reuse it somewhere. To import/export template settings, go to the top menu Maintenance select Import or Export Please note: When you import the backup file, your current template settings will be overwritten. Product Update JSN Template Update Notification Open a JSN template If the template is not updated, you will see a notification on the top bar like Update available for JSN XXX version Click on the Update button on the top right. Upon clicking the Update button, you will see the following screen if you have not set your token key for the template Click on Set Token Key button.
62 You will be redirected to the page Global Parameters - Token Key, where you will be asked to enter your JSN username and password and generate your Token key. Make sure that you have registered your domain. If not please follow the domain registration guidelines to complete the process, then get back to this step. Register your domain(s) Step 1: Log on JSN Customer Area Go to JoomlaShine website: ( Click on My Account menu on the top right Enter your Username & Password to log on the system
63 Step 2: Go to Order & Download section Step 3: Find your order(s) and register your domain(s) Click the Register button next to your order Type the domain(s) that you want to register and click the Register button next to your order. On this screen, you will see that all the domains that you register will be added and activated (the word activated is next to the domain names)
64 In case you want to deactivate a domain names from your list, simply click on the Deactivate now button Verify JSN template license The following steps are only applied for Shine and gen.2 templates, meaning that templates released from JSN Shine onward. Go to your template manager Click Global Parameters Select Token key Enter your JSN username & password Click Get token key This website uses cookies to ensure you get the best experience on our website. More information ( Got It!
JSN Dona 2 Portfolio Configuration Manual
JSN Dona 2 Portfolio Configuration Manual Getting Started The Sun Framework is automatically installed when you install JSN Shine or any JSN Template Gen.2 templates. In case manual installation is needed,
More informationJSN Ferado 2 Configuration Manual Getting Started
JSN Ferado 2 Configuration Manual Getting Started The Sun Framework is automatically installed when you install JSN Shine or any JSN Template Gen.2 templates. In case manual installation is needed, please
More informationJSN Cube 2 Configuration Manual Getting Started
JSN Cube 2 Configuration Manual Getting Started See video tutorial (https://www.youtube.com/watch? v=7fqcwsgwpik&index=1&list=playo0ytbkwyugbrfrqhxeymkbtq9jn-qk) The Sun Framework is automatically installed
More informationJSN Megazine 2 Configuration Manual Getting Started
JSN Megazine 2 Configuration Manual Getting Started The Sun Framework is automatically installed when you install JSN Template Gen.2 templates. In case manual installation is needed, please download the
More informationJSN Glass 2 Configuration Manual Getting Started
JSN Glass 2 Configuration Manual Getting Started The Sun Framework is automatically installed when you install JSN Template Gen.2 templates. In case manual installation is needed, please download the plug-in
More informationJSN Yoyo 2 Configuration Manual Getting Started
JSN Yoyo 2 Configuration Manual Getting Started The Sun Framework is automatically installed when you install JSN Template Gen.2 templates. In case manual installation is needed, please download the plug-in
More informationJSN Decor 2 Configuration Manual Getting Started
JSN Decor 2 Configuration Manual Getting Started The Sun Framework is automatically installed when you install JSN Template Gen.2 templates. In case manual installation is needed, please download the plug-in
More informationJSN Educo Configuration Manual Getting Started
JSN Educo Configuration Manual Getting Started The Sun Framework is automatically installed when you install JSN Template Gen.2 templates. In case manual installation is needed, please download the plug-in
More informationJSN PageBuilder 3 Configuration Manual Introduction
JSN PageBuilder 3 Configuration Manual Introduction About JSN PageBuilder 3 JSN PageBuilder 3 is the latest innovation of Joomla! PageBuilder with great improvements in the interface, features, and user
More informationJSN Ferado 2 Configuration Manual Getting Started
JSN Ferado 2 Configuration Manual Getting Started The Sun Framework is automatically installed when you install JSN Template Gen.2 templates. In case manual installation is needed, please download the
More informationJSN PageBuilder 2 User Manual
JSN PageBuilder 2 User Manual Introduction About JSN PageBuilder 2 JSN PageBuilder 2 is the latest innovation of Joomla PageBuilder with great improvements in terms of design, features, and user experience.
More informationJSN Dona Portfolio User's Guide
JSN Dona Portfolio User's Guide Getting Started Template Package Installation 1. Download the template installation package Log in JoomlaShine Customer Area to download the template package that you have
More informationJSN EasySlider Configuration Manual
JSN EasySlider Configuration Manual Introduction Product Overview JSN EasySlider JSN EasySlider is the cutting-edge way to present content on website: Informative - Impressive - Interactive. It helps you
More informationJoomla! extension JSN EasySlider User Manual
Joomla! extension JSN EasySlider User Manual (for JSN EasySlider 2.0.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine This documentation is release under Creative
More informationN/A. JSN PageBuilder 2 Configuration Manual Introduction. System Requirements. Product Usage. Joomla Requirements. Server Requirement
JSN PageBuilder 2 Configuration Manual Introduction About JSN PageBuilder 3 JSN PageBuilder 3 is the latest innovation from Joomla! PageBuilder, with great improvements to the interface, features, and
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).
More informationJSN UniForm User Manual. Introduction. A simple contact form created by JSN UniForm. JSN UniForm is a Joomla form extension which helps you create
JSN UniForm User Manual Introduction A simple contact form created by JSN UniForm JSN UniForm is a Joomla form extension which helps you create forms quickly and easily - from normal forms to complex forms.
More informationA Guide to Using WordPress + RAVEN5. v 1.4 Updated May 25, 2018
+ v 1.4 Updated May 25, 2018 Table of Contents 1. Introduction...................................................................................3 2. Logging In.....................................................................................4
More informationORB Education Quality Teaching Resources
These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best
More informationInstallation and Activation of Foody pro theme
Installation and Activation of Foody pro theme Installation 1. Install Word Press from http://codex.wordpress.org/installing_wordpress. 2. Upload via Word press Admin: - Go to your WordPress admin panel,
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationJSN Yoyo 2 Customization Manual Before We Start
JSN Yoyo 2 Customization Manual Before We Start The first thing we would like to say is this guide is not intended to cover everything you might want to customize the template. Here we disclose only the
More information1.0 Overview For content management, Joomla divides into some basic components: the Article
Joomla! 3.4.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials
More informationJoomla How To Setup Menu Item Type Module Add New
Joomla How To Setup Menu Item Type Module Add New A menu is an object which contains one or more menu items. Each menu item will have a specific menu item type. Create one or When you create the modules,
More informationJoomla! 2.5.x Training Manual
Joomla! 2.5.x Training Manual 1 Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several
More informationCS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)
CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property
More informationFCKEditor v1.0 Basic Formatting Create Links Insert Tables
FCKEditor v1.0 This document goes over the functionality and features of FCKEditor. This editor allows you to easily create XHTML compliant code for your web pages in Site Builder Toolkit v2.3 and higher.
More informationCreating Buttons and Pop-up Menus
Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about
More informationHow to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
More informationVirto SharePoint Forms Designer for Office 365. Installation and User Guide
Virto SharePoint Forms Designer for Office 365 Installation and User Guide 2 Table of Contents KEY FEATURES... 3 SYSTEM REQUIREMENTS... 3 INSTALLING VIRTO SHAREPOINT FORMS FOR OFFICE 365...3 LICENSE ACTIVATION...4
More informationAdministrative Training Mura CMS Version 5.6
Administrative Training Mura CMS Version 5.6 Published: March 9, 2012 Table of Contents Mura CMS Overview! 6 Dashboard!... 6 Site Manager!... 6 Drafts!... 6 Components!... 6 Categories!... 6 Content Collections:
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationWCMS Responsive Design Template Upgrade Training
WCMS Responsive Design Template Upgrade Training The purpose of this training session is to provide training to site owners, who are upgrading their WCMS content to the new Responsive Design (RD) template.
More informationNYU A&S AEM Implementation. Exercise Sheets
NYU A&S AEM Implementation Exercise Sheets Table of Contents Table of Contents... 2 Exercise 1: Blank Page with Title... 1 A. Create page using template Blank Page with Title... 1 B. Author component Generic
More informationMEGA MENU USER GUIDE. Phone: Extension version: 1.0 Magento Compatibility: CE 2.
support@magestore.com sales@magestore.com Phone: +1-415-954-7137 MEGA MENU USER GUIDE Extension version: 1.0 Magento Compatibility: CE 2.0 Table of Contents 1. INTRODUCTION... 3 2. HOW TO USE AND CONFIGURE...
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationTable of Contents. Overview... 4 Advanced Content Items... 4 Accessibility... 4 iframe Textpoppers Math Characters and Equations...
Dallas County Community College District Table of Contents Overview... 4 Advanced Content Items... 4 Accessibility... 4 iframe... 4 Insert a Web Page... 4 Insert a PDF... 6 Textpoppers... 8 Insert a Text
More informationA Frontpage Tutorial. Contents Page
A Frontpage Tutorial Contents Page Page 1-2 Things to do and know before we start Page 3.How to save your web pages Page 4.Opening an existing web page Page 5..Creating more web pages Page 6-8.Adding tables
More informationCreating an eflash Message
Creating an eflash Message eflash emails are easy to create and send, yet incredibly responsive to read of any device which makes them great for parent notifications. Send an eflash for those messages
More informationJSN Mico 2 Customization Manual Before We Start
JSN Mico 2 Customization Manual Before We Start The first thing we would like to say is this guide is not intended to cover everything you might want to customize the template. Here we disclose only the
More informationJSN Decor 2 Customization Manual Before We Start
JSN Decor 2 Customization Manual Before We Start The first thing we would like to say is this guide is not intended to cover everything you might want to customize the template. Here we disclose only the
More informationJSN Force 2 Customization Manual Before We Start
JSN Force 2 Customization Manual Before We Start The first thing we would like to say is this guide is not intended to cover everything you might want to customize the template. Here we disclose only the
More informationWebsite Management with the CMS
Website Management with the CMS In Class Step-by-Step Guidebook Updated 12/22/2010 Quick Reference Links CMS Login http://staging.montgomerycollege.edu/cmslogin.aspx Sample Department Site URLs (staging
More informationCenter for Faculty Development and Support Making Documents Accessible
Center for Faculty Development and Support Making Documents Accessible in Word 2007 Tutorial CONTENTS Create a New Document and Set Up a Document Map... 3 Apply Styles... 4 Modify Styles... 5 Use Table
More informationSPARK. User Manual Ver ITLAQ Technologies
SPARK Forms Builder for Office 365 User Manual Ver. 3.5.50.102 0 ITLAQ Technologies www.itlaq.com Table of Contents 1 The Form Designer Workspace... 3 1.1 Form Toolbox... 3 1.1.1 Hiding/ Unhiding/ Minimizing
More informationContent Elements. Contents. Row
Content Elements Created by Raitis S, last modified on Feb 09, 2016 This is a list of 40+ available content elements that can be placed on the working canvas or inside of the columns. Think of them as
More informationCOMSC-031 Web Site Development- Part 2
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create
More informationDreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
More informationPBwiki Basics Website:
Website: http://etc.usf.edu/te/ A wiki is a website that allows visitors to edit or add their own content to the pages on the site. The word wiki is Hawaiian for fast and this refers to how easy it is
More informationUSING JOOMLA LEVEL 3 (BACK END) OVERVIEW AUDIENCE LEVEL 3 USERS
USING JOOMLA LEVEL 3 (BACK END) OVERVIEW This document is designed to provide guidance and training for incorporating your department s content into to the Joomla Content Management System (CMS). Each
More informationThere are six main steps in creating web pages in FrontPage98:
This guide will show you how to create a basic web page using FrontPage98 software. These instructions are written for IBM (Windows) computers only. However, FrontPage is available for Macintosh users
More informationLayout with Layers and CSS
Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and
More informationNORTH CAROLINA A&T STATE UNIVERSITY CMS USER GUIDE. A Manual for the Cascade Server Content Management System (CMS)
NORTH CAROLINA A&T STATE UNIVERSITY CMS USER GUIDE A Manual for the Cascade Server Content Management System (CMS) Table of Contents Chapter 1 - Getting Started... 3 Overview... 3 What is a Content Management
More informationADOBE DREAMWEAVER CS4 BASICS
ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
More informationAdobe Fireworks CS Essential Techniques
Adobe Fireworks CS4 HOW-TOs 100 Essential Techniques Jim Babbage 140 64 Creating Graphic Symbols Resizing Symbols When you resize any bitmap to a smaller size, pixel information is discarded. This is normally
More informationOU EDUCATE TRAINING MANUAL
OU EDUCATE TRAINING MANUAL OmniUpdate Web Content Management System El Camino College Staff Development 310-660-3868 Course Topics: Section 1: OU Educate Overview and Login Section 2: The OmniUpdate Interface
More informationNETZONE CMS User Guide Copyright Tomahawk
NETZONE CMS User Guide Copyright 2015. Tomahawk 1 Phone: + 64 9 522 2333 Email: getintouch@tomahawk.co.nz Tomahawk 2015 www.tomahawk.co.nz 2 NETZONE CMS USER GUIDE WHAT YOU LL FIND INSIDE LOGGING IN 4
More informationCMS Training Reference Guide
CMS Training Reference Guide Your training session may have been conducted on one of your sites Dev or Staging or Live To login, type your web address domain into a web browser and add (/admin) o Example:
More informationWebsites. Version 1.7
Websites Version 1.7 Last edited 15 Contents MyNetball Information...3 Websites...4 Web packages...4 Setting up the layout...5 Uploading files and images...6 Using Dropbox to Increase your Website Data...7
More informationA Quick Introduction to the Genesis Framework for WordPress. How to Install the Genesis Framework (and a Child Theme)
Table of Contents A Quick Introduction to the Genesis Framework for WordPress Introduction to the Genesis Framework... 5 1.1 What's a Framework?... 5 1.2 What's a Child Theme?... 5 1.3 Theme Files... 5
More informationCreateASite Beginner s Guide
Contents Getting Started... 3 Access the CreateASite Control Panel... 3 Select a Category/Subcategory... 4 Select a Template... 6 Change the Site Template... 10 Change Colours... 12 Change Fonts... 13
More informationReference Services Division Presents. Microsoft Word 2
Reference Services Division Presents Microsoft Word 2 This handout covers the latest Microsoft Word 2010. This handout includes instructions for the tasks we will be covering in class. Basic Tasks Review
More informationDreamweaver CS 5.5. University Information Technology Services. Training, Outreach, Learning Technologies, and Video Production
Dreamweaver CS 5.5 Creating Web Pages with a Template University Information Technology Services Training, Outreach, Learning Technologies, and Video Production Copyright 2012 KSU Department of Information
More informationJSN Ultranet Customization Manual Before We Start
JSN Ultranet Customization Manual Before We Start First thing we would like to say is this guide is not intended to cover everything you might want to customize in the template. Here we disclose only the
More informationUIS Office of Web Services Documentation. WordPress User Guide. WordPress User Guide 8/31/17 Page 1 of 13
UIS Office of Web Services WordPress User Guide WordPress User Guide 8/31/17 Page 1 of 13 UIS Office of Web Services WordPress User Guide Prepared by Ralph Shank Table of Contents About WordPress 3 Getting
More informationHow to use WordPress to create a website STEP-BY-STEP INSTRUCTIONS
How to use WordPress to create a website STEP-BY-STEP INSTRUCTIONS STEP 1:Preparing your WordPress site Go to the Dashboard for your new site Select Appearance > Themes. Make sure you have Activated the
More informationAdobe Dreamweaver CC 17 Tutorial
Adobe Dreamweaver CC 17 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
More informationLEVEL 1 Site Administrator Grants permissions and manages access, manages main homepage.
USING JOOMLA LEVEL 2 (TRAINING) OVERVIEW This document is designed to provide guidance and training for incorporating your department s content into to the Joomla Content Management System (CMS). Each
More informationAce Corporate Documentation
Ace Corporate Documentation Introduction Welcome To Ace Corporate! We would like to thank you for donwloading Ace Corporate, Business WordPress theme. It is the lite version of Ace Corporate Pro. Before
More informationWhat is OU Campus? Log into OU Campus
OU Campus v10 Content Providers User Guide This document is designed to provide (level 5) Content Providers with basic information needed to do most tasks. Those needing additional information are encouraged
More informationVetstreet Web Builder Editor Tool User Guide v2.1. Web Builder. User Guide v2.1
Web Builder User Guide v2.1 Contact your Account Manager at (888) 799-8387 or email support@vetstreet.com with questions. Page 1 Index... 1 The Editor Tool... 7 Forgot Your Username or Password?... 7 How
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
More informationJSN Solid 2 Customization Manual Before We Start
JSN Solid 2 Customization Manual Before We Start The first thing we would like to say is this guide is not intended to cover everything you might want to customize the template. Here we disclose only the
More informationMagicInfo VideoWall Author
MagicInfo VideoWall Author MagicInfo VideoWall Author User Guide MagicInfo VideoWall Author is a program designed to construct a VideoWall layout and create VideoWall content by adding various elements
More informationUser Manual. Administrator s guide for mass managing VirtueMart products. using. VM Mass Update 1.0
User Manual Administrator s guide for mass managing VirtueMart products using VM Mass Update 1.0 The ultimate product management solution for VirtueMart! Contents Product Overview... 3 Feature List...
More informationDRAFT. Table of Contents About this manual... ix About CuteSITE Builder... ix. Getting Started... 1
DRAFT Table of Contents About this manual... ix About CuteSITE Builder... ix Getting Started... 1 Setting up... 1 System Requirements... 1 To install CuteSITE Builder... 1 To register CuteSITE Builder...
More informationCM Live Deal Documentation
CM Live Deal Documentation Release 1.3.0-beta CMExtension January 27, 2015 Contents 1 Overview 3 1.1 Technical Requirements......................................... 3 1.2 Features..................................................
More informationFrontPage 2000 Tutorial -- Advanced
FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right
More informationIEEE Wordpress Theme Documentation
IEEE Wordpress Theme Documentation Version 1.0.2 2014-05- 16 Table of Contents TABLE OF CONTENTS 2 INITIAL SETUP 3 FRONT PAGE 3 POSTS PAGE 4 CONTACT 5 SITE MAP 6 MENU 7 HOME PAGE 8 PAGE TEMPLATES 10 LEFT
More information08/10/2018. Istanbul Now Platform User Interface
08/10/2018 Contents Contents...5 UI16... 9 Comparison of UI16 and UI15 styles... 11 Activate UI16... 15 Switch between UI16 and UI15...15 UI16 application navigator... 16 System settings for the user
More informationNauticom NetEditor: A How-to Guide
Nauticom NetEditor: A How-to Guide Table of Contents 1. Getting Started 2. The Editor Full Screen Preview Search Check Spelling Clipboard: Cut, Copy, and Paste Undo / Redo Foreground Color Background Color
More informationJoomla How To Setup Menu Item Type Module Add Customer
Joomla How To Setup Menu Item Type Module Add Customer You can still control which modules display on which articles by manually setting the Create a menu called "hidden" and add a menu item for each of
More informationJSN Reta 2 Customization Manual Before We Start
JSN Reta 2 Customization Manual Before We Start The first thing we would like to say is this guide is not intended to cover everything you might want to customize the template. Here we disclose only the
More informationTaking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
More informationCentricity 2.0 Section Editor Help Card
Centricity 2.0 Section Editor Help Card Accessing Section Workspace In order to edit your section, you must first be assigned Section Editor privileges. This is done by the Director of your Site, Subsite,
More informationVirto SharePoint Forms Designer for Office 365. Installation and User Guide
Virto SharePoint Forms Designer for Office 365 Installation and User Guide 2 Table of Contents KEY FEATURES... 3 SYSTEM REQUIREMENTS... 3 INSTALLING VIRTO SHAREPOINT FORMS FOR OFFICE 365... 3 LICENSE ACTIVATION...
More informationDreamweaver Basics Workshop
Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What
More informationCUSTOMER PORTAL. Custom HTML splashpage Guide
CUSTOMER PORTAL Custom HTML splashpage Guide 1 CUSTOM HTML Custom HTML splash page templates are intended for users who have a good knowledge of HTML, CSS and JavaScript and want to create a splash page
More informationGetting Started with CSS Sculptor 3
Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use
More informationFRONTPAGE STEP BY STEP GUIDE
IGCSE ICT SECTION 15 WEB AUTHORING FRONTPAGE STEP BY STEP GUIDE Mark Nicholls ICT lounge P a g e 1 Contents Introduction to this unit.... Page 4 How to open FrontPage..... Page 4 The FrontPage Menu Bar...Page
More informationWebsite Creating Content
CREATING WEBSITE CONTENT As an administrator, you will need to know how to create content pages within your website. This document will help you learn how to: Create Custom Pages Edit Content Areas Creating
More informationTabs within Divi Theme Options include: Table of Contents. Divi Theme Options... 1 General Tab... 2 Navigation Tab... 6
Divi Theme Options To get to Divi Theme Options select Divi from the side bar navigation from within your WordPress dashboard. Tabs within Divi Theme Options include: General, Navigation, Layout, Ads,
More informationJoomla! Advanced Content Editing January 11, 2018
Joomla! Advanced Content Editing January 11, 2018 Instructor for this Workshop Web Development School of Arts and Sciences TABLE OF CONTENTS Welcome... 3 What is Joomla?... 3 Joomla Administrator Overview
More informationThe figure below shows the Dreamweaver Interface.
Dreamweaver Interface Dreamweaver Interface In this section you will learn about the interface of Dreamweaver. You will also learn about the various panels and properties of Dreamweaver. The Macromedia
More informationWebsite Publishing Tool Manual
Customer Support Website Publishing Tool Manual This is a designed as a definitive guide to all the features and tools available within Website Publishing Tool. Contents Introduction... 4 Adding Content...
More informationDreamweaver MX Overview. Maintaining a Web Site
Dreamweaver MX Overview Maintaining a Web Site... 1 The Process... 1 Filenames... 1 Starting Dreamweaver... 2 Uploading and Downloading Files... 6 Check In and Check Out Files... 6 Editing Pages in Dreamweaver...
More informationSign-up Forms Builder for Magento 2.x. User Guide
eflyermaker Sign-up Forms Builder 2.0.5 for Magento 2.x User Guide 2 eflyermaker Dear Reader, This User-Guide is based on eflyermaker s Signup-Form Builder Plugin for Magento ecommerce. What follows is
More informationIT153 Midterm Study Guide
IT153 Midterm Study Guide These are facts about the Adobe Dreamweaver CS4 Application. If you know these facts, you should be able to do well on your midterm. Dreamweaver users work in the Document window
More informationLearn more about Pages, Keynote & Numbers
Learn more about Pages, Keynote & Numbers HCPS Instructional Technology May 2012 Adapted from Apple Help Guides CHAPTER ONE: PAGES Part 1: Get to Know Pages Opening and Creating Documents Opening a Pages
More information