CZTesting

General Category => Comments => Topic started by: Dave on Jan 07, 2023, 06:56 AM

Title: Button spacing
Post by: Dave on Jan 07, 2023, 06:56 AM
There seems to be an issue with the 'quickbuttons' once a post has been created.

There is a border around the buttons and there is something, I'm not sure what, between the buttons also, could it be the colouring? I wonder if there shouldn't be anything between them.

Also the 'Quote' and 'More' when hovered over change colour but the 'Quickedit' doesn't.

It's possible these are all related I don't know

spaces.png

[attachment deleted by admin]
Title: Re: Button spacing
Post by: Bocool on Jan 07, 2023, 07:54 AM
I thought I had fixed those. LOL I guess I didn't...

EDIT: Fixed! :)
Title: Re: Button spacing
Post by: Dave on Jan 07, 2023, 08:41 AM
It's within a fraction of being OK.

Put the cursor over the 'More' button and you'll see that the bottom of it is cut off, you have to be quick as the drop box covers it ;)
Title: Re: Button spacing
Post by: Bocool on Jan 07, 2023, 09:05 AM
What browser are you using? I'm using FF and don't see it.
Title: Re: Button spacing
Post by: Dave on Jan 07, 2023, 09:20 AM
Quote from: Bocool on Jan 07, 2023, 09:05 AMWhat browser are you using? I'm using FF and don't see it.

I'm using Brave, I'll test with other browsers and get back to you  ;)
Title: Re: Button spacing
Post by: Bocool on Jan 07, 2023, 09:22 AM
OK
Title: Re: Button spacing
Post by: Dave on Jan 07, 2023, 10:08 AM
OK I have checked Firefox, and it's the same as Brave for me.

What I've done is to take a screen capture recording and then an image capture of what I mean.

It really isn't a big deal but I'm sure it shouldn't be like that.

If we can iron out these little things now them you can submit it to SMF for publication.

I like Twitch and he does good themes, but his Xmas theme looked a little lacking...if you know what I mean

[attachment deleted by admin]
Title: Re: Button spacing
Post by: Bocool on Jan 07, 2023, 10:17 AM
Hmmm, the image below is what I see. The difference is that I have inline mod check enabled and you don't:

more.png

[attachment deleted by admin]
Title: Re: Button spacing
Post by: Dave on Jan 07, 2023, 10:21 AM
No problem Steve  8)
Title: Re: Button spacing
Post by: Bocool on Jan 07, 2023, 10:26 AM
Well, still a problem. I need to see it without the inline mod check...

EDIT: I just need to figure out how to turn off the inline mod check. LOL
Title: Re: Button spacing
Post by: Dave on Jan 07, 2023, 10:32 AM
Quote from: Bocool on Jan 07, 2023, 10:26 AMWell, still a problem. I need to see it without the inline mod check...

EDIT: I just need to figure out how to turn off the inline mod check. LOL

I have to be honest and say I don't know what that is Steve   :-[
Title: Re: Button spacing
Post by: Dave on Jan 07, 2023, 10:56 AM
I think I know what causing that to happen.

The top of drop box starts at exactly the same point as the button is cropped at the bottom. The drop box should be flush with the bottom of the 'quickbuttons' when it opens, in this theme is a few pixels above the bottom.

Look at the default image attached and the one from here

[attachment deleted by admin]
Title: Re: Button spacing
Post by: Bocool on Jan 07, 2023, 11:04 AM
Yes, I was talking to my sister on the cell but just changed it so I can now see what you're seeing and will work on it.
Title: Re: Button spacing
Post by: Bocool on Jan 07, 2023, 11:10 AM
OK, have a look now. 8)
Title: Re: Button spacing
Post by: Dave on Jan 07, 2023, 11:49 AM
Quote from: Bocool on Jan 07, 2023, 11:10 AMOK, have a look now. 8)

Yes although I'm looking on my tablet, I can see that the drop box is level now.

Good work Steve, I think it's about ready to submit it...that's if that's what you're going to do
Title: Re: Button spacing
Post by: Bocool on Jan 07, 2023, 12:23 PM
Sorry, I dozed off for a bit. LMAO

I do see that the text on the cat_bg's are a raised a bit high...
Title: Re: Button spacing
Post by: Dave on Jan 08, 2023, 03:06 AM
Quote from: Bocool on Jan 07, 2023, 12:23 PMSorry, I dozed off for a bit. LMAO

I do see that the text on the cat_bg's are a raised a bit high...

Yes now you mention it so do I. If you change

.cat_bar h3 {
    padding: 3px 12px 6px 12px;
}

to
.cat_bar h3 {
    padding: 8px 12px 6px 12px;
}

It brings it to the center


When you do that some of the toggle buttons go out of alignment but to counter that so that the toggles are inline with the catbar main text change the code below from

.toggle_up::before, .toggle_down::before {
    width: 17px;
    height: 17px;
    display: inline-block;
    background: #f7f7f7 url(../images/icons/toggle.png) no-repeat 0 0 / 17px;
    overflow: hidden;
    content: "";
    vertical-align: middle;
    margin: 5px 0 5px;
    border: 1px solid #c5c5c5;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2),
        0 1px 1px #fff inset,
        0 -5px 4px rgba(0,0,0,.1) inset;
    transition: background-color 0.25s;
}

to

.toggle_up::before, .toggle_down::before {
    width: 17px;
    height: 17px;
    display: inline-block;
    background: #f7f7f7 url(../images/icons/toggle.png) no-repeat 0 0 / 17px;
    overflow: hidden;
    content: "";
    vertical-align: middle;
    margin: 0px 0 5px;
    border: 1px solid #c5c5c5;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2),
        0 1px 1px #fff inset,
        0 -5px 4px rgba(0,0,0,.1) inset;
    transition: background-color 0.25s;
}


This keeps the toggle button inline with the main .cat_bar h3 text, even when the category description text is added.


I hope that helps

UPDATE:

This is also the same for the White theme, CleanTek2 looks ok
Title: Re: Button spacing
Post by: Bocool on Jan 08, 2023, 12:20 PM
I've noticed today that the code for the cat_bars is that it also changes them on the stats page but throws them way off cause they are just text where as the ones on the from page are anchors. So, I had to adjust the cat_bars for the stats page and "adjust cat_bar a" for the front page. ;)

I've also used the toggle code from above. ;)