Add footer with grid

For support and discussion related to templates and themes in phpBB 3.3.
Post Reply
DV1
Registered User
Posts: 333
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Add footer with grid

Post by DV1 »

I've been thinking of adding a footer to the forum for an array of links. The simplest way I can think of doing this is to add an html such as I have done for some notices and such to the index-body.

<!-- INCLUDE add_text.html -->

Not sure yet whether I want to place it on all pages.

The footer requires 3 columns. Do I just simply add the grid info to the addtext.css for the addition? Also, can I use any grid system or is there one or others better displayed in phpBB?

Thanks

User avatar
Lumpy Burgertushie
Registered User
Posts: 67395
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Add footer with grid

Post by Lumpy Burgertushie »

if you just put it in the overall footer file it will show on all pages.

if you only want it on certain pages put it in the overallfooter file where you want it and wrap it with IF statements.

Code: Select all

<!-- IF SCRIPT_NAME eq index  or SCRIPT_NAME eq viewforum -->
your code here
<!--  ENDIF -->
add or pagename for each page you want it on.

that way it will show up in the footer of only the pages you list in the IF statement.


robert


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?


DV1
Registered User
Posts: 333
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Add footer with grid

Post by DV1 »

Thanks to Robert and HFK :)

Both look fairly good as possibilities. The thing about the grid question was that I could fine tune the responsive aspect with it and other css details. Maybe the extension allows for that.

Will report on the outcome.

DV1
Registered User
Posts: 333
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Add footer with grid

Post by DV1 »

The following image shows the grid working with template and css on a test forum.

links-grid-display.png
links-grid-display.png (11.71 KiB) Viewed 228 times

Used a simple grid system. The only squirrely part was matching grid.css with addfooter.css. I'm thinking I could probably dispense with the addfooter.css (instead style it in the grid.css) but I'll play around with that later on. It's good to go and responsive. Though it somewhat irks me when some coding is done with em's for the media queries having been used to pixels and percentages. I put the grid.css in the themes folder.

From here on it's just a matter of styling; margins, maybe an image behind the links, whatever. As for putting the links on all the pages, I think that may be overkill. Maybe I will add a link to one of the dropdowns and of course that means coming back here and finding out how that's done. :D

Will check into the extension but in the way I've done it I don't have to worry about disabling extensions, extension updates and all that. I just pull the css and template, update, then replace.

Thanks to Robert and HFK and if there are any further suggestions, I'm listening. :)

Daniel

User avatar
Gumboots
Registered User
Posts: 316
Joined: Fri Oct 11, 2019 1:59 am

Re: Add footer with grid

Post by Gumboots »

Using em for media queries makes sense. Not everyone uses default browser sizing or text, for a range of reasons, so if you set your break points in em people will get a layout which suits the content as viewed by them. It's a simple conversion, since standard is 16px. If you want 320px it's just 20em, 512px is 32em, etc. If you happen to want 321px it's just add 1/16, which is 20.0625em if you're feeling pedantic but I'm sure 32.05 would be adequate.

DV1
Registered User
Posts: 333
Joined: Sun Jul 11, 2010 8:49 pm
Location: Nevada
Contact:

Re: Add footer with grid

Post by DV1 »

@Gumboots

Yes, I use em and even rem on the main website css. But in some instances I did the em, looked at the website on the phone and there were some things that didn't side up with the desktop display; not often but it has happened. This time around I just wanted to do the links quickly and I got a little peeved at the em media queries. Maybe it's all this, 'social distancing'. :D

By the way, do you know why the em looks smaller on the forums? For example, something will say '1em' but if you use 16px it's larger.

User avatar
Gumboots
Registered User
Posts: 316
Joined: Fri Oct 11, 2019 1:59 am

Re: Add footer with grid

Post by Gumboots »

Yup, that's because the CSS doesn't define 1em as 16px. :D

This here contraption uses the old "set font to 10px on the html tag so we can do font sizes with mental arithmetic after that", then sets this for posts:

Code: Select all

.postbody .content {
    font-size: 1.3em;
    overflow-x: auto;
}
Which is fine for the average desktop monitor, but not quite so groovy for a lot of mobile stuff. My 2c is the most sensible option is to have a media query reset font size for HD displays. I've used this before, and it seems to work, but I'm all for better ideas if anyone has them:

Code: Select all

html {
/* Reset to 10px base for easy font sizing. */
	font-size: 62.5%;
}
/* Set Retina font-size to browser default. */
@media screen and (min-resolution: 160dpi) {
	html {
		font-size: 71.43%;
	}
}
@supports (-webkit-overflow-scrolling: touch) {
	html {
		font-size: 71.43%;
	}
}
If that doesn't quite seem logical, I was using a 1.4rem (14px/87.5%) base size on desktop, changing to 16px on HD/mobile. :)

Post Reply

Return to “[3.3.x] Styles Support & Discussion”