gpEasy Layouts

The layouts page in gpEasy's admin is the page you utilize to add new themes to gpEasy. While you may have upload a new theme to the themes folder in your gpEasy installation it is not accessible to be used until you go to the layouts page and add it as a new layout.

One of the unique features implemented in gpEasy 1.7 is the ability to add the same theme to layouts as many times as you desire; therefore, you can edit the layout of the same theme infinitely in gpEasy.

Another feature that's easily overlooked in the layouts page is the ability to define a unique name and color for each layout. This will be pointed out in the visual tutorial below.

At first it may seem a little scary to edit the layout of a theme, however you always have the option to restore the theme's layout to its default after changes have been made. Now go through the visual tutorial below to get familiar with the layouts page in gpEasy. Make sure you follow along in your own installation of gpEasy CMS.

While this tutorial was created for gpEasy 1.7 everything is the same for gpEasy 2.0+.

  • The Layouts Page

    You can get to the layouts page via the Admin page or the "layouts" link in the Admin Menu at the top of the screen.

    Notice that there are two main sections to the layouts. The upper section displays all themes that have been added to the layouts, and the lower section displays all available themes that can be added as a layout. The available themes are all themes located in your themes folder inside your gpEasy CMS installation.

    Notice the four columns: Layouts, Usage, Theme, and Options.

    Layouts:
    This column is a list of all layouts you have added. The name and color for this column can be edited. The name and color displayed in this column is the name and color the theme will display in the file manager when you hover over a file (file options).

    Usage:
    This column simply tells you how many files/pages have that particular theme/layout applied to it and whether or not it is the default theme/layout for the site.

    Theme:
    This column is the name of the theme you added as a layout.

    Options:
    Here you have two options, edit and delete. The delete link does just that. It removes that particular layout from the layouts. It does not delete the theme from the themes folder. The edit option allows you to edit a layout's layout. This will be shown more clearly in a later image.

    How do I add more themes?
    In order to have more themes available to add as layouts you must upload them to your themes folder.

    How do I add a theme to the layouts?
    Simply click one of the available colors for a theme.

  • Change the name and color of a layout.

    Click the color icon to the far left of the layout.

  • Changing the name and color of a layout

    Click the color icon to the far left of the layout and a dialog will open. Notice the name in the top field. You can change this name and select a different color for the layout to help you identify it. Go ahead and try it now. The new name and color you select here will be displayed in the file's options when you hover over a file in the file manager.

  • An example of changing the name and color of a layout.

  • Notice the new name for the layout. The color was left the same.

  • How to add a theme to the layouts.

    Click "blue" for the black header theme.

  • How to add a theme as a layout.

    Once you click the "blue" link you will be presented with this page. You now have to choose how you want the theme to be added to the layouts.

    The choices are rather obvious, add the theme to the layouts and make it the default layout for the site or add it to the layouts to be used on a per page basis. If you click the third option it will cancel adding the theme to the layouts and return you to the layouts page.

  • How to add a theme as a layout.

    I chose to add it to the layouts.

  • How to edit the layout of a theme that's been added to the layouts.

    Click the "edit" link to the right of the layout you want to modify.

  • How to edit the layout of a theme that's been added to the layouts.

    Once you click the "edit" link you are taken to a page that highlights all editable areas. Notice the red areas. These are the editable areas. They can be removed, edited, insert a new one, or drag them to a different location.

    You can also edit a layout's layout by clicking "edit layout" in the "Title Options" menu at the top of the screen. However, this method will edit the layout of the currently active layout. In other words, if you are working on a page that has a specific layout and click the Title Options "edit layout" menu item you will be editing the layout that is associated with that particular page. If you click it while viewing an admin page you will be editing the default layout. So be careful when utilizing this option.

  • How to edit the layout of a theme that's been added to the layouts.

    Notice when you hover over an editable area it highlights even more and gives you the options to edit, remove, or insert.

    By clicking the "edit" button over the navigation menu you will be presented with the following window.

  • The edit menu navigation window.

    Here you can select how you want your navigation menu to display. Try some different options out to see how it works. After you save the change you will need to go to a page to see the menu in action. There will be tutorials later on utilizing the menu more.

  • The edit menu navigation window.

    Click the custom menu tab and you will be given three options to customize how the menu works. The are rather self explanatory.

  • New in gpEasy 2.0

    You can now choose from multiple custom menus when inserting a menu into a layout.

  • Edit the layout of the header.

    Highlight the header.

  • Edit the layout of the header.

    Click the "insert" button.

  • Edit the layout of the header.

    After you click the "insert" button you will get a window that lists all available extra content areas. You can select one to insert or create a new one in the blank field at the bottom and clicking "add new area."

    This list is made up of the extra areas that you use for the header, footer, and side bars. You can have as many extra areas as you like and define them on a per layout basis. Play with it a while to get used to how extra areas are added, removed, and edited.

    The extra area files are found in the folder /data/_extra/ within your gpEasy installation.

  • Drag N Drop Editable Areas

    Notice when you drag n drop an area you will see an outline of that area as you drag it. When you move one area over another it will turn pink. This indicates that you are move the extra content before the other. Try it. Drag an area to a new location to see what happens.

    Play with the features here for a while and when you are done just click the "restore defaults" button that will be listed on any layout that has been modified when you go to "edit layout" page for that layout.

    The layouts feature in gpEasy is a very unique and powerful feature. The feature is increased in flexibility by custom menus and extra content areas, both of these subjects will be covered more in-depth in later tutorials. For now make sure you are comfortable with moving, deleting, inserting, and editing extra content areas when using the layouts page.

    That's it! You are done with this tutorial.

 

gpEasy B2sq Theme by CS @True Acupuncture