Tutorial Stats
How To Add A Tagline Or Slogan Beneath The Logo In Your Weebly Site
Tutorial Description
This tutorial will show you how to create Facebook's sticky sidebar in your Weebly site.
If you're familiar with Facebook, you know that Facebook's right sidebar is sticky. What this means is that when you scroll down the Facebook page, the right sidebar moves up as it normally would. Once the bottom of the right sidebar is reached, it then sticks to the bottom of the page and remains visible as you continue to scroll down.
Additionally, once you begin to scroll back up, the right sidebar then begins to move down as it normally would. Once you reach the top of the right sidebar, it then sticks to the top of the page and remains visible as you continue to scroll up.
The purpose of this feature is to keep your site's sidebar in your visitor's view at all times, but with equal sidebar content viewing depending on the scroll direction.
Partial code attribution: Liviu Cristian Mirea-Ghiban of wecodepixels.com, from Github.com.
If you're familiar with Facebook, you know that Facebook's right sidebar is sticky. What this means is that when you scroll down the Facebook page, the right sidebar moves up as it normally would. Once the bottom of the right sidebar is reached, it then sticks to the bottom of the page and remains visible as you continue to scroll down.
Additionally, once you begin to scroll back up, the right sidebar then begins to move down as it normally would. Once you reach the top of the right sidebar, it then sticks to the top of the page and remains visible as you continue to scroll up.
The purpose of this feature is to keep your site's sidebar in your visitor's view at all times, but with equal sidebar content viewing depending on the scroll direction.
Partial code attribution: Liviu Cristian Mirea-Ghiban of wecodepixels.com, from Github.com.
SHOW MORE
Tutorial
Step 1. Open Weebly's HTML/CSS Editor
Click on "Theme" at the top, then click on "Edit HTML/CSS" on the bottom-left.
Step 2. add hTML code
On the left, under "HEADER TYPE", click on the first page layout. On the right, locate the white "{logo}" code. Copy the HTML code below and paste it directly beneath the white "{logo}" code.
<div class="slogan">{slogan:text}</div>
Note: Repeat this process for each page layout under "HEADER TYPE". If need be, you may need to create some space below the white "{logo}" code for the HTML code above.
<div class="slogan">{slogan:text}</div>
Note: Repeat this process for each page layout under "HEADER TYPE". If need be, you may need to create some space below the white "{logo}" code for the HTML code above.
Step 3. Add CSS code
On the left, under "STYLES", click on "main.less". On the right, scroll down and find your logo's CSS coding. Copy the CSS code from below and paste it in the area of your logo's CSS coding.
Note: Style changes for the slogan are indicated next to the CSS codes below.
.slogan {
position: relative;
line-height:1;
top: 0px; /* Changes the space between the logo and the slogan */
font-size: .7em; /* Changes the font size of the slogan */
font-style: italic; /* Changes the font style of the slogan */
color:#222222; /* Changes the color of the slogan */
letter-spacing:0px; /* Changes the letter spacing of the slogan */
}
Click save.
Note: Style changes for the slogan are indicated next to the CSS codes below.
.slogan {
position: relative;
line-height:1;
top: 0px; /* Changes the space between the logo and the slogan */
font-size: .7em; /* Changes the font size of the slogan */
font-style: italic; /* Changes the font style of the slogan */
color:#222222; /* Changes the color of the slogan */
letter-spacing:0px; /* Changes the letter spacing of the slogan */
}
Click save.
step 4. add slogan
Once you're back in the Weebly editor, you should see a "Click here to edit" text beneath your logo or site title. To add your slogan, simply click and type away!
You're done! Publish your site to see your site's new slogan or tagline!
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
