Hi Steve,
Is there a download for the 2.1.3 version of this. I'd like it on Quizland 8)
It is not finished yet. I've been having problems centering the little black triangle on the menus. Haven't found a fix for it yet and put it on the back burner. :(
OK Just had a look using Brave, based on Chrome, and and Firefox too.
If you open index.css and /* out the margin as per the code below it centers the first link and the arrows then line up
.navigate_section ul li a, .navigate_section ul li em {
padding: 4px 0 4px;
// margin-top: -4px;
display: inline-block;
}
I've also checked Firefox and the fix for that is
.navigate_section ul li .dividers {
color: #444;
/* font: 83.33%/150% Arial, sans-serif; */
padding: 0 2px 0 6px;
}
As I don't have a copy of the theme I cannot check what both fixes together look like on both browsers at the same time.
I've attached photos b4 and after for each theme
Anyway I hope that helps
[attachment deleted by admin]
It doesn't fix it although it appears to look that way. ;)
If you go to, let's say, "Manage and Install themes" and look at that admin menu you'll see what I mean. For narrow menu items it looks fine. But for the much wider ones they aren't centered. ;)
Which reminds me...I need to set up a FTP account for you. :)
Ok so there were a few other issues that I have sorted.
Top menu was transparent and the text was the same as it was on the xmas theme where it went on 2 lines.
I've fixed both of those. I have also aligned the horizontal menu as highlighted in the attachment.
It all looks OK in both Firefox and Brave.
I did realise while I was working the issue you were talking about with the menus. I can get it to center on the 'Manage and Install' but then it's thrown out in the other menu buttons. I'm not sure if it's something to do the the menu_gfx2 image or not, changing the 100% to 101% helps a little but changing the -60px just drops it from view.
I'll look again tomorrow. Take care
NOTE: In the CleanWhite themes css folder I have renamed the original index.css to index1.css. I do it that way in case anything goes wrong, then the original can be re-applied and the changed one can be deleted if required. That's my way of backing files up with out the need to download them.
[attachment deleted by admin]
UPDATE:
The 'QUOTE, QUICK EDIT & MORE..' buttons need the text colour with hover and background resolving to, just noticed them after making this post
Quote from: Dave on Feb 10, 2023, 10:44 AMUPDATE:
The 'QUOTE, QUICK EDIT & MORE..' buttons need the text colour with hover and background resolving to, just noticed them after making this post
Yes, I haven't gotten to those yet. Been working on a menu issue. The quickbuttons are a bit of a pain because SMF has decided to group the styles and classes while removing others. I'll have to separate them and add a few new ones like I've done to the other themes.
I've also change the background of the top_menu and footer to match the grey gradient of the menu background.
Also working on the .amt in the menus.
Quote from: Dave on Feb 10, 2023, 10:31 AMI did realise while I was working the issue you were talking about with the menus. I can get it to center on the 'Manage and Install' but then it's thrown out in the other menu buttons. I'm not sure if it's something to do the the menu_gfx2 image or not, changing the 100% to 101% helps a little but changing the -60px just drops it from view.
Yeah, no matter what I tried to do it wouldn't line up although I haven't worked on it lately. I just went on to others themes and forgot about it. LOL
After this theme I plan on creating a "default" theme to start themes on that is more to what we will need and we'll not have to separate nor create as many things. I've done it before with RC1 but got away from it when they kept changing the code. But trust me, it will make things MUCH easier! :)
I wasn't sure what the original CleanWhite looked like so I have created a SMF2.0 test forum here www.davejohnson.co.uk/Test2.0 and downloaded the original version from CripZone and have in stalled it there. I take it you're not creating the new CleanWhite to exactly match the old one?
The reason I say that is because this revamped version, on the surface of it looks similar but it's not the same, i.e. the Admin>Main | Configuration etc
Also the old theme is wider than this new one
I've set you up as admin if you want to look, it's the original out of the box
user: Skhilled
pass: Test2.011022023
Well, I try to keep it looking like the old one although sometimes I take a few liberties to update it or give it a more modern look. Remember, some of these themes have been around since smf 1.0.x versions. LOL And the older ones more heavily relied on HTML and images more than the PHP and CSS as they do nowadays. Sometimes, upgrading can be a big challenge and I may have to either leave something out or change it if I can't find fix for it.
For instance, the cat_bars, title_bg's, etc. used to be all images. To get rid of the memory loading overhead, I now use this to give them a similar appearance:
background: linear-gradient(#f97b00,#884d00);
or something like this to detail it a bit more:
background: linear-gradient(top, #ffffff 0%, #ebebeb 99%);
The width is how 2.1 versions look now but it can be easily changed to suit anyone's preferences.
And I haven't started on the admin yet. I do that next to last. Since SMF grouped all of the menus together when you edit the main one it changes them all. You have to separate the styles, even the top_section and the admin from the ones you see on the home page. Then there's the responsive (mobile) version to do which I do last cause it has its own css file.
I have changed a couple of things
1. The background of all of the quickbuttons as they were way to dark to see the text on them they are now #666
2. I have also changed the quote icon to white on the 'main_icons_sprite.png', as it stood you could not see the icon because it was originally black and the background was to dark.
3. The background of the 'More' block to the same as the rest of the site #fefefe.
Again the original 'main_icons_sprite.png' is renamed to 'main_icons_sprite1.png' an easy reverse if you had something else in mind
Lastly there is something wrong with the quickbuttons bar that I cannot resolve. If you look at the attached image you'll see that when you hover over the buttons the left and right ends of the bar have something that sticks out on the corners. I've tried almost everything to lose it but I cannot find where it comes from, I've said 'almost' because I know you'll know what it is LOL
[attachment deleted by admin]
Thanks but you also forgot to change the 'main_icons_sprite_hd.png' one too. ;) But I did it.
I fixed quickbuttons...mostly. LOL I just can't figure out why the "only-child' (middle button) doesn't change color on hover...
Quote from: Bocool on Feb 12, 2023, 11:59 AMThanks but you also forgot to change the 'main_icons_sprite_hd.png' one too. ;) But I did it.
I fixed quickbuttons...mostly. LOL I just can't figure out why the "only-child' (middle button) doesn't change color on hover...
I didn't forget it I just didn't do it in case you had other ideas. The quote icon is now black again though Steve LOL.
The middle one did chage before. But they were all to dark on the hover.
Anyway I might have a look again tomorrow atfernoon, if not then it will be Tuesday PM. If there's anything you want me to look at leave a list ;)
You may need to refresh your browser cause it works for me. Press CTRL+F5 after you make and save any changes. ;)
And I didn't change the one without hd, only the one with hd.
Gonna take a short nap. cya later. :)
I'm using my tablet, so it's probably that
There still should be some way to refresh your browser from that. I know that for one of my browsers on my tablet I have to swipe down from the top.
And yes, it was working so it was something I did.
Yes it's ok now, thanks
Do you think the post More drop box should have the dotted line around it like the board and the top menu drop menu?
Hmmm, now there's an idea. 8)
Sorry, if I've reset your theme...
It's OK, I'm used to it at the moment LOL
More work done today.
Last save for the css is index2.php dated 13/02/2023.
I have sorted out the hover issues with the quickbuttons and the pagesection also, of course if you which to change the colour of the 'Reply' button that's fine, I just couldn't find a happy medium for the contrast when you hovered over it.
The only other alternative would for it to be white to start turning the black on hover and I'm not sure I like that either.
I've removed the code for the scroll bar with it removed it just defaults to the browser.
I have also change the colour of the 'Search' button at the top of the page, it was orange it's now #222.
That's my lot for today, I'll have another look tomorrow.
UPDATE: I was just quickly looking at the category toggle button. Do you think there needs to be a contrast with that? In it's present form it's difficult to see.
I've changed the 'Reply' to '#cacaca'. Not sure if we should remove the text-shadow or not...
We've but the scrollbar code in there because a number of people liked it. You can remove it from your site if you install it there but please leave it in.
Yes, for the search button, I think jumping back and forth between themes I've mixed them up and made this one orange instead of orangeline. LOL
For the toggle button I thought it had a border around it at one time.
EDIT: I've just adjusted the positioning of the category text and description so it looks better.
Shortened the height of the slider.
Quote from: Bocool on Feb 15, 2023, 07:57 PMI've changed the 'Reply' to '#cacaca'. Not sure if we should remove the text-shadow or not...
Yes I think so as you cannot see the shadow anyway. UPDATE: Removed shadow
Quote from: Bocool on Feb 15, 2023, 07:57 PMWe've but the scrollbar code in there because a number of people liked it. You can remove it from your site if you install it there but please leave it in.
I get what you're saying but a browser by default will always have one. All you've really done is colourized it. If you look at the image attached you see that it's black and gold, which I'm guessing is an overspill from 'Ambassador' it doesn't show like that in Firefox only chrome based browsers. I will look into changing the colours for chrome. UPDATE: I've changed the colours
Quote from: Bocool on Feb 15, 2023, 07:57 PMFor the toggle button I thought it had a border around it at one time.
That looks a lot better
Quote from: Bocool on Feb 15, 2023, 07:57 PMEDIT: I've just adjusted the positioning of the category text and description so it looks better.
Shortened the height of the slider.
OK
[attachment deleted by admin]
I have changed the colour of the slider. I've checked it out on my mobile/tablet and it all seems OK and now I'm happy with the theme.
I have installed it on Quizland to trial it in a live environment
Yes, the point was to colorize it. lol
Going to try an experiment and try to make the admin menu like the original.
Just realized that for the "More..." dropdown that you've edited the wrong class. When you hover over it you see the "post_options ul" not the "post_options ul:hover". Yes, you see it when you hover but hover is for changes when you hover such as color, etc.
I realized something was wrong when I tried it and noticed that when I moved away from it the dashed line briefly changed to a solid line. I checked the code and saw what happened. I'll leave it as you've had it so you can see for yourself. However, you should only change the ul. You would make hover changes to the "a" (anchor) when you hover it to edit the borders, backgrounds, etc. The code should have been changed here like this:
.post_options ul {
display: none;
position: absolute;
top: 100%;
right: -1px;
z-index: 90;
padding: 6px;
background: #fff;
font-weight: normal;
text-align: left;
border: 2px dashed #000;
border-radius: 4px;
/* border-left: solid 1px #aaa;
border-top: solid 1px #bbb;
box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.2); */
Yes I see what you mean. I've now changed it
Quote from: Bocool on Feb 16, 2023, 07:23 PMGoing to try an experiment and try to make the admin menu like the original.
I have cheated and decided to copy the curve default index.css code as follows, I then went about changing colours. I have made no changes here but if you want to see what it looks like then go to the test site https://www.davejohnson.co.uk/testing/
I've sent you a PM with login details.
/* Styles for the standard dropdown menus.
------------------------------------------------------- */
.dropmenu, #top_info {
position: relative;
}
/* Level 1 button background. */
.dropmenu > li, #top_info > li {
display: inline-block;
margin: 0 2px 0 1px;
font-size: 0.9em;
line-height: 1.9em;
}
/* Disable default focus outlines */
.dropmenu a {
outline: 0;
}
/* For cases where we want to spotlight something specific to an item, e.g. an amount */
.amt {
margin-left: 3px;
padding: 0 5px;
color: #fff;
background: #6d90ad;
border-radius: 8px;
}
.dropmenu li .active .amt, #top_info li .active .amt {
background: rgba(0, 0, 0, 0.2);
color: inherit;
}
#top_info .top_menu.visible {
display: block;
}
/* Needed for new PM notifications. */
.dropmenu li strong {
color: #333;
}
.dropmenu li a, #top_info > li > a {
padding: 0 7px 0 7px;
display: block;
border: 1px solid transparent;
border-radius: 4px;
}
/* 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;
}
/* 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;
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;
}
/* Level 1 active button. */
.dropmenu li a.active:hover, .dropmenu li:hover a.active {
background: #222;
border: 1px solid #7A7A7A;
color: #FFF;
box-shadow: 0 5px 5px rgba(255, 255, 255, 0.2) inset;
text-shadow: none;
}I also found out that the .popup_window (for logging in) is also a yellowy colour so I will change that on here and on mine
What I was going to do here is leave the main '.dropmenu' as is but only change the admin menu but adding the '.dropmenu' and maybe the 'admin_submenu' (if needed) coding to admin.css. Hopefully, it should only change the admin to look like it does on the original. ;)
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
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. :)
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
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. ;)
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;
}
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.
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
Quote from: Dave on Feb 19, 2023, 03:24 AMQuote 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.
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
Yes, I did see that but forgot about it working on the rest. lol
Fixed! Find '.inline_mod_check' around line 1189 and add this:
height: 24.5px;
margin-top: -.5px;
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]
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
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]
Excellent! :)
I've would've been online sooner but was having problems with my cell service. When it rains, it pours. LOL
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]
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. :)
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.
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;
}
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
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:
checkbox.png
[attachment deleted by admin]
Hmmm, to make the admin different from the front I may have to create a new class or classes...
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]
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... :(
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
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.
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;
}
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;
}