Camen Design Forum

Sidebar and NNF

append delete MS

Any suggestions as im thinking of putting a 'news' sidebar (CSS) left to the actual discussion in NNF. How in implement it so its like another about.html -file positioned left and it works just like the about.html file with the actual forum in the right?

thnx,

MS

Reply RSS

Replies

append delete #1. TCB

In the index.php file in NNF's root folder, you'll find the spot where the about.html file is included starting at line 130. In the themes/greyscale/index.html file, you'll see the <section> element where the about.html content is loaded into the page beginning at line 53.

Simply add a sidebar.html file and include it where you want it following the same pattern. I think you'll be able to figure it out once you look at it. It's pretty much copy/paste and figuring out where to place it.

Note that about.html only appears on the index page. If you want the news column to appear on the thread pages, you'll have to add it to thread.php and themes/greyscale/thread.html also.

Hope that helps.

append delete #2. TCB

Maybe a better way to handle this is to only modify themes/greyscale/index.html and themes/greyscale/thread.html. That will make it easier to maintain your customizations when you update NNF.

You could include your news column with an iframe by adding `<iframe src="path/to/sidebar.html">` where you want it to appear in the template, then style it in the custom.css file.

append delete #3. Martijn

The recommended way when it comes to changing the HTML of your forum is by making a new theme. Of course this could easily be based on Greyscale.

1. Copy the greyscale folder, call it something new, e.g. `greyscale2`.
2. Open your config.php file and change the value for `FORUM_THEME` to your folder name (`greyscale2` in this example).

Now that you have a theme you can edit the HTML as TCB explained first. Simply add a `section`/`div`/`aside` whatever element fits in your context. Give this element an easily identifiable ID, e.g. `id="nnf_sidebar"`.

As the NNF themes are HTML-only there is a special file called theme.php for adding extra code. Greyscale already comes with this file so if you are basing your new theme on that just open it up.

There are a couple of special functions used by NNF but we are most interested of the `theme_custom` function, which is described as:

%
//this function is called just before a templated page is outputted so that you have an opportunity to do any extra
//templating of your own. the `$template` object passed in is a DOMTemplate class, see '/lib/domtemplate/' for code
//or <camendesign.com/dom_templating> for documentation on how to template with it
%

Exactly what we need! Inside this function you want to add the code that loads the content into your newly created sidebar HTML element. For this we can steal the code from index.php that TCB has mentioned:

%
//an 'about.html' file can be provided to add a description or other custom HTML to the forum / sub-forum,
//for translations, 'about_en.html' can be used where 'en' is the language code for the translation
//(see 'lang.example.php' in the themes folder for more details on translation)
if ($about = @array_shift (array_filter (array (
	@file_get_contents ('about_'.LANG.'.html'), @file_get_contents ('about.html')
)))) {
	//load the 'about.html' file and insert it into the page
	$template->setValue ('#nnf_about', $about, true);
} else {
	//no file? remove the element reserved for it
	$template->remove ('#nnf_about');
}
%

Of course we will need to change some of the values. For consistency we will leave the ability for translations in it. First we want to change the `file_get_contents` to read our sidebar file, and second we want the template to edit the sidebar element (targeted by its ID). After those changes:

%
if ($sidebar_content = @array_shift (array_filter (array (
	@file_get_contents ('sidebar_'.LANG.'.html'), @file_get_contents ('sidebar.html')
)))) {
	$template->setValue ('#nnf_sidebar', $sidebar_content, true);
} else {
	$template->remove ('#nnf_sidebar');
}
%

This code can now be inserted inside the `theme_custom` function of the theme.php file. And presto.

Now all that is left to do is to add a sidebar.html file with whatever content you need. No need to edit any of the core PHP files.

append delete #4. MS

Warning: DOMDocument::loadXML(): Opening and ending tag mismatch: iframe line 60 and body in Entity, line: 211 in /home/peltsi/public/html/themes/pier/lib/domtemplate/domtemplate.php on line 54

Warning: DOMDocument::loadXML(): Opening and ending tag mismatch: body line 24 and html in Entity, line: 211 in /home/peltsi/public/html/themes/pier/lib/domtemplate/domtemplate.php on line 54

Warning: DOMDocument::loadXML(): Premature end of data in tag html line 2 in Entity, line: 211 in /home/peltsi/public/html/themes/pier/lib/domtemplate/domtemplate.php on line 54

Fatal error: Source is invalid XML in /home/peltsi/public/html/themes/pier/lib/domtemplate/domtemplate.php on line 56

This is what i get with trying to load the sidebar.html only by adding the <iframe...> into index.html.

append delete #5. TCB

I made a mistake in the iframe code I posted above. It should have been self-closing: `<iframe src="path/to/sidebar.html" />` Perhaps that is what's throwing the error?

Nonetheless, Martijn's solution is a better one and is really the proper way to modify the template. It's really not as complicated as it may seem and it will prevent trouble in the future.

append delete #6. Martijn

I made a mistake in the iframe code I posted above. It should have been self-closing: `<iframe src="path/to/sidebar.html" />` Perhaps that is what's throwing the error?

If you go with the `iframe` write it like `<iframe src="path/to/sidebar.html"></iframe>`. It is not a void element [1] and I have had self-closing iframes mess up websites in Chrome [2].

Otherwise, yes, a non-closed element could throw errors in DOMTemplate. While it tries to fix the HTML you throw at it before passing it into the XML parser it is not infallible.

[1]: http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#void-elements
[2]: https://github.com/Kroc/DOMTemplate/pull/20

append delete #7. TCB

@Martijn
It's a good thing you're here to clean up behind me! :)

append delete #8. MS

This helped alot, thank you. Follow up questions as i ran into a small problem:

Is it possible in the index page to have NNF display a time of newest/recent post as "today 9:08" rather than "4.5.2014 9:08"? Id also like to add a line 'Latest post:' before, it would be 'Latest post: Today, 9:08'

And if u wonder, it doesnt mess up things as ive modified the css so that the date is below the name of the thread, like so:

%

99 This is the name of the thread
   Latest post: Today, 9:08

%
append delete #9. Martijn

Adding the test “Latest post:” should not be a problem. Open the index.html of your theme and just add the text before the `time` element here:

% index.html
		<a class="nnf_thread-post" href="/thread#id"><time class="nnf_thread-time" datetime="2012-01-01T00:00:00+00:00">01 Jan ’12 · 00:00</time></a>
%

Do not put it inside the `time` element, the content of it will be overwritten with the time for the last reply.

Changing the way dates are represented is slightly harder. Dates are formatted per the date format from the language file, e.g.: [1]

% lang.example.php lines 30–32
//the `date` format code used to print human readable dates into the HTML,
//see <php.net/manual/en/function.date.php> for documentation
$LANG['en']['date_format'] 	= 'd M ’y · H:i';
%

There is no format for time relative to the current time, no way to have PHP natively show something like “today”.

What you are probably looking to do is write a DOMTemplate function that iterates over all the `time` elements on the first page and changes the content according to what you want. I do not have the time to write and test such a code now, but here is a start of what it would look like:

%
	// Go through every `time` element with the class `nnf_thread-time` and `nnf_post-time`.
	// `nnf_thread-time` is used for the latest reply dates for posts listed.
	// `nnf_post-time` is used for the latest reply dates within subforums listed.
	foreach ($template->query('//time[@class="nnf_thread-time" or @class="nnf_post-time"]') as $node) {
		// Computer readable timestamps are available in the `datetime` attribute:
		$timestamp = $node->getAttribute('datetime');
		// Now check the timestamp for whatever cases you want to handle.
		// You can change the way time is displayed by setting a value for
		//  $node->nodeValue, like so:
		$node->nodeValue = 'Date unknown';
	}
%

Like before, this works when putting it inside the `theme_custom` function.

---

[1]: https://github.com/Kroc/NoNonsenseForum/blob/a7fa64fbfccd5905bf31aa1312550561782810fd/themes/greyscale/lang.example.php#L30-32

append delete #10. MS

Adding the test “Latest post:” should not be a problem. Open the index.html of your theme and just add the text before the `time` element

I thought it was this simple, but this puts the text "Latest post" before the name of the thread like this:

% 

99 Latest post: This is the name of the thread 
     5. may 2014, 9:08 

%
append delete #11. Martijn

That would be something you should be able to fix using CSS, since the HTML does not have such an order:

% index.html
<li class="nnf_thread nnf_sticky">
	<a class="nnf_thread-post" href="/thread#id">Latest post: <time class="nnf_thread-time" datetime="2012-01-01T00:00:00+00:00">01 Jan ’12 · 00:00</time></a>
	<i class="nnf_thread-replies">99</i> <b class="nnf_thread-author nnf_mod">Kroc</b> <img class="nnf_thread-sticky" src="/themes/greyscale/img/sticky.png" width="16" height="16" alt="Announcement:" title="Announcement:"><img class="nnf_thread-locked" src="/themes/greyscale/img/security_closed_32.png" width="16" height="16" alt="Locked:" title="Locked:">
	<a class="nnf_thread-name" href="thread_title">The quick brown fox jumps over the lazy dog</a>
</li>
%

If that is your HTML (with “Latest post” added) you would want to apply any CSS for the date to `.nnf_thread-post`, and it looks like you are currently adding it to the `time` element (`.nnf_thread-time`) thus the newly added text is left hanging.

append delete #12. MS

I cant seem to be able to put in the right css.. sorry for the trouble again :)

append delete #13. MS

This is what it took. Seems right to you guys?

% css

.nnf_thread-post { float: none; position: absolute; bottom: 10px; color: #ff8c00; }

ol.ui li b, ol.ui li time	{ float: none;bottom: 10px; }

ol.ui li b			{ right: 10px; color:#666;  position: absolute; }

ol.ui li time	{ left: 40px !important; text-align: left; color: #ff8c00; }

%
append delete #14. Martijn

If it works then I guess it is right. Although I am personally not too sure about all the positioning CSS you have introduced there. I was able to get the right (I think) effect by changing the HTML to:

% index.html
		<i class="nnf_thread-replies">99</i> <b class="nnf_thread-author nnf_mod">Kroc</b> <img class="nnf_thread-sticky" src="/themes/greyscale/img/sticky_2x.png" width="16" height="16" alt="Announcement:" title="Announcement:"><img class="nnf_thread-locked" src="/themes/greyscale/img/security_closed_32.png" width="16" height="16" alt="Locked:" title="Locked:">
		<a class="nnf_thread-name" href="thread_title">The quick brown fox jumps over the lazy dog</a>
		<a class="nnf_thread-post" href="/thread#id">Latest post: <time class="nnf_thread-time" datetime="2012-01-01T00:00:00+00:00">01 Jan ’12 · 00:00</time></a>
%

Moving the time to the end. Then I removed these three lines from the CSS, about the `time` element:

% theme.css
ol.ui li time			{float: right; width: 9.1em;				/* timestamp */
				 font-weight: normal; text-align: right; color: #888;}
ol.ui li a:hover time		{text-decoration: underline;}
%

And instead added these to target the link element that contains out “Latest post” and `time`:

% theme.css
ol.ui li .nnf_thread-post { /* the timestamp link should not be bold or dark. */
	font-weight: normal;
	color: #888;
}
ol.ui li .nnf_thread-post:before { /* force the timestamp link onto a row of its own. */
	content: "";
	display: block;
}
%

There is no right or wrong in this case. So whatever solution works for you is fine! Hope you are learning from this :)

append delete #15. MS

Im learning every day and you guys have been of huge help! Im also tryin to figure out how to make alternating background colors for threads and posts in index.html and thread.html. That is not a css thing, right?

Thanks!

append delete #16. Martijn

That is not a css thing, right?

It could be a CSS thing. CSS3 introduced the `:nth-child()` pseudo-class that is often used to make zebra-striped tables as follows:

% CSS
tr:nth-child(odd)		{ background-color:#eee; }
tr:nth-child(even)		{ background-color:#fff; }
%

You can look into that for alternating colours!

append delete #17. cruft

Was there ever a working example of this sidebar?

append delete #18. Martijn

Was there ever a working example of this sidebar?

There was on my computer, when I wrote the original sidebar code changes 😇 I think all my previous code should still work with the latest NNF, have you tried getting it up and running?

append delete #19. Kroc

That emoji was a huge surprise. I'm so used to a completely greyscale page that I wasn't even sure what I was looking at! I guess NNF doesn't need emoticon support then :P

append delete #20. cruft

There was on my computer, when I wrote the original sidebar code changes 😇 I think all my previous code should still work with the latest NNF, have you tried getting it up and running?

I haven't tried yet, just searching previous posts for possible modifications done by users. It sounds like a good idea.

Reply

(Leave this as-is, it’s a trap!)

There is no need to “register”, just enter the same name + password of your choice every time.

Pro tip: Use markup to add links, quotes and more.

Your friendly neighbourhood moderators: Kroc, Impressed, Martijn