V. basic questions on footer code from a non-coder and a "how to" make a basic footer at the end of a topic


(Blu McCormick) #1

G’day,

I am kinda embarrassed to post such basic coding questions about formatting a footer, but here goes . . .

I did up a very basic footer:

I need to:

a. limit it to the home page
b. make it sticky
c. bring it in from the left a little (its default position is on the left)

Might I ask what code I would use to do that, please, and thanks in advance.


(Joe) #2

Hi @McBlu

You’re almost there. I suggest adding a couple more classes like so:

<div class="container wrap custom-footer">

<!-- Footer content goes here -->

</div>

Adding the class wrap will limit the footer width to that of the the main content in Discourse like so:

Adding the class custom-footer or anything like that gives you the ability to apply CSS styles to it.

So let’s say you want to only show that on the home page (of which there are two - the “categories” view and the “latest” view)

You can then use something like this:

body:not(.navigation-categories):not(.navigation-topics) .custom-footer {
		display: none;
}

To only show it on homepages.

Sticky can mean a couple of things here, could you describe what you want it to do?


(Blu McCormick) #3

Thanks, @lll !

By sticky I meant the footer stays stuck at the bottom of the page when the content on the page is less. Thinking about this if it sticks to the bottom of the page, I guess it would disappear when you scroll to the top as you might expect when you are limited to a set window when viewing the page.

Is that a complex fix? I am open to ideas.


(Joe) #4

Makes sense, try this instead then:

body {
	&:not(.navigation-categories):not(.navigation-topics) {
		.custom-footer {
			display: none;
		}
	}

	&.navigation-categories,
	&.navigation-topics {
		#main > div:first-child {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		#main-outlet {
			flex: 1 0 auto;
		}
		
		.custom-footer {
			margin-bottom: 1em;
		}
	}
}

What this will do is force the footer to be at the bottom of the page regardless of the height of the content.

If the content is bigger than the height of the viewport this will have no effect and the footer will naturally be at the bottom of the scrollable area as expected.

I haven’t tested this thoroughly so just let me know if anything is broken


(Blu McCormick) #5

Thanks, @lll. I will work on this tomorrow and report in. Goodnight. :sleeping:


(Blu McCormick) #6

It worked beautifully of course. You are the best, III.

For people who aren’t coders like me, this is the very simple footer III helped me to create:

Home page of forum (scroll to bottom)

Put this in settings–>customize->themes–>edit CSS/HTML–>Common Footer (for both mobile and desktop):

18%20AM

Put this in settings–>customize->themes–>edit CSS/HTML–>Common CSS (for both mobile and desktop):


[quote="lll, post:4, topic:81283"]
body {
	&:not(.navigation-categories):not(.navigation-topics) {
		.custom-footer {
			display: none;
		}
	}

	&.navigation-categories,
	&.navigation-topics {
		#main &gt; div:first-child {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		#main-outlet {
			flex: 1 0 auto;
		}

		.custom-footer {
			margin-bottom: 1em;
		}
	}
}
[/quote]

This rudimentary footer is sticky (stays at the bottom of screen), is aligned with the body of content on the page, and is limited to the home page.

A great link to look for example footers and accompanying code is:

Bootstrap footer code examples

If you use the code there, you’ll likely need to incorporate some of the fixes, III kindly provided for sticking the footer to the bottom of the page and aligning it with the body of the content as those templates tend to put the footer on the very left of the page and the footer moves up if there is less content on the page.


(Jeff Atwood) #7

Not to be a nitpicker, but posts like these are easier to reuse and find in Google if the code is posted as code, not screenshots.

Use a code block via the toolbar button or type it like this

```
code goes here
```

(Blu McCormick) #8

Please DO nitpick. As you likely guessed, the problem I had is when I insert the code, it got turned into the actual web content the code programs for. So when that happened, I snapshot the code. My apologies.

Ok, so this is something you guys wouldn’t even do, but I copied and pasted the code through keyboard shortcuts then created the quotation block from the icon in my editor window, which didn’t work because it dropped out the indentations. :thinking:

So then, I clicked on the quotation icon that pops up when you highlight the code and copied it. That didn’t work because indentations didn’t carry over. Now I am figuring out how to insert the symbols you show at the top and bottom (what step in the process). :thinking:Just letting you know in case another noob and non-coder like me has problems.

Ok, so now, lol, I tried making the block, adding the quotations ( `) before and after, then positioning the mouse then going up and copying the code by clicking on the quotation icon, no go. :face_with_raised_eyebrow:

Sorry guys.


(Joe) #9

Tab the blue key three times

Then press enter to get to a new line, then paste the code, then press enter for a new line again

Then tab the blue key three times again.


(Blu McCormick) #10

Oh, phew, III. Thanks. Do you think it’s worth doing a “how to” on this for people like me? Or is it just me. No . . . don’t answer that. :joy:


(Jay Pfaffman) #11

This comes up frequently. Don’t feel bad. It’s hard to know where to put those instructions where people will find them when needed.


(Blu McCormick) #12

Aw, thanks, Jay. I tried searching for this myself. I guess it would be called how to block quote code . . . ?

Course I just found this: