inactive-regions

Inactive Regions

We include a number of "inactive" regions that are not used by default, but can be taken advantage should you need. This includes custom component, misc scripts, themed object, and google analytic regions.

Tips


Instructions

Read Me First

Shared Library Components

Most of the components in your pages such as the (navbar), (website name), (tagline) are common to all web pages in your template. Instead of creating a navbar for each page, we created one navbar and share that componnent with all the pages. This is called a Library page or Include page. This makes the task of updating common elements in the template pages much faster as you only need to update the component once, to update all the pages in your template.

Components located inside the ( Library / shared ) folder, are included in all your pages.

Components located inside the ( Library / common ) folder, are included in
certain types of pages only, but can be ‘inserted’ into any page if preferred.

Your web editor provides a snippet of code that ‘embeds’ the content of the Library page, into your web pages. As you update then ‘save’ the content of the Library page, the embedded code is updated in any web pages where the Library component is embedded into.

This is one of the reasons that the Defining or Opening of the site, is critical. If the site is not Defined or Opened correctly, the web editor will not ‘connect’ or ‘link’ the Library Assets ( pages ) to the embedded code within the web pages of your template. If that happens, any changes you make to the Library pages will not be applied to your web pages UNTIL you Define / Open the site correctly ( and with Micorsoft editors, make sure the Site Settings are enabled ).

publishing NOTES:

Once your website has been published to your web server, any changes or updates to your Library pages after that, will require you to publish ALL your pages. Library pages ONLY serve to update the embedded code within your local web pages. Library pages will not update the pages once on the server. You must ‘re-publish’ your web pages when you make a change to your Library pages. This is how your web editor functions. The template will do what ever the web editor allows it to do, if it allows for server side updates we’d make that happen, unfortunately they don’t so you’ll need to publish your pages upon each change to a Library page. However, you still save A LOT of time, by not having to udpate each page individually, and publishing only takes a few minutes at most.

Hiding or removing components

You can hide or remove a shared Library component in one of 2 ways. Through the stylesheet, or you can manually remove it from the page.

By removing through the stylesheet, the component will be removed from ALL pages linked to that stylesheet and you can easily put it back later on.

By removing from the page directly, you would need to do this on each page you want it removed from, and it’s gone for good. The only way you can get it back is to copy the code from a new page, and paste it back in.

The advantage of removing through CSS is you save time, and you can temporarily remove components, and easily put them back when you’re ready to include them. The disadvantage is that code will always be in the web page, adding to the over all ‘file size’ to some degree. But we are talking about just a couple of kb at most. The code is already ‘streamlined’ and a few extra lines will not really affect the pages load times.

The advantage or removing the components manually from each page, is it reduces the file size of the page overall, increasing the page load times (slightly – you’d probably never notice without an accurate stopwatch). The disadvantage is you will need to remove from each page manually, and putting it back later on, requires even more work than that.

I prefer to remove things via the CSS to start with, and IF page load times becomes an issue, then start to remove any components that are not in use.

Hide / remove via CSS

  1. open the Site / styles / styles.css style sheet
  2. you’ll see your components listed in the ( :: header components ) section
  3. to remove a component just add the following attribute to the stylevisibility:hidden; display:none;
  4. example, to remove the social icons, you would add the ( visibility:hidden; display:none; ) as in #social-icons {position: absolute; top: 106px; left: 30px; visibility:hidden; display:none;}

Hide / remove manually

To remove a component manually, just open your page, switch to code view. Scroll down the page, all components are ‘commented’ with an opening and closing comment tag.

Select the comment tags, and everything in between with your cursor, and then just Delete.

repositioning components

Shared Library component are positioned absolutely via the linked stylesheet. This allows the end user to place the components in the page for both Desktop / tablet AND mobile devices. The Bootstrap framework includes the responsive capabilities required by todays web browers and mobile devices. To help our members ( both new and experienced ) we’ve positioned most of the shared components using an Absolute styleing. This allows the end user to place the componetns on the page, exactly where they want them to go. A web developer building a site from scratch, can design a website for both desktop and mobile devices, allowing the Bootstrap framework to position the content as the page varies in size. They can do this because they know ahead of time what size to build their components, and they can also make multiple graphics to fit different device resolutions.

As we don’t know what your site will look like when it’s completed, the best option is to provide the tools that will help you position your components for both Desktop computers / tablets, and mobile devices. Using the best of both worlds… the bootstrap responsive framework for the content and footer sections, and absolute CSS positioning for the header (shared) components.

You can tweak the position of your component via the linked stylesheet.

via CSS

  1. open your Site /styles (folder)
  2. open the linked stylesheet
  3. locate the component you want to re-position
  4. each component includes a ( top ) and ( left ) or ( right ) pixel position
  5. to move the component further from the top of the page, increase the ( top ) pixel number
  6. to move the component further or closer to the ( left or right ) side of the page, increase or decrease the pixel numbers

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/SL8z5F3sXpQ

Inactive Library Components

You’ll find several pages within your ( Library / shared ) folder that all begin with an underscore, example

__custom-component1.htm

__custom-component2.htm

__custom-component3.htm

__google-analytics.htm

__misc-scripts1.htm

__misc-scripts2.htm

Pages that start with the ( __ ) are Library pages that have been embedded into your template pages, however the content of these Library pages is NULL or BLANK.

Although the contents of the Library pages are blank, you can quickly add some content, images, scripts or coding … and have it applied to all your pages instantly. Great if you want to add anther logo image into the header of your page, or quickly add some Google analytics code into the bottom of your pages.

You can position the contents of the components through your CSS style sheet, just as you would for any of the visible components.

Custom Components 1/2/3

custom components 1-3

In this tutorial, we’ll demonstrate how to add some content to your custom component pages, and position that content in your pages through the styles.css stylesheet. As there are an unlimited number of things you can add to your custom component Library page, we’ll use a video demonstration to show you a few of the more popular options.

  1. Your template includes 3 custom component pages.
  2. The custom components are embedded into the ‘header’ area of your web pages, so any content added to these pages will be displayed at the top of your page.
  3.  Once applied to your web pages, you be able to edit the styles.css stylesheet to position the new content exactly where you want it to go.

Google Analytics

In this tutorial, we’ll demonstrate how to add some Google Analytics coding to your template page by way of the already embedded Google-analytics Library page. You template includes a Google analytics Library page, just copy the Google analytics code from your Google account into this Library page. Keep in mind, this will be applied to All pages in your site. If you only want to track certain pages, you’ll need to manually add the code into the bottom of your web pages to be tracked.

  1. short description of topic ( learn more )
  2. short description of topic ( learn more )
  3. short description of topic ( learn more )

Misc Scripts 1/2

In this tutorial, we’ll demonstrate how to add scripts to your web pages quickly by use of the misc-scripts Library pages. We’ve also include 2 Library pages for misc. scripting. These are special in that they are located at the very bottom of your web pages AND they are not visible to your visitor. Tracking scripts would be one type of script but there are many other types of things you can add here and not have shared with your website visitors.

 

Shared Library Components

Most of the components in your pages such as the (navbar), (website name), (tagline) are common to all web pages in your template. Instead of creating a navbar for each page, we created one navbar and share that componnent with all the pages. This is called a Library page or Include page. This makes the task of updating common elements in the template pages much faster as you only need to update the component once, to update all the pages in your template.

Components located inside the ( Library / shared ) folder, are included in all your pages.

Components located inside the ( Library / common ) folder, are included in
certain types of pages only, but can be ‘inserted’ into any page if preferred.

Your web editor provides a snippet of code that ‘embeds’ the content of the Library page, into your web pages. As you update then ‘save’ the content of the Library page, the embedded code is updated in any web pages where the Library component is embedded into.

This is one of the reasons that the Defining or Opening of the site, is critical. If the site is not Defined or Opened correctly, the web editor will not ‘connect’ or ‘link’ the Library Assets ( pages ) to the embedded code within the web pages of your template. If that happens, any changes you make to the Library pages will not be applied to your web pages UNTIL you Define / Open the site correctly ( and with Micorsoft editors, make sure the Site Settings are enabled ).

publishing NOTES:

Once your website has been published to your web server, any changes or updates to your Library pages after that, will require you to publish ALL your pages. Library pages ONLY serve to update the embedded code within your local web pages. Library pages will not update the pages once on the server. You must ‘re-publish’ your web pages when you make a change to your Library pages. This is how your web editor functions. The template will do what ever the web editor allows it to do, if it allows for server side updates we’d make that happen, unfortunately they don’t so you’ll need to publish your pages upon each change to a Library page. However, you still save A LOT of time, by not having to udpate each page individually, and publishing only takes a few minutes at most.

Hiding or removing components

You can hide or remove a shared Library component in one of 2 ways. Through the stylesheet, or you can manually remove it from the page.

By removing through the stylesheet, the component will be removed from ALL pages linked to that stylesheet and you can easily put it back later on.

By removing from the page directly, you would need to do this on each page you want it removed from, and it’s gone for good. The only way you can get it back is to copy the code from a new page, and paste it back in.

The advantage of removing through CSS is you save time, and you can temporarily remove components, and easily put them back when you’re ready to include them. The disadvantage is that code will always be in the web page, adding to the over all ‘file size’ to some degree. But we are talking about just a couple of kb at most. The code is already ‘streamlined’ and a few extra lines will not really affect the pages load times.

The advantage or removing the components manually from each page, is it reduces the file size of the page overall, increasing the page load times (slightly – you’d probably never notice without an accurate stopwatch). The disadvantage is you will need to remove from each page manually, and putting it back later on, requires even more work than that.

I prefer to remove things via the CSS to start with, and IF page load times becomes an issue, then start to remove any components that are not in use.

Hide / remove via CSS

  1. open the Site / styles / styles.css style sheet
  2. you’ll see your components listed in the ( :: header components ) section
  3. to remove a component just add the following attribute to the stylevisibility:hidden; display:none;
  4. example, to remove the social icons, you would add the ( visibility:hidden; display:none; ) as in #social-icons {position: absolute; top: 106px; left: 30px; visibility:hidden; display:none;}

Hide / remove manually

To remove a component manually, just open your page, switch to code view. Scroll down the page, all components are ‘commented’ with an opening and closing comment tag.

Select the comment tags, and everything in between with your cursor, and then just Delete.

re positioning components

Shared Library component are positioned absolutely via the linked style sheet. This allows the end user to place the components in the page for both Desktop / tablet AND mobile devices. The Bootstrap framework includes the responsive capabilities required by today’s web browsers and mobile devices. To help our members ( both new and experienced ) we’ve positioned most of the shared components using an Absolute styleing. This allows the end user to place the components on the page, exactly where they want them to go. A web developer building a site from scratch, can design a website for both desktop and mobile devices, allowing the Bootstrap framework to position the content as the page varies in size. They can do this because they know ahead of time what size to build their components, and they can also make multiple graphics to fit different device resolutions.

As we don’t know what your site will look like when it’s completed, the best option is to provide the tools that will help you position your components for both Desktop computers / tablets, and mobile devices. Using the best of both worlds… the bootstrap responsive framework for the content and footer sections, and absolute CSS positioning for the header (shared) components.

You can tweak the position of your component via the linked style sheet.

via CSS

  1. open your Site /styles (folder)
  2. open the linked stylesheet
  3. locate the component you want to re-position
  4. each component includes a ( top ) and ( left ) or ( right ) pixel position
  5. to move the component further from the top of the page, increase the ( top ) pixel number
  6. to move the component further or closer to the ( left or right ) side of the page, increase or decrease the pixel numbers

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/9DKGcMBYSi4

Inactive Library Components

You’ll find several pages within your ( Library / shared ) folder that all begin with an underscore, example

__custom-component1.htm

__custom-component2.htm

__custom-component3.htm

__google-analytics.htm

__misc-scripts1.htm

__misc-scripts2.htm

Pages that start with the ( __ ) are Library pages that have been embedded into your template pages, however the content of these Library pages is NULL or BLANK.

Although the contents of the Library pages are blank, you can quickly add some content, images, scripts or coding … and have it applied to all your pages instantly. Great if you want to add anther logo image into the header of your page, or quickly add some Google analytics code into the bottom of your pages.

You can position the contents of the components through your CSS style sheet, just as you would for any of the visible components.

Custom Components 1/2/3

custom components 1-3

In this tutorial, we’ll demonstrate how to add some content to your custom component pages, and position that content in your pages through the styles.css stylesheet. As there are an unlimited number of things you can add to your custom component Library page, we’ll use a video demonstration to show you a few of the more popular options.

  1. Your template includes 3 custom component pages.
  2. The custom components are embedded into the ‘header’ area of your web pages, so any content added to these pages will be displayed at the top of your page.
  3.  Once applied to your web pages, you be able to edit the styles.css stylesheet to position the new content exactly where you want it to go.

Google Analytics

In this tutorial, we’ll demonstrate how to add some Google Analytics coding to your template page by way of the already embedded Google-analytics Library page. You template includes a Google analytic s Library page, just copy the Google analytic s code from your Google account into this Library page. Keep in mind, this will be applied to All pages in your site. If you only want to track certain pages, you’ll need to manually add the code into the bottom of your web pages to be tracked.

  1. short description of topic ( learn more )
  2. short description of topic ( learn more )
  3. short description of topic ( learn more )

Misc Scripts 1/2

In this tutorial, we’ll demonstrate how to add scripts to your web pages quickly by use of the misc-scripts Library pages. We’ve also include 2 Library pages for misc. scripting. These are special in that they are located at the very bottom of your web pages AND they are not visible to your visitor. Tracking scripts would be one type of script but there are many other types of things you can add here and not have shared with your website visitors.