solved Changing the background image

Hi there,

I´m working on a site named http://find-et-band.dk/

I would like to do, what I thought was simple: Changing the background image.

I have been trying to do this:


But the background image is places under the footer. Not as the site background.

I can see that there is a background image in: /core/skin_admin/images/skin=jrElastic - but it´s not being used.

Is there a simple way to do this? Maybe via css? If yes - how?

It´s an image I want. Not just a color.

Thanks alot

Torben
updated by @torbenj: 10/05/14 06:43:57PM

You will want to add the background image to the html tag in your CSS, then make sure and set the background color to "transparent" for body and #wrapper:


For customizing your site make sure you are using Firefox for your browser - it has style tools in the developer tools that lets you click on an item and see the CSS classes and id's associated with the element - this saves you a ton of time trying to figure out what is involved with styling an element.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Hi Brian,

Thank you for the quick reply

I´m not sure I understand how to do what you are telling me to do. But I think I found a solution to the issue. All I did was to change the color in html.css in the ACP to "transparent". That makes the background image appear as you can see on my site

Now I believe that I can change the bckgrd.png to any image I like?

Thanks again

OK, now I´m a little confused...

First it seemed to work, but now after I changed the bckgrd.png image it´s changing the header and footer background instead..?

So now I know how to change the header an footer, but I still can´t change the background of the site.

Where should I put the CSS if that´s needed? I can´t seem to find the right file to put it in. I have tryed to change a few things inside /public_html/skins/jrElastic-release-1.2.1/css/html.css - but nothing really happens. I have also tryed the /public_html/skins/jrElastic-release-1.2.1/css/html.css folder, but it´s the same... Nothing happens on my site.

There is a good chance that I´m doing something wrong here

Let me know.

Thanks!

if you change anything in a version of the skin it will be reverted as soon as a new version of the skin comes out.

Your editing
/public_html/skins/jrElastic-release-1.2.1/css/html.css

Which is a version of jrElastic.

There are a few ways to do what your trying to do.

* alter the aspects of a skin via the ACP - SKINS - STYLE tab.
* clone the skin and give it its own name so your changes will be safe from upgrades

(you can clone a skin easily if you install the free "Developer Tools" module)

Editing can also be done in a couple of places:
* via the template editor in ACP - SKINS - TEMPLATES tab.
* via uploading to the skins directory at /skins/(your skin)/template-name.tpl

What skin are you using?

Hi Michael,

I´m using the jrElastic skin.

If I clone the skin will all of my changes disappear og will they be cloned as well?

I knew there was soomething about this cloning, but was not sure how inportant it was for in my example.

I have made some changes to the index.tpl, header.tpl and the footer.tpl. I could just copy these and use them again in the clone maybe?

Let me know

Thanks!

It depends where you've changed them. If you've changed them via the template editor in the ACP then I don't think the changes would copy over to the newly cloned skin.

If you've made the changes via FTP to the files then I would expect them to clone over.

Best way to know is just to give it a go.

--edit--
Personally I'm a big fan of doing the code editing in code rather than the ACP editor. If your just tweaking a couple of things then the ACP editor is great because it allows you to keep up-to-date with any incoming changes easily. But if you want to do a lot of changes, you cant beat the FTP version because you get to use an IDE.


updated by @michael: 09/04/14 02:07:29AM

Hi there,

I´ve now made a clone of the jrElastic template. It seems to work very well. The only thing I can´t figure out is how to get the Social Network Icons to show up in the footer. They were there on the jrElastic template because I entered the links in the skin. But now they are all gone, and I have tryed to clear the cache in ACP.

When this is done I would like to know how to change that background image. I think I need a little "step-by-step" guide. Just to make sure I understand

Thanks alot!

Hi again,

As you can see on my site I have chaged the background color on the title background into an orange color... I´ve tryed to change it back (because it´s too orange), but I can´t. I´ve cleared all cache both in ACP and in my browser, but it´s like it doesn´t affect it when I change the color in "style".

I´ve also tryed to change the /public_html/skins/Elastic_Clone/css/page.css - but this one only affect the ACP look..?

What I want is to be able to do some CSS to achieve what I would like it to look like, but I can´t seem to figure out where to do it. Brian told me earlyer that I can use FireFox to tell me where to change the CSS, but I´m not sure how to do that?

I know how to do what I want in CSS, but I don´t know where to put it?

Let me know..?

Thanks!

Yeah it's hard to specifically say what classes and stuff you need to change - that's why I recommended Firefox:

1) Load your site in Firefox
2) Click on "Tools" -> "Web Developer" -> "Toggle Tools"
3) When that is up, click on the small arrow-screen icon on the right (see my image)
4) Whatever you click on, you will see the classes in the lower right - you can turn them on/off to see what is affecting your page.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
updated by @brian: 09/04/14 02:31:51PM

Heres a video from our YouTube channel

Our YouTube channel:
https://www.youtube.com/user/jamroomdotnet

that has some firebug usage in it:

"Development Tools the Jamroom Team uses"
Development Tools the Jamroom Team uses

Firebug usage starts around 3:23. There are many "How to use firebug" type vids on youtube.

updated by @michael: 09/04/14 08:30:12PM

Ok, now I´ve done this, but it still seems like nothing is happening to my site. It´s like the CSS in: /public_html/skins/Elastic_Clone/css - has no effect on the site..?

And I am using the Elastic_Clone skin.

Let me know what could be wrong here..?

Thanks!

anything could be wrong. You need to tell us what you've done so we can eliminate that from being one of the things.

First thing to do is to make sure your on the right skin.
next thing is to make sure the changes you make take effect.
next thing is to locate what needs to be changed.
next thing is to make the change.

Make sure you are resetting the caches after making a change or you might be looking at an old version.

There are instructions on resetting the caches on this page:

"Something's Wrong, What do I do?"
https://www.jamroom.net/the-jamroom-network/documentation/problems/114/somethings-wrong-what-do-i-do

It might seam frustrating right now, but keep at it and you will see you can do anything.

Hi,

It took some find for me to figure it out, but I did what you told me to. I used FireFox to find the classes, and I´ve been resetting the cache in ACP. What also was important was to open a new browser session. I have now chaged the background as well as I´ve made some rounded corner and so on

Thank you very much for helping me out here

Thanks!

Right on - glad to hear that! Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net