Background image

[Ronald]

SMF 2.1 RC2 SMF Default Theme - Curve2

I am trying to install a background image, I was in the cPanel and under default skin in the images I add a file called Theme and I uploaded my image.

But when trying to put the image in the default curve2 skin, it just will not show..

Below is my code

   background: #e9eef2 url(../images/Themes/spring.jpg)fixed;
   background-attachment: fixed;
   background-size: 50% 100%;

[Skhilled]

Those are the category backgrounds or "catbg" as they are called in CSS. If you right click on one and then select "Inspect element". You'll see a popup of Web Developer. You'll see where and how to change it.

Again, this is a temporary thing but will let you see what's going on and let you play with it until you have what you need. This is how you find what you need or can get close to it. Remember to make a copy of the default curves file, give it a name, install this new theme and use that as your main theme.

Now, to change that code you'll need to look in index.css around line 3834 for this:

Code Select Expand

.navigate_section ul, .popup_content, .up_contain {
    background: #fff;
    background-image: none;
    background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%);
}
Change it to the following so you can change it back later, if needed:

Code Select Expand

/* The original code */
/* .navigate_section ul, .popup_content, .up_contain {
    background: #fff;
    background-image: none;
    background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%);
} */

.navigate_section ul, .popup_content {
    background: #fff;
    background-image: none;
    background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%);
}

Then on line 3003 find this:

Code Select Expand

.up_contain {
    overflow: hidden;
    border: 1px solid #ddd;
    margin: -1px 0 3px 0;
    display: flex;
    flex-wrap: wrap;
}
And change it to this. I've added the "background: #000;" style. In the example below I've change it to black. Just change it to whatever color suits you:

Code Select Expand

/* The original code */
/* .up_contain {
    overflow: hidden;
    border: 1px solid #ddd;
    margin: -1px 0 3px 0;
    display: flex;
    flex-wrap: wrap;
} */

.up_contain {
    overflow: hidden;
    border: 1px solid #ddd;
    margin: -1px 0 3px 0;
    display: flex;
    flex-wrap: wrap;
    background: #000;
}

[nidec]

Is your file called Theme or Themes?
In your code it shows the plural

[Ronald]

Is your file called Theme or Themes?
In your code it shows the plural

It is Themes in the database. I made a change to Theme, got a error message, chnaged it back to Themes and works again.

This being the Curve2 is the default theme

[Skhilled]

1.  Never change/edit the default SMF theme. Mods rely on it's code to always be the same. Also, when you upgrade SMF to a newer version you will lose it all if you edit the default theme. New or custom themes or copies of themes will be safe.

2.  Make a copy of the default, edit it and use that for your main theme.

Is it working now?

[Ronald]

1.  Never change/edit the default SMF theme. Mods rely on it's code to always be the same. Also, when you upgrade SMF to a newer version you will lose it all if you edit the default theme. New or custom themes or copies of themes will be safe.

2.  Make a copy of the default, edit it and use that for your main theme.

Is it working now?

What I did was I found a Mod. that changes the colours, but it only works on the default curve2 skin. I have another skin I made from the original called Seniors, see when you have another skin, this mod doesn't work on it.

I have reset the default back to its originality.

Everything works now, background image is also in, but I have the same ole looking skin..it is to bright on my eyes, this is why I was attempting to change to a little darker theme skin..

[Skhilled]

Then create a copy of the default then give it a name and change that one to your liking.

[Ronald]

Then create a copy of the default then give it a name and change that one to your liking.

I did that also, but this colour change mod doesn't work, it's only good for the curve2 skin.

I have tried changing colours on a test skin, I just can't seem to find the right locations for the changes.

[LandyVlad]

speaking of backgrounds - has the one on this site (SMF Helper) disappeared or is just the computer I'm accessing it from?

[Skhilled]

I did that also, but this colour change mod doesn't work, it's only good for the curve2 skin.

I have tried changing colours on a test skin, I just can't seem to find the right locations for the changes.

The main background for a theme is usually in the body tag and will look something like this, as shown here from the default theme:

Code Select Expand

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

speaking of backgrounds - has the one on this site (SMF Helper) disappeared or is just the computer I'm accessing it from?

Geoff had to redo the site and never put the custom theme back on yet.

[Ronald]

The main background for a theme is usually in the body tag and will look something like this, as shown here from the default theme:

Code Select Expand

body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}Geoff had to redo the site and never put the custom theme back on yet.

I can change the html colour and not the forum face page colour.

[Skhilled]

Please show me a screenshot ...

[Ronald]

See image, all the white  you see is what I'd like to change to a light blue colour.
You cannot view this attachment.

[Skhilled]

Those are the category backgrounds or "catbg" as they are called in CSS. If you right click on one and then select "Inspect element". You'll see a popup of Web Developer. You'll see where and how to change it.

Again, this is a temporary thing but will let you see what's going on and let you play with it until you have what you need. This is how you find what you need or can get close to it. Remember to make a copy of the default curves file, give it a name, install this new theme and use that as your main theme.

Now, to change that code you'll need to look in index.css around line 3834 for this:

Code Select Expand

.navigate_section ul, .popup_content, .up_contain {
    background: #fff;
    background-image: none;
    background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%);
}
Change it to the following so you can change it back later, if needed:

Code Select Expand

/* The original code */
/* .navigate_section ul, .popup_content, .up_contain {
    background: #fff;
    background-image: none;
    background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%);
} */

.navigate_section ul, .popup_content {
    background: #fff;
    background-image: none;
    background-image: linear-gradient(to bottom, #fff 0%, #f1f3f5 95%);
}

Then on line 3003 find this:

Code Select Expand

.up_contain {
    overflow: hidden;
    border: 1px solid #ddd;
    margin: -1px 0 3px 0;
    display: flex;
    flex-wrap: wrap;
}
And change it to this. I've added the "background: #000;" style. In the example below I've change it to black. Just change it to whatever color suits you:

Code Select Expand

/* The original code */
/* .up_contain {
    overflow: hidden;
    border: 1px solid #ddd;
    margin: -1px 0 3px 0;
    display: flex;
    flex-wrap: wrap;
} */

.up_contain {
    overflow: hidden;
    border: 1px solid #ddd;
    margin: -1px 0 3px 0;
    display: flex;
    flex-wrap: wrap;
    background: #000;
}

[Ronald]

I now have a light blue on the face page: You cannot view this attachment.

Be nice now to know how to do the inside pages, for making a post.

Thanks a lot Steve, great work.

[Skhilled]

Hmmm, I haven't tested this but try:

Find this around line 2754 and change the background colors. Again change the ones with "#000" which is black. You can have two separate colors like the original code does to make it look nicer:

Code Select Expand

/* Here comes the glory... */
.windowbg:nth-of-type(even), .bg.even {
 background: #f0f4f7;
}
.windowbg:nth-of-type(odd), .bg.odd {
 background: #fdfdfd;
}
Change to this:

Code Select Expand

/* The original code */
/* Here comes the glory... */
/* .windowbg:nth-of-type(even), .bg.even {
 background: #f0f4f7;
}
.windowbg:nth-of-type(odd), .bg.odd {
 background: #fdfdfd;
} */

/* Here comes the glory... */
#forumposts .windowbg:nth-of-type(even), .bg.even {
 background: #000;
}
#forumposts .windowbg:nth-of-type(odd), .bg.odd {
 background: #000;
}