Modena - Concrete CMS theme

Thank you for purchasing this theme from Vidal, we truly appreciate you choosing our product.

What you will need...

• A hosted copy of Concrete5, preferably the latest version
• FTP Software that allows you to transfer files to/from your hosting account (If installing manually)

In this documentation we will tell you how to set up all aspects of your Modena theme, we will assume you have a knowledge of how to perform basic tasks in Concrete5 like placing your site in edit mode, adding blocks, and applying custom templates, if you need to brush up on using the Concrete5 CMS please familiarize yourself with the official editors documentation over at Concrete5.org: https://documentation.concrete5.org/editors

Suggested install configuration

When installing the Concrete5 CMS you are presented with the option to install an Empty Site or install a Full Site we strongly recommend installing your version of Concrete5 with its demo data. The Full Site option coupled with the Modena demo data will provide you with a set of blog and portfolio pages, along with numerous important page attributes, which are ready to use. The empty site will be devoid of these options which will have to be manually created within Concrete5. The Empty Site option is intended for expert Concrete5 users/developers, who may be creating a custom application using Concpan.

Installing Modena through your Concrete5 dashboard

Once you have purchased the Modena theme form Concrete5 please follow the steps below to install your new theme.

First log in to your website and go to Dashboard > Extend Concrete5 if you have not done so already connect your site to the Concrete5 community by clicking the large blue Connect to Community button, you should see the screen below.

Fill in your Concrete5 log in details, remember these are the details that you use to log into the concrete5.org website account NOT the log in details for your website.

Once you have connected your site you should see the screen below. Click on the link Visit your Project Page here you can assign the Modena theme license you purchased to your website.

Once on your project page, you should see a drop down box under the heading Add Item to this Project click the box and from the dropdown select your Modena license, then click the Associate button next to it, your Modena theme license is now associated to your site and will be available for install.

Once you have associated your license return to your site and go to Dashboard > Extend Concrete5 your new theme should be there under Awaiting Installation click the Install button and follow the onscreen prompts.

Prior to installing...

Your theme is contained in a zipped folder, which will need to be unzipped before uploading to your Concrete5 installation.

Manual install

The unzipped folder will need to be uploaded to the root level packages directory in your Concrete5 install. You will need to access your Concrete5 install via FTP on your hosting account.

Once you have uploaded the unzipped theme to the packages folder, you can then log in to your Concrete5 site, and install the theme.

Once you have logged in, click on the dashboard button on your Concrete5 edit bar, as pictured below.

Your Concrete5 dashboard will now appear, click on Extend Concrete5, as pictured below.

Click on the Install button next to the Modena theme.

You will now be able to select what type of install you would like to perform, you can opt to install the demo data or not. Installing demo data will wipe the contents of your site and install a basic Modena themed website with a selection of pages, a portfolio, and a blog, we highly recommend this option as you can hit the ground running, most common blocks are present and already have their custom templates applied. If you have content already on your site that you wish to keep then you should install without demo data.

after you have selected which option suits you best, click on the Install Modena Theme button at the bottom of the page, if you have opted to install the demo data, installation may take a while, this is normal, please do not refresh the page during installation.

If you chose to install the demo data your theme should now be active and ready to use. If you chose to install without demo data you will need to activate your theme, from the concrete5 dashboard click on Pages & Themes

On the Pages & Themes page you should now see your installed theme, along with any other themes you have installed. Click on the Activate button next to the Modena theme, you will be asked to confirm if you would like the theme applied to your entire site, click Ok

You will then see a screen informing you that your theme and its associated pages are activated and ready for use.

The navigation in Modena is controlled by one of 2 custom templates, Main Nav or Main Nav Placeholders. Main Nav will display a navigation bar with its dropdown menus, and will let you click on parent links and visit the parent page.

Main Nav Placeholders will display a navigation bar, where the parent links will be set as placeholders, this means the parent page link will not link to another page, but will simply be a heading for the dropdown sub menus.

If you have installed the demo data, Main Nav Placeholders will be already installed, if you wish to change it, follow the steps below.

To set your navigation place your site in edit mode by clicking the edit mode button in the Concrete5 editing bar (Pen icon)

Once your site is in edit mode click on your navigation bar, and from the menu select Design & Custom Template

From the context menu bar that appears click on the cog icon, under the heading "Custom Template" click on the dropdown menu, here you can select from Main Nav or Main Nav Placeholders once you have selected which template you wish to use, click on the blue save button on the context menu.

Creating layouts in Concrete5 is simple, unlike many other CMS Concrete5 has a native way of building layouts, its part of the CMS and does not require any special blocks or plugins.

To create a layout first place your site in edit mode, by clicking the pen icon on the concrete5 edit bar.

Once your site is in edit mode editable areas on your page will appear, with a grey outline, and a name, for example Empty Main Area when you hover these areas with your mouse the outline will change to green or blue, green is a regular area appearing only on that page, a blue outline denotes a global area, whatever content is placed in a global area will appear on all pages that feature that global area.

Click on an empty area, then from the context menu click on Add Layout

You will now see the layout builder, as shown below.

To alter the amount of columns you can use the up and down arrows next to the Columns heading.

Once you have selected the amount of columns you wish to use, you can alter the column sizing by using the adjustment handles on top of the columns as shown below, this way you can create layouts beyond that of equal columns.

Along side manually setting columns you can also choose from a number of presets we have built for you, by clicking on the arrow next to the name of the grid system, you will see all the preset options available to you.

To use one of the presets simply click on the preset you wish to use and it will be applied to the layout builder, once you are happy with your layout click on the blue Add Layout button.

Once you have clicked Add Layout your layout will now appear as editable areas ready to take the blocks of your choosing.

Advanced layout tips - Full width backgrounds

You will notice that some areas in the demo site have background colors that stretch the full width of the site. These areas are easy to implement.

First place your site in edit mode, then click on an area tab as shown below.

When you click on the tab a context menu will appear, from the menu click on Edit Layout Design

From the new menu that appears click on the image icon, as shown below.

From the background menu you can now click on the color menu, and choose or input a color of your choice.

Once you have chosen your color, click on the Choose button, then click on the blue Save button on the context menu.

After you click save, you will see your background color on screen.

You will notice on the above screen shot that we have added padding to the top and bottom of the area, to do this simply repeat the above process to get to the context menu, and click on the Margin and Padding icon as shown below.

From the padding and margins menu you can now drag the handles to adjust the padding and/or margins to your desired levels. In this example we have used padding which will force the background color to expand with it as padding is applied to the inside of an element, margins are applied to the outside of the element and will not affect the background color.

Once you are happy with your spacing, click on the blue Save button.

Advanced layout tips - Full width blocks

You will see on the demo site home-page that some blocks span the whole width of the site, setting blocks up in this way is a simple task. First add a 1 column layout, this will give you one large column that spans 1240px (Unless the default site width has been changed in the settings) then add your block to this area, adding blocks is covered in a separate section. In this example we will use the Page List block to display our recent portfolio posts. Once set up your area will look something like the image below.

While still in edit mode click on the block you have just added, a context menu will appear, as pictured below. Click on Design & Custom Template

From the new menu that appears click on the cog icon, as pictured below.

From the advanced menu click on default setting under the heading Block container class

From the dropdown select Disable Grid Container then press the blue Save button on the context menu.

Your block will now populate the whole width of the screen.

Modena features the ability to hide content depending on what size screen is being displayed. You can use the classes listed below to show and hide certain blocks or layouts on desktop, tablets, and phones.

Hiding a block or layout based on screen size

To set a block or layout to hide on a certain screen size, first place your site in edit mode, then click on the layout/block you wish to hide, from the context menu click on Design & Custom Template

From the menu bar that appears click on the Cog icon

From the menu that appears type in the name of the class you wish to use in the Custom Class section, for example, type in hide-desktop if you wish to hide a block on desktop/laptop computers. Once you have typed in the text make sure you hit the enter key on your keyboard to enter the class, when you have finished adding classes, click the blue Save button on the menu bar, then publish/save your page as usual.

In Concrete5 content and functionality is added via blocks, there are many default blocks available. Modena comes with its own set of blocks to give you some more advance functionality, rather than tell you how to add/set up each individual block we will cover how to add blocks in general. Some blocks with more complex set ups are covered in the setting up your homepage section.

To begin with you will need to add a layout to give your block a position on your page, layouts are covered in the layouts section if you are not familiar with the Concrete5 layout builder it is best to read that section first.

Once you have set up your layout click on an area of your layout and click on Add Block as shown below.

On the left side of your screen the blocks panel will appear, simply click on the block you wish to use. The Modena blocks are shown below, but you can use any of the default Concrete5 blocks too.

Once you have clicked on the block you wish to use, the blocks options panel will open, configuring your block is a simple case of working through the form fields, in the example below we have used the pricing table columns, as you can see there are a number of options allowing you to tailor the block to your desired result.

When you have finished configuring your block, click on the Add button to add your block to the page, if you wish to edit your block once it has been added, simply place your site in edit mode, click on the block, and you will be able to alter any of the options you previously set.

If you set up your site without using the demo date import, you will need to set up your home page manually, in this section of the guide we will cover all aspects of setting up your home page to replicate the demo site homepage.

Setting the home-page template

Modena has a specific home-page template that should be used on the front page of your site, first navigate to your home page, and then click on the Page Design, Location, Attributes and Settings button on your edit bar, the cog icon pictured below.

The Page Settings panel should now appear, from the panel click on design.

This will open the Page Template and Theme Customisation panel. Click on the Expand label under the page template list, this will show you a list of all available page templates, click on the Home template, and then click on the green Save Changes button in the bottom right of the screen.

Adding your own logo

Modena lets you add your own logo as an image or as text, to add your logo first place your site in edit mode by clicking the pen icon on your Concrete5 edit bar, next find the area that says Sitewide Header it should be located in the top left of your site.

Click on the Sitewide Header area, and from the context menu click on Edit block you should now be able to edit the content of your header using the Concrete5 editor.

If there is already an image in your header that you wish to change simply double click the image in the editor and the Image Properties window will open, here you can click on Browse Server to select your new image from the media library.

If there is no image and you wish to add one, click on the Image button in the editor to be taken straight to the Image Properties screen.

When using the fixed position header we recommend creating your logo the height of the header before it is scrolled, by default this is 100px high. You should then place your logo in the center left of the image, which should be a transparent .png image file, an example can be seen below. If your logo is large and you need more space in your header you can adjust the header size before and after scroll, in the theme options header settings, this is covered in the theme options docs.

You can set your header logo to be a link to your home-page, to do this click on the image in the editor to select it, and click on the link icon in the editor as shown below.

The link options panel will appear, click on the sitemap button and select your home page, once you have selected your homepage click on Ok. As your header is a global area, all instances of your header will link back to your home-page.

Adding the hero unit

The front page of Modena features a large hero unit with animated captions and button, this is a custom block that comes pre packaged with Modena.

First place your site in edit mode, then locate the area Empty Hero Unit Area click on this area and then click on Add Block from the context menu.

The blocks menu will now appear, scroll down to the section that contains the Modena blocks, and click on the Hero Unit block.

The Hero Unit options panel will now appear, all the sections are self explanatory, fill them in with your desired content. When adding your hero unit background image we suggest using an image with the dimensions of 1200px by 800px, we find this gives a good combination of image quality, and size for page load speed

Icon box area

The next section down on your home-page is the "You'll love working with us" area, first add a 3 column layout under the hero unit block, do this by clicking on the grey Hero Unit or Main tab, and from the context menu click on Add Layout.

Click on the first column and click Add Block you can now click on the Content block to add simple text content to the area, in the demo site we have used a Heading 5 to add the "you'll love working with us" slogan.

Once you have added your content via the editor click on the blue Save button on the editor toolbar.

To add icon boxes click on the next column along in your 3 column layout, and click on Add Block go down to the Modena blocks section and click on Icon Box.

The icon box options panel should now open, fill in the details to your preference, on the demo site we have used left aligned icon boxes.

Offscreen hero unit section

Modena comes complete with an animated offscreen hero unit, to use this block first add a 1 column layout under the icon box area, then click on your newly added area, from the context menu, click on add block.

From the blocks panel scroll down to the Modena blocks section, and click on the Offscreen Hero Unit block.

When choosing an image remember that some of the image will be hidden offscreen, we used images 1425px by 700px for the demo sites offscreen hero unit.

We have used 2 of the offscreen hero unit blocks one on top of the other with images aligned at the opposite sides.

Adding a portfolio feed

Modena comes with a a set of custom templates to turn the Topic List block and the Page List block into an ajax powered sortable portfolio.

First we will need to add a Topic List block, this is the block that will give us our topics or categories from which we can filter the page list block.

Create a new layout under the offscreen hero unit blocks you added in the previous section, this can be a 1 Column layout. Click on the newly added layout and click on Add Block from the block list click on Topic List block under the navigation heading.

Set up the topic list as follows, Mode should be set to "Search – Display a list of all topics for use on a search sidebar." Topic Tree should be set to "Projects". Post Results to a Different Page and Title should be left blank. Once you have completed the settings click on the Add button.

You will now see the default topic list block on your page, it should look something like the picture below.

To get the sorting functionality, and to make the styling of the list match your site, you will need to add a custom template, to do this, click on the Topic List block you just added, from the context menu click on Design & Custom Template

From the new context menu that appears click on the cog icon.

From the advanced menu that appears click on the dropdown under the Custom Template heading, from the select box click on Modena Filters then click the blue Save button.

Your filters will now have the correct styling and functionality. The position of the filters in their area is controlled by an option in the portfolio theme options, you can set it to be left, right or center aligned. To change the names of your topics you will need to go to Dashboard > Systems & Settings > Attributes > Topics from here you can add/edit topic names.

Now we have our filter list we need to add some content to sort and filter, this is done by adding the Page List block, to begin with add a 1 Column layout under the topic list block you just added, next click on the newly added area, and click on Add Block from the context menu, from the block panel select the Page List block from the Navigation section.

The page list block is one of the most powerful, and useful blocks Concrete5 has, enabling you to create portfolio, news, and blog feeds easily. To set up your portfolio feed like the demo site, set the options as follows: Number of pages to display 6. Page type Portfolio Project. Topics No topic filtering. Filter by Public Date Show All. Other Filters Leave blank. Pagination Leave unchecked. Location Everywhere. Sort Most recent first. Provide RSS No. Include Page Name Yes. Include Page Description No. Include Public Page Date No. Display Thumbnail Image Yes. Use Different Link than Page Name No. When you have completed these settings, click on the blue Save button. You will have something that looks like the picture below.

Now we have our basic page list we need to add a custom template like we did with the topic block, repeat the steps to add a custom template, click on the Page List block you just added, then click on Design & Custom Template then click the cog icon to bring up the advanced menu, under the custom template heading, click the dropdown and then click Modena Portfolio No Margins. If you wish for the portfolio to span the entire page like the demo site, while you are in this menu click the dropdown under the Block Container Class heading, and choose Disable Grid Container when you are done click on the blue Save button. You will now have a working portfolio section, clicking on any of the topic list filters will filter to a portfolio page that has the same topic.

To learn more about topics and adding them to your portfolio pages, please visit the official Concrete5 editor docs

Team members area

The next area down on our home-page is the "Meet the team" section, this section can be used to introduce your team to the world.

First under the page list area you created previously, add a 3 column layout, click on the first column, and then click on Add Block from the block panel, scroll down to the Modena section and click on the Team Profiles block.

The team profiles options panel will appear, fill in the details of your team member and then repeat the process for your next 2 columns in the area.

Testimonial slider

The next section on the home-page is for displaying your client testimonials, first create a 1 column layout under the team member area you created previously. On the demo site we have given this area its own background color, you can find out how to do this in the layouts section

Once this area has been created, click on it, and then from the context menu click on Add Block from the block panel, scroll down to the Modena section and click on Testimonial Slider

The testimonial slider options panel will now open, to begin adding your client testimonials click on Add Testimonial

Once you have filled in the details for your first testimonial, click on Add Testimonial again to add your next client testimonial, keep adding your testimonials until you are complete, then click the blue Add button.

Your testimonial slider will be added to your page, but will remain deactivated until you publish your page.

Setting up site search with no demo data installed

To begin with we will set up a page where your search results will be displayed, to do this click on the Add Pages and Navigate Your Site button on the Concrete5 ediit bar.

From the New Page menu click on Empty Page, you will now be taken to the page you have just created which will be blank, you can add a page banner and title etc by using the page attributes, please see the page attribute section for details.

When you have the look of your page how you want it, click on the area Empty Main Area and from the context menu click on Add Layout here you can add an area, we have used a 1 column area. Next click on the area you have just added and click on Add Block

From the blocks panel click on Search under the Forms heading.

Once you have clicked search you should now see the Add Search panel, fill in the details as follows: Title Leave blank. Button Text Add something like "Search" or "Submit". Search for Pages Everywhere. Results Page Post results to this page. Then click on the blue Add button, you should see the stock standard Concrete5 search bar.

We now need to add a custom template to make this search bar blend with our site, click on the search bar you have just added and from the context menu click on Design & Custom Template from the new menu that appears click on the Custom CSS Classes, Block Name, Custom Templates and Reset Styles (Cog icon), the advanced menu will now appear, under the heading Custom Template click on the dropdown and select Modena Search Results then click the blue Save button.

You should now have a search bar that looks like the picture below.

Once you have your search bar in place, and the look of your page finalized we can finish configuring our search results page, first click on the Edit Page button on your Concrete5 edit bar, which should have a green background.

You will now see the Publish Page panel, click on the blue link that says Page Compose Interface

from the composer interface give your page a name, we have used "search results" fill in the description as you see fit, click on the large blue choose a page button, and click on the Home link, this will place your search results page as a sub page of your home page. You can now click the blue Publish Page button at the bottom of the page.

You will notice that your search results page is now in your main navigation, which is not what we want, this pages sole purpose is to display search results, so we dont want it in our main nav bar.

To remove the search results page from our nav we can use a dedicated Concrete5 page attribute called Exclude from Nav to use this, first navigate to your search results page, once you are on the page click on the Composer, Page Design, Location, Attributes and Settings button on your Concrete5 edit bar (Cog icon).

From the Page Settings panel click on Attributes

On the attributes panel click on Exclude from Nav the exclude from nav checkbox will appear on the right side of your page, check the checkbox and click on the green Save Changes button.

Your page will now be removed from your main navigation when you publish your page. The page still exists, but it does not show in the main navigation bar, exactly what we want.

Now we have somewhere to display our search results we can set up our header search bar. First place your site in edit mode, then click the search icon next to your site navigation.

Now click on the area Empty Sitewide Search Area from the context menu click on Add Block and from the blocks panel click on search, under the forms heading.

The Add Search panel will now appear, fill out the details as follows: Title Leave blank. Button Text Leave blank. Search for Pages Everywhere. Results Page Post results to another page. Click on the large blue Choose a Page button, and from the sitemap click on the "Search results" page you created in the previous section of this guide.

You can now click the blue Add button, you should now see a standard Concrete5 search bar on your site. It will look very basic and very ugly, lets remedy that. First click on the search bar you just added and click on Design & Custom Template

Now from the menu bar that appears click on Custom CSS Classes, Block Name, Custom Templates and Reset Styles (Cog icon), then from the dropdown under the heading Custom Template click on Modena Header Search then click the blue Save button.

This custom template has 2 purposes, by default Concrete5 search bars show search results directly underneath their search bar, this template does not, it allows you to show your results on a seperate page which is much more desirable. The second thing this template does is provide a more cosmetically appealing search bar styled to suit the theme.

You can now publish your page by clicking the pen icon on your Concrete5 edit bar, which will have a green background, and then by clicking the blue Publish Changes button.

You can now test your search facility, click on the search icon next to your navigation bar, then type a search term in the dropdown search bar, and hit enter, you should now be taken to your search results page with a list of results for your query.

Setting up site search with demo data installed

If you installed the demo data with your theme, all you will need to configure is the search results page.

To begin place your site in edit mode by clicking the Edit this page button on the concrete5 edit bar (Pen icon).

Then click on the search icon at the end of your navigation bar, your search bar will now drop into view.

Click on your search bar and from the context menu choose Edit Block

The Edit Search panel will now appear, scroll down to the heading Results Page and check Post results to another page the choose a page button will now appear.

Click on Choose a page and you will be taken to the sitemap, from the site map click on the page Search results.

You will now be taken back to the Edit Search panel, click on the blue Save button to save your settings.

You can now publish your page by clicking the pen icon on your Concrete5 edit bar, which will have a green background, and then by clicking the blue Publish Changes button.

You can now test your search facility, click on the search icon next to your navigation bar, then type a search term in the dropdown search bar, and hit enter, you should now be taken to your search results page with a list of results for your query.

Modena comes with a selection of options to customize your site with.

To access theme options, first click on the dashboard button on your Concrete5 edit bar.

Your Concrete5 dashboard panel will now appear, click on the heading Modena Theme Options

All the Modena theme options will now be revealed, the default settings page is the Site Settings which covers some general options you may wish to adjust. All settings come with a brief explanation of what they do. When adjusting settings please remember to click the green Save Settings button before navigating away from the page.

Page attributes give you the option to change certain things about a specific page, the setting of page attributes will only appear on that particular page and wont show site wide. Modena comes with its own set of page attributes for you to use.

To access page attributes first make sure you are on the page you wish to alter, as page attributes are specific to the page they are set on. First click on the Page Design, Location, Attributes and Settings button (Cog icon) on your concrete5 edit bar,

Next from the Page Settings panel, click on Attributes

Your view will now change to the page attributes screen, page attributes come under the headings of SEO, Navigation and Indexing, Jobs, Blog, Portfolio, and Other, Modena's attributes come under the Other heading. Below you will find a description of what each of Modena's page attributes do.

Using page attributes

Once you have identified a page attribute you wish to use, click on that attribute, it will highlight with a blue background.

The attribute will now appear on the right side of the screen ready for you to use, as shown below. fill in the page attribute as required and then click the green Save Changes button.

The content editor within Concrete5 gives you the option to add custom styles to certain elements, some of these styles are dependant on what element you are using in the editor, for example, a custom style for a heading tag, will only show in the editor when a heading tag is highlighted, trying to attach it to a paragraph tag would not work.

The custom style drop down can be located on the editor toolbar.

To apply an editor style, highlight a piece of text with your mouse, and then click on the Styles dropdown in the editor. A list of items will appear if the element you are using supports a custom style. In the image below you can see we have highlighted the words "This is a heading" and clicked on the styles dropdown, from that dropdown you can see we have a selection of colored underlines that we can apply to our heading.

Some items in the editor are not turned on by default, for example block quotes. To turn on these items you will need to access the dashboard, go to the following location to see all available options Dashboard > Systems & Settings > Basics - Rich Text Editor

Concrete5 comes with a powerful way to alter the look and feel of your site in the form of the customizer. The customizer can be used to alter the color scheme of your theme to suit your own branding.

To use the customizer first click on the Page Design, Location, Attributes and Settings (cog icon) on your Concrete5 edit bar.

Then from the Page Settings panel, click on Design.

From the Design menu click on Customize.

After clicking on the customize button, the customizer panel will open, here you can alter the color scheme of any part of your site, each part of your site has its own section, for example Header and Footer. You can also customise the look of all the blocks that come packaged with Modena.

We hope your experience of using Concrete5 and Modena will be a smooth one, but occasionally some things dont go according to plan, below are some of the more common hiccups that occur.

I am loading the theme with its demo data but my server times out before it completes

There is a lot of data being loaded and sometimes the server has a short execution timeout placed on it by your host, if you have access to your php.ini file increase your max_execution_time if you do not have access to php.ini contact your host who should be able to do it for you.

I am loading the theme with demo data but I get an error before it completes

An error at this stage of installation usually means that something in the demo data is trying to match up to something that is missing on your site. When you first install Concrete5 it is recommended to install the Concrete5 demo data, this way all pages such as the blog and portfolio pages, and things like topic trees are added in for you, on an empty install these things wont be there, and may cause issues when loading themes that come with demo data.

I have loaded the demo data and some areas are not full width like the demo site

Unfortunately Concrete5 import/export format does not currently import/export custom alterations to layouts, however this is easily changed and covered in detail in the section Advanced layout tips - Full width blocks.

The demo data is not an exact copy of the demo site

This is intentional, most users will not need all the pages that are present on the demo site, as they are just there to showcase individual blocks, the demo data is designed to give you a small site that you can add to, rather than having to delete dozens of pages you will never use. The demo data comes with a full copy of the home-page, about us page, portfolio page (with demo posts), blog (with demo posts), and a contact us page.

My search facility does not work

The Concrete5 search facility does need some manual configuration, even if you have installed demo data, please see the Setting up site search section for full details.

When a new update to your theme is issued, please complete the following steps to install it.

First download the updated theme and unzip the file. The unzipped folder will need to be uploaded to the root level packages directory in your Concrete5 install. You will need to access your Concrete5 install via FTP on your hosting account.

When you upload the theme your FTP software will warn you that a file with the same name already exists, confirm that you wish to overwrite the existing files.

Once you have uploaded your updated theme to the packages directory, log into your Concrete5 install and click on the Dashboard button, and click on Extend concrete5 The Add functionality page should now be telling you that you have an update to install.

Click on the Update Add-Ons button, and on the following screen confirm that you wish to update to the latest version by clicking Update Add-On

After a short while your theme should now update to the latest version.