QUICK NEWS

{NEW} - A new css video is up.

{OLD} - New video courtesy of Skhilled, Thanks for posting it up.

Video of the moment:


Internal Links

SMF Sites

Quick Info

Background image

Started by Ronald, Apr 22, 2020, 07:13 PM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

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%;

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. :rgton

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

.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:

/* 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:

.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:

/* 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

Quote from: nidec on Apr 23, 2020, 02:19 AMIs 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

#3
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

Quote from: Skhilled on Apr 23, 2020, 09:22 AM1.  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

Quote from: Skhilled on Apr 23, 2020, 10:15 AMThen 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?
Please do not PM me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Skhilled

#8
Quote from: Ronald on Apr 23, 2020, 10:29 AMI 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:

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

Quote from: LandyVlad on Apr 24, 2020, 12:14 AMspeaking 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

Quote from: Skhilled on Apr 24, 2020, 06:53 AMThe main background for a theme is usually in the body tag and will look something like this, as shown here from the default theme:

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. :rgton

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

.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:

/* 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:

.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:

/* 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:

/* 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:

/* 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;
}