Change section headers

[shaiss]

I downloaded the theme and am able to customize the items. However, I don't want to call the section "Portfolio" but instead "Projects".

I can change the sections title:
portfolio:
title: Projects

However, if I rename it in the sections array, then link in the nav no longer works:
sections:
- name: Projects

If I change the array from portfolio to project:
projects:
title: Projects
the page doesn't load at all.

What is the proper way to rename sections & nav as well as adding new sections entirely? Thank you!

Note: I have read through http://sysgears.com/articles/creating-a-custom-website-or-theme-with-grain/ as well as other getting started document and still can't figure this out.

Thank you,

[dmitriypdv]

The theme was updated to make the section renaming more straightforward than it was before.

Now, you could rename a section by simply changing the section title, its navigation name, and the corresponding navigation item in the 'sections' array:

...
sections:
    - name: Contact   # navigation item
...
contact:
    title: Contact Me # the section name on the page
    nav_name: Contact # navigation name, should match the item in the 'sections' array,
# so Grain could figure out which nav item corresponds to which section

How it could be done before and how the sections are defined in the theme?

Theme markup is defined by the files that are located in the /theme/layouts and /theme/includes project directories. Since the theme is represented by a single page, there is only one 'default' layout in the /theme/layouts. And this layout simply inserts all the page components from the /theme/includes directory:

    ${include "navigation.html"}
    ...
    ${include "portfolio.html"}
    ${include "about.html"}
    ${include "contact.html"}
    ...

This way, the portfolio section is specified in the /theme/includes/portfolio.html

<section id="portfolio"> <!-- section id that is used for navigation -->
    <h2>${page.portfolio.title}</h2>
    ...
</section>

and the site navigation is specified in the /theme/includes/navigation.html

...
<% page.sections.each { Map section ->
    def id = "#" + section.name.replace(" ", "-").toLowerCase()
%>
    <!-- the navigation links are created from the 'sections' array -->
    <a href="${id}">${section.name}</a>
<% } %>

As you can see from the code above, in addition to changing the portfolio.title and updating the sections array, the id of the portfolio section tag in the /theme/includes/portfolio.html template had to be also set to the new value:

<section id="projects">
    ...
</section>

How to add an entirely new section?

To add a new section, you may just put the file with the section markup to the /theme/includes directory (for example /theme/includes/services.html), and then include it into the default layout:

    ${include "portfolio.html"}
    ${include "services.html"}
    ${include "about.html"}
    ...

Here, the services section will be rendered between the portfolio and about sections of the page.

[shaiss]

Awesome! I'll give this a try and post back the results!

[shaiss]

I renamed the Portfolio section to stuff:
sections:
- name: Stuff
- name: About
- name: Contact
portfolio:
title: Stuff
nav_name: Stuff
projects:

While the navigation works as expected, the CSS breaks and I get a magnifier glass above the portfolio item.
https://www.dropbox.com/s/q3lghc2hqhle7z5/magnifying%20glass.PNG?dl=0

Did I miss something?

[dmitriypdv]

Thanks, good catch! Now the styles are applied properly to the renamed sections.

[shaiss]

Awesome! renaming works as expected now. I'll try adding a section and report back shortly!

[shaiss]

new section works as described! Thank you!