Windows XP

[TwitchisMental]

Link to the theme


Windows XP Inspired SMF Theme.

This theme is based on the main colors of Windows XP.
Features :
Font-Awesome icons.
Social Icons
Custom Footer Blocks
Spicy Board Stats Section
Remixed Breadcrumb

Resource - XP.CSS was a great resource for styling things.
https://botoxparty.github.io/XP.css/

License :


SMF Version :
  

Copyright/Trademark Notice :
I am not affiliated with the Microsoft Corporation.

Windows XP is a registered trademark of Microsoft Corporation.

Patch Notes :

Code Select Expand

1.0 : Initial Release

Code Select Expand

1.0.1
Bug Fix : Fixed the logo not aligning properly when the search bar is disabled.
Adjustment: Adjusted the title_bar text color in the Who's Online section.

Code Select Expand

1.0.2
Update: Updated for SMF 2.1.3
Bug Fix : Fixed an issue where the breadcrumb arrows were not always the same size.
Adjustment: Adjusted the breadcrumb display on smaller screens.
Adjustment: Changed the mobile menu icon color to match the theme.
Adjustment: Removed the padding for the top info in mobile view so that it aligns with the top bar properly.
Adjustment: Adjusted some colors in the AdminCP to match the rest of the theme.

Code Select Expand

1.0.3
Adjustment: Adjusted colors for the text in the search results in the Admin CP.

Code Select Expand

1.0.4
Updated for SMF 2.1.4 and the Attachment UI changes.
Update: Updated Font-Awesome to the latest version.
Adjustment: Adjusted the background colors for various moderation specific styles.
Adjustment: Adjusted several border, text, and link colors in the ACP.
Adjustment: Adjusted the body text color for legibility purposes.
Adjustment: Adjusted the calendar section of the info center to align with everything else.
Adjustment: Adjusted the color of the alert indicator.
Adjustment: Redid the Windows XP default logo.
Adjustment: Adjusted the background colors of the infobox and noticebox.

[-Rock Lee-]

how many memories... how many moments,I guess I'm getting older because by how I remember it.Very good job I'm going to test it on a test site I have .


Regards!

[TwitchisMental]

how many memories... how many moments,I guess I'm getting older because by how I remember it.Very good job I'm going to test it on a test site I have .


Regards!

Thank you .

[Dave J]

Great news, thanks Twitch. Like Rock Lee I also have great memories of XP.

[TwitchisMental]

Great news, thanks Twitch. Like Rock Lee I also have great memories of XP.

Windows XP was a fantastic OS. I still remember having to edit a registry to change the name of the Recycle Bin XD.

If you notice any issues, let me know.

[Dave J]

Hi Twitch

There is an odd error with my sites logo.

With XP when you're logged in if you position the cursor over the logo it tilts it. If you look at the site as a guest the logo is not positioned correctly.

I did reduce the size of the logo but it makes no difference.

This doesn't happen with any of the other themes only XP

See attachments

[Steve]

As far as the tilt, I'd guess that's not an error but intentional but I could be wrong.

Twitch is very good at helping resolve questions you may have.

[Dave J]

As far as the tilt, I'd guess that's not an error but intentional but I could be wrong.

Twitch is very good at helping resolve questions you may have.

Did you have a look Steve?

Ignore that I see you haven't logged in

[Steve]

I just signed up and need approval.

As a guest, I'm not sure what you mean about the logo being positioned correctly?

[Dave J]

I just signed up and need approval.

As a guest, I'm not sure what you mean about the logo being positioned correctly?

OK now I'm confused...I thought you were Skhilled - Steve!

Did you reset the theme to XP? Guests theme is the SMF Default but you can change that to XP on the portal page.

If you look at the images attached in my previous post you'll see that the logo is not fully to the left side for guest but it is when you're logged in


UPDATE: I've just noticed that the logo tilts for guests too

[Steve]

I thought you were Skhilled - Steve!

We get that a lot.

If you look at the images attached in my previous post you'll see that the logo is not fully to the left side for guest

Sorry, totally missed that. Odd, it doesn't show that way for me when I'm logged out. It's slightly indented but otherwise seems fine.

You cannot view this attachment.

Edit: I just realized when I log out I'm on the forum default instead of the XP.

[TwitchisMental]

Hi Twitch

There is an odd error with my sites logo.

With XP when you're logged in if you position the cursor over the logo it tilts it. If you look at the site as a guest the logo is not positioned correctly.

I did reduce the size of the logo but it makes no difference.

This doesn't happen with any of the other themes only XP

See attachments

1. That is not a bug... that is a feature!!! XD  All jokes aside, if you do not like the tilting, it can be removed.
Open custom.css and find line 612

Remove

Code Select Expand

h1.forumtitle img:hover {
  transform: rotate(5deg);
}
2. The positioning issue would be due to the size of your logo. The fix would be to adjust the padding.

Open custom.css and find line 603

Find

Code Select Expand

h1.forumtitle {
  font-size: 1.8em;
  font-family: 'Tahoma', Trebuchet MS, Arial, sans-serif;
  padding: 0px;
  font-weight: normal;
  flex: 1 1 auto;
  margin: 0px;
}
replace with

Code Select Expand

h1.forumtitle {
  font-size: 1.8em;
  font-family: 'Tahoma', Trebuchet MS, Arial, sans-serif;
  padding: 0px 0px 30px 0px;
  font-weight: normal;
  flex: 1 1 auto;
  margin: 0px;
}
If you mean it being centered, that would be due to search not being enabled for guest.

Edit: Thinking further on this, the search not being enabled for guest is the cause of all of this...

I will need to come up with a better future-proof fix for this. The above will still fix the issue, but cause a bigger gap when logged in.

As far as the tilt, I'd guess that's not an error but intentional but I could be wrong.
Twitch is very good at helping resolve questions you may have.

Thank you .

[TwitchisMental]

So looking into this further, I figured out that it may be an issue with all of the OS based themes(Including Orangey).. Which it partly is.

The logo does end up closer to the board index or even overlapping on all of them when search is disabled for guests. This is because of a negative margin I put so the logo and search are even. They all have the logo aligned to the left though. I have a solution for this.

However only the Windows XP gives the major padding from the left for some reason when the search is disabled for guests.
Funny enough it doesn't happen if I just give everything a % width and remove the max-width.  So I have done something silly somewhere .

With that said I am noting this as a bug. 

[Dave J]

So looking into this further, I figured out that it may be an issue with all of the OS based themes(Including Orangey).. Which it partly is.

The logo does end up closer to the board index or even overlapping on all of them when search is disabled for guests. This is because of a negative margin I put so the logo and search are even. They all have the logo aligned to the left though. I have a solution for this.

However only the Windows XP gives the major padding from the left for some reason when the search is disabled for guests.
Funny enough it doesn't happen if I just give everything a % width and remove the max-width.  So I have done something silly somewhere .

With that said I am noting this as a bug. 

Thanks for the reply Twitch and for the info relating to the code changes

[TwitchisMental]

Alright, alright, alriiiiiiight.... I figured it all out and have resolved the issue.

New Version uploaded.

[Steve]

Cool beans Matthew! 

[Dave J]

All working as it should Twitch, thanks for the fix

Sorry...strike that

There is one issue I've found. The text colour for titlebg in the 'users online' is not correct. As you will see in the image the left and middle text should be white but they're not. I did have a quick look to see if I could fix it but can't see what the issue is.

[TwitchisMental]

All working as it should Twitch, thanks for the fix

Sorry...strike that

There is one issue I've found. The text colour for titlebg in the 'users online' is not correct. As you will see in the image the left and middle text should be white but they're not. I did have a quick look to see if I could fix it but can't see what the issue is.

I have replicated the issue and fixed it. New version uploaded. Thank you for reporting this issue.

Code Select Expand

1.0.1
Bug Fix : Fixed the logo not aligning properly when the search bar is disabled.
Adjustment: Adjusted the title_bar text color in the Who's Online section.

[Dave J]

Twitch what files did you edit please? as I have made a small change to index.template

Also, I have to uninstall all the affected mods each time I install a new theme and then reinstall them again

[TwitchisMental]

Twitch what files did you edit please? as I have made a small change to index.template

Also, I have to uninstall all the affected mods each time I install a new theme and then reinstall them again

Open Custom.css and find

Code Select Expand

.title_bar {
    background: linear-gradient(180deg,var(--windowsbg),var(--windowsbg2) 8%,var(--windowsbg3) 40%,var(--windowsbg4) 88%,var(--windowsbg4) 93%,var(--windowsbg5) 95%,var(--windowsbg6) 96%,var(--windowsbg6));
border: none;
color: var(--white);
border-radius: 8px 8px 0 0;
margin: 0px;
box-shadow: none;
        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
padding: 2px 0px;
}
Add this after

Code Select Expand

tr.title_bar a {
    color: var(--white);
}

[Dave J]

Twitch what files did you edit please? as I have made a small change to index.template

Also, I have to uninstall all the affected mods each time I install a new theme and then reinstall them again

Open Custom.css and find

Code Select Expand

.title_bar {
    background: linear-gradient(180deg,var(--windowsbg),var(--windowsbg2) 8%,var(--windowsbg3) 40%,var(--windowsbg4) 88%,var(--windowsbg4) 93%,var(--windowsbg5) 95%,var(--windowsbg6) 96%,var(--windowsbg6));
border: none;
color: var(--white);
border-radius: 8px 8px 0 0;
margin: 0px;
box-shadow: none;
        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
padding: 2px 0px;
}
Add this after

Code Select Expand

tr.title_bar a {
    color: var(--white);
}

Thanks Twitch it's much appreciated

[TwitchisMental]

Twitch what files did you edit please? as I have made a small change to index.template

Also, I have to uninstall all the affected mods each time I install a new theme and then reinstall them again

Open Custom.css and find

Code Select Expand

.title_bar {
    background: linear-gradient(180deg,var(--windowsbg),var(--windowsbg2) 8%,var(--windowsbg3) 40%,var(--windowsbg4) 88%,var(--windowsbg4) 93%,var(--windowsbg5) 95%,var(--windowsbg6) 96%,var(--windowsbg6));
border: none;
color: var(--white);
border-radius: 8px 8px 0 0;
margin: 0px;
box-shadow: none;
        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
padding: 2px 0px;
}
Add this after

Code Select Expand

tr.title_bar a {
    color: var(--white);
}

Thanks Twitch it's much appreciated

No problem.

[Dave J]

Hi Twitch,

There is an issue with post previews on this theme. I should hasten to add that it only happens with the banner bar mod enabled.

With the Chen's banner bar enabled all the other themes of yours, and the default curve, work just fine when previewing posts, it's just this theme that's not playing nicely for some reason.

It's not site specific as it's the same on my main site as it is on the test site. If the issue happened with all themes then I would go to Chen to look at his mod but I wounder if it's something specific to the XP Theme.

Could it be the logo tilt code that is messing with it?

I'm going to send you a PM with login details for the test site so you can have a look for yourself.

If you fell it's banner bar specific then let me know and I'll speak to Chen about it.

Regards

Dave

[TwitchisMental]

Hi Twitch,

There is an issue with post previews on this theme. I should hasten to add that it only happens with the banner bar mod enabled.

With the Chen's banner bar enabled all the other themes of yours, and the default curve, work just fine when previewing posts, it's just this theme that's not playing nicely for some reason.

It's not site specific as it's the same on my main site as it is on the test site. If the issue happened with all themes then I would go to Chen to look at his mod but I wounder if it's something specific to the XP Theme.

Could it be the logo tilt code that is messing with it?

I'm going to send you a PM with login details for the test site so you can have a look for yourself.

If you fell it's banner bar specific then let me know and I'll speak to Chen about it.

Regards

Dave

That is a very odd issue.. Even odder is the fact that it is working for me haha.

You cannot view this attachment. 

I do see an issue with the breadcrumb though.(Self note to fix aswell ).

[Chen Zhen]

@Dave J :
You had an improper entry for the css input from the Banner mod which was causing a JavaScript error (breaking the page output). I will add a filter to that input to attempt to stop things like that.
I adjusted the setting to fix the problem so the only flags I see now are missing images from your SMF Packs shoutbox but those won't cause any problems/conflicts.

At the moment, it appears to be working fine for that theme when I test it.

[Dave J]

That is a very odd issue.. Even odder is the fact that it is working for me haha.
You cannot view this attachment.
I do see an issue with the breadcrumb though.(Self note to fix aswell ).

@Dave J :
You had an improper entry for the css input from the Banner mod which was causing a JavaScript error (breaking the page output). I will add a filter to that input to attempt to stop things like that.
I adjusted the setting to fix the problem so the only flags I see now are missing images from your SMF Packs shoutbox but those won't cause any problems/conflicts.

At the moment, it appears to be working fine for that theme when I test it.

Well that's very odd as it's working for me now, but it didn't on both sites. You can see from the attached that it was just hanging when I tried it.

Anyway we'll call this unexplained, thanks to you both for looking into it.

[Dave J]

so the only flags I see now are missing images from your SMF Packs shoutbox but those won't cause any problems/conflicts.

I've resolved that, the shoutbox bbc folder was not in the XP theme images directory as the theme was added after the install of the shoutbox.

[Senkusha]

Hi!  I love the theme.  But is there a way to disable the tilt effect of the site logo?

[TwitchisMental]

Hi!  I love the theme.  But is there a way to disable the tilt effect of the site logo?

Open custom.css and find line 612

Remove

Code Select

Code Select Expand

h1.forumtitle img:hover {
  transform: rotate(5deg);
}

[Senkusha]

Thank you!

[TwitchisMental]

New Version Uploaded -

Code Select Expand

1.0.2
Update: Updated for SMF 2.1.3
Bug Fix : Fixed an issue where the breadcrumb arrows were not always the same size.
Adjustment: Adjusted the breadcrumb display on smaller screens.
Adjustment: Changed the mobile menu icon color to match the theme.
Adjustment: Removed the padding for the top info in mobile view so that it aligns with the top bar properly.
Adjustment: Adjusted some colors in the AdminCP to match the rest of the theme.

[Senkusha]

There's a bug in your newest version.  Who's Online shows this:

You cannot view this attachment.

[Shades.]

There's a bug in your newest version.  Who's Online shows this:

You cannot view this attachment.

I believe that is an issue with the "Avatars Display Integration" mod not a theme issue. You need to update the mod!

https://www.simplemachines.org/community/index.php?topic=571891.msg4139901#msg4139901

[TwitchisMental]

There's a bug in your newest version.  Who's Online shows this:

Whosonline.png

I believe that is an issue with the "Avatars Display Integration" mod not a theme issue. You need to update the mod!

https://www.simplemachines.org/community/index.php?topic=571891.msg4139901#msg4139901

This ^

[Senkusha]

Oh!  Sorry, my bad!  Yup, the updated version fixed the problem.  ... That's what I get for installing multiple things at once.  I know better.  *sweatdrop*

Thank you!

[Senkusha]

Something that needs to be corrected is when I used Help (for the first time), I noticed the text is nearly impossible to read.

You cannot view this attachment.

[TwitchisMental]

Something that needs to be corrected is when I used Help (for the first time), I noticed the text is nearly impossible to read.

You cannot view this attachment.

Thank you for reporting this. I will get this resolved as soon as I can.

[TwitchisMental]

New Version Uploaded -

Code Select Expand

1.0.3
Adjustment: Adjusted colors for the text in the search results in the Admin CP.

[Senkusha]

Thank you for the quick update!  Also, I really hate to be a pain in the backside, but I have two suggestions please:

1.  I don't know if this is possible, but is there a way to make a toggle option for the logo twitch?  I like the effect, but I find it annoying every time I want to go to my profile button.  (Another option might be to just relocate that profile bar to underside of the logo image or even below the menu bar??  I think it would make the theme be more differentiated from the default.  -- Just a suggestion though.

2.  Would it be possible to have the green "button" as the selected menu option instead of the current blue button for the selected menu item?  It would make it so that the current screen is more highly visible.

[Steve]

1.  I don't know if this is possible, but is there a way to make a toggle option for the logo twitch?

If you want to remove the effect completely, see post #11 above. If you still want the toggle, Twitch will have answer that.

[Senkusha]

1.  I don't know if this is possible, but is there a way to make a toggle option for the logo twitch?

If you want to remove the effect completely, see post #11 above. If you still want the toggle, Twitch will have answer that.

Thank you.  I have applied the remedy in post 11, however, everytime I need to do an update, I have to make the same correction.  It's not really a huge deal.

[Senkusha]

Question:  I would like the BlockQuote, Sticky and Locked colors to stand out more.  I tried the custom.css, but for some reason my changes aren't taking place.  Am I looking in the correct file?

Thanks!

[TwitchisMental]

custom.css will have the quote background at line 1372.

index.css will be where you need to edit the stick and locked colors around line 2926.

[Steve]

And the option of minimized files unchecked in admin.

[Senkusha]

This is strange.  I've modified the index.css file, uploaded to the /css folder, flushed the cache, and forced the browser to refresh (Ctrl + F5), but I'm not seeing the changes taking effect.

Code Select Expand

/* Nobody wants locked topics to stand out much. */
.windowbg.locked {
background: #ffcce0;
}
/* Sticky topics get a different background */
.windowbg.sticky {
background: #ffcc99;
}
/* Locked AND sticky are a bit more technical */
.windowbg.sticky.locked {
background: #ff9999;
}


[TwitchisMental]

This is strange.  I've modified the index.css file, uploaded to the /css folder, flushed the cache, and forced the browser to refresh (Ctrl + F5), but I'm not seeing the changes taking effect.

Code Select Expand

/* Nobody wants locked topics to stand out much. */
.windowbg.locked {
background: #ffcce0;
}
/* Sticky topics get a different background */
.windowbg.sticky {
background: #ffcc99;
}
/* Locked AND sticky are a bit more technical */
.windowbg.sticky.locked {
background: #ff9999;
}


Most likely because it is being set in custom.css. Try adding it to the bottom of the custom.css.

[Senkusha]

Just tried that.  No effect.  Again, flushed the SMF cache and forced a refresh on my browser.  (Firefox) and (Chrome)

[TwitchisMental]

Just tried that.  No effect.  Again, flushed the SMF cache and forced a refresh on my browser.  (Firefox) and (Chrome)

Have you turned off the minimize css files option?

[Senkusha]

Yes.

[TwitchisMental]

Yes.

I believe I sent you the resolution via pm on your forum.

[TwitchisMental]

New Version Released:

Code Select Expand

1.0.4
Updated for SMF 2.1.4 and the Attachment UI changes.
Update: Updated Font-Awesome to the latest version.
Adjustment: Adjusted the background colors for various moderation specific styles.
Adjustment: Adjusted several border, text, and link colors in the ACP.
Adjustment: Adjusted the body text color for legibility purposes.
Adjustment: Adjusted the calendar section of the info center to align with everything else.
Adjustment: Adjusted the color of the alert indicator.
Adjustment: Redid the Windows XP default logo.
Adjustment: Adjusted the the background colors of the infobox and noticebox.

[ququnta]

Windows XP

Hello! Can you port this wonderful theme to smf 2.0?
A lot of mods can be used only on this version of SMF...

[TwitchisMental]

Windows XP

Hello! Can you port this wonderful theme to smf 2.0?
A lot of mods can be used only on this version of SMF...

Sorry I do not plan on making any more SMF 2.0 themes.