Coffee Bean

Documentation

 

Coffee Bean Documentation

Installation

Download the coffee_bean.zip file to the packages folder in the root of your concrete5 installation.

Go to Dashboard > Install and install the Coffee Bean package.

To activate theme, go to Dashboard >Themes and activate the Coffee Bean theme.

Logo

The site name is used automatically in the logo area. If you like how it looks you don’t need to change it.

If you would like to use an image instead, you can by clicking on Edit > Add to Sitewide Logo, then choose Add Block > Image and select the image you would like to use.  You don’t need to select a link as the image will automatically link to the home page. The image should be approximately  40 px high. If you use a larger image, you may find that the dropdown menu does not appear in the correct place.

If you would like to use your own text, you can by clicking on Edit > Add to Sitewide Logo, then choose Add Block > Content.

Top Navigation

The navigation menu at the top will populate itself.  If you add top level pages, their links will appear automatically in the menu. To add submenus, go to Dashboard > View Full Dashboard > Full Sitemap. First, you will need to create a page that will be the title of the dropdown menu. This will not have any content on it as when the user clicks on it, the dropdown menu will show but the site will not navigate anywhere. For example, if you wanted to have a dropdown list with your separate menus, you could choose the name “menu” as the top-level name. So you would click on “Home” > Add Page and create a page called “Menu”. Then you would click on the “Menu” page > Add Page and create a page for your first submenu item, e.g. “menu 1”. You would continue to add submenu items until finished. Then if you go back to your website, you will see that the top-level item is “Menu” and if you click on it, a dropdown menu shows the submenu items that you have added.

Banner Image (Jumbotron Coffee Bean Image)

The banner image should be approximately 1500px by 400px in order to fit correctly as a full width banner image.  You need to select a banner image for each page. It can be the same one, but it has not been coded to be a global area so that you can have a different image on every page if you would like. You can use the coffee cup banner image that we have included in the theme if you like (in the images folder), or choose your own.


There are a couple of different ways to add a banner image. You can add a banner image from the page in Editing mode. Go to Properties > Custom Attributes, scroll down and select “Jumbotron Coffee Bean Image” on the left.  Scroll back up, select “choose file” and select the image that you would like to use. You may need to browse for and upload the image that you are planning to use. You will need to repeat this step on every page.  You can also add the banner image by navigating to Dashboard > Full Site Map and clicking on a page. You can then select Properties > Custom Attributes and select “Jumbotron Coffee Bean Image”.

Banner Text (Jumbotron)

To add text or images over the banner area, put your website in “Edit” mode and click “Add to Jumbotron”. From there you can add images or text, or whatever. This is not a global area, so you will need to do this for every page. If you want to add different content to each page, just repeat for every page. If you want to use the same content, you can just add your content to clipboard by clicking on it and selecting “Copy to Clipboard” and then on each page, click on “Add to Jumbotron” and choose “Paste from Clipboard”.
In our demo, we used the style “handwritten” from the Styles dropdown menu and chose white as the font colour in the text editor. We also chose center alignment from the text editor.

Blocks

This theme comes with eight custom blocks: Coffee Bean Thumbnail Burlap, Coffee Bean Menu Start, Coffee Bean Menu Heading, Coffee Bean Menu Row, Coffee Bean Menu End, Coffee Bean Button, Coffee Bean Button Handwritten and Image Responsive. The instructions for using the first five blocks are under the “Home Page”  and “Menu” sections of this documentation.

Buttons

If you would like to use a button for a link to another page in your site, you can use the “Coffee Bean Button” or “Coffee Bean Button Handwritten” blocks. To use these, simply click on an editable area, choose “Add Block”, then either “Coffee Bean Button” or “Coffee Bean Button Handwritten”.  Click on “Select Page” and choose the page you wish the link to navigate to. Under “Link Text” put the text that you want to appear on the button.  Click “Add”.

Alternatively, if you would like to use any of the Bootstrap styling options for buttons, you can choose HTML when you add a block, and input your own HTML. The Bootstrap CSS files are included in this package, and have not been altered. See Bootstrap documentation for guides to their buttons http://getbootstrap.com/css/#buttons

Image Responsive

In Bootstrap v3, images do not scale automatically with browser width. If you would like your image to resize automatically when the browser window gets smaller, then you will need to either use the block “Image Responsive” or use the class “img-responsive” in HTML view. Please see Bootstrap documentation for guidance http://getbootstrap.com/css/#overview-responsive-images
If you choose to use an image using the Image Responsive block, simply click on an editable area, choose “Add Block”, then either “Image Responsive”.  Choose the image and click “Add”.

Footer

There are 3 sitewide footer areas: Sitewide Footer 1, Sitewide Footer 2, and Sitewide Footer 3.

  1. Sitewide Footer 1 contains copyright information. You do not need to do anything to this area, but you can add content below if you want.
  2. Sitewide Footer 2 can be used to add whichever content you like, including links.
  3. Sitewide Footer 3 can contain content appropriate to your site. In the case of the demo, we have included social icons. To include social links here, follow these steps:
    1. Click on “Add to Sitewide Footer 3”.
    2. Click on “add block”.
    3. Choose “image”.
    4. Select “choose image” and find the appropriate image. We have included a facebook.png and twitter.png file for you to use if you like.
    5. Choose image links to: “External URL”
    6. Enter the URL in the appropriate box.
    7. Put in alt text, e.g. “link to Facebook page”
    8. Click on “Add”.
    9. Continue for all of your social icons and links.
  1. Headings in the footer area.  You can add headings in the footer area if you like.  Click on the areas and go to “Add Block”. For the demo, we used “heading 4” format.

Specific Page Types Home Page

There are several areas for content, including “top content”, “feature 1”, “feature 2”, “main”, “main 2”, “main 3”.

  1. Top Content.

We styled top content using a <h2> heading and <p class=”feature> . See below:

<h2>Responsive Concrete 5 Theme</h2>

        <p class="feature">Built with Bootstrap, this Concrete 5 theme is easy to use to create websites that smoothly adjust to fit different browser sizes.</p>

  1. Feature 1.

 

We styled “feature 1” using a <h3> heading and <p class=”feature>. See below:

<h3>Fixed Navigation</h3>

        <p class="feature">The top navigation stays in place!</p>

  1. Feature 2.

 

We styled “feature 2” using a <h3> heading and <p class=”feature>.

  1. Main Areas: Main, Main 2 and Main 3.

 

In these areas, we have used thumbnails. You don’t have to put thumbnails here, but if you want to, this is how to do it.

a.       Click on “Add to Main” block.

b.      Select “Add Block”.

c.       Choose “Coffee Bean Thumbnail Burlap”.

d.      Under the heading “image”, choose your image. In the demo we have used 300px by 200px for this area. Please note that you can use the thumbnails in different areas of the site if you like, but depending on the size of the area, your image will need to be larger or smaller, see Bootstrap documentation for guidance http://getbootstrap.com/components/#thumbnails

 

e.      Under the image choose the alt text you would like to use for people who cannot view the images.

f.        Under the heading “heading”, choose which heading you would like to use.  Do not use any tags, the styles and tags are already coded.

g.       Under “description”, put a few lines of content.

h.      Under “button” you will see a line saying “Select Page” click on this and select which page you would like to direct people to.  Below this, it says “Link Text”. Here you should put whatever text you would like to see in your button, e.g. “read more” or similar.

i.         Click on “Save”.

j.        Repeat for areas Main 2 and Main 3.

Menus

When you add a menu, you can select the appropriate page from page types. For example, if you add a page using the full sitemap, you will be asked to select a page type. You can choose from Menu One Column, Menu Two Columns and Menu Three Columns.  Once you’ve selected your page and are on the page in edit mode, you can add your menu using blocks or HTML.

Menu – using blocks

  1. Add a menu title.            
    1. Click on “Add to Menu Title” block, then change the title to whatever you would like to call it. In the demo, we selected the format “Heading 2”.
  2. Add a submenu title.
    1. Click on “Add to Column 1 Title” block.
    2. Select “Add content”.
    3. Type in heading that you want to use for that column.
    4. Highlight the text and select whichever styles and format you would like. In the demo, we selected the format “Heading 3” and the style “handwritten” from the dropdown menus.
    5. Click on “Add” button.
    6. Repeat for the other columns.

3. Add your menu items.

    1. Click on “Add to Menu Column 1”.
    2. Click on “Add Block”.
    3. Select “Coffee Bean Menu Start”. This step is important! It is the code that says that the content is a table. When you add this block, the text “Menu Start” will appear, but this is just a guide and when you publish your edits, this text will disappear.
    4. Click on “Add to Menu Column 1” again.
    5. Click on “Add Block”.
    6. Select “Coffee Bean Menu Row”.
    7. Enter the item name in the “item name” field.
    8. Enter the item description in the “item description” field, or leave it blank if you do not want a description.
    9. Enter the item price in the “item price” field. 
    10. Click “Add” button.
    11. Repeat for other menu items until menu is complete.
    12. Once all items have been added, click on “Add to Menu Column 1”.
    13. Click on “Add Block”.
    14. Select “Coffee Bean Menu End”. This step is important! It is the code that says the table is finished. When you add this block, the text “Menu End” will appear, but this is just a guide and when you publish your edits, this text will disappear.

 If you need to add subheadings to your menu, follow the below steps (please note, this step must be done before you select “Coffee Bean Menu End”, not after).

    1. Click on “Add to Menu Column 1”.
    2. Click on “Add Block”.
    3. Select “Coffee Bean Menu Heading”.
    4. Enter the heading name you wish to use.
    5. Click “Add” button.

 

Menu – using html

  1. Create titles as above.
  2. Add your menu items.
    1. Click on “Add to Menu Column 1”.
    2. Click on “Add Block”.
    3. Select “HTML”.
    4. Input your html table here. In the demo, we used the following code:

 

<table class="menu">

   <tr>

            <td class="item_name"><h4>Full Breakfast</h4></td>

            <td class="item_price">&pound;3.80</td>

          </tr>

               <tr>

            <td class="item_name"><h4>Muffin of the day</h4><p>See our board for specials.</p></td>

            <td class="item_price">&pound;2.50</td>

          </tr>

          <tr>

            <td class="item_name"><h4>Toast</h4></td>

            <td class="item_price">&pound;1.60</td>

          </tr>

</table>

Please use the same classes if you would like to use the styling that we have created.

You will see that the first <td> tag is for the item name and has a class of “item_name”. The item is enclosed in a <h4> tag. If you want to put a description of the item, just enclose it in <p> tags after the </h4> tag, for example:

            <td class="item_name"><h4>Toast</h4><p>With your choice of preserves on white, brown or granary.</p></td>

The next <td> tag is for the item price and has a class of “item_price”.

You will need to wrap the two <td> tags in <tr> </tr> as illustrated above.

Gallery

This page is for displaying any images that you have in a grid. It uses Bootstrap thumbnail classes to ensure that the images will align nicely and the images will stack on top of each other when viewed on a mobile phone.  If you decide to use this page, you will need to use images of the same dimension as in the example.  You will need one 550px x 270px image, two 360px x 270px images, two 260px x 270px images, and four 160px x 120px images. When you add the images to make the grid you MUST do so using the “Image Responsive” block, otherwise your images won’t be responsive to changes in the browser window width and will “break” the grid layout.