6

How can I add a background image wallpaper to a drupal site from within the drupal admin i.e. not editing themes or PHP?

I'm not adverse to PHP or themes but adding a background image wallpaper is a generic non-theme specific feature so should require editing a specific theme.

This has to be one of the simplest/fundamental/popular things one wants to do with their site. It ought to be obvious in Drupal -and- possible within the Drupal admin, not via editing themes / PHP code.

Is there a way to do it?

I found some promising modules (actively depveloped for Drupal 7) but am a little unsure how to use them:

  • http://drupal.org/project/bg_image (Instructions say: "provide a css selector and color and repeat attributes in the 'Default CSS Settings' section." - but how do I know what CSS selector to use? Yes I know CSS but in the context of Drupal, is there more than one I need to consider and why? Perhaps an example would help here)

  • http://drupal.org/project/dynamic_background (This has more advanced settings for specific entities in drupal: User, Blog, Panels, Node, Views (beta), Context) - OK fine. BUT WHICH one do I use to simply put up a background image for the pages of my Drupal site?!

4

For simple Drupal themes we use Artisteer. You can change most properties of a theme with just a mouse click. Please note that the tool is not free (and I'm just a happy user).

  • +1 Sounds good to me @BetaRide. The price sounds reasonable and focused on making it easier to produce Drupal themes (as well as some other CMSs). I'm pragmatic. If this saves me hours then I'm interested. Time and money are interchangeable: spend money to save time; spend time to save money. – therobyouknow Dec 20 '11 at 9:18
3

I agree with your assessment that setting a background is one of the first things a new web designer wants to do, but what I found is that while Drupal is incredibly flexible and capable, it is not uniform or flexible in its approach to appearance issues. Drupal is not an out of the box website solution. It is a programming methodology for creating and managing web content, written by programmers for programmers. Many modules arose to streamline input for repetitive tasks, not to make things user friendly. Drupal provides a framework for the graphics with themes and regions but again it looks more like an effort to streamline tasks than to create a user interface for non-programmers. ON top of the themes, modules dealing with generating content, menus, and the like will add their own theme input as it applies to their part. Again Drupal is incredibly good at gathering all this input and providing flexibility for modules to direct things, but both themes and modules are created by separate groups and do not necessarily follow the same approach for styling the content.

The result is that it is difficult to figure out which themes and modules to use and what they are doing without some detailed research into their innards. The most frustrating thing for me has been trying to unravel the styling spaghetti that ends up displaying a page. Many themes have a limited UI that allows you to change some colors etc, but they are far from comprehensive Theme UIs. Things got so complex at times with so many inheritance levels, that I began using a style stripping css snippet to strip as much out as possible so that I can make sense of what is doing what in the CSS stylesheets.

One solution might be to keep things as simple as possible. Administrative pages are rendered in the "Seven' theme, which is very simple indeed. Very few divs, classes and overall theming with few regions. To arrange the layout I want I use the Panels Module. This module creates a very clear layout and content assignment interface that taps into Drupal's Content Management system and can alter or totally bypass themes. You will need to do some css stylesheet work to establish your sites character, but you will be doing it the way you want and know where everything is. I use several themes as reference materials, if there is some affect I especially want to use. But I have gotten where I want much faster this way.

  • +1 JoeS for your considered opinion and sharing the frustration and offering solutions. I am a programmer myself, particularly Object Oriented with Java and C++. If the admin Drupal was organised with those principles e.g. aggregation, inheritance, polymorphism then I'd have an easier time. Sure, there are elements of this in the code and in the admin. But not completely so; the rest is Drupal's own way. I'll read your answer again and pass more comments later... – therobyouknow Dec 20 '11 at 9:22
  • Panels - yes I use them too. I like your suggestion of having a really simple theme and doing most of the layout in Panels, particularly if it is possible to have Panels-within-Panels or mini Panels in Panels. – therobyouknow Dec 20 '11 at 12:31
2

Here's an example answer from me for my question (I don't necessarily expect to accept my own answer, I'd rather a non code-editing in-drupal-admin solution)

Using the minimal theme / acq_minimal, located in my installation at path

../sites/default/themes/mythemes/acq_minimal

There is a file called

palette.css

In this file there is CSS for the body html tag. Edit this to add a background image:

body {
  background-color: #000000; /* new background colour */
  background-image: url('wallpaper.jpg'); /* inserted line for background image */
  background-repeat:no-repeat; /* inserted line to not repeat */
  color: #333333;
}

It's a shame that there isn't a standardised way to do this within Drupal web-based admin without having to resort to editing the theme code (editing the code (via FTP and a code editor) breaks the wonderful user permissions system drupal has within its admin. Fewer people (or even just one) person may be allowed FTP access to the docroot of the drupal installation. This creates a bottleneck and complicates the administration of user rights.

Update

Ideally I should do this as a sub theme based off of this theme (so that should the orignal theme be updated, those updates won't clash with/overwrite my change during an upgrade) - need to work out how to do this.

However this does not quite answer my question about doing it within Drupal admin. But it still gets the job done. My suggested initial solutions are also worth exploring:

  • http://drupal.org/project/bg_image (Instructions say: "provide a css selector and color and repeat attributes in the 'Default CSS Settings' section." - but how do I know what CSS selector to use? Yes I know CSS but in the context of Drupal, is there more than one I need to consider and why? Perhaps an example would help here)

  • http://drupal.org/project/dynamic_background (This has more advanced settings for specific entities in drupal: User, Blog, Panels, Node, Views (beta), Context) - OK fine. BUT WHICH one do I use to simply put up a background image for the pages of my Drupal site?!

  • Accepting my own answer - it's the closest to what I need in this case. Thanks to everyone who contributed +1 voted your comments and/or your answers for your time and effort. – therobyouknow Jan 4 '12 at 9:47
0

This will need to be a function in an already existing base theme, or you will need a module. I am currently not aware of any base themes that have this, as it is not a very semantic way of doing things.

The modules you listed above are a good start, but if you are expressly wanting to upload an image through an upload file field it will take some theme alterations.

  • 1
    What do you mean by "not a very semantic way of doing things"? Please give more detail. I believe something as simple as having a background/wallpaper picture should be simple to do in drupal. Never mind if it semantic or not. – therobyouknow Dec 20 '11 at 1:29
  • 1
    Well.. Drupal is built on semantic structure. Therefore anything that breaks semantic workflow... in theory breaks what Drupal is trying to achieve. That being said, most if not all base themes require you to edit 'page backgrounds' through CSS. Remember to never edit a base theme, but to create a subtheme of the base. Any and all theme objects, albeit images or css or even specific javascript plugins that are specific to the theme should be housed in the theme folder. I think it would benefit you if you jumped headfirst into Drupal's theme system. Its how things get done. :) – PhiloSurfer Dec 20 '11 at 4:23
  • 1
    Further thoughts on why semantic structure should not be the top consideration, rather: usability should take priority. Perhaps it would be more semantic to have a separate on button and a separate off button for electrical appliances but it wouldn't be as usable (more buttons to consider). Also, hosted service drupalgardens provide for background image changes within drupal. Personally I think drupal themes should be brought inside drupal admin along with most other admin tools, with better in-drupal admin of the hosting provider platform (e.g. cpanels). – therobyouknow Dec 20 '11 at 11:49
  • If public web ranking is not important... throw semantic's out the window. – PhiloSurfer Dec 21 '11 at 0:39
  • "public web ranking"? - why would that be affected? Please just explain why being able to set the background image within drupal is a problem. If doing the edit within drupal results in the same CSS and the same html as that produced by a theme then why would this affect semantics or "public web ranking"? This argument has not been explained. – therobyouknow Dec 21 '11 at 9:14
0

I found something that works for me! Under ...sites\default\files\color[subdir name based on template] there is colors.css, edit the following:

under "#header"

add this:

{background-image: url('imagename.png');}

delete or comment this out:

{background-color: #ab3a0d;

  background-image: -moz-linear-gradient(top, #893210 0%, #ab3a0d 100%);

  background-image: -ms-linear-gradient(top, #893210 0%, #ab3a0d 100%);

  background-image: -o-linear-gradient(top, #893210 0%, #ab3a0d 100%);

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #893210), color-stop(1, #ab3a0d));

  background-image: -webkit-linear-gradient(top, #893210 0%, #ab3a0d 100%);

  background-image: linear-gradient(top, #893210 0%, #ab3a0d 100%);
}

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.