Last updated 15 June 2012. Created on 15 June 2012.
Edited by bonobo. Log in to edit this page.

Julio allows you to customize the style of your homepage using one of three pre-defined layouts. These layouts, along with other options to customize the look and feel of your site, allow you to give your site a distinct appearance in a way that will continue to look good in all modern browsers and mobile devices. This section of the documentation will walk you through editing the layout and content of your site's homepage.

Changing Your Homepage Layout

During the installation process, you chose from three options for your homepage layout—but that's hardly set in stone. You can change the layout of your homepage at any time. Starting at the Admin Dashboard:

  1. Under Admin Quick Links, in the right-hand column, click Homepage Layout.
  2. Select one of the three layout options NOTE: you can experiment with the different options, as you can change them at will. Also, you should make sure you have sample content on your home page to make sure you are looking at a realistic facsimile of your home page.
  3. Click the Choose Homepage Layout button, and close out of the Admin Dashboard to view the changes to your homepage.

Updating the Homepage Slideshow

The Homepage slideshow is a great way to invite your viewers into your site. When you install Julio, there will be three example images, with brief descriptions. You can configure this slideshow to use your own images, and link to any other page on your site.

There are two places from which you can edit the homepage slideshow:

  • From the Admin Dashboard, under Admin Quick Links, click on Homepage Slideshow.
  • From the homepage, move your cursor over the slideshow, and click on the gear icon that will appear in the upper right-hand corner of the slideshow. From that menu, select Add/Edit Slides.

The Homepage Slideshow page has links to all of the editing and reorganizing tools you'll need to update the slideshow.

Julio - Editing the slideshow

Let's start by removing the default slideshow images:

  1. Move your mouse over an image, and click the gear icon that appears.
  2. Select Remove from the dropdown, and click the Remove File button in the dialog that appears.
  3. Repeat for the other two default images.

Now let's add some images of your own. Most images on the site will be scaled automatically to fit within the space provided, and the same is true of images in the home page slideshow. However, to ensure that images display cleanly, you'll want to start with images at 1250 x 350 pixels. Depending on the home page layout you selected, you might need to adjust the image ratio and use images that are slightly less wide. Also, the default image size for Julio is 2MB. That can be changed, although homepage images should be moderately sized to improve load times.

Once you've selected and/or edited the images you'd like to use for your homepage slideshow, you're ready to upload:

  1. On the Homepage Slideshow editing page, click on the Add Media link.
  2. This window will give you two choices for where to get images for the homepage slideshow:
  • On the Upload tab, you can drag and drop files from your computer (or click the +Add Files link to browse for them) and hit the Start Upload button.
  • You can also go to the Library tab, and select images to add to your slideshow from among the images that you have uploaded to the site. (This won't be terribly useful when you are first configuring Julio, but later on, you may want to feature an image in the homepage slideshow that already exists in a gallery elsewhere on the site. The Library tab is the easiest way to do that.) Select the images you want to add (select more than one by holding shift while you click), and hit the Submit button.
  • Once you've added the images you want, it will take you back to the Homepage Slideshow editing page. Click the Edit Media tab to add titles, descriptions and links for your slides.
  • This page will show all of the images you've selected to include in the Homepage Slideshow with a set of options for each slide. Here's what you'll want to add to each of them:
    • Title – This is a title for the image file, which will be displayed when you're editing the Homepage Slideshow, but will not be displayed on the slideshow itself.
    • Description – This is where you can add title and caption information that will be displayed on the overlay for the slide image. To create a title, type the phrase you'd like to use, select it, and choose Heading 2 from the style pull-down. The add a brief description of the page the slide links to, and apply the Normal style from the pull-down.
    • Tags – Tags are optional, and won't appear anywhere on the slideshow, but they will make it easier for searches (both from within your site and from search engines) to find the image. You can add as many tags as you like, separated with commas.
    • License Settings for this Image – You can use this pull-down to choose what type of copyright permissions you'd like to assign to this image. You can opt either to reserve all rights, or choose from among the different Creative Commons licenses. (Note that in the pull-down '--Creative Commons--' is not actually an option you can choose, it's just a heading. All of the options below it are types of Creative Commons licenses.)
      For more information on Creative Commons, visit the Creative Commons site.
    • Nivo Slider Link – This is where you can enter a URL for the page you'd like the slideshow image to link to. Visitors can click anywhere on the slideshow image and it will take them to the page you specify here. This url can be internal to your site, or anywhere on the internet.
  • Fill out each field for all of your slide images, and click the Save button at the bottom of the page.
  • Go to the Homepage to view your new slideshow!
  • There are a couple of other useful options for the Homepage Slideshow:

    • You can rearrange the order of the slideshow images from the Homepage Slideshow editing page by grabbing the move icon (in the upper-left hand corner of an image, and dragging to reorganize the images.
    • You can edit the title, description, etc. of an individual slide by clicking on the gear icon (in the upper-right hand corner of an image) and selecting edit.

    Adjusting Quick Links Menus

    The Quick Links section is a set of four menus on the homepage that you can customize however you like. These menus are often used to present collections of links organized according to what type of visitor would be interested in them. Thus, when you install Julio, these menus are named Current Students, Alumni, Faculty & Staff, and Prospective Students, with the intention that each will contain links that would be useful to each of those demographics.

    Julio - Quick links

    To edit the menus in the Quick Links section:

    1. In the left-hand column, click the name of the menu you want to edit, and then click the Click to Customize link in the right-hand column. (You can also click on the gear icon for the menu you want to edit and select List Links.)
    2. On the administration page for the menu, you will see a list of the links in the menu. If no one has added any, you will only see the Click to Customize link.
    3. To add more links to a menu click the +Add Link link at the top of the page.
    4. On the next screen, give the new link a title, and enter the URL for the link under Path.
    5. The Parent Link menu should display the name of the menu you're adding the link to (You can also use this pull-down to add the link to a different menu, but it will list all of the menus on the entire site, which can get cumbersome).
    6. The Weight pull-down controls the order your links will appear in the menu, but choosing a weight is optional, because on the List Links page (which you'll go back to in a moment), you'll be able to reorder your links very easily by drag and drop.
    7. Click the Save button at the bottom of the page to save your new link.
    8. From here, you can keep adding menu links, and you can edit or delete existing menu links. You can also easily rearrange the menu's links by clicking and dragging the move icon to the left of a link's title. Click the Save Configuration button to save any changes you've made.
      NOTE: You can leave the Click to Customize link intact—it will not appear to anyone but site administrators.
    9. To change the name of any of the Quick Links Menus, click on the Edit Menu tab in the upper right corner of the List Links page, enter a new name, and click Save.

    Editing Quick Link Text, and Modifying Tabs

    In addition to modifying the menus used within the Quick Links, you can also add additional tabs to the section, and adjust the text of the existing sections.

    Julio - Edit Tabs

    1. Move your mouse over the Quick Links section, and click the gear icon that appears in the upper-right corner of the section.
    2. Select Edit Quicktab.
    3. There are a variety of options you can edit for the Quick Links section
    • Title – This is where you can edit the name of the section.
    • Default Tab – Use this pull-down to select which menu is selected by default.
    • Table with Tab Title, Type and Content – In this table, you can organize, configure, and delete the menus that appear in the Quick Links section. To reorganize the order of the menus, grab the move icon on the far-left side of the row and drag the row up and down.
      • Tab Title – The menu name that will appear in the Quick Links section (does not have to be the same as the menu's title).
      • Tab Type – Technically, you can link to either a block (menu) or a node (page) from the Quick Links section, but we recommend sticking with block, since that's what the section has been formatted for.
      • Tab Content - You can select which menu you want to include in Quick Links by selecting it from the pull-down in the Tab Content column.
      • Operations (delete) – Click the delete icon to remove a menu from the Quick Links section.
    • Add Tab – At the very bottom of the page, on the right, you can click the Add tab button to add additional menus to the Quick Links section of your homepage.
  • When you've made all the changes you'd like, click the Save button.
  • Unlike the rest of the elements on the homepage, the Events and Featured News Sections are actually controlled from elsewhere on the site. When you first install Julio, you'll see these two sections will say “There are no featured events (or announcements) yet.”

    Julio - Featured Content

    Once an event or an announcement has been created within any User Group, a site administrator can choose to feature that post on the home page by clicking the Feature button.

    Julio - Feature button

    The Events section will display five upcoming featured events (in chronological order, soonest first), and the Feature News section will show your five most-recently featured announcements.

    To remove an item from these sections, go to the page for that Event or Announcement (by clicking on the item's name) and click the Remove From Featured Events/Announcements button.

    Julio - Remove button

    Visitors can click on the Calendar or All News links to view all Events and Announcements (whether they've been featured or not).

    If you'd like to change the name of either of these sections (if you'd like it to say Upcoming Events, for example), move your mouse over the section, and click on the gear icon that will appear. Select Configure Block, type in the new name for the section, and click Save Block.

    Looking for support? Visit the forums, or join #drupal-support in IRC.


    chhaba’s picture

    How can I remove the overlay description from the homepage slideshow of Julio ?
    Thanks in advance.