1

I am completely new to Drupal 7 and have searched the web hard for a good tutorial that teaches me how to add a custom background to Drupal sites, but to no avail.

I have a Drupal 7 multi-site set-up and I am just trying to change the background image of the Bartik theme to a custom image.

In my project directory I have the following folders:

mysite/files
mysite/modules
mysite/themes
mysite/tmp
mysite/settings.php
mysite/default.settings.php

Could someone please tell me a way to create a custom background, exclusively, for the site "mysite" without editing any of the core files?

Thanks.

2
  1. Create a folder called "myTheme" in sites/all/themes
  2. Create a file in that new folder called "myTheme.info"
  3. Copy the sample .info from below into the info file
  4. Now create a folder in your theme called "css"
  5. Now copy style.css from Bartik's css folder into your css folder
  6. Now change the background using CSS
  7. Any other changes you want to make? Copy from bartik into your theme folder, make the change

Sample info file:

name = My Theme
description = My theme is amazing
core = 7.x
engine = phptemplate
base theme = bartik
  • Hi Jonathan, thanks for the prompt response. I have done what you detailed above and added the following code to style.css in mysite/themes/css/ - "body { background-image:url('../img/globe_connect.jpg); }" However, it is not changing the default Bartik background. Did I do something wrong or miss a step? I assume this file is not being loaded properly when I load up my page. Thanks. – czchlong Feb 21 '12 at 21:45
  • Did you change your theme to "myTheme" in the site building, appearance section? This doesn't change bartik, it creates a new theme that's based on bartik. – Jonathan Rowny Feb 21 '12 at 21:46
  • Also, I believe it should by in mysite/themes/myTheme/css Your files should all be in mysite/themes/myTheme. That's your new theme. – Jonathan Rowny Feb 21 '12 at 21:47
  • I have changed my directory setup to have style.css in /themes/my_theme/css and the image in /themes/my_theme. The css code is now: body { background-image:url('../img/globe_connect.jpg); } but still no background image is showing. I am using drupal on WAMP. Sorry if I am making stupid mistakes, but this is the first time I have been asked to design a website. Thanks a lot for your help. – czchlong Feb 21 '12 at 21:55
  • 1
    Hi Jonathan, after some tweaking i was able to it to show. thank you for your patience and help – czchlong Feb 23 '12 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.