Christmas theme 2.1RC3

Started by lesmond, Nov 17, 2020, 04:47 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

lesmond

Nov 17, 2020, 04:47 PM Last Edit: Dec 04, 2020, 11:26 AM by lesmond Reason: New theme zip
Been working on this today, needs a bit more work, this is what I have so far, thoughts :???

The wooden/logo plaque is editable and loads with the theme, and can be changed in theme settings, psd will be supplied for that.


The only person who got all his work done by Friday was Robinson Crusoe

Bigguy

That is a very cool xmas theme for sure. Good work man.

Ronald

for sure Les. SMF has many theme skins, but very few holiday theme skins.

lesmond

new update, not sure about the background!


The only person who got all his work done by Friday was Robinson Crusoe

Bigguy

Different snowflakes maybe. :dontknow I like it but that is what seems to be off for me.

lesmond


The only person who got all his work done by Friday was Robinson Crusoe

Bigguy

Geez, that's nice to. Maybe you should make two, lol.....or just have two backgrounds and change them on page load.

Oldiesmann

I like the light blue background better
Cincy Space - now open! https://www.cincyspace.net

lesmond

Nov 22, 2020, 07:02 AM #8 Last Edit: Nov 26, 2020, 03:41 PM by lesmond
If anyone would like to try this theme for SMF 2.1 RC3 I have included the zip below.

Included in the file is the psd for the logo to add your own forum name..



The background changes on a page load, 4 backgrounds are included in Themes/christmas/images/custom/background folder, these can be changed if needed, but try and keep the same sizes. if you want only one image, remove the ones you don't want, but don't remove rotator.php

DEMO HERE

The only person who got all his work done by Friday was Robinson Crusoe

Bigguy

Very cool. Glad you got it done. That didn't take you very long at all. :rgton

Oldiesmann

Looking at the demo, I do see one issue. The sort header links in the message index (Subject, Started By, etc.) are difficult to read. Is there any way you could change those to white without messing up other links?
Cincy Space - now open! https://www.cincyspace.net

lesmond

Nov 23, 2020, 05:45 AM #11 Last Edit: Nov 26, 2020, 03:44 PM by lesmond
Quote from: Oldiesmann on Nov 22, 2020, 11:17 PMLooking at the demo, I do see one issue. The sort header links in the message index (Subject, Started By, etc.) are difficult to read. Is there any way you could change those to white without messing up other links?

The only problem is those links are all under one section of code in the css, so if I change those it changes lots of other text.

All arrowed items are defined by this, so changing to white also change the others.

a, a:visited {
    color: #171dde;
    text-decoration: none;
    }


I have changed the background of the bar to a lighter green, and the text dark green, hopefully stands out better :)



Included new zip to reflect the change.

The only person who got all his work done by Friday was Robinson Crusoe

Skhilled

You need to separate the "a" and "a:visited" so they will have unique colors.

Bigguy

I was just gonna suggest that. Rip'm apart and give them their own css.

lesmond

Quote from: Skhilled on Nov 23, 2020, 10:43 AMYou need to separate the "a" and "a:visited" so they will have unique colors.

Trouble is a, a:visited are used in so many place, look at all the highlighted place here, even if you split them not much changes :(

The only person who got all his work done by Friday was Robinson Crusoe

Oldiesmann

Those are generic CSS identifiers, so those will apply to all links that don't have a specific CSS class. Only way you could really fix it properly would be to give various things their own class, but then you have to mess with templates as well
Cincy Space - now open! https://www.cincyspace.net

SychO

just target the links you want changed using they parent element's class names.

Skhilled

That's what I've told him several times. LOL I've even created a custom default css file when RC1 came out. It took a lot of time and effort but well worth it. It has a lot of the styles separated and several custom styles to make things a lot easier when we upgrade Crip Zone themes. ;)

When RC2 came out I only have to make a few changes. I haven't had the time to look over RC3 to see what changes are needed to add to the custom default file I've created. But once you've separated a few main styles into their own styles so they are not grouped it makes things SOOOOOO much easier to code.

If other coders are like me they are not happy with the styles for 2.1. It makes things so much harder to keep up with...a lot more work for the sake of a tiny bit of speed. SMF needs to fix or create new caching to truly fix its speed, imo.

lesmond

Quote from: SychO on Nov 24, 2020, 08:53 AMjust target the links you want changed using they parent element's class names.
Has you may have noticed, I am not a coder, ok doing the colours and graphics.

The only person who got all his work done by Friday was Robinson Crusoe

Oldiesmann

Put it up on the seniors site... Just used a generic "Merry Christmas" logo since I suck at Photoshop
Cincy Space - now open! https://www.cincyspace.net

lesmond

Nov 28, 2020, 06:15 AM #20 Last Edit: Nov 28, 2020, 11:26 AM by lesmond
Quote from: Oldiesmann on Nov 27, 2020, 11:25 PMPut it up on the seniors site... Just used a generic "Merry Christmas" logo since I suck at Photoshop

Here you go, and new header and logo

The only person who got all his work done by Friday was Robinson Crusoe

Bigguy


lesmond

Quote from: SychO on Nov 24, 2020, 08:53 AMjust target the links you want changed using they parent element's class names.
How would one do that?

The only person who got all his work done by Friday was Robinson Crusoe

Oldiesmann

Thanks! The theme is a big hit :)
Cincy Space - now open! https://www.cincyspace.net

lurkalot

Nov 29, 2020, 04:20 AM #24 Last Edit: Nov 29, 2020, 04:29 AM by lurkalot Reason: add examples
Quote from: lesmond on Nov 24, 2020, 05:51 PMHas you may have noticed, I am not a coder, ok doing the colours and graphics.

Ditto.  I'm struggling with this issue as well, SychO kindly gave me a real time example which worked well when I tried it, even changed some stuff in a couple of other places which worked, then I get stuck again.. I realise grouping this stuff together save time and loads of extra coding, but for a non savvy user like myself, I find the theme very difficult to change what should be a simple css colour change. 

Think we need a masterclass (with real examples) if anyone is willing please?

Here's a couple of things to start with.  The text on the top bar, logged out, and logged in, how do we change the colour of the text without changing the colour anywhere else?

lesmond

One of the biggest sections I split was this below...

this changes a lot of section like menus and cat bars.
/* Those classes are sharing exact same gradient. */
/* Background of buttons */
.dropmenu li ul, .top_menu, .dropmenu li li:hover, .button,
.dropmenu li li:hover > a, .dropmenu li li a:focus, .dropmenu li li a:hover,
#top_section, #search_form .button, .quickbuttons li,
.quickbuttons li ul, .quickbuttons li ul li:hover, .quickbuttons ul li a:focus,
.popup_window, #inner_section {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #e2e9f3 0%, #fff 70%);
}

This is what I ended up with, these colour changes will only be relevant to the christmas theme though.

/* Those classes are sharing exact same gradient. */
/* Background of buttons */
.popup_window {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #f9f9f9 0%, #222f92 100%);
}

#top_section {
 background: #fff; /* fallback for some browsers */
 background: url(../images/custom/top-bar.png);
}

#search_form {
 background: #fff; /* fallback for some browsers */
 background: url(../images/custom/top-bar.png);
}

.button {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #109840 0%, #37ab1a 70%);
}

.quickbuttons li {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #109840 0%, #37ab1a 70%);
}

.quickbuttons li ul li:hover {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #109840 0%, #37ab1a 70%);
}

.quickbuttons ul li a:focus {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #109840 0%, #37ab1a 70%);
}

.dropmenu li li a:hover {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #fff 0%, #ffffff 70%);
}

.quickbuttons li ul {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #109840 0%, #37ab1a 70%);
}

.dropmenu li li a:focus {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #fff 0%, #fff 70%);
}

.dropmenu li li:hover > a {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #fff 0%, #37ab1a 70%);
}

.button {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #109840 0%, #37ab1a 70%);
}

.dropmenu li li:hover {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #fff 0%, #37ab1a 70%);
}

#inner_section {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #fff 0%, #fff 70%);
}

.top_menu {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #f9f9f9 0%, #e7f5e4 70%);
}

.dropmenu li ul {
 background: #fff; /* fallback for some browsers */
 background-image: linear-gradient(to bottom, #e9f5ed 0%, #dbead7 70%);
}
/* Those classes are sharing exact same gradient. END */
/* Background of buttons END*/

/* ---------------------------------------- */

The only person who got all his work done by Friday was Robinson Crusoe

lesmond

Nov 29, 2020, 06:49 AM #26 Last Edit: Nov 29, 2020, 07:19 AM by lesmond Reason: Updated zip file
Quote from: Oldiesmann on Nov 28, 2020, 11:11 PMThanks! The theme is a big hit :)

I see the members had problems with the quote buttons text colour, so I have changed that to white.

also changed the colour of the quote icon in the sprite to white, attached below if you want to change it?



*Updated zip attached*

The only person who got all his work done by Friday was Robinson Crusoe

lesmond

Dec 04, 2020, 11:27 AM #27 Last Edit: Dec 04, 2020, 07:12 PM by lesmond
Color of the text in the menu buttons changed to a lighter color to be able to read better, added color:#fafafa; the the code below   :vcool

.dropmenu li a, #top_info > li > a {
    padding: 0 7px 0 7px;
    display: block;
    border: 1px solid #ec0707;
    border-radius: 4px;
    background: #189b3a;
    color:#fafafa;



*zip updated in first post*

The only person who got all his work done by Friday was Robinson Crusoe

lesmond

Quote from: Oldiesmann on Nov 28, 2020, 11:11 PMThanks! The theme is a big hit :)

If you want to change more text colors to white, try the index.css file here, dont forget to backup the old one ;)

The only person who got all his work done by Friday was Robinson Crusoe