Customizing header and footer

[Zsombor Nagy, modificado 7 Anos atrás.]

As a new user of Liferay 7 GA3 I do need some help, as there are no tutorials / documentation about theme customization.
What I learned this far:

• Possibilities of using Yeoman Generator and Gulp build system
• Creating a theme with Yo and build it with Gulp
• Understanding Freemarker template files

What I do not know:

• Anything else in general, regarding the customization and deployment

Because of this I'm writing to ask for guidance:

• In detailed steps and actual examples, how can I customize the header and footer of the template and then deploy this to use in Liferay portal?
• Can I just use Bootstrap 3 tags in the templates or should I download the source of Bootstrap?
• With which files should I mess with and which not?
• Additional, layout related: can I use Bootstrap in tpl to offset a div by 1 span? Example: a column of a row occupies 4 units but I want a 1 unit offset

Thank you really much for your kind help!

[Zsombor Nagy, modificado 7 Anos atrás.]

As no one replied I researched the work of things by myself.
If someone would have similar or the same questions, here are the answers:

• In order to customize any theme / css, after building the theme structure with gulp, you should copy all of the files you want to edit into the src folder. The concept works just as the _diffs folder technique from earlier Liferay versions.
• The usage of Bootstrap and Lexicon works just fine, so it is advised.
• Feel free to mess with anything, but make sure to create backups if you have something important in an earlier edit.
• You are able to use bootstrap with tpl files, so regarding the example you can do something like this:
  [indent]<div class="portlet-column portlet-column-first col-md-8" id="column-2">
  <div class="portlet-column portlet-column-last col-md-3 col-md-offset-1" id="column-3">[/indent]
  In the example above I gave only the starting tags so if you do something like that, it should work out