Help Finding Code to change SMF background colors on forum running 2.0.17

Started by GirlinGray, January 21, 2020, 12:10:23 AM

Previous topic - Next topic

GirlinGray

I've looked all over and have not found an answer. Help?

I've got an smf board running Curve theme, 2.0.17, I desperately want to change out the blue theme color backgrounds in the main forum.

Can anyone give me a heads up on where I'm going to find the code for that ftp'ing in and what I'm looking for there (css, body, something along those lines?) to change out the board background colors for the main forum background?

Thanks. Hope this is in the right spot. Appreciate any help.


max

PS: If it helps I can post the forum url, I'm just not sure how cool it is to be posting urls around here, I just have to get rid or that cobalt blue and skyblue background, Sigh. https://academyoffilmwriting.com/forum (feel free to pull that if it's not cool to post it)
That Adams Girl

m4z

The easiest option would be to use the Curve2 color changer mod. For the uninitiated (like myself), the css files require a bit of experimentation.
"Faith is what you have in things that don't exist."
--Homer Simpson

Es gibt hier im Forum ein deutsches Support-Board!

GirlinGray

Thanks for the response. Curve2 Color Changer only works with smf 2.1, though, I think? I'm on 2.0.17 and can't upgrade to 2.1 without stripping all the functioning mods off the site, I think, which isn't an option right now.
That Adams Girl

Antechinus

Yup. Most of it will be in index.css (depending on how far you want to take things).

Try this as a starting point: https://www.simplemachines.org/community/index.php?topic=569433.msg4029805#msg4029805

There's an edited index.css attached to that post, which replaces all the default images with CSS3 gradients, etc. All done on default markup.

If you run a comparison between that and a vanilla copy of index.css (ie: in Winmerge or similar) the changes should be pretty obvious.

You can use the same classes and whatnots to change colours.

m4z

Quote from: GirlinGray on January 21, 2020, 01:50:37 AM
Thanks for the response. Curve2 Color Changer only works with smf 2.1, though, I think? I'm on 2.0.17 and can't upgrade to 2.1 without stripping all the functioning mods off the site, I think, which isn't an option right now.

Ah, sorry, 2.1 user replying before the first coffee... :-[
"Faith is what you have in things that don't exist."
--Homer Simpson

Es gibt hier im Forum ein deutsches Support-Board!

GirlinGray

Is there a file full of default images that are used supporting the Curve theme's default color scheme background?

Is that a stupid question?

I'm lousy at code but good with graphics, if there's some graphics file I could sweep through changing colors and swap out that would be an immediate color change that would be an easy fix for me.
That Adams Girl

Antechinus

Yes and no. It uses a combination of images for some bits and CSS for others, so if you want to change backgrounds you'll still need to do some CSS changes.

Most of the images you'll want are in default/images/theme. Some are directly inside the images folders (on, off, etc).

This page has basic PSD's for Curve: https://custom.simplemachines.org/themes/index.php?lemma=2428

That page also has a link to a version in .ai format (which I must admit I've never looked at).
I was planning on making an .xcf version at one stage but there never seemed to be any demand for it.

GirlinGray

If they're jumbled in with all the other images like on/off and such, that's too crazy to sort to identify them and break them out to do a clean fast sweep. Ach.

What I need is the exact location of the css template(s) to change and the exact code spots on the page to change color for the forum background color. I'm brain dead right now mostly from pulling 48 hours on site redesigns and platforms already and sort of left forum for last because it's always an impossible mountain finding anything that works in terms of themes or color schemes that I can work with to mesh in. So it just sort of exists as function but an aesthetic black eye on the site. Sigh.

If I could I'd just install the Broken theme, which is sharp and would be close enough, but I tried it once on another smf version and it conflicted with a login section and text was too small for a lot of the users in the forum.

Anyway, anyone?

QuoteWhat I need is the exact location of the css template(s) to change and the exact code spots on the page to change color for the forum background color.

That Adams Girl

Illori

a lot of the colors are not just in the CSS, they are in images. that is why you were pointed to those images.

https://www.simplemachines.org/community/index.php?topic=569433.msg4029805#msg4029805 might be easier for you as it does not have the images in the CSS.

Antechinus

Quote from: GirlinGray on January 21, 2020, 02:47:08 PM
If they're jumbled in with all the other images like on/off and such, that's too crazy to sort to identify them and break them out to do a clean fast sweep. Ach.

No, it really isn't. There aren't that many to deal with. Just take a look inside Themes/default/images and Themes/default/images/theme. It'll be pretty obvious which image does what.

What I need is the exact location of the css template(s) to change and the exact code spots on the page to change color for the forum background color.

I gave you a CSS example to start with, and you said you wanted to do it with images. :P

Which forum background colour are you referring to? There are a range of different backgrounds in different areas.

Do you know how to use basic browser dev tools? Because that will give you the HTML and CSS for any element on the page.

Just right click on whatever interests you, and select "Inspect Element". Hey presto, instant readout of all relevant code, in easily digestible format.

QuoteI'm brain dead right now mostly from pulling 48 hours on site redesigns and platforms already...

Right. There's your problem. Get some sleep. Nobody will really mind if the forum stays boring for a day or so. Sort it later.

QuoteIf I could I'd just install the Broken theme, which is sharp and would be close enough, but I tried it once on another smf version and it conflicted with a login section and text was too small for a lot of the users in the forum.

Both of those can be fixed, if you want to use that theme.

GirlinGray

Thank you so much for the help and responses. I have not disappeared - I just did need to grab sleep and cover some other work bases. I'll be back shortly to try these fixes out. I appreciate you taking the time.
That Adams Girl

Sir Osis of Liver

Quote from: Antechinus on January 21, 2020, 05:20:55 PM
Which forum background colour are you referring to? There are a range of different backgrounds in different areas.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

GirlinGray

That Adams Girl

Hatshepsut

Quote from: GirlinGray on January 26, 2020, 11:07:51 PM
The blue background on the main forum page.

Open index.css file for default SMF Default Theme - Curve.

Find:
body
{
   background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
   font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
   margin: 0 auto;
   padding: 15px 0;
}


Replace color code with desired by you, and remove URL from that line.
Make sure to end the line with ; symbol.

Example with peach color :)
body
{
   background: #FFE5B4;
   font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
   margin: 0 auto;
   padding: 15px 0;
}

Sir Osis of Liver

Or do a linear-gradient -



background-image: linear-gradient(#5B7637 0, #EFF3EA 500px);


Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

GirlinGray

I replaced all the background images I could find in theme with duplicates with saturation removed. That worked muting the forum main page -- enough blue is gone now (no more cobalt yay!) it doesn't smack people in the eye with blue coming in off a black and white site. Yay!

Will be messing around with css next to see if I can lose more blue and bring in more black and white and gray contrast.

Thank you so much for your help.

max
That Adams Girl

Antechinus

Quote from: Hatshepsut on January 26, 2020, 11:59:00 PM
Quote from: GirlinGray on January 26, 2020, 11:07:51 PM
The blue background on the main forum page.

Open index.css file for default SMF Default Theme - Curve.

Find:
body
{
   background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
   font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
   margin: 0 auto;
   padding: 15px 0;
}


Replace color code with desired by you, and remove URL from that line.
Make sure to end the line with ; symbol.

Example with peach color :)
body
{
   background: #FFE5B4;
   font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
   margin: 0 auto;
   padding: 15px 0;
}


The only catch with that is the main_block.png image has the coloured background at the corners, so you need to change the image too for it to work (otherwise you have stray blue corners against your nifty peachy background).

Which is not a problem if you're completely desaturating the image anyway, but is if you want to use custom colours.

Advertisement: