8thos Bar (Facebook-Like Floating Menu with Avatar and Search Box)

8thos Bar 5.0

No permission to download
I'm still not sure what they're talking about but if it works I'll update the resource with another version of it called 'The Coop Fix' by Yorick lol
 
Yeah well, you could add this to EXTRA.css:

Code:
.messageList .message
{
padding-top: 40px;
}

It works, but of course it puts quite a lot of spacing between posts. But you'll notice a similar thing on TheVerge. It's mostly padding - but not padding on the bar. That wouldn't work. It's padding on the content, between the sections.

I'm just going to try one more thing which might be a technique that they employ...
Ok, I've tried and I can't get it any better. The best way to solve this problem is to do this small CSS edit in EXTRA.css.

I wouldn't say you need to do anything though, 8thos, because I believe the change should be optional. Either you want lots of extra space between the posts to solve this problem, or you don't.
 
Could it be done by done by placing the anchor 40px above the content, rather than using padding? Just thinking absolute positioning a <a id="whatever"></a> could have less of an visual impact.
 
I don't know much about CSS or coding in general. I just take things apart and play around with it, then put it back together to see how it looks and if I like it, I share it. So basically everyone who uses the 8thos Bar is going to have to take it apart and play around with it to fit their own site cause it works okay on mine. That's why it's called the '8thos' bar because I use it on my site 8thos.com Once you personalize it for your own site then it's 'Your Bar' lol.
 
That's what I was testing but I couldn't get it to work... let me try again.
How did you position it? You can break wrappers by using negative margin-top or similar. By looking at the way xenforo handles it, it might pose a challenge. I think actually the best way is to create a margin or padding at the top of message content. I just checked my style, it has a 15px padding and 15 px margin, which aligns the text much better with the arrow from the postbit. I don't use this bar, but rather Forsaken's version.
 
This is an issue on your own site too, 8thos.

Look, if I go to a specific post on your forum:

8thosbar.webp

Notice how the post text is partially covered?

It's not so much of a big problem on your site - your custom style must have some extra padding in there somewhere.

But others are experiencing a whole line of text missing. At first I was kind of like "meh, what's the problem" but now I think about it, if someone clicks a link to a post, and they're taken to what looks like it could be a blank post (because it's only one line of text and that whole line is covered) then it's not the best experience.

Though you're right, it's not something that has to be a concern of yours because you've done a fantastic job releasing this and it does work like it should.

That being said, you could try this additional template modification.

Note: I have only changed the addon-8ths_bar.xml file - not the flexile version.
 

Attachments

How did you position it? You can break wrappers by using negative margin-top or similar. By looking at the way xenforo handles it, it might pose a challenge. I think actually the best way is to create a margin or padding at the top of message content. I just checked my style, it has a 15px padding and 15 px margin, which aligns the text much better with the arrow from the postbit. I don't use this bar, but rather Forsaken's version.
I have done a template modification on the "message" template which changes:

Code:
<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">

to

Code:
<a name="{$messageId}" class="anchor">{$messageId}</a>
<li class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">

This removes the id which the anchor uses from the message list item and above the list item adds a dedicated anchor with the appropriate name. (I've not tested this thoroughly as I've run out of time so we'll have to see if it breaks anything) :confused:

Then the anchor class is defined as such:

Code:
.anchor
{
display: block;
visibility: hidden;
line-height: 0;
font-size: 0;
position: relative;
top: -40px;
}

So the anchor area is completely hidden, but it's moved upwards by -40px.

Therefore, it takes into account the height of the bar.
 
I have done a template modification on the "message" template which changes:

Code:
<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">

to

Code:
<a name="{$messageId}" class="anchor">{$messageId}</a>
<li class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">

This removes the id which the anchor uses from the message list item and above the list item adds a dedicated anchor with the appropriate name. (I've not tested this thoroughly as I've run out of time so we'll have to see if it breaks anything) :confused:

Then the anchor class is defined as such:

Code:
.anchor
{
display: block;
visibility: hidden;
line-height: 0;
font-size: 0;
position: relative;
top: -40px;
}

So the anchor area is completely hidden, but it's moved upwards by -40px.

Therefore, it takes into account the height of the bar.
I did not know what you were talking about so I went on my site and clicked on a quote link.

I now see what you mean as I never did that when testing this addon. I almost never click on those links on any site that's why I never tested it. Good looking out.

Gonna see what it looks like on my own site real quick.
 
Just noticed a cock up I'd made.

This should fix it.

The first version of my fix would have stopped the highlighting effect on posts when you select them as a moderator.
 

Attachments

I have done a template modification on the "message" template which changes:

Code:
<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">

to

Code:
<a name="{$messageId}" class="anchor">{$messageId}</a>
<li class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">

This removes the id which the anchor uses from the message list item and above the list item adds a dedicated anchor with the appropriate name. (I've not tested this thoroughly as I've run out of time so we'll have to see if it breaks anything) :confused:

Then the anchor class is defined as such:

Code:
.anchor
{
display: block;
visibility: hidden;
line-height: 0;
font-size: 0;
position: relative;
top: -40px;
}

So the anchor area is completely hidden, but it's moved upwards by -40px.

Therefore, it takes into account the height of the bar.


Can't thank you enough! Great work! Works perfectly so far.
 
I tried that one and there was no difference. I hate to ask but can one of you upload a video of what your talking about?
 
Great addon 8thos! I always found it a waste of time to scroll to the top for search :rolleyes:

I think the search bar's opacity should be 100%. The node latest posts are distracting to look at.

There is a small bug. I'm testing this on 8thos.com with firefox and opera. Try this :

1) Click on search bar
2) Click on the "Newer than :" box.
3) The calendar pops up, now scroll down or up. The calendar doesn't follow the bar.
 
Great addon 8thos! I always found it a waste of time to scroll to the top for search :rolleyes:

I think the search bar's opacity should be 100%. The node latest posts are distracting to look at.

There is a small bug. I'm testing this on 8thos.com with firefox and opera. Try this :

1) Click on search bar
2) Click on the "Newer than :" box.
3) The calendar pops up, now scroll down or up. The calendar doesn't follow the bar.
Damn.
 
I tried that one and there was no difference. I hate to ask but can one of you upload a video of what your talking about?
Did you revert back to the old version? I've just checked the source code of your site and can't see my changes.
 
Alright, so I have had an issue. Well some addons that we are using use the $messageID and thus they do not function properly. For eg, we are using the [bd] Reputation System, if I use Yorick's solution, then the Reputation links in the posts disappear.
 
Top Bottom