ElkArte Community

This is something I just whipped up, after grumbling at Ema about mentions stuffz. :D

So after throwing a browser override at the mentions button I had an idea: why not use browser overrides to put recent posts at the top of the page where they're easy to find? So I did. Pic attached. Code looks like this:

@-moz-document domain(ElkArte.net) {
	#main_content_section {
		position: relative;
	}

	#category_1 {
		padding-top: 195px;
	}

	#recent_posts_content {
		position: absolute;
		top: 0;
		width: 100%;
	}
}

Quite nifty. If anyone wants recent posts at the top, that's how you do it. I had to play around with it a bit because some things you'd think would work didn't, presumably because the override stuffz is a bit buggy in implementation.

Obviously this also opens up the possibility of using this layout as part of a theme variant, if anyone wanted to.

I don't like the overly big padding, but I figure it's just for taking a peek on how it would look like ;D

Nope. If you want to do it just with CSS changes, without touching the markup, you need the big padding to shunt the first category down the page. Otherwise the absolute positioning on the recent posts block means it will just sit on top of the first category and hide several boards.

There are bigger paddings or margins in some areas of Elk's code already (like menu positioning with javascript disabled). It's just a padding. Don't worry about it.

But wouldn't it alter if you change resolution? After all, height changes as well, resolution-wise.

Well sure, if you go to a very narrow width, but you could deal with that by adding stuff to media queries. Same way you always do responsive. I just did this for my monitor so didn't worry about extra stuff.

Come to think of it, if doing this as part of a theme variant you could use media queries, but if doing this as an in-browser override for an existing site it doesn't matter, because the userContent.css file is device-specific (or browser-installation specific if you want to call it that) anyway. So res should be constant, unless you happen to be switching from landscape to portrait all the time.

Nice! :D

Ah yeah, I figured those then :) Thanks anyway!

http://forum-alternative-antriebe.de/index.php  :D

Yeah, I know you can do it by hacking the markup. I've done that before. ;) This time it's just a CSS trick. No markup changes.

Incidentally, your one has validation errors. You shouldn't use the same ID for the two "info centres".

Damn! Any hint on fixing this? Use a different ID, not matter which? :-[

If you'll edit your CSS code so the topics are listed instead of the posts I am honoured to use it! But I don't think this is possible only with CSS, right?  :)

Yeah just use a different ID. Shouldn't matter what you call it.

Does Elk have a recent topics function at all? I haven't been keeping up with everything.

Thank you!


I use an addon:

http://www.ElkArte.net/community/index.php?topic=2631.msg18763#msg18763

Can't find any add-on on that link.

Seems the addon is deleted. It should be here:

http://addons.ElkArte.net/2015/02/Recent-Topics/

Maybe I have a copy on my computer at home. If you need it...

Yeah I found it: http://addons.elkarte.net/enhancement/Recent-Topics.html

I'll take a look.

Oooo, yuck. It's one of those horrible diseased hookers. :P

Ok, so what markup does it output? Anyone got it running live?

Me? (http://forum-alternative-antriebe.de/index.php)

Time to split the topic?

http://addons.ElkArte.net/enhancement/Recent-Topics.html

I feel you (Jorin) are using two addons: the one that moves the IC to the top and this one.
It may be kind of intended because I reused the existing template for the IC in one of the first versions (if I ever published it to begin with).

You were the one pointing out there is an id duplication. :P

Yeah but he already knows how to fix that. :P

Anyway, since that add-on is just hijacking the exact same li and table as used by the default recent posts, the CSS I gave will work without any changes.

Not? Sorry.  :-[

Ok, so I updated local to 1.07 and installed the add-on. Yup, same CSS works without any changes, since the add-on keeps the same ID's for the block elements anyway.

Hey, more fun and games. :D

@-moz-document domain(elkarte.net) {
	#recent_posts_content {
		position: absolute;
		z-index: 99;
		top: 109px;
		left: -3px;
		width: 280px;
		border: 3px solid #4b863c !important;
		border-radius: 0 5px 5px 0;
		background: #fafafa !important;
		box-shadow: 0 2px 4px #111;
		border-top: 3px solid #5ba048 !important;
		border-bottom: 3px solid #437837 !important;
	}

	#ic_recentposts th {
		display: none;
	}

	#ic_recentposts td {
		display: block;
		min-width: 245px;
		max-width: 245px;
	}

	#ic_recentposts .recentpost {
		box-shadow: 0 1px 0 #fff;
	}

	#recent_posts_content h3, #ic_recentposts .recentposter, #ic_recentposts .recentboard, #ic_recentposts .recenttime {
		border: none !important;
	}

	#ic_recentposts a {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}