Easy Access to the Participated Button

[Kami]

Just popping in to confirm that unless you change the way MPs are displayed in threads or accidentally modify how posts are listed, or remove the CSS i provided, there is no danger to the code for the Avatar Banners.

[Vapers United]

Aug 25, 2017 10:18:11 GMT -8 Kami said:

Just popping in to confirm that unless you change the way MPs are displayed in threads or accidentally modify how posts are listed, or remove the CSS i provided, there is no danger to the code for the Avatar Banners.

Thanks for the note and nice to see you! I've been thinking about you and I hope things are going well for you.

[Tumbleweed]

Vapers United ,

The menu bar seems to be a cross browser issue so head to your style sheet and up towards the top at about line 278 you'll see this:

#navigation-menu { padding: 0 8px; background: johnnynav_bar_background;

Change the 8px to 6px and see if that fixes it.

As for the control bar missing that border, I don't see that viewing in IE11 but I do see it viewing with Edge. I also know this was an issue I had before in my previous nightmare ( )but anyway, changing the 99.9% to 99.8 fixes it in Edge so maybe it will fix it for you in IE. 


.container>.control-bar {
top: 40px !important;width:99.9%;border-right:1px solid black;
}

Anyway, try those two things and you let me know how it looks on your end and I'll take a another look cross browser.


Oh, and Kami , If you happen across this again (like you'd ignore me tagging you, lol) do you happen to know what background and text color would  make the Participated button we added to the control bar match the action drop down next to it (except without the arrow, of course) so it will work cross different themes? I'm talking like  @container_background_color_1 or @container_text_color_1;
I have went over and over the css trying to find the right one and I finally just gave up and what we have in there now are just hex color. I'd so appreciate any help but if you don't know, that's fine too. 

[Kami]

Tumbleweed i don't know off the top of my head unfortunately, i rarely use the @ values in the stylesheet since i only use one theme at a time.

Maybe Brian knows?

[Vapers United]

1. Using 5px here worked for me...

...#navigation-menu { padding: 0 5px; background: johnnynav_bar_background;

2. Using 99.8% fixed it before it becomes sticky...

....container>.control-bar {
...top: 40px !important;width:99.8%;border-right:1px solid black;
...}

...but it seems that there must be a padding setting somewhere that might work better than this and allow it to show the black border line before it becomes sticky with width:99.9%. It would be padding or the spacing between the right gray border of Search and that 1px black border of the Control Bar. It's that padding (or spacing between the two) that is changing when the Control Bar becomes Sticky.

I can tell by looking at it while watching the Control Bar change from Normal to Sticky, and I can see it in my graphics editor, too.

The padding is 22px when it is not sticky, and 21px when it is sticky. If they could both be 21px, I think that would do it.

I can see the right gray border line of Search change by 1px with width:99.9%. With it set to 99.8%, the border is there, but there is a 2px black border when it becomes sticky, and it's 1px shorter than the others when it's not.

I know this is being extremely picky!!! If you feel that you've done enough, I understand and I'll set width:99.8% and be done. But I think that this 1px padding change between being sticky and non-sticky was what caused your nightmare before (or one of them). I just don't know where to play with it myself, but I think it's in that final CSS. There are 3 padding settings in there. I only mention it because I think I have zeroed in on the problem with 99.9%.

The forum is still open to everyone in 3 places. It's set to 99.9% right now. If you'd like to watch what happens for yourself with Edge, I can set it to 99.8% for you after you see it at 99.9%. I saw it change in 99.9% by holding a sheet of paper on the right gray border of Search as a straight edge. You might even see it change with your other browsers, too, since a 1px change could be hard to notice without the straight edge ruler.

Or, maybe just move the Participated Button, Action, and Search 1px to the left, so the border line doesn't get pushed out of view.

AND, if you can describe the question you asked Kami, I might be able to help there, too. If this helps, the background color on all three of them is white #ffffff. The border on the other two is #d7d7d7. Maybe you could find the Hex for d7d7d7.

[Kami]

Just throwing this out there: ifnyou have a % width that is % of the current browser window size. Your "1px" will not be consistent across all browser sizes.

[Vapers United]

Aug 25, 2017 19:21:35 GMT -8 Kami said:

Just throwing this out there: ifnyou have a % width that is % of the current browser window size. Your "1px" will not be consistent across all browser sizes.

Does this mean that my thought about the padding is incorrect? My thought was to leave width:99.9% alone and find another area to work with, because the change to 99.8% made a change that I could see.

EDIT:
Maybe it could fix IE11 without effecting the other browesrs?

[Kami]

What the effects will be is dependent on the size of the user's browser, not the type of browser they are using.

Let me throw in some math here.

Let's say your browser window is 100px and you want 10% width. 10% of 100px would result in the width taking up 10px of space of your 100px browser.

But, let's say that I'm on a 200px wide browser. 10% of that is 20px. So, it's technically occupying the same percentage of my screen as it is yours, but the exact pixel amount will be a literal twice as wide as what you see on yours.

If you are using a % width and measuring what you want margin / padding wise in pixels and adjust the percentage according to what *you* have measured, they are ultimately going to only achieve the desired visual effect if the user has the exact same browser width as you. Even if we confined these changes to IE, it would still only affect IE users with the same browser width.

You can easily test this yourself by changing the view of your browser from full sized to not, then manually dragging the window size smaller and larger and seeing that the exact pixel width changes.

[Vapers United]

If I understand you correctly, this is why I changed the forum width to 100% in the first place. The Sticky Menu Bar's code would make the Menu Bar go wonky when I changed the Zoom from 100% to anything else. With T's code, I have the forum width back to 90% now. But if I read your underlying message correctly, you're telling me to set the code line in question to width:99.8% and accept that as being as good as it will get. And if so, I'm good with that.

As an aside, does anyone have much more than a guess about when PB V6 will be released? I've been wondering that for a while now.

[Kami]

That is absolutely not what I am saying at all and I am genuinely baffled as to why you think I have an "underlying" message.

To be more blunt: your math is wrong. You cannot have a percent width and measure distance based in pixels. You saying that "this is 1px off at this percentage" is accurate IF AND ONLY IF the user has the exact same browser width as you do. If there is ANY difference, that "1px" will be a different number. That is the nature of working with percentages.

There is no ETA on release.

(Edit: in retrospect this might sound rude? Possibly. If so I apologise, not my intent!)

[Vapers United]

Sorry! I thought you were telling me that it couldn't be done. Please don't forget that I am not a coder, and the things I say are based on guesses, based on the results before my eyes. The things I am told are very often left to interpretation because I get lost from not speaking that same language as coders. I'm not the one who put the 99.9% thing in there, but it's what I was given to work with.

(Edit: Yes, it was taken as rude. Sorry!!! I've been going through some personal issues, and I guess I'm a bit sensitive.)

So my question then becomes, (and I hope I've worded it properly) is there possibly a way to get the Control Bar (Action Bar) to behave the same as the other two? Or should I accept what's been given?

[Kami]

I will leave the answer to your question to tumbleweed since I haven't been paying attention to the codes she's given, but I just wanted to say I thought I was fairly clear that I was talking about math in general and and how it ties into what you were doing! I'll strive to make that more obvious in the future since I missed the mark this time (:

[Vapers United]

Tumbleweed

Please do me a favor and set your test site abetteramerica.freeforums.net/thread/34/testing back to width:99.9%.

Thanks

[Tumbleweed]

Aug 26, 2017 7:34:30 GMT -8 Vapers United said:

Tumbleweed

Please do me a favor and set your test site abetteramerica.freeforums.net/thread/34/testing back to width:99.9%.

Thanks

I set it back to 99.9 as you asked and although I'm just popping in for a second I'll try to get back and read what your issues are still.

[Vapers United]

Thank you for making the change!

I just wanted to look and be able to tell if I see the same things on your test site as I do on mine, and I do.

There is no rush on this at all! I'm just curious. When you have some time, please use IE (11) and/or Edge on your test website again and look closely to see if you can find the same things that I do. I see these same things on my forum, and my OCD is driving me nuts.   I am using IE (11) under Windows 10 Pro 64 bit. 

width:99.8%

It just appears to have a 2px border. The gray "page" border is showing after the 1px black border.

width:99.9%




This is mine with width:99.9%


My borders are black against a light blue, so it's easier to see. Since width:99.8% creates an "indent" (not shown on mine), I'd like to be able to use width:99.9% instead. But first, I'd like to know if you can see what appears to be a 1px difference between the two width settings on your test forum with any of your browsers, or maybe look again at mine. It's set to 99.9%. If you can't see any differences at all, then we'll call it a day. If you can, I'd like to know about how either of the 3 padding controls in the CSS might effect this, and what this line does...

/*Participate button in control panel*/
#part{display: inline-block;position: relative; float: left;font-size:100%;border-width: 1px; .rounded-corners(3px);padding: 4px 6px 6px 6px; color:#000000; background-color: #ffffff;
}

The padding section with 4px 6px 6px 6px has me wondering if one of them might help here, if none of the other three padding controls can help.

Again, I know this is being very picky, but I can't help but wonder about it. If it is what it is, then it is what it is, and I'll use width:99.8%. I am not trying to be hard to get along with. I'm simply asking a question. Please try to look at it from this point of view. My thought was that the padding between the Search Magnifying Glass gray border line and the Control Bar black border line on the right side might be adjustable to become a little thinner, to accommodate the border on that side being within width:99.9%. If the answer is No, then the answer is No. OK?

Thanks in advance!