Skip to main content
Topic: Elkarte Light has a funky button (Read 14425 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Elkarte Light has a funky button

See attachment, this seems to happen on all the breadcrumbs in Elkarte Light on this site.

Re: Elkarte Light has a funky button

Reply #1
What browser? O:-)

Tested with:
* Chrome 35
* Firefox 28 and 29
* IE 11
and works fine.
Bugs creator.
Features destroyer.
Template killer.

Re: Elkarte Light has a funky button

Reply #2
Someone else had reported seeing those as well but I could not find (nor reproduce) where they were coming from ...
Be safe, Be kind, Happy Programing

Re: Elkarte Light has a funky button

Reply #3
Someone else had reported seeing those as well but I could not find (nor reproduce) where they were coming from ...

Dat was me, in a PM to you ... or maybe an email.   The two, white/grey vertical bars are buggy. You will sometimes see them in the breadcrumbs and sometimes not see them.

I know that I have seen this in IE 11, Fx 28 and PaleMoon 24. I fixed the display in my custom ElkArte theme in the css and have not had a problem since.

ETA:  As an example, I saw the vertical white bars while typing this original reply. Saved the reply and came back into add an edit. Now I do not see the vertical white bars on the end of the breadcrumb or the base of the breadcrumb. Tis a bit buggy perhaps?

ETA: If I recall correctly, this was being caused by a border: right and a background color for linktree:hover and linktree_last in the index_light.css file.


Re: Elkarte Light has a funky button

Reply #4
Firefox 29, Windows 7x64.

Re: Elkarte Light has a funky button

Reply #5
hmm... dunno I have no way to reproduce it, so no way I can find a fix... :-\
Open to suggestions.
Bugs creator.
Features destroyer.
Template killer.

Re: Elkarte Light has a funky button

Reply #6
I have seen where playing with the hover/background colors will enable me to see or not see, in some cases, the entire vertical bar that is producing that artifact.

So, maybe a bug and maybe not but the overlaying of colors to fill the end of the linktree ( the arrow section ) and the hover effect seem to be leading causes.

Re: Elkarte Light has a funky button

Reply #7
Since this is languishing about, here is what causes these artifacts to be an issue. Zooming in or zooming out of the page will cause the short vertical bar to appear at the top and the bottom of the lead link tree. Problem is that these bars do NOT appear at all zoom settings. You might see the bars on the 4th zoom and not on the 5th and then again on the 6th.

The issue is there, no doubt. As long as you keep the screen resolution small, you will not see the artifact. I generally keep the fonts/etc. a bit larger than some so I see the artifacts. Anyone with poor eyesight and using an ElkArte site will likely see the artifacts. I seem to think I fixed this on my theme by removing a vertical right bar. Have not looked in a while so not sure about that.

ETA: I should add that this is also driven in part by the user set Windows text size and screen resolution.

Re: Elkarte Light has a funky button

Reply #8
Okay, that help a lot! :D

I can see it at a zoom level of 175 on my computer.

It seems to disappear by tweaking the style of:
Code: [Select]
.linktree, .linktree_last {

in particular changing the padding:
Code: [Select]
padding: 0 .5em 0 1.5em;
to:
Code: [Select]
padding: 0 .5em 0 1.3em;
Bugs creator.
Features destroyer.
Template killer.

Re: Elkarte Light has a funky button

Reply #9
I just pushed the tweak here on the site.
Can you have a look if you see it again and/or if you see any other problem?
Bugs creator.
Features destroyer.
Template killer.

Re: Elkarte Light has a funky button

Reply #10
Yep, still there. Images are from FF 30. I am afraid I do not know how to determine the zoom percent in FF so no idea what that is for the images.

Notice also that the second from last linktree has the artifacts as green. That is common also. The artifacts will bounce from white to green and at various linktrees. Sort of skippy .... so to speak.   :)

Re: Elkarte Light has a funky button

Reply #11
@emanuele    ::  try these changes. They are close to what I did for my theme, only they have been put into the _light variant.  I deleted my custom theme so this is from notes. Not sure about all of it though as I believe that an issue is the sharing of code between the two variants. I don't think that I found padding to be an issue but I did find the linktree before and linktree after parts were causing me problems.  Screw with the code for the Light variant and the linktree gets goofy looking for the besocial variant. Some of that has to do with the difference in color between the two themes.  The below demonstrates my high degree of incompetence.


index.css changes

Code: [Select]
.linktree a, .linktree em, .linktree_last a, .linktree_last em {
display: inline-block;                  /* was block, probably does not matter actually but it matches the below display: */
}

Code: [Select]
/* Nifty indicators. */
.linktree:before, .linktree:after, .linktree_last:before, .linktree_last:after {
content: "";
position: absolute;
display: inline-block;
left: 100%;
top: 50%;
margin-top: -1.900em;                      /* was -1.077em */
margin-left: 2px;
height: 1px;
width: 0;
border: 1.900em solid transparent;   /* was -1.077em */
border-right: none;
z-index: 2;
}

index_light.css changes

Code: [Select]
.linktree:hover:before, .linktree_last:before {
border-left: 0.75em solid #ccc; /* was #3d6e32  */
}

Code: [Select]
.linktree:hover, .linktree_last {
border-top: 1px solid #3d6e32;
/* border-right: 2px solid #3d6e32; */        /* commented out for testing */
border-bottom: 1px solid #3d6e32;
background: #5ba048; /* commented out for testing */
background-image: linear-gradient(to right, #4b863c, #5ba048);
}

Re: Elkarte Light has a funky button

Reply #12
Thanks!
Will have a look, at the moment I don't have the code handy.

BTW, do you see it now with the change I did? Just to know if it doesn't work at all. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: Elkarte Light has a funky button

Reply #13
Sorry  :'(   still broke. Take a look at the attachments, especially the one named 'hover'. Part of the issue, it seems to me is the right vertical border and hover colors. In this case the hover is on the first linktree, the color is washed out, the border is visible. You can also see that vertical border in both of the non hover links.

The problem with removing that vertical border is that ( as I recall ) it affects the display of the linktree in the besocial variant. This can be mitigated by changing non hover and hover colors, but that is not an option with these two variants. Still, the vertial border and the artifacts are two separate items.

On the other attachments you can see the artifacts at various links.


ETA: correct horizontal to vertical ....




Re: Elkarte Light has a funky button

Reply #14
hmm... meh.
I tried the changes suggested, but they only kind of work if the margins in the "/* Nifty indicators. */" block are changed making the arrows more dull. Keeping the margins at 1.077em the arrows all present some kind of artefact.

I tried another thing: most of the sizes are in em, while few are pixels, this may cause problems while zooming because AFAIK one depends on the font size, while the other doesn't.
How do you see them now? (I'm not sure if it is necessary to clean up your browser's cache.)
Bugs creator.
Features destroyer.
Template killer.