Christmas theme 2.1RC3

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

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

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, 01:53 PMjust 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, 11:15 AM #20 Last Edit: Nov 28, 2020, 04:26 PM by lesmond
Quote from: Oldiesmann on Nov 28, 2020, 04:25 AMPut 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, 01:53 PMjust 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, 09:20 AM #24 Last Edit: Nov 29, 2020, 09:29 AM by lurkalot Reason: add examples
Quote from: lesmond on Nov 24, 2020, 10: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, 11:49 AM #26 Last Edit: Nov 29, 2020, 12:19 PM by lesmond Reason: Updated zip file
Quote from: Oldiesmann on Nov 29, 2020, 04:11 AMThanks! 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, 04:27 PM #27 Last Edit: Dec 05, 2020, 12:12 AM 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 29, 2020, 04:11 AMThanks! 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