How to change the default B.o.o.t.s.t.r.a.p. theme background color to a background image?

[Getalinks]

Hi all,

 

I'm trying to change the areas in the screenshot that have red Xs from the default B.o.o.t.s.t.r.a.p. color of grey to an image I have saved on my server. The current store theme I'm using is the default coding of the B.o.o.t.s.t.r.a.p. theme. My problem is I'm not sure where in the code is for the areas that I have red Xs and I'm not sure what the new code would be written like to reflect a background image instead of a background color.

 

My image I want to change it to is called "final.jpg" and it's saved in the B.o.o.t.s.t.r.a.p. theme folder as I believe it should be.

 

Any and all help is greatly appreciated in this.

 

Thanks in advance for the support.

 

Side note: Why on Earth would you make the word "B.o.o.t.s.t.r.a.p." a banned word when it's a default theme name??? lol

[musicmaster]

You need two steps:

 

First you adapt the global.css of your theme. Body is mentioned several times in this file and you may need to disable background colors. You get something like:

body {
  margin: 0; 
  background-image: url("../img/slide1.jpg");
  }

However, after you that you will still see nothing. That is because the divs in which the page is divided have their own background color defined and that overrules the main background. These lines are somewhere deep in global.css and look like

.columns-container {
    background: #fff;
}

There is something similar for header-container and footer-container. You should delete or out-comment them.

[vitri]

thanks very much!! music master

 

I been 2 days crazy with this!!

 

a lot of regards!!!!!!

Edited May 13, 2016 by vitri (see edit history)

[Getalinks]

Thanks for responding. I took a look at the coding and changed where you recommended, but still no change. Think you could take a quick look at the code and tell me where I'm doing it wrong or missing.
 

Thanks in advance.

global.css

[musicmaster]

Do you have a site where I can see this thing working?

 

With the file that you sent me I cannot see that this is indeed the working global.css (there are always several versions present) or that the image is present. Neither can I disable parts of it in Chrome to see what is the problem.

Edited May 14, 2016 by musicmaster (see edit history)

[vitri]

Do you have a site where I can see this thing working?

 

With such a file that you send me I cannot see that this is indeed the working global.css or that the image is present. Neither can I disable parts of it in Chrome to see what is the problem.

hello, MM , in mine have an error in the article view , do you know why?

error : Warning: round() expects parameter 2 to be long, string given in /usr/home/rbsacoma.com/web/classes/Tools.php on line 1592

 

my site :    rbsacoma.com

 

regards!

[musicmaster]

hello, MM , in mine have an error in the article view , do you know why?

error : Warning: round() expects parameter 2 to be long, string given in /usr/home/rbsacoma.com/web/classes/Tools.php on line 1592

 

Please start a new topic when you want to discuss something different. 

 

If you do some searching on the internet you will see that the problem is likely related to the social sharing module. You could reset it or update it or switch it off and on or simply switch it off.

[vitri]

Please start a new topic when you want to discuss something different. 

 

If you do some searching on the internet you will see that the problem is likely related to the social sharing module. You could reset it or update it or switch it off and on or simply switch it off.

ok, sorry , I puted here because the error is after made the change you propose , when undo the change , "no error" 

thanks and sorry again!

regards

[Getalinks]

Hi MM. The site is www.fenixflamecomics.com/store

[musicmaster]

ok, sorry , I puted here because the error is after made the change you propose , when undo the change , "no error" 

thanks and sorry again!

I can't see any relationship between the two. But don't worry, no problem!

 

Hi MM. The site is www.fenixflamecomics.com/store

I needed to disable two times background-color #fff for the body and then one background-color #f6f6f6 for .columns-container before your background became visible. (global.css line 243. theme2.css lines 2 and 6).

 

Attached an image how you can check that yourself in Chrome.

[Getalinks]

Hi MM. Okaaaaay, so I've downloaded Firebug for Firefox and looked at the coding like you said in Chrome. And...I have no idea how to read them. LOL I'm ready to slam my head through the wall.

 

My line 243 looks like this:

  /*background-color: #fff;*/ }

I found the line of code in global.css on line 5724 and commented it out to:

.columns-container {
  /*background: #fff;*/ }

Somehow I have a feeling that wasn't even right. You never mentioned line 5724, but it mentioned columns-container so I thought it should be removed. Yes? no?

 

So, as of now, still no change to the site, but you said something about:

 

theme2.css lines 2 and 6

 

I don't even see that file. Where is theme2.css? It's not in the CSS file in the file manager.
 

Sorry for all the headache. I wish I understood this more. Give me HTML coding and I'm golden. This CSS stuff is a whole new animal.

[musicmaster]

As I mentioned before, there are more than one global.css files. So it would help if you wrote which one you changed.

[Getalinks]

Oh, I didn't see that there were more than one. Sorry. I changed the one:

 

public_html/store/themes/default-bootstrap/css/global.css

 

Where would another be and the theme2 one?

[musicmaster]

I see these two files:

 

http://fenixflamecomics.com/store/modules/themeconfigurator/css/theme2.css

http://fenixflamecomics.com/store/themes/default-bootstrap/css/global.css

 

I have no idea why your shop is using a css from the themeconfigutaor module. Maybe you should disable it.

 

A small introduction to using Chrome to inspect css (see also attached image):

 - select a part of you webpage and rightclick with your mouse. Choose "inspect element" in the menu.  That gives you at the bottom half of the screen an inspection window like in the picture.

 - Make sure that at the menu of this window you have selected "elements". 

 - When you select an element at the left side you at the right side the css lines that apply to it. They are mentioned in ranking order. So if one css rule overrules another the first one is placed higher and the one that is overruled has a line through it.

 - In front of the css statements are checkboxes. Using them you can disable lines. You can also add lines or change them. This is a splendid way to try out css changes. Nothing of what you do here is saved. At the moment you refresh your page it will be gone.

 - Next to the css statements it is mentioned where they are in the files. For example: global.css:5707. If you move your mouse over this link (as I did in the image) you will see its full path.

 - For the purpose of this case I put my mouse on the left first on body and later on the center_column div.

[Getalinks]

Oh, I looked at the Theme Config Module. It's not a on/off thing. It controls a lot.

 

You are a Godsend. Explaining that to me that way, I got it. Almost all perfect. Just can't get the last block (the area with the red Xs in the screenshot to not be white. Every time I change it, it screws up the whole page. Any ideas? This last thing and everything is awesome and you are the master!

[musicmaster]

Glad you solved it.

 

As far as I can see you solved the white square too. 

 

Happy selling!

[Getalinks]

Wait, the white square isn't solved. lol

[musicmaster]

This is how it looks to me on Chrome. It looks like it needs some tuning, but it doesn't have a white square.

[Getalinks]

Can you look at it in Firefox?

[musicmaster]

I suppose you mean those two lines for .container in global.css:

 - max-width: 970px (line 834)

 - max-width: 750px (line 682)

[Getalinks]

Maybe. Is there a way to make the default be the width of the screen like HTML does? Maybe if I stretch out the container, the background image will be there?

[musicmaster]

Did you try removing those two?

[Getalinks]

I commented them out, didn't work. Had something to do with the header in theme2.css. Strange though, it wouldn't let me load the background image so I just made it black.

 

I'm done. Solved! Awesome. Thank you so much for your help on this.