Creating and Editing Menus

Video guide

#The Menu Manager Layout.

*This article is about customizing your menu, not only main menu.

Explanation:

#1 This is the area of Pages, Links, Header Title for your menu to add

#2 The Menu name, and Setting are for displaying your menu Horizontal or Vertical

#3 The Menu Structure settings, in this area, you can config the plugin or page enabled/disabled to users, change names, change order…etc

#4 Save Menu button after changes.

I/How to add a new page as an item in your menu:

#1 Check on the checkbox of the page you want to add.

#2 Press on Add to Menu.

#3 Press on Save Menu to finish.

On Front End, it will look like:

#The page you added, now displayed in Main Menu

II/How to add link:

#1 Enter the URL that you wanted to lead users to.

#2 Enter the text for displaying on the menu

#3 Press on Add to Menu

#4 Save Menu.

At the Front-end, it will be like:

#Link added now displaying at Main Menu.

When a user clicks on this, it will lead a user to URL you added.

III/How to add Header Title:

#1 Enter the Header Title.

#2 Press on Add Header to Menu.

#3 Press Save Menu.

After finished, front-end will be displayed as:

# The Header after added to Main Menu

IV/How to change menu order:

Simply just drag & drop the cards at Menu Structure, replace or moving these cards as the order you preferred.

An example, we decided to move Events at the end of the order to the 2^nd position on Main Menu.

#Drag Event card and then drop it below Home card.

#Hit Save Menu button.

#After moved

And at Front-end, we have:

# Events has been moved to 2^nd position.

V/How to set Sub-Menu:

Just like moving menu, we drop & drag cards in Menu Structure to the position below others to make them as sub-menus for these cards.

Now, example, we set Events as a sub-menu for Home:

#Drag then Drop Events card to a position below Home and a little bit to the right to make it as Sub-Menu of Home.

#The Events is now Sub-Menu of Home, you can see Events card now has the sub item next to it.

At the Front-End:

#Events now is a Sub-Menu of Home, when you point your mouse at Home, its submenu will fly out.

VI/How to customize your menu’s item:

You can start customizing your menu’s item by clickin’ on drop-down button of the card.

#Click on drop-down button and the menu settings will show.

You can change the item name:

#At the Navigation Label, type in anything you want for displaying as the title for the item.

You can add Title Attribute to your item:

#Fill in your content to display as Title Attribute then Hit on Save Menu button.

At the Front-end we will see:

# The Title Attribute will display when you pointing your mouse at the item.

Font Awesome Class:

You can add Font Awesome to your menu’s items, just get the code icon from the link we provided.

#Click on the Font Awesome link.

At the Font Awesome site, click on any icon you like, after that:

#Copy the highlighted as above Font Awesome Class.

Now we’re about to add it to Font Awesome Class field:

#Add code to your Font Awesome Class field and hit Save Menu button.

What will happen at Front-end:

#You can see the icon is added to Groups.

Enable/Disable item to users:

Example, we want to disable Groups.

#Switch to No at Active options and press Save Menu button.

All the users will not see Groups anymore at front-end.

#The Groups is disabled to users, did not display on your menu.

Open in a new tab when clicked on item:

After enabled Open In New Tab, the item will open in a new tab after users clicked on it.

Example, we want the Groups open in new tab

#Enable Open in new tab and hit Save Menu button.

Making User Group Access:

You can make User Group Access, for simple, if you do not want Guests to access your Groups, remove the tick from Guest role.

#Remove the tick from Guest role and hit Save Menu button to make it performed its function.

Then, at the Front-end:

#The unregistered users (Guests) cannot see Groups after you disabled user’s role Guest to access.

Remove your item out of the menu:

If you wanted to remove the item out of your menu, just press Remove button at the bottom of the item customizer.

#Press Remove button then Save Menu.

VII/Add new Menu:

Simply press on Add New Menu:

#Press on Add New Menu to begin

Then you have to fill in this New Menu’s name, Style Vertical or Horizontal

#1/ Enter your new menu name.

#2/ Select your menu style.

#3/ Click on Create button.

To select menu for editing, you will have to select it from the drop-down list next to Add New Menu button.

#Select your menu from drop-down list next to Add New Menu

Layout Editor

Selecting a Page to Edit

Click on the drop-down button, it is located on top-right.

#Click on the Dropdown button to select a page

Please note that not every page can be edited using the Layout Editor. If you do not see the page that you want to modify in the “Editing” list then you will most likely have to modify some of the code to alter its content.

Edit a Page Info

Pressing on Edit Page Info button located at top-right will open a new window, in this window, it allows you to edit page info

#Edit Page Info window.

Page Name: The name that will show up in the drop-down list when you select a page to edit. This name is purely for your own reference for use in the Layout Editor.
Page Title: The title that will be displayed to users at Front-End.
Page URL: This field is where you enter the last part of the URL in order to link directory to this new page. You can reference the page by going to {your domain}/pages/[Page URL]. For example, the Page URL in the screenshot is “Review-of-the-Day”. If my domain was http://www.mysite.com then to access this page I created, I would go to http://www.mysite.com/pages/Review-of-the-Day
Page Description (meta tag): The page description should be a brief, concise description of this page. Include any keywords or phrases that you want to appear in search engine listings. This will be the basis for your HTML “meta” description tag. There are two places where you can add data for your “meta” description tag. The site description found on the General Settings page will be on every page on your website under the “meta” description tag. There is also this page description which will give just this page its own “meta” description tags which will be in addition to this site description. Please know that a good page description will increase SEO.
Page Keywords (meta tag): Provide some keywords (separated by commas) that describe this new page. These will be the default keywords that appear in the HTML “meta” tag in your page header. Enter the most relevant keywords you can think of to help this page’s search engine rankings. There are two places where you can add data for your “meta” description tag. The site description found on the General Settings page will be on every page on your website under the “meta” description tag. There is also this page description which will give just this page its own “meta” description tags which will be in addition to the site keywords. Also know well thought out keyword will also help your SEO.

Creating a New Page

To create a new page, click on “Create New Page” located at the top left.

#Create New Page

With this function, a guideline is existing at https://www.moosocial.com/wiki/doku.php?id=admin_dashboard:site_manager:pages_manager

Please take a view for creating pages.

Columns Template

Decide the overall layout by deciding how many columns you want to have on this page by clicking on the “Edit Columns” button. Choose a template by clicking on the template that fits your page best. The horizontal blocks on the top and the bottom represent the Site Header page and the Site Footer page, which do not need to be displayed.

Find Edit Columns button at top-right, pressing on it and a new window will pop-up,

#Columns Layouts Selection

With many choices for your layout.

II. Changing the Content on Your Page

Adding Content to Your Page

Click and drag the “blocks” to arrange the content you want on each page. Drag blocks from the “Available Blocks” area into the “Page Block Placement” area to add them from your page.

#Drag a block from Available Blocks to your page columns for a more control over what is displayed use an “HTML Block” if you want to add your own custom HTML code or other commonly available code snippets.

NOTE:** All blocks cannot be used on all page. For instance, the blocks that begin with “Profile” can generally only be used on the Profile pages (Member Profile, Group profile, etc.). Please see the following article for a list of Which Widgets are Allowed on Which Pages.

Removing Content from Your Page

You can drag blocks from the “Page Block Placement” area into the “Available Blocks” area to remove them from your page or click on the black “x” in the block you want to remove.

#Press on X to remove.

Editing a Content Block

Click on the “edit” on the content block to change any of the parameters that this content block may allow you to modify.

#Click on the pencil button to begin modifying.This block allows you to edit the “title”. The title will display in bold print right above this content block on the page where you are placing it. It is also let you modify a number of items to show, default = 10.

#Editing Contents Parameters

Saving Your Changes

Click on the “Save Changes” button on the blue bar to save all the changes you have made to the layout.

Creating Static Pages

At pages Manager/General click on Create New Page button located above Pages List.

#Press on Create New Page button and begin.

#1 Fill in your Page’s title.

#2 Fill in your Page’s alias

#3 Content of your page

#4 Fill in your Page’s Description

#5 Fill in your Page’s keywords

#6 Allow Comments, check to enable users right to comment on this page.

#7 Blocks inherit, if you want this page to be displayed with all the blocks & widgets like another page, select any of its pages lists.

#8 Permission for user roles, this setting will decide user roles to access your page.

When you’re done, just click on Save Page and receive a message like this:

#Page saved.

Return to Pages Manager and see your newly created page:

#Your new created page.

Now take a look at your newly created page at Front End:

#Your new created page.

II/How to add New Page to your menu:

After a page is created, you can find it at Menu Manager:

#1 Select page you created

#2 Add to Menu button.

Then you must Save Menu to make it effective.

#3 Press on Save Menu button.

Then your Main Menu will look like:e:

#Your page has been added to your menu.

Install New Theme

1/ When you already had the plugin package, extract file template (in zip) to a folder and upload “app” folder and their contents to your site (allow overwrite old files)

Example, we added ‘mooBuk’ as new theme

2/ Go to Admin Dashboard/Site Manager/Theme Manager/Not Installed Theme, find the ‘mooBuk’ theme and press Install button:

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_how_to_install_theme.jpg

3/ After installation, there will be a Message:

#Installation successful.

4/ Front-end, users can see new theme has been added:

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_how_to_theme_frontend.jpg

#New theme has been added.

Installing New Module

1/ When you already had the plugin package, extract file template (in zip) to a folder and upload “app” folder and their contents to your site (allow overwrite old files)

Example, we added ‘Recipe’ as new plugin.

2/ Then go to Admin Dashboard/Plugins Manager/Manager/Not Installed Plugins, find ‘Recipe’ plugin and press on Install button to begin installation.

3/ The progress is done, you can see your new installed plugin at Plugins List.

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_how_to_install_successfully.jpg

4/ Go to Admin Home –> Clear Global Caches

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_how_to_clearcaches.jpg