Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Aiheen aloitti: KotsChopShop - elokuu 13, 2011, 02:09:34 IP

Otsikko: background image HTML
Kirjoitti: KotsChopShop - elokuu 13, 2011, 02:09:34 IP
SMF 2.0 - copied Core theme - editing index.css - this is the only editing I've done to this theme - no mods

hey all, I need to implement some HTML into the style sheet so as to keep the background image centered, yet fill the screen on all resolutions

the code works fine in the preview box, but after hittn save and navn to the site, the background doesn't show ..help?

the code being used is highlighted in the 1st image

Otsikko: Re: background image HTML
Kirjoitti: Akyhne - elokuu 13, 2011, 06:46:50 IP
I don't find your custom theme on your site.
Otsikko: Re: background image HTML
Kirjoitti: KotsChopShop - elokuu 13, 2011, 08:42:52 IP
it's back up, sorry about that
Otsikko: Re: background image HTML
Kirjoitti: Akyhne - elokuu 13, 2011, 08:56:48 IP
What's the theme id?
Otsikko: Re: background image HTML
Kirjoitti: KotsChopShop - elokuu 13, 2011, 11:23:46 IP
it's set as default, it's the 'ChopShop' theme
Otsikko: Re: background image HTML
Kirjoitti: Akyhne - elokuu 14, 2011, 02:36:03 AP
And the id...?
Otsikko: Re: background image HTML
Kirjoitti: KotsChopShop - elokuu 14, 2011, 02:42:45 AP
sorry, but I don't know what that means.. how do I find the ID
Otsikko: Re: background image HTML
Kirjoitti: Akyhne - elokuu 14, 2011, 07:12:59 AP
If you browse to the page where you select themes, you can see the id by hovering on the theme's link.
Otsikko: Re: background image HTML
Kirjoitti: KotsChopShop - elokuu 14, 2011, 07:25:29 AP
still don't know where or what you mean bro - on the AdminCP > Themes and Layout Settings? - or in myCP? Profile> Choose a theme?

and what do you want me to do with it when I find it, right click copy addy yes?.. if so, is this what you're lookn for?

http://kotschopshop.site90.com/index.php?action=theme;sa=pick;u=1;th=3;aecfebc=0411d745f995dbb9eaf6a865c6c8c190
Otsikko: Re: background image HTML
Kirjoitti: Akyhne - elokuu 14, 2011, 07:35:13 AP
Change the link to the image to:
background-image: url(../images/bg-homepage.jpg);

Works then.
Otsikko: Re: background image HTML
Kirjoitti: KotsChopShop - elokuu 14, 2011, 07:49:46 AP
indeed it does.. oddly enough, the roles have changed as it doesn't show in the preview window :/ lol

many thanks Akyhne

edit- but the same exact code doesn't work on a copy of the Curve based theme o.O (altho like the Core based theme, it workd in the preview before I changed the address)

http://kotschopshop.site90.com/index.php?action=theme;sa=pick;u=1;th=4;aecfebc=0411d745f995dbb9eaf6a865c6c8c190
Otsikko: Re: background image HTML
Kirjoitti: Akyhne - elokuu 14, 2011, 07:57:53 AP
You are welcome. Please mark the topic solved.
Otsikko: Re: background image HTML
Kirjoitti: KotsChopShop - elokuu 14, 2011, 08:11:46 AP
I did, but then unchecked it again because of what I relayed in my edit lol
Otsikko: Re: background image HTML
Kirjoitti: Akyhne - elokuu 14, 2011, 08:22:35 AP
This seems to work for me in any theme:
body
{
   background: #E9EEF2 url(http://kotschopshop.site90.com/Themes/ChopShop/images/bg-homepage.jpg)  no-repeat center center fixed;
   background-size: cover;
   font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
   margin: 0 auto;
   padding: 15px 0;
}

EDIT: Do remember that ../images/bg-homepage.jpg is a relative path to the image from the .css file, which means you'd have to put it in every theme you edit this way.
Otsikko: Re: background image HTML
Kirjoitti: KotsChopShop - elokuu 14, 2011, 01:41:32 IP
Lainaus käyttäjältä: Akyhne - elokuu 14, 2011, 08:22:35 AP
EDIT: Do remember that ../images/bg-homepage.jpg is a relative path to the image from the .css file, which means you'd have to put it in every theme you edit this way.

*smacks forehead* DUH - sorry bro, I completely spaced on addn it to its relative folder - thank you Akyhne
Otsikko: Re: background image HTML
Kirjoitti: Justin se - elokuu 15, 2011, 03:51:23 IP
i recommand you to use firebug on firefox.
you'll be able to do all this code checking online:}