Theme Info
|
Weebly Theme: Clean Lines
|
This theme was tweaked to support a header slideshow. Some free Weebly themes support a header slideshow, others don't.
In main-style.css, change:
and in the page html:
|
Original short-header.html layout:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body class='short-header wsite-theme-light'>
<div id="wrapper">
<div class="bg-wrapper">
<div id="header">
<div id="sitename">{logo}</div>
</div>
<div id="navigation">{menu}</div>
<div class="banner-wrap wsite-background"></div>
<div id="content-wrapper">
<div id="content">{content}</div>
</div>
</div>
<div id="footer">
<div id="footer-content">{footer}</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body class='short-header wsite-theme-light'>
<div id="wrapper">
<div class="bg-wrapper">
<div id="header">
<div id="sitename">{logo}</div>
</div>
<div id="navigation">{menu}</div>
<div class="banner-wrap wsite-background"></div>
<div id="content-wrapper">
<div id="content">{content}</div>
</div>
</div>
<div id="footer">
<div id="footer-content">{footer}</div>
</div>
</div>
</body>
</html>
Tweaked short-header.html layout:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body 'short-header wsite-background wsite-theme-light'> /* add 'wsite-background' here */
<div id="wrapper">
<!-- <div class="hg-wrapper"> --> /* comment-out this <div> */
<div id="header">
<div id="sitename">{logo}</div>
</div>
<div id="navigation">{menu}</div>
<div class="banner-wrap"> /* remove 'wsite-background' here */
<div class="wsite-header"></div> /* add this <div> */
</div>
<div id="content-wrapper">
<div id="content">{content}</div>
</div>
<!-- </div> -->
<div id="footer">
<div id="footer-content">{footer}</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body 'short-header wsite-background wsite-theme-light'> /* add 'wsite-background' here */
<div id="wrapper">
<!-- <div class="hg-wrapper"> --> /* comment-out this <div> */
<div id="header">
<div id="sitename">{logo}</div>
</div>
<div id="navigation">{menu}</div>
<div class="banner-wrap"> /* remove 'wsite-background' here */
<div class="wsite-header"></div> /* add this <div> */
</div>
<div id="content-wrapper">
<div id="content">{content}</div>
</div>
<!-- </div> -->
<div id="footer">
<div id="footer-content">{footer}</div>
</div>
</div>
</body>
</html>
Fonts
|
Slideshow
|
Attempting to approximate the font used in the logo, the slideshow uses the Weebly web font "Yanone Kaffeesatz".
The larger titles at slide tops is 50pt, and the smaller text near slide bottoms is 36pt.
An array of styles is applied, to best display text against each image background. A glow in the neighborhood of 50% is often used with a color that exists in the image, plus just the smallest hint of shadow (which is needed for the glow to correctly display).
|