News:

This is great news.

Main Menu

CleanWhite

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

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Dave

Another small issue in the Admin.

The 'Task/Setting' drop box text doesn't display in the center of the box.

See images before and after including Firefox after the following change

Line 67

change from

select {
    padding: 0.22em 0.2em; /* selects don't apply line-height */
}


to

select {
    padding: 0.em 0.2em; /* selects don't apply line-height */
}

Fixes the issue in Chrome and doesn't affect Firefox

[attachment deleted by admin]

Bocool

#46
Hmmm, themes were a lot easier for browsers but all of that's changed now. :(

I was messing with a few things and now see the difference...a big difference! I need to find a way to fix it...

And sorry I haven't been around a lot lately. Been helping to setup the new server and move the sites to it and make sure they are working properly before the end of the month so I won't have to pay for another month. But, we are done, mostly. :)

Bocool

Ok, I give up. Been trying to make the menu dropdown look like the ones on your site but can't. What did you do? They have spaces or white lines between the dropdown menus.

Dave

Quote from: Bocool on Feb 27, 2023, 10:15 PMOk, I give up. Been trying to make the menu dropdown look like the ones on your site but can't. What did you do? They have spaces or white lines between the dropdown menus.

index.css I added a top border

/* Level 2 link background. */
.dropmenu li li {
    margin: 0;
    padding: 0;
    width: 19em;
    border-top: 1px solid #fff;
    font-size: 12px;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    margin-bottom: -1px;
    overflow: hidden;
    text-align: left;
}

Bocool

#49
I've done that but it's still not showing. Weird...

I've done it originally awhile back but it wasn't working right so I commented it out. I've added it again and it's still not showing. LOL

EDIT: I've found it. Stupid me had:

margin: 0;
AND
margin-bottom: -1px;

I've removed: 'margin-bottom: -1px;' and it works. :P

Bocool

#50
I've made a change to the input radio and checkbox buttons. :)


input[type="checkbox"] { /* change "blue" browser chrome to gold */
 filter: grayscale(94.9%) hue-rotate(10deg) brightness(100%);
 
}
input[type="radio"] { /* change "blue" browser chrome to gold */
 filter: grayscale(94.9%) hue-rotate(10deg) brightness(100%);
  
}

It takes a but of work to get the colors and shades you want but here's a site that may help:

https://css-tricks.com/almanac/properties/f/filter/

Here's an example on the search page of the checkbox:
You cannot view this attachment.

[attachment deleted by admin]

Bocool

Hmmm, to make the admin different from the front I may have to create a new class or classes...

Dave

Quote from: Bocool on Feb 28, 2023, 11:13 PMHmmm, to make the admin different from the front I may have to create a new class or classes...

Yes the current ones are all combined. I did start to look at that but then life happened again and I stopped. I'm going to leave the ones on my sites as they are.

BTW. The inline_mod_check boxes are still the same on here and in chrome they are not right, I'm guessing you haven't applied my fix yet.

See image for what it looks like on chrome

[attachment deleted by admin]

Bocool

Sorry but like I've said, I've been very busy closing down the other server and moving the site to the new server as well as making sure the new one is setup correctly. However, the VPS seems to be overloaded and the server load is always high which makes the sites run slow. >:(

Anyhow, I've changed it to your suggested settings. Things are settling down now which gives me a little more time for this. But if the server keeps acting up I may be forced to go elsewhere. No rest for the weary... :(

Dave

Oh sorry to hear about the issues. As you posted about the radio check buttons I thought that everything was fine at your end.

No matter it takes as long as it takes  ;D

Bocool

#55
Thanks, does it look better now?

EDIT: Btw, you have an issue with the dropdowns on the main menu on your site. Look at the corners of the bottoms of them. For instance, hover over Calendar and look at the bottom of it. It is not squared like on my site. You have to remove this from line 762:

border-radius: 4px;
I knew something didn't look right a few days ago but was too busy to try and figure it out until now.

Dave

#56
Quote from: Bocool on Mar 03, 2023, 07:44 PMThanks, does it look better now?

EDIT: Btw, you have an issue with the dropdowns on the main menu on your site. Look at the corners of the bottoms of them. For instance, hover over Calendar and look at the bottom of it. It is not squared like on my site. You have to remove this from line 762:

border-radius: 4px;
I knew something didn't look right a few days ago but was too busy to try and figure it out until now.

When I did that all the border-radius for all the buttons went, but I've fixed it now by removing what you suggested and added the border-radius to the following

/* Level 1 active button. */
.dropmenu a.active, #top_info a.active {
color: #fff;
font-weight: bold;
border-color: #7A7A7A;
background: linear-gradient(#A1A1A1, #7A7A7A);
text-shadow: 0 0 2px #000;
        border-radius: 4px;
}
/* Level 1 hover effects. */
.dropmenu > li:hover > a, .dropmenu > li > a:focus,
#top_info > li:hover > a, #top_info > li > a:focus, #top_info > li > a.open {
background: #7A7A7A;
border: 1px solid #A1A1A1;
border-radius: 4px;
color: #fff;
cursor: pointer;
text-decoration: none;
box-shadow: 0 4px 4px rgba(255, 255, 255, 0.1) inset;
text-shadow: 0 0 2px #000;
}

Bocool

Wooooo Hooooo! I finally got the main menu to look like Ken's 8) Around line 1031:

.dropmenu li li {
margin-top: 0;
padding: 0;
width: 19em;
font-size: 12px;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
overflow: hidden;
/* border-top: 1px solid #fff; */
text-align: left;
/* border-radius: 3px; */
border-bottom: 1px dotted #BDBDBD;
}