Specs For The Customisations

It is a good practice to do your customizing using Site Designer. Only when you need to do things, or target elements with CSS that are not available in Site Designer, should you write or use custom CSS.

That way, you won't run into issues later on, where you make a change in Site Designer and it does't work. Perhaps change heading size or color, forgetting that you actually set those up with custom CSS months earlier. Just remember, custom CSS can and will over-ride Site Designer CSS, but S.D will not over-write the custom CSS.

So with that in mind, what you see in this example, is the stock standard DOG DAYS template. The only changes made in Site Designer being my header added, a logo added, slight background color to the nav column, and the all caps of website name changed to Capitalize with font size reduced.

Other than that, all the differences that you can see are things that could not be achieved using Site Designer, and have been done using custom written CSS.

Below is a comparison of the default template, and with the customisations.

PageWrapper

Default: Full screen width to a max width of 1600px.

Custom: Full 100% screen width, allowing header and footer backgrounds to stretch full screen width on large monitors.

Header

Default: Same as the default PageWrapper. Wide screen or high resolution monitors (for example, 1920px) would see 160px of blank space either side of the template.

Custom: Same as the custom PageWrapper, full 100% width, regardless of monitor size or resolution.

Header Background and Logo

Header Height: The default header height is almost full screen height. That is caused by a large amount of padding at the bottom, as well as large text for the WebsiteName and Tagline.

This has been altered with custom CSS. Minimum height is now dictated by the size of the text and the amount of top padding given to the header. You could get as little as perhaps 80px in height if you really wanted to. Or even no header at all if you left the WebsiteName and Tagline fields blank and didn't use a logo.

The image uploaded as the header is 1920px wide, by 260px tall. However, not all of that height is displayed in the demo. From the top of the navbar to the bottom of the header, the height is around 230px. However, there is 50px padding at the top of the header (so the navbar doesn't cover the top of the logo), meaning that approximately 180px of the image height. is being used.

If I wanted to see the full 260px of the header image, that is easily done. In the custom CSS, there is a margin-bottom for the tagline. It is set to zero, but if that was changed to a px value, then the header would increase in height by that amount.

Header background used is 1920px wide, but you could use any width you wanted, choose a repeating BG, or even just a plain color. The background is uploaded to the WRAPPER background. This means the actual main header bg can be kept for the logo.

The Logo is 130px x 130px, although you can go out to 200px if you wanted. This is uploaded in the normal way that you place a header image, and the Site Designer settings should be no-repeat, transparent BG color (so the wrapper header image can show through), and size is set to auto.

The logo is made clickable by an absolute positioned div (150px square) which is linked to the homepage. Very easy to add, and how to do it is shown on the instructions page.

WebsiteName and Tagline

Default: Set to about 33% width which scrunches the text to the left, and also tends to get in the way when viewed on small screens.

Custom: The width is the full header width and centered, meaning that text can sit on one line. On smaller screens, the text become right aligned so that the logo isn't covered.

You don't need to do anything to get these things happening. Just type in your words in the WebsiteName and Tagline fields, and set font family, size and color if required.

Navbar

Default: This is placed either at the top or bottom of the header, with a semi-transparent black background. The navbar will scroll with the page.

Custom: Navbar is placed at the top of the page, and is fixed in place. It will still scroll on older browsers that don't support the CSS of "sticky". Menu is not (and should not be) sticky on mobiles. Transparency has been changed to fully opaque.

Content and Nav Columns

ContentWrapper: This is a div that encloses both content and nav columns. It is set to be width:1200px; and max-width:100%; and has 10px padding.

This means the content area of both columns will be at most 1200px wide, but will only ever go out to full width of the screen. So is somebody was using a 1024px monitor, that is how wide the template would be.

If you prefer a wider template, then you can increase the width from 1200px to whatever you like. I suggest no wider than 1400px otherwise line length is getting too long.

This column will always be at least 300px wide (plus padding), meaning that it is suitable for MediaVine, or the larger sized Google ads.

Because the column is fixed wider than default, it means that layout looks best if the columns change to tablet/phone layout at a larger size.

So, the breakpoint of 980px is where the columns will become block level and full width, although the top nav will remain as desktop view until the normal width of 768px. At that time, the nav changes to the mobile view button.