Guide To Australian Shepherd Training & Care



Hello! I'm HD Fluid - your new premium template with custom graphic design! Please take the time to read this page before diving into your content transfer. It contains all the details you'll need to build pages exactly as you want, maximising your profit potential! Let's get stared :)

Australian Shepherd

Lorem Ipsum Dolor

Vestibulum a accumsan risus. Vivamus ornare auctor justo vitae accumsan. Aenean ligula arcu, sagittis et placerat viverra, luctus vitae lacus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum purus sit amet finibus vulputate. Nam porta bibendum libero. Vivamus tincidunt, ex non condimentum tempus, justo nulla iaculis arcu, id posuere sapien nisl quis erat. Nulla venenatis elit quis odio cursus fermentum. Sed quam erat, posuere in fermentum sit amet, convallis ut erat. Maecenas ex risus, sagittis eget felis quis, eleifend commodo erat. Morbi mi lectus, tempus a eros sed, eleifend pellentesque enim. Ut vulputate nunc non volutpat mollis. Mauris quis pulvinar dui, eu ultrices massa.

Fusce dictum varius elit ac lacinia. Phasellus in lobortis lectus. Quisque aliquam dictum mi, in fringilla ex auctor id. Pellentesque consequat massa eleifend, maximus sem vitae, sagittis tellus. Duis gravida arcu purus, sed consectetur arcu gravida eget. Phasellus nec ullamcorper dui. Donec venenatis consectetur iaculis. Nunc quis dolor accumsan, sodales ligula in, faucibus enim. Sed non euismod lorem, eu mollis lorem. Proin condimentum viverra velit, in mattis augue scelerisque at. In eget dui sit amet felis posuere ullamcorper vel id metus. In hac habitasse platea dictumst. Praesent iaculis nisl tortor, sed mattis tellus iaculis in. Donec fermentum molestie diam, vitae mollis libero lobortis et. Praesent sit amet faucibus urna. Cras eget nisi a urna tincidunt suscipit.

Australian Shepherd

Lorem Ipsum Dolor

Vestibulum a accumsan risus. Vivamus ornare auctor justo vitae accumsan. Aenean ligula arcu, sagittis et placerat viverra, luctus vitae lacus.

Vivamus gravida non orci in hendrerit. Morbi suscipit elit id dolor fringilla, sed placerat turpis malesuada. Integer ac nibh dui. Sed suscipit ipsum ac sem dapibus consequat et vel velit. Curabitur vestibulum pellentesque enim in posuere. Nunc maximus gravida dui, eget convallis libero laoreet a. Nullam auctor in nisi eget eleifend.

Donec eu mauris leo. Curabitur finibus ligula et mi mattis ullamcorper. Suspendisse non semper ligula, quis mattis est. Pellentesque quis tristique elit, et egestas sem. Ut commodo est vel dictum convallis. Pellentesque justo purus, iaculis id odio eget, suscipit efficitur ex. Etiam ullamcorper massa lectus, vel pellentesque neque aliquet ut. Donec a euismod arcu. Curabitur rhoncus ultricies dui, vitae finibus turpis auctor nec. Donec viverra semper turpis at dapibus. Morbi sollicitudin augue orci, nec fermentum risus volutpat hendrerit. Aenean venenatis bibendum gravida.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sagittis sem sit amet quam aliquet maximus. In dictum dui in semper molestie. Etiam fermentum porta arcu, in convallis neque pretium fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue pulvinar fermentum. Integer enim elit, laoreet tristique justo nec, maximus aliquet lectus. Maecenas eu rutrum urna. Curabitur ut auctor neque. Vestibulum sed sodales est. Maecenas ac mi non lectus condimentum finibus. Maecenas sit amet commodo dui. Pellentesque eget magna eget lorem fringilla cursus at vel sapien. Cras id viverra turpis, eget rutrum tellus.

Australian Shepherd

Nulla ullamcorper eros non neque vulputate rutrum.

Highlight Box Headline Quisque Tincidunt Laoreet

Quisque tincidunt laoreet ipsum, et dapibus tortor condimentum nec.

Maecenas sagittis est ut sapien sagittis elementum. Proin id eros non odio porta sagittis. Praesent id lobortis neque. Sed pharetra justo a purus eleifend, nec consectetur enim sollicitudin. Praesent turpis ligula, elementum ut scelerisque quis, accumsan sit amet odio. Maecenas at ultrices tellus, at pharetra tortor. Sed eleifend iaculis justo, sed scelerisque urna vulputate vitae. Vestibulum nisi eros, aliquam ut pretium sed, imperdiet id sem. Duis maximus, orci sed consequat tristique, ex nulla accumsan nibh, vel interdum eros augue nec neque. Maecenas eget ornare arcu. Maecenas non luctus risus, at ullamcorper odio. Vestibulum laoreet porta imperdiet.

Proin a ullamcorper sapien, vitae congue felis. Nulla ullamcorper eros non neque vulputate rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In non dolor id felis bibendum venenatis non eget purus. Morbi porta orci dignissim nulla fringilla, nec volutpat mi scelerisque. Nulla a hendrerit ante. Integer blandit eros at facilisis semper. Phasellus semper arcu tortor, sed tempor sapien ultrices ac. Duis pretium sodales dictum. Sed pretium ornare nisl, sit amet consectetur diam gravida nec. Sed ut ante ante. Suspendisse laoreet mauris tellus, ac consequat risus placerat quis.

Curabitur finibus eleifend libero, nec viverra dolor pulvinar a. Pellentesque a elit nec est facilisis sodales. Sed vitae ipsum mi. Fusce nec sagittis est. Quisque ut purus neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut laoreet elit et iaculis auctor. Suspendisse porttitor velit erat, quis sollicitudin dui luctus eu. Ut interdum lorem sit amet metus pellentesque, nec iaculis est congue. Vestibulum fringilla erat eu sem luctus semper. Morbi tristique nisi est, et fermentum nisl dapibus at. Curabitur ac ultrices nisl, ut cursus turpis. Aliquam nec orci sed diam tristique fermentum.

In et ante a diam facilisis venenatis. Donec enim ante, porttitor ut tempor vitae, bibendum vitae nisi. Cras eget sodales orci. Morbi imperdiet at diam ac rhoncus. Integer nec magna ut sem tempus volutpat lacinia id erat. Quisque viverra mauris vestibulum sapien mollis blandit. Phasellus tincidunt mollis libero, elementum feugiat enim eleifend nec. Quisque rutrum varius erat. Proin id lacus eu eros posuere luctus eu ac risus.

Aenean erat est, laoreet lobortis orci ut, posuere finibus lectus. Duis sed rhoncus metus. Phasellus diam elit, vestibulum eu massa quis, varius sagittis sem. Morbi imperdiet, neque eu feugiat tincidunt, sem leo sagittis arcu, ut interdum sapien sem sed tortor. Duis massa augue, feugiat sit amet scelerisque at, dapibus id enim. Aliquam at finibus turpis, commodo posuere sem. Suspendisse auctor ornare est sed lacinia. Cras tellus ipsum, sodales porta augue sit amet, bibendum efficitur massa. Ut rutrum efficitur nunc non ultrices. Vestibulum eget eleifend nisl. Suspendisse feugiat urna arcu, id aliquet leo mollis vitae. Praesent sagittis et neque consequat posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus porttitor magna, id venenatis odio efficitur at. Vestibulum vehicula magna tellus, at blandit mauris mattis in. Mauris sed consequat mi.


Caption: You don't need to watch this video.

This embedded video shows off the fact that Youtube videos in this template can figure out how big the user's screen is, and respond to fit. In fact, all the images on this page have been designed to respond to the user screen size in real time. This is the definition of fluid web design.

Fluid SBI TemplatesIn fact, go ahead now, resize your browser. Have a look at how this page responds to the new sizes. For instance, at smaller sizes, you'll notice that the sidebar on the right tucks neatly down underneath the main content column. You'll also see, if there's room, a special custom banner will appear in its place. The template will shrink seamlessly all the way down to 320 pixels wide - which is the minimum width of a smartphone held at portrait. Text will still be easy to read and user friendly. Zooming right out back to full 1080 high definition will display your high definition background in all its glory! Go ahead! I'll wait here. This is what will future-proof your business' greatest asset - your website.

Before we get carried away, let's have a quick look at the files included in your site directory: template-regular.shtml and template-noz-sidebar.shtml. The only difference is that one of the two templates has a sidebar, and the other has none. This sidebar-free template will be useful for sales pages which do better without distacting sidebars, and wide-margin content. The regular (sidebarred) template is the one you'll be using most often.

Your general procedure when building a page should be to open the template file and save as your desired page name, but then, you probably already knew that.Then you'll go through and make certain changes, as per the list below:

  1. Update your meta-tags (title, keywords, description) at the top of your source code.
  2. Enter your breadcrumbs, author name
  3. Insert your content, images, videos and banners.
  4. Update your Navigation Menu in support-files/z-topmenu.shtml
  5. That's it!


Will wide images spoil my fluid layout?

Mobile SBI TemplatesAll images can be set to be responsive. The picture to the right is set to be no greater than 60% of the column width. This is so that text doesn't get squashed too badly and become unreadable. There is another example of a picture (except left-aligned) further up the page.

This can be acheived by using the CSS class "x-rightalign" on the image in question. There is a list of other classes further down this page. Click on the picture to the right and depending on what HTML editor you're using, you'll be able to see that the class "x-rightalign" is set. This may sound difficult right now, but after you've made a couple of pages you'll soon see how straightfoward this is. Plus, knowing how to set CSS classes like this gives you much greater control of your website's layout.

How do I set CSS classes for my images and text boxes?

Dreamweaver: Right click on the image > CSS styles > Select style from list

Kompozer: Click on the image > Select style from dropdown list in the top left corner

Alternatively, you can just copy and paste elements from this template page, edit them, and use them as and where you see fit.


What CSS classes should I set for my images?

x-rightalign Right-aligns the image, making sure it behaves well on different viewports by making sure it never exceeds 60% of the page width (on large sizes) and expands to 100% on small screens.

z-leftalign Is identical to the above, except left instead of right.

v-fullwidth Makes the image the full width of the content column. It will fluidly respond to smaller viewports.

v-centered Center-aligns the image, placing it in the center of the content column.


Fluid SBI Templates

Class v-centered is useful for putting an image in the center of the frame.
This is great for "buy-now" buttons and banner boxes.


How do I edit the sidebar?

Your sidebar, and all other sitewide elements, can be edited from their respective files in the support-files folder. I've included a list of all these files and what they are for, below.

<--! All of these files have instructions at the top, in a comment within the code. These comments are ignored by web crawlers and have no impact on SEO.

Look out for the word CHANGE in each of these files, which is something you'll need to do as you create your pages. -->

Tip: You can remove any of these blocks from a single page by removing the line of code that calls them.

Example: You have an advertorial page on which you want no adsense at the top of the page. You would delete the line:

Guide To Australian Shepherd Training & Care

from the top of the page. That's it!

z-footer.shtml contains the footer information at the base of every page. It is mandatory to have the footer appear on each page.

I have included the recommended footer links, laid out in three columns. Please note the second line “SBI Website Design by Cre8ve Online” must remain as it is, this is a condition of the template licence! It helps us and makes sure the cost of this service can stay the absolute bargain that it is :)

You can see the pages listed on the footer, we recommend you create each of them to build professionalism and credibility for your website.

z-js.shtml contains javascripts that will load at the bottom of each page. It is invisible to the user and should be used for sitewide scripts that do not need to appear within the <head> tag. The scripts within this file all do something in the site, such as run your facebook or social widgets, Google analytics, fluid resizing and other functions. Don't edit unless you know what you're doing!

Tip: Pullout boxes (like this one) are great for adding a sidenote to your content. The diferent colour and separation gives the hint of being an aside, while the clean box style retains a magazine style layout for your website.

These boxes will automatically adjust to be the most readable on the user's viewport, so don't try to adjust their size!

z-recommended-foot.shtml allows you to put a sitewide banner at the foot of each page.

This box appears at the foot of each page, as a final upsell to whichever product is the most relevant to the article. It can be disabled by removing just one line of code, and edited once to affect each instance of this box sitewide. Like all included support files, you have the option of not showing this feature on any given page, simply by removing the code snippet that calls them. In this case, to remove your recommended foot banner from a page, you'd remove the line

Guide To Australian Shepherd Training & Care

Ask a Dog Veterinarian Now

We have partnered with JustAnswer
so that you can get an answer ASAP.

- simple!

You can also take the adsense block and place it here if you prefer, however we have found a product upsell to work best in this position. Your adsense code (responsive to various screen widths) can be found in the recommended-top.html file. You should use this code to maximise your adsense display size.

z-recommended-top.shtml contains responsive adsense blocks. These cannot be purely fluid due to the restrictions placed by Google's terms and conditions. So, if you have an adsense block in the recommended top block, and then you resize your browser, you may see the adsense block moving over on top of the side bar. There is nothing we can do about this until Google updates its terms. However, this is prime position for adsense so for now this is the best option we've got. If the terms change, you will get the fix in the form of a free upgrade which will be as simple as replacing (overwriting) one file on your website.

Alternatively, you can place a banner in this block, setting the image CSS style to "v-fullwidth" will make sure it stays at full width no matter what size the viewport.

Removing the Sidebar: Don't do it by removing the code! Since the sidebar mechanics are so complicated, removing this code will leave you with problems, causing you pain.

Instead, use the template file provided: template-nosidebar.html - this will give you a page with no sidebar and no problems!

z-sidebar.shtml contains your entire right sidebar. This sidebar will appear on the right and tuck neatly underneath the content column when the screen size is too small.

The sidebar comprises of multiple "blocks" - each 300 pixels wide and 250 pixels high. Some popular blocks are created for you already.

z-skyscraper.shtml contains a tall banner 160x800 which appears when there isn't enough room for the sidebar, but too much room to have the content column expand to the full width of the screen. This banner can be replace by any graphic of your choosing, so long as it's not wider than 160 pixels. For the moment, you should not place an adsense block here, because Google's terms say you cannot place adsense on a block that may not appear on a given viewport. I expect that Google will change these terms eventually, because there is enormous pressure from the web development community to do so.

z-topmenu.shtml contains your top menu. It is the form of a bulleted list - please keep it like this! It is required for the menu to work properly. Do not add any more than three first tier drop down menu lists, because they will not fit on the bar.

z-topsearchbar.shtml contains the searchbar at the top, as well as the menu activation button. Please ensure you are using your own Google publisher ID on this page.

z-tweetboxer.shtml contains the social widget that is (by default) included just once on each page, just underneath the H1 Header. Please include your small social buttons here.


HD Fluid for SBI

Setting class v-fullwidth creates a full sized image that will remain at the full width of this content column - ideal for mobile. icon

Guide To Australian Shepherd Training & Care

Ask a Dog Veterinarian Now

We have partnered with JustAnswer
so that you can get an answer ASAP.