News:

This is great news too

Main Menu

CleanWhite

Started by Dave, Feb 07, 2023, 06:21 AM

Previous topic - Next topic

0 Members and 4 Guests are viewing this topic.

Dave

Well if I'm honest I'm not a great lover of the menu as it is using the menu_gfx it doesn't look quite right to me, but hey it's your baby you do it how you like  ;D

Bocool

Well, that's how the orig looks and how Jeff created it. I think Les and I thought it would be nice to make the admin the same way and is why we did it that way but it doesn't work well in the admin. :(

And as I've said before, you are welcome to change it as you see fit on your site. :)

Dave

Quote from: Bocool on Feb 18, 2023, 12:30 PMWell, that's how the orig looks and how Jeff created it. I think Les and I thought it would be nice to make the admin the same way and is why we did it that way but it doesn't work well in the admin. :(

And as I've said before, you are welcome to change it as you see fit on your site. :)

Yes I've already done that  ;D

Bocool

#33
I've found an issue with popups. For instance, when you click the '(?)' to the right of the 'Show IP address' in the post profile you'll see one. The colors are not right but I've adjusted them here. Check your site and you'll see the difference.

You'll want to edit the following as shown around line 3111:

.popup_heading {
    padding: 10px 8px;
    color: #fff;
}
.popup_content {
    background: #fefefe;
    color: #1b1b1b;
    line-height: 1.6em;
    max-height: 30em;
    overflow: auto;
    padding: 10px 8px;
    border: 1px solid #1b1b1b;
    border-radius: 6px;
    box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(255, 255, 255, 0.2);
}

And you'll want to remove this around line 4366:
.popup_content {
    background: #fefefe;
    /* background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%);
    color: #ddd;
    border: 1px solid #1b1b1b;
}

No reason in having 2 of the same code. ;)

Bocool

I've also changed 'blockquote cite' to this:

blockquote cite {
display: block;
border-bottom: 1px solid #fefefe;
font-size: 0.9em;
margin-bottom: 3px;
}
blockquote cite a {
color: #ddd;
}

Bocool

#35
Updated the top_menu dropdowns so they look better and the text is spaced more evenly.

Added a dashed bottom border to the top_section.

Dave

Quote from: Bocool on Feb 18, 2023, 03:01 PMI've also changed 'blockquote cite' to this:

blockquote cite {
display: block;
border-bottom: 1px solid #fefefe;
font-size: 0.9em;
margin-bottom: 3px;
}
blockquote cite a {
color: #ddd;
}


Testing

Dave

#37
Quote from: Dave on Feb 19, 2023, 03:24 AM
Quote from: Bocool on Feb 18, 2023, 03:01 PMI've also changed 'blockquote cite' to this:

blockquote cite {
display: block;
border-bottom: 1px solid #fefefe;
font-size: 0.9em;
margin-bottom: 3px;
}
blockquote cite a {
color: #ddd;
}


Testing
As you may see from above the nested quote heading can hardly be seen. I've change that 'blockquote cite a' colour to #444 on the test site and on Quizland too.

Thanks for the code changes above I've added those to both my sites.

Dave

I've just spotted something else

The 'inline_mod_check' checkbox is not the same size as the other buttons.

I didn't notice it until I saw it on Quizland. I'm not working on a fix at the moment as I'm out for Sunday roast dinner with friends today  ;D

Bocool

Yes, I did see that but forgot about it working on the rest. lol

Bocool

Fixed! Find '.inline_mod_check' around line 1189 and add this:

height: 24.5px;
margin-top: -.5px;

Dave

#41
Unfortunately that fix doesn't work for chrome based browsers.

I have tested the following on here and it does work, but as I don't want to mess your settings up I have set everything back as it was before my test.

I suggest following fixes.

Line 1195 remove

.inline_mod_check {
    display: inline-block;
    padding: 0 0.7em;
    color: #444;
    font-size: 0.85em;
    line-height: 2em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: calc(2em + 2em * (0.9 - 0.85)); /* "input" font size minus ".button" font size */
    border: 1px solid #ddd;
    height: 24.5px;
    margin-top: -.5px;
    border-radius: 6px;
    vertical-align: middle;
/*    border-right: 1px solid #bbb;
    border-bottom: 1px solid #aaa;
    box-shadow: 1px 1px 1px rgba(221, 221, 221, 0.57);
    box-sizing: border-box; */
}




Line 1635 replace

.quickbuttons > li > a, .inline_mod_check {
    background: #666;
    text-decoration: none;               
    color: #fff;
    padding: 0 4px 0 5px;
    display: block;
    line-height: 1.9em;                                                                                             
/*    border: 1px solid #ffde74; */                   
}
with

.quickbuttons > li > a, .inline_mod_check {
    background: #666;
    display: inline-block;
    padding: 0 8px;
    color: #fff;
    font-size: 0.7rem;
    line-height: 2em;
    text-transform: uppercase;
    cursor: pointer;
    min-height: calc(2em + 2em * (0.9 - 0.85)); /* "input" font size minus ".button" font size */
    box-sizing: border-box;
    vertical-align: middle;
}

Line 4344

change

    background: #616060;
to

background: #666;
this then matches the colour of the other buttons

All the fixes above work fine on both Firefox and Chrome browsers



[attachment deleted by admin]

Bocool

Sorry, but I've been having server issues and didn't have time for this today. :(

But the image you've shown for the inline_mod_check is not right. The one on the right should be the same height as the quickbuttons like it is in Firefox.

I'll play with it after work, if the server issue is fixed. Since I'm giving up the hosting, I'm trying to help move the sites but the new server has been having issues. :P

Dave

#43
There's no rush

The image I showed you was before the changes Steve, sorry I should have said that. The attached images are from after the changes

[attachment deleted by admin]

Bocool

Excellent! :)

I've would've been online sooner but was having problems with my cell service. When it rains, it pours. LOL