widgets in the header and footer

This is the right place to report general bugs, make suggestions or ask for help.
Post Reply
User avatar
fraenkiman
Posts: 210
Joined: Thu Feb 03, 2022 7:25 pm
Location: Berlin, Germany
Contact:

widgets in the header and footer

Post by fraenkiman » Thu Jul 07, 2022 7:13 pm

Hello, everyone.

Bug, feature or non-existent condition? I can't place widgets in the header and footer of the blog. Only on the left and right side.

FlatPress fp-1.3.dev [master]
Theme: Leggero, Style: Leggero-v2

Best regards
Frank
:pencil: You are strong in PHP and Java Script? :point_right: Then help us to improve FlatPress. :point_left:

:exploding_head: Looking for ideas, templates, examples and answers to frequently asked questions?
:bulb: You'll find it here.

My :de: FlatPress-Blog: https://frank-web.dedyn.io

User avatar
Arvid
FlatPress Coder
Posts: 558
Joined: Sat Jan 26, 2019 7:40 pm
Contact:

Re: widgets in the header and footer

Post by Arvid » Sat Jul 09, 2022 12:12 pm

Hi,

in fact, Leggero only supports the left and right widgets, see fp-interface/themes/leggero/widgets.tpl.
You can easily add the top and bottom widgets to your custom theme, though - just by adding

Code: Select all

{widgets pos="top"}
or

Code: Select all

{widgets pos="bottom"}
to any tpl file of your theme.

In general, it always depends on each theme. Some of the themes support all widget positions, others some, others none.

All the best,
Arvid

User avatar
fraenkiman
Posts: 210
Joined: Thu Feb 03, 2022 7:25 pm
Location: Berlin, Germany
Contact:

Re: widgets in the header and footer

Post by fraenkiman » Tue Jul 19, 2022 10:16 pm

Thank you Arvid,
fit and worked for my purposes.

For those of us who would also like to have a header and footer in the Leggero-v2 style, here is a little to-doo:
1. Create two files (widgetstop.tpl and widgetsbottom.tpl) in the directory /fp-interface/themes/leggero.
2. Fill the widgetstop.tpl file with the following content:

Code: Select all

	<!-- beginning of Topmenu -->
		<div id="columntop">
		{widgets pos=top}	
			<div id="{$id}">
			{$content}
			</div>
		{/widgets}
		
		</div>
	<!-- end of Topmenu -->
	
3. Fill the widgetsbottom.tpl file with the following content:

Code: Select all

	<!-- beginning of Bottommenu -->
		<div id="columnbottom">
		{widgets pos=bottom}	
			<div id="{$id}">
			{$content}
			</div>
		{/widgets}
		
		</div>
	<!-- end of Bottommenu -->
	
4. Edit the files default.tpl, index.tpl, and static.tpl. Under the line {include file=header.tpl}
add the line with {include file=widgetstop.tpl}. Above the line {include file=footer.tpl} add the line with {include file=widgetsbottom.tpl}.

Code: Select all

{include file=header.tpl}
{include file=widgetstop.tpl}
....
{include file=widgetsbottom.tpl}
{include file=footer.tpl}
Now the existing CSS has to be adjusted.
To do this, edit the common.css file in the /fp-interface/themes/leggero/leggero-v2/res directory. First, the top margin of div#main needs to be collapsed to make room for the header.

5. Change line in the NORMAL DESIGN -> MAIN section to:

Code: Select all

		margin: 0px 20px 20px 20px;
6. Insert the following lines between the BODY CONTAINER and MAIN in the NORMAL DESIGN section:

Code: Select all

	/* ===== TOP BAR ===== */
	#columntop, #columnbottom {
		margin: 10px;
		background: none;
		border: none;
		font-size: 100%;
		clear: both;
	}
	
	#columntop ul {
		list-style-type: none;
		margin-bottom: .5em;
	}
	
	#columntop li, #columnbottom li  {
		padding: 0px 10px;
	}
	
	#columntop ul  li, #columnbottom ul  li{display: inline}
	
7. Insert the following lines between MAIN and FOOTER in the NORMAL DESIGN section:

Code: Select all

	/* ===== BOTTOM BAR ===== */
	#columnbottom {
		text-align: center;
	}

	#columnbottom ul {
		list-style-type: none;
	}
	
8. Change the line in the RESPONSIVE DESIGN -> MAIN section to:

Code: Select all

		margin: 0px auto;
PS: If you still have the line float: center; , can delete them without replacement. Reason: center is not a valid value for float.

9. Insert the following lines between the BODY CONTAINER and MAIN in the RESPONSIVE DESIGN section:

Code: Select all

	/* ===== TOP BAR ===== */
	#columntop, #columnbottom {
		margin: 10px;
		background: none;
		border: none;
		font-size: 100%;
		text-align: center;
	}

	#columntop ul {
		list-style-type: none;
		margin-bottom: .5em;
	}

	#columntop li, #columnbottom li {
		padding: 0px 4px;
	}
	
	#columntop ul li, #columnbottom ul  li{display: inline}
That should be it. Now you can create a small menu in the header and footer via the admin center as a widget.

Sorry for my bad english, google helped ;)
Best regards
:pencil: You are strong in PHP and Java Script? :point_right: Then help us to improve FlatPress. :point_left:

:exploding_head: Looking for ideas, templates, examples and answers to frequently asked questions?
:bulb: You'll find it here.

My :de: FlatPress-Blog: https://frank-web.dedyn.io

User avatar
Arvid
FlatPress Coder
Posts: 558
Joined: Sat Jan 26, 2019 7:40 pm
Contact:

Re: widgets in the header and footer

Post by Arvid » Sun Oct 02, 2022 12:21 pm

Is this worth of being a tutorial on the wiki?

Post Reply

Who is online

Users browsing this forum: No registered users and 45 guests