Up/down buttons.

June 17, 2013, 07:54:18 am

Ok folks, there's a nifty lttle thing I implemented over at another den of iniquity recently. I've just whipped up a little bit of code to add them to Elk. Try them out and see what you think. This is just raw HTML, without the smooth scroll script that the old buttons now have, but that's easy to change.

The advantage of these ones is that they are always accessible no matter where you are in the forum. They also enable getting rid of the old SMF up/down buttons, to give a bit more space for the page list. Markup and CSS for these is very light.

Index.template.php. Find:

Code: [Select]

	<div id="top_section">

Replace:

Code: [Select]

	<div id="top_section"><a id="top"></a>

Find:

Code: [Select]

			<h1 class="forumtitle">
				<a id="top"

Replace:

Code: [Select]

			<h1 class="forumtitle">
				<a

Find:

Code: [Select]

	<div id="wrapper">';

Replace:

Code: [Select]

	<div id="wrapper">
		<a href="#top" class="updown" title="Go to top">↑</a>
		<a href="#bot" class="updown2" title="Go to bottom">↓</a>';

index_white.css. Add:

Code: [Select]

.updown, .updown2 {
	position: fixed;
	margin-top: 6.15em;
	margin-left: -0.5em;
	z-index: 10;
	display: block;
	line-height: 1.5em;
	padding: 0 5px;
	font-size: 2em;
	background: #ebebeb url(../images/theme/lower_section.png) 0 100% repeat-x;
	border: 1px solid #bbb;
	border-radius: 7px 3px 0 0;
	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}
.updown:hover, .updown2:hover {
	text-decoration: none;
	color: #457b38;
}
.updown2 {
	margin-top: 7.7em;
	border-radius: 0 0 3px 7px;
}

NOTE: the HTML entities for the links are #8593; (up) and #8595; (down), with leading ampersand of course. Parse_BBC has gone and rendered them into symbols even inside the code blocks here.