How to Use the Header and Footer Settings

Revision as of 03:41, 2 November 2011 (view source) MrFent (Talk | contribs) (Created page with "Category:New Page")		Latest revision as of 21:12, 18 January 2012 (view source) MrFent (Talk | contribs)
(19 intermediate revisions by 3 users not shown)
Line 1:		Line 1:
−	[[Category:New Page]]	+	[[Category:Framework]]
		+	The Header & Footer section settings provide flexibility and ease in setting up important site content such as Dropdown Navigation, Search capability, Social links, and Copyright statements.
		+
		+	==Drop Down Navigation==
		+	You can give your menus a different look by enabling Drop Down Navigation. When you hover over a menu, additional menu items appear underneath.
		+	[[File:Enable-Drop-Down-Navigation.png‎|200px|thumb|alt=Enable Drop Down Navigation|Enable Drop Down Navigation]][[File:Menu-Offset.png‎|200px|thumb|alt=Menu Offset|Menu Offset]][[File:Drop-Down-Front-End.png|200px|thumb|alt=Drop Down Menu|Drop Down Menu]]
		+
		+	<br /><br /><br />
		+	<br /><br /><br />
		+	<br /><br />
		+	===Enable Drop Down Navigation===
		+	From your WordPress Administration Panel:
		+	# Select the "PageLines" panel, then "Settings"
		+	# Select the "Header And Footer" tab
		+	# Check "Enable Drop Down Navigation?"
		+	#* You can also choose to disable the Text Shadows & Arrows
		+	# Click "Save Options"
		+
		+	===Offset(Nest) Menu Items===
		+	Now you will need to configure on which pages the Drop Down Menus will appear. Simply go into your custom menu and offset (indent) those pages to the right.
		+	<br /><br /><br />
		+	<br /><br /><br />
		+	Now you will see that any menus you offset will be nested underneath their parent menu item.
		+
		+	If you are having problems with the Drop Down menus falling behind Flash elements, such as an embedded YouTube video on your Feature Slider, [http://www.pagelines.com/wiki/index.php?title=Drop_Down_Navigation_Falls_Behind_YouTube_Video click here] for more information.
		+	<br /><br /><br /><br />
		+	<br /><br /><br /><br />
		+	==Hide Search Field==
		+	[[File:Search-Field-front-end.png‎|200px|thumb|alt=Search Field|Search Field]][[File:Hide-Search.png‎|200px|thumb|alt=Hide Search Field|Hide Search Field]]
		+
		+	The Search Field is displayed by default on the right side of the PageLines Navigation Section.
		+	<br /><br /><br /><br />
		+	<br /><br /><br />
		+	To hide the Search Field, from your WordPress Administration Panel:
		+
		+	# Select the "PageLines" panel, then "Settings"
		+	# Select the "Header And Footer" tab
		+	# Click "Hide search field?"
		+	# Click "Save Options"
		+	<br />
		+
		+	==Social Icon Position==
		+	[[File:Social_icon_position_default.png‎|200px|thumb|alt=Social Icon Position|Social Icon Position]]
		+	[[File:Social_icon_position.png‎|200px|thumb|alt=Adjust Social Icon Position|Adjust Social Icon Position]]
		+
		+	By default the Social Icon bar is placed within the "Branding" section to the right of the header logo.
		+
		+	Positioning can be adjusted using the Social Icon Position settings.
		+
		+	From your WordPress Administration Panel:
		+
		+	# Select the "PageLines" panel, then "Settings"
		+	# Select the "Header And Footer" tab
		+	# Set desired values under "Social Icon Position"
		+	# Click "Save Options"
		+
		+	The icons bar moves relative to the bottom right corner of the Branding section. For example, increasing the "Distance from Bottom" value will move the bar up from the bottom of the Branding section.
		+
		+	Negative values are allowed which is especially useful for moving the icons down.
		+	[[File:Social_icon_position_examples.png‎|200px|thumb|alt=Social Icon Position Examples|Social Icon Position Examples]]
		+
		+	View examples in the image to the right. The white box shows the generated html & css code:
		+	# Default settings: "Distance from Bottom" = 12 and "Distance from Right" = 1
		+	# Place the Icon Bar to the left of the Search Bar using "Distance from Bottom" = -55 and "Distance from Right" = 220
		+
		+	For advanced users, div.icons has default CSS values:
		+	div.icons {position: absolute; bottom: 12px; right: 1px;}
		+
		+	When setting the Social Icon Position in this PageLines panel, you are changing the css values for bottom: and right:
		+
		+	For more information on testing css settings using Firefox & Firebug, [http://www.pagelines.com/wiki/index.php?title=CSS_Customizations click here].
		+
		+	==Hide News/Blog RSS Icon==
		+	[[File:News-Blog-RSS-Icon-front-end.png‎|200px|thumb|right|alt=News/Blog RSS Icon|News/Blog RSS Icon]][[File:Hide-News-Blog-RSS-Icon.png‎|200px|thumb|right|alt=Hide News/Blog RSS Icon|Hide News/Blog RSS Icon]]
		+	The News/Blog RSS Icon is displayed by default on the right side in your header. In the PageLines Templates, this icon, along the Social Icons, is placed within the "Branding" Section.
		+	<br /><br /><br /><br />
		+	<br /><br /><br />
		+	To hide the News/Blog RSS Icon, from your WordPress Administration Panel:
		+
		+	# Select the "PageLines" panel, then "Settings"
		+	# Select the "Header And Footer" tab
		+	# Unclick "Display the Blog RSS icon and link?"
		+	# Click "Save Options"
		+	<br /><br /><br /><br />
		+
		+	==Social Icons==
		+	[[File:Social_icon_position_default.png‎|200px|thumb|alt=Social Icons|Social Icons]]
		+	The "Social Icons" settings allow you to easily add social media links. Google+, Facebook, Twitter, LinkedIn, and YouTube are included in the default PageLines installation and once activated will appear in the header next to the RSS Icon.
		+
		+	[[File:Social_icons_activate.png‎|200px|thumb|alt=Add Social Icons|Add Social Icons]]
		+	Activating these icons is as simple as entering URLs in the "Social Icons" settings.
		+
		+	From your WordPress Administration Panel:
		+
		+	# Select the "PageLines" panel, then "Settings"
		+	# Select the "Header And Footer" tab
		+	# Enter URLs under "Social Icons"
		+	# Click "Save Options"
		+
		+	The activated icons will now appear in the header.
		+
		+	For advanced users, you can use [[hooks]] to add additional icons to the Social Icon bar.
		+	<br /><br /><br />
		+
		+	==Secondary Navigation==
		+	Secondary Navigation allows you to place unique menus on individual pages.
		+
		+	This is especially helpful when:
		+	* you need different menus on each page
		+	* or, instead of using Drop Down Menus, you want your "nested" or "secondary" menu items visible at all times
		+
		+
		+	===Setting Secondary Nav using WordPress menus===
		+	There are two options for displaying the Secondary Nav Menu. The default option is to use a WordPress menu. Once you create the menu, you must assign it to a page through the page's [http://www.pagelines.com/wiki/index.php?title=Getting_Started#Customize_the_page_with_the_meta_settings Meta Settings.]
		+	[[File:Use-Child-Pages.png‎|200px|thumb|alt=Use Child Pages|Use Child Pages]]
		+	===Setting Secondary Nav using Child Pages===
		+	[[File:Secondary-Nav-Front-End.png‎|200px|thumb|alt=Secondary Nav|Secondary Nav]]
		+	The second option is to use [[Glossary#Child Page|Child Pages]] as your Secondary Nav menu instead of a WordPress Menu.
		+	<br /><br />From your WordPress Administration Panel:
		+	# Select the "PageLines" panel, then "Settings"
		+	# Select the "Header And Footer" tab
		+	# Check "Use Child Pages for Secondary Nav?"
		+	# Click "Save Options"
		+	<br /><br /><br /><br /><br />
		+	Once you setup the Secondary Nav menu, by default it will be displayed underneath your Primary Website Navigation. However, you can move it around inside any of the Template Areas.
		+	<br /><br /><br /><br />
		+	<br /><br /><br /><br />
		+	<br /><br /><br />
		+
		+	==Number of Footer Columns==
		+	[[File:Footer_columns.png‎|200px|thumb|alt=Footer Columns|Footer Columns]]
		+	Use the "Number of Footer Columns" setting to change the number of columns displayed in the "Footer Columns Sidebar" section.
		+
		+	* For this section to be visible on your site, it must be activated in Pagelines / Templates in the "Footer" Template Area.
		+
		+	By default, there are 5 Footer Columns:
		+	* Logo
		+	* Site Pages
		+	* Latest Post
		+	* More Statement
		+	* Site Terms Statement
		+
		+	You can change either (or both) the content of the columns or the number of columns.
		+
		+	===Change the number of columns===
		+	[[File:Footer_columns_change_number.png‎|200px|thumb|alt=Change # of Footer Columns|Change # of Footer Columns]]
		+
		+	From your WordPress Administration Panel:
		+
		+	# Select the "PageLines" panel, then "Settings"
		+	# Select the "Header And Footer" tab
		+	# Set the "Number of Footer Columns"
		+	# Click "Save Options"
		+
		+	If you decrease the number of columns, the default content will automatically wrap to the next line.
		+
		+	As an example, in the default installation, changing the number of columns from 5 to 3 will wrap "More Statement" and "Site Terms Statement" to a second line.
		+
		+	===Change the Footer Columns content===
		+	[[File:Footer_columns_change_content.png‎|200px|thumb|alt=Change Footer Columns Content|Change Footer Columns Content]]
		+
		+	The "Footer Columns Sidebar" is fully widgetized. If you do not wish to use the default content, drag widgets into this sidebar.
		+
		+	From your WordPress Administration Panel:
		+
		+	# Select the "Appearance" panel, then "Widgets"
		+	# Click the arrow to open the "Footer Columns Sidebar"
		+	# Drag desired widgets to the sidebar
		+
		+	Note that once you drag a widget into this sidebar, the default content is overridden and will not display. For example, if you still want a "Site Terms Statement", drag a text widget into the Footer Columns Sidebar and write the "Site Terms Statement" there instead of in the "PageLines / Settings / Header And Footer" panel.
		+
		+	==Footer Logo==
		+	[[File:Footer_logo.png‎|200px|thumb|alt=Footer Logo|Footer Log]]
		+	Use this setting to show a "Footer Logo" in the left column of your footer.
		+
		+	[[File:Footer_logo_add.png‎|200px|thumb|alt=Add Footer Logo|Add Footer Log]]
		+	From your WordPress Administration Panel:
		+
		+	# Select the "PageLines" panel, then "Settings"
		+	# Select the "Header And Footer" tab
		+	# Add a "Footer Logo"
		+	# Click "Save Options"
		+
		+	The "Footer Logo" will appear on your site only when both of the following are true:
		+	* The "Footer Columns Sidebar" is activated in the PageLines / Templates / "Footer" Template Area
		+	* You are using the default content for the "Footer Columns Sidebar". In other words, you have not drag-and-dropped any other widget into the "Footer Columns Sidebar" in the WordPress Widgets editor.
		+
		+	If you do not want to use the default "Footer Columns Sidebar" content but still want a "Footer Logo": in the WordPress Widgets editor, drag a text widget into the "Footer Columns Sidebar" and paste: <img src="theFooterLogoURL"> into the widget content area.
		+
		+	==More Statement==
		+	[[File:More_statement.png‎|200px|thumb|alt=More Statement|More Statement]]
		+	Use this setting to display a note, statement or any html formatted text & images in the footer.
		+
		+	[[File:More_statement_add.png‎|200px|thumb|alt=Add More Statement|Add More Statement]]
		+	From your WordPress Administration Panel:
		+
		+	# Select the "PageLines" panel, then "Settings"
		+	# Select the "Header And Footer" tab
		+	# Add a "More Statement"
		+	# Click "Save Options"
		+
		+	The "More Statement" will appear on your site only when both of the following are true:
		+	* The "Footer Columns Sidebar" is activated in the PageLines / Templates / "Footer" Template Area
		+	* You are using the default content for the "Footer Columns Sidebar". In other words, you have not drag-and-dropped any other widget into the "Footer Columns Sidebar" in the WordPress Widgets editor.
		+
		+	If you do not want to use the default "Footer Columns Sidebar" content but still want a "More Statement": in the WordPress Widgets editor, drag a text widget into the "Footer Columns Sidebar" and write your "More Statement" in the widget content area. (See image above under "Change the Footer Columns content.")
		+
		+	==Site Terms Statement==
		+	[[File:Site_terms_statement.png‎|200px|thumb|alt=Site Terms Statement|Site Terms Statement]]
		+	Use this setting to display a copyright notice or site terms (or any html formatted text & images) in the footer.
		+
		+	[[File:Site_terms_statement_add.png‎|200px|thumb|alt=Add Site Terms Statement|Add Site Terms Statement]]
		+	From your WordPress Administration Panel:
		+
		+	# Select the "PageLines" panel, then "Settings"
		+	# Select the "Header And Footer" tab
		+	# Add a "Site Terms Statement"
		+	# Click "Save Options"
		+
		+	The "Site Terms Statement" will appear on your site only when both of the following are true:
		+	* The "Footer Columns Sidebar" is activated in the PageLines / Templates / "Footer" Template Area
		+	* You are using the default content for the "Footer Columns Sidebar". In other words, you have not drag-and-dropped any other widget into the "Footer Columns Sidebar" in the WordPress Widgets editor.
		+
		+	If you do not want to use the default "Footer Columns Sidebar" content but still want a "Site Terms Statement": in the WordPress Widgets editor, drag a text widget into the "Footer Columns Sidebar" and write your "Site Terms Statement" in the widget content area. (See image above under "Change the Footer Columns content.")

---

Latest revision as of 21:12, 18 January 2012

The Header & Footer section settings provide flexibility and ease in setting up important site content such as Dropdown Navigation, Search capability, Social links, and Copyright statements.

Contents 1 Drop Down Navigation 1.1 Enable Drop Down Navigation 1.2 Offset(Nest) Menu Items 2 Hide Search Field 3 Social Icon Position 4 Hide News/Blog RSS Icon 5 Social Icons 6 Secondary Navigation 6.1 Setting Secondary Nav using WordPress menus 6.2 Setting Secondary Nav using Child Pages 7 Number of Footer Columns 7.1 Change the number of columns 7.2 Change the Footer Columns content 8 Footer Logo 9 More Statement 10 Site Terms Statement

[edit] Drop Down Navigation

You can give your menus a different look by enabling Drop Down Navigation. When you hover over a menu, additional menu items appear underneath.

[edit] Enable Drop Down Navigation

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Header And Footer" tab
3. Check "Enable Drop Down Navigation?"
   • You can also choose to disable the Text Shadows & Arrows
4. Click "Save Options"

[edit] Offset(Nest) Menu Items

Now you will need to configure on which pages the Drop Down Menus will appear. Simply go into your custom menu and offset (indent) those pages to the right.





Now you will see that any menus you offset will be nested underneath their parent menu item.

If you are having problems with the Drop Down menus falling behind Flash elements, such as an embedded YouTube video on your Feature Slider, click here for more information.

[edit] Hide Search Field

The Search Field is displayed by default on the right side of the PageLines Navigation Section.






To hide the Search Field, from your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Header And Footer" tab
3. Click "Hide search field?"
4. Click "Save Options"

[edit] Social Icon Position

By default the Social Icon bar is placed within the "Branding" section to the right of the header logo.

Positioning can be adjusted using the Social Icon Position settings.

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Header And Footer" tab
3. Set desired values under "Social Icon Position"
4. Click "Save Options"

The icons bar moves relative to the bottom right corner of the Branding section. For example, increasing the "Distance from Bottom" value will move the bar up from the bottom of the Branding section.

Negative values are allowed which is especially useful for moving the icons down.

View examples in the image to the right. The white box shows the generated html & css code:

1. Default settings: "Distance from Bottom" = 12 and "Distance from Right" = 1
2. Place the Icon Bar to the left of the Search Bar using "Distance from Bottom" = -55 and "Distance from Right" = 220

For advanced users, div.icons has default CSS values: div.icons {position: absolute; bottom: 12px; right: 1px;}

When setting the Social Icon Position in this PageLines panel, you are changing the css values for bottom: and right:

For more information on testing css settings using Firefox & Firebug, click here.

[edit] Hide News/Blog RSS Icon

The News/Blog RSS Icon is displayed by default on the right side in your header. In the PageLines Templates, this icon, along the Social Icons, is placed within the "Branding" Section.






To hide the News/Blog RSS Icon, from your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Header And Footer" tab
3. Unclick "Display the Blog RSS icon and link?"
4. Click "Save Options"

[edit] Social Icons

The "Social Icons" settings allow you to easily add social media links. Google+, Facebook, Twitter, LinkedIn, and YouTube are included in the default PageLines installation and once activated will appear in the header next to the RSS Icon.

Activating these icons is as simple as entering URLs in the "Social Icons" settings.

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Header And Footer" tab
3. Enter URLs under "Social Icons"
4. Click "Save Options"

The activated icons will now appear in the header.

For advanced users, you can use hooks to add additional icons to the Social Icon bar.

[edit] Secondary Navigation

Secondary Navigation allows you to place unique menus on individual pages.

This is especially helpful when:

• you need different menus on each page
• or, instead of using Drop Down Menus, you want your "nested" or "secondary" menu items visible at all times

[edit] Setting Secondary Nav using WordPress menus

There are two options for displaying the Secondary Nav Menu. The default option is to use a WordPress menu. Once you create the menu, you must assign it to a page through the page's Meta Settings.

[edit] Setting Secondary Nav using Child Pages

The second option is to use Child Pages as your Secondary Nav menu instead of a WordPress Menu.

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Header And Footer" tab
3. Check "Use Child Pages for Secondary Nav?"
4. Click "Save Options"

Once you setup the Secondary Nav menu, by default it will be displayed underneath your Primary Website Navigation. However, you can move it around inside any of the Template Areas.

[edit] Number of Footer Columns

Use the "Number of Footer Columns" setting to change the number of columns displayed in the "Footer Columns Sidebar" section.

• For this section to be visible on your site, it must be activated in Pagelines / Templates in the "Footer" Template Area.

By default, there are 5 Footer Columns:

• Logo
• Site Pages
• Latest Post
• More Statement
• Site Terms Statement

You can change either (or both) the content of the columns or the number of columns.

[edit] Change the number of columns

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Header And Footer" tab
3. Set the "Number of Footer Columns"
4. Click "Save Options"

If you decrease the number of columns, the default content will automatically wrap to the next line.

As an example, in the default installation, changing the number of columns from 5 to 3 will wrap "More Statement" and "Site Terms Statement" to a second line.

[edit] Change the Footer Columns content

The "Footer Columns Sidebar" is fully widgetized. If you do not wish to use the default content, drag widgets into this sidebar.

From your WordPress Administration Panel:

1. Select the "Appearance" panel, then "Widgets"
2. Click the arrow to open the "Footer Columns Sidebar"
3. Drag desired widgets to the sidebar

Note that once you drag a widget into this sidebar, the default content is overridden and will not display. For example, if you still want a "Site Terms Statement", drag a text widget into the Footer Columns Sidebar and write the "Site Terms Statement" there instead of in the "PageLines / Settings / Header And Footer" panel.

[edit] Footer Logo

Use this setting to show a "Footer Logo" in the left column of your footer.

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Header And Footer" tab
3. Add a "Footer Logo"
4. Click "Save Options"

The "Footer Logo" will appear on your site only when both of the following are true:

• The "Footer Columns Sidebar" is activated in the PageLines / Templates / "Footer" Template Area
• You are using the default content for the "Footer Columns Sidebar". In other words, you have not drag-and-dropped any other widget into the "Footer Columns Sidebar" in the WordPress Widgets editor.

If you do not want to use the default "Footer Columns Sidebar" content but still want a "Footer Logo": in the WordPress Widgets editor, drag a text widget into the "Footer Columns Sidebar" and paste: <img src="theFooterLogoURL"> into the widget content area.

[edit] More Statement

Use this setting to display a note, statement or any html formatted text & images in the footer.

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Header And Footer" tab
3. Add a "More Statement"
4. Click "Save Options"

The "More Statement" will appear on your site only when both of the following are true:

• The "Footer Columns Sidebar" is activated in the PageLines / Templates / "Footer" Template Area
• You are using the default content for the "Footer Columns Sidebar". In other words, you have not drag-and-dropped any other widget into the "Footer Columns Sidebar" in the WordPress Widgets editor.

If you do not want to use the default "Footer Columns Sidebar" content but still want a "More Statement": in the WordPress Widgets editor, drag a text widget into the "Footer Columns Sidebar" and write your "More Statement" in the widget content area. (See image above under "Change the Footer Columns content.")

[edit] Site Terms Statement

Use this setting to display a copyright notice or site terms (or any html formatted text & images) in the footer.

From your WordPress Administration Panel:

1. Select the "PageLines" panel, then "Settings"
2. Select the "Header And Footer" tab
3. Add a "Site Terms Statement"
4. Click "Save Options"

The "Site Terms Statement" will appear on your site only when both of the following are true:

• The "Footer Columns Sidebar" is activated in the PageLines / Templates / "Footer" Template Area
• You are using the default content for the "Footer Columns Sidebar". In other words, you have not drag-and-dropped any other widget into the "Footer Columns Sidebar" in the WordPress Widgets editor.

If you do not want to use the default "Footer Columns Sidebar" content but still want a "Site Terms Statement": in the WordPress Widgets editor, drag a text widget into the "Footer Columns Sidebar" and write your "Site Terms Statement" in the widget content area. (See image above under "Change the Footer Columns content.")