Joomla Templates Club 406,261 posts

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#184152

Okay, if this theme were using the normal CSS methods for setting body backgrounds, this would be a piece of cake, but since it’s using LESS and CSS, I’m not sure how to go about doing it. I’ve looked at the forums (thinking this would be a common question) and I’ve looked at the other themes that have background images, thinking I could copy their LESS and CSS, and get my new background to show up, but it simply won’t. I’m clearly doing something wrong.

I see in the scaffolding settings in the Template Manager you can change the background COLOR, but no place to set a background image?

Please somebody… I need some help on this one. I was sure I could figure it out, but I’ve exhausted myself looking and trying what looks like it should work, but without any success.

Thanks in advance.

[boost_it Friend boost_itJoin date: February 2011Posts: 38Downloads:0Uploads:12 Thanks: 29]

#480542

I have the same question – I need to add a background image and only can find the option to change the colour. I’m using the 2.5 version of the template.

Help please!

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#480551

@synapsis and @boost_it: You can change background on here

<blockquote>templates/ja_mero/less/variables.less</blockquote>
find and see it

// Scaffolding
// -------------------------
@ bodyBackground: #111;<- change it

1 user says Thank You to Ninja Lead for this useful post

1. synapsis

[clrmedia Friend clrmediaJoin date: October 2007Posts: 102Downloads:18Uploads:8 Thanks: 17 Thanked: 11 times in 1 posts]

#480649

Make the change in custom.css to avoid having a template update overwrite your change. I created a separate theme using ThemeMagic and use an “interface” directory in “images” to allow the client to update the look and feel of the website without requiring FTP access.


body {
background-image: url('../../../images/interface/header-bg.jpg');
background-repeat:repeat-x;
}


2 users say Thank You to clrmedia for this useful post

1. synapsis
2. boost_it

[clrmedia Friend clrmediaJoin date: October 2007Posts: 102Downloads:18Uploads:8 Thanks: 17 Thanked: 11 times in 1 posts]

#480651

Wow! Am I ever wrong. I just used “Compile LESS to CSS” and it overwrote custom.css. Fortunately, I maintain a local copy of the file.

[boost_it Friend boost_itJoin date: February 2011Posts: 38Downloads:0Uploads:12 Thanks: 29]

#480691

Thanks for replying.

Still need help. I updated templates/ja_mero/less/variables.less with following line
@BodyBackground: url(../images/background.jpg);

This isn’t working (background is white instead of the image I want). Is the syntax I used incorrect?

[clrmedia Friend clrmediaJoin date: October 2007Posts: 102Downloads:18Uploads:8 Thanks: 17 Thanked: 11 times in 1 posts]

#480702

Make the change in /templates/ja_mero/css/custom.css using code similar to what I posted above. If you do make the change in variables.less, remove the extra space in @Bod_y…. and ensure your path is correct.

[boost_it Friend boost_itJoin date: February 2011Posts: 38Downloads:0Uploads:12 Thanks: 29]

#480707

I have tried all the following in variables.less and none worked (syntax???) :
[MENTION=15235]BodyBackground: url(“../images/background.jpg”);

[MENTION=15235]BodyBackground: url(“../images/background.jpg”);

[MENTION=15235]BodyBackground: { background:url(../images/background.jpg) top no-repeat; }

[MENTION=15235]BodyBackground: { background:url(“../images/background.jpg”) top no-repeat; }

My image is save in the templates/ja_mero/images folder. So I assume the path I’m using is correct.

[boost_it Friend boost_itJoin date: February 2011Posts: 38Downloads:0Uploads:12 Thanks: 29]

#480708

Am I supposed to be using custom.css if recompiling variables.less overwrites the changes?

[clrmedia Friend clrmediaJoin date: October 2007Posts: 102Downloads:18Uploads:8 Thanks: 17 Thanked: 11 times in 1 posts]

#480792

Yes, use custom.css. The problem with it being overwritten was one that I caused by trying to use custom.less. I deleted custom.less and custom.css is no longer being overwritten.

2 users say Thank You to clrmedia for this useful post

1. synapsis
2. boost_it

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#480817

Having already tried Ninja Lead’s suggestion (without success), I tried clrmedia’s suggestion after using the Template Manager to compile my LESS to CSS, and then setting the background in a custom.css file worked like a champ. Thanks to you both though. I’ve had less luck getting my other questions answered, so I really appreciate it that you took the time to answer this one.

[Author]

Posts