I just learned Omega 3 in the past month and I'm totally a fan now. Kent Lester, another Omega 3 fan is using different background images for different pages per his awesome 1 hour and 17 minute presentation about Omega 3, See Vimeo at http://vimeo.com/38144774 I haven't yet contacted him about how he does his. The Contact page on his website is not configured at the moment (kentlester.com). (Kent, contact me and I'll show you how to make a fantastic contact page using webform module and views). Anyway ..... does anybody have a relatively easy way to put different background images on different page URLs and views URLs? Delta is so cool for making different layouts for different pages easily and quickly (if you see a site with page layout after page layout that's all the same, it usually confirms that it's a WordPress site ... enter the URL into the site analyzer http://w3techs.com/sites and usually double confirm it) . Now if I could easily and quickly change up the background image, as I can the layout, I can go into design creativity overdrive.
Comments
Here's one way...
There is a module that can help, Background Images:
https://drupal.org/project/bg_image
I've used it on one of my themes and it works very nicely. As usual with Drupal, there is more than one option. Another module that looks good is BackgroundField
https://drupal.org/project/backgroundfield
Hope this helps.
John
John Hannah
Friendly Machine
Thanks John!
Thanks John for the help. I'll get one of my Drupal go-tos to help me set up one of those modules. I tried the bg_image one a couple hours ago and couldn't get it to work, but I'm sure it's me. I purchased the full Friendly Machine theme pack and really appreciate the clean designs. As is somewhat typical, I run into a roadblock on Omega 3 then solidify the skill with some help. If anyone has any questions on Omega 3 basics feel free to linkup on one of my social connection addresses on my profile.
CSS and body classes
Why don't you just use CSS and body classes to assign different background-images to different pages?
can you elaborate on this?
Hi,
I'm trying to do this exact thing that your describing, but I see no body
<
div> for Omega. I want to change my background from red to white on the Delta Context that I created, but when I only see the "zone-content" div. Not sure how to target "zone-content" only on _____ url.
Sounds like you have some deep CSS knowledge. Any help would be appreciated. I'd rather do it through some simple CSS rather than install yet another module.
Thanks!
B
Hi Criscom...I was just getting ready to ...
Hi criscom...I was just getting ready to ... post my progress and it is exactly what you are saying. Vinod Bhavnani, a Drupal maven in Bangalore India is working on it tomorrow and I will report the results here as soon as I hear it, but here is what I know so far. He said it is way too simple a solution to use a module. It is exactly what criscom said. At last contact with Vinod before he had to go to his day job, he was grabbing nids (node IDs) to be used later, from firebugging some pages, including Views generated URLs. The nids are in the <body class= Just pull it out of there. I will report later what the CSS code is and where it wrote to.
Thanks for the kudos
I keep forgetting those videos are out there. Tough to watch oneself in a video, but glad you found the video useful! I repurposed some code from another theme to create the changing backgrounds. It works basically like this:
1) Insert the following code into your theme-settings.php file (or create the file):
// Background Image$form['st_container']['general_settings']['them_bg_config'] = array(
'#type' => 'fieldset',
'#title' => t('Background Image Setting'),
'#collapsible' => TRUE,
'#collapsed' => TRUE,
);
$form['st_container']['general_settings']['them_bg_config']['theme_bg'] = array(
'#type' => 'select',
'#title' => t('Background Image'),
'#default_value' => theme_get_setting('theme_bg'),
'#options' => array(
'library' => t('Library'),
'blog' => t('Blog'),
'blue' => t('Blue bg'),
'light' => t('Light bg'),
'page' => t('Page'),
),
);
This will build a select list on the Omega Settings page where you can choose the bg image from a selection. Use this in combination with the Delta module+Context module, which allows you to choose different Omega settings based on any of the rules available in Context. This makes your background choice very "intelligent."
2) Then, add the following code to your template.php, which will use the choice made to redirect to a set of custom css and image files:
function YOURTHEMENAME_preprocess_html(&$vars) {$file = 'style-' . theme_get_setting('theme_bg') . '.css';
drupal_add_css(path_to_theme() . '/css/'. $file, array('group' => CSS_THEME, 'weight' => -1,'browsers' => array(), 'preprocess' => FALSE));
}
3) Finally, build a set of CSS files that match the names in your select list, like: library.css, blog.css, blue.css, etc. and place them in the path "../css/"
These CSS files will contain background image links to your custom backgrounds. By putting the changing bg image definitions in separate CSS files, you're also free to change other CSS parameters like text color. For instance, a light background might need dark or black text for body, h1, etc, while a dark background would need the opposite.
This may seem overly complicated. As one poster mentioned earlier, you could just build some custom CSS to handle the changes. But I found many complications like text color, that made simply changing the background image insufficient. I needed a way to customize other CSS properties for each individual image. Having all the custom code in its own CSS file kept the changes encapsulated with the background image chosen.
By adding this code to your theme, and allowing background images to be chosen from the Omega UI, you have a robust system that can be used in future themes as well. Just alter your CSS files and bg images to match the theme at hand.
Hope this helps. Description is a little rough, because it's been awhile since I wrote all this. Hopefully you'll get the basic idea.
Kent
Thanks Kent!
Thanks Kent! That's awesome! I put you, John Hannah, and Jake Strawn as my mentors on my profile ; ) Omega 3 rocks.
Kent's way is really cool ...
Kent's way is really cool ... I will adopt it in the next few weeks. Here is the simple but less effective way.
Only a few lines of css in the global.css file.
Here is my original background specification code:
body {
background-image:url(../images/SS1440-139695916.jpg);
background-position: center center;
background-attachment:fixed;
}
Here are the files and folders structure in my Omega sub-theme (azure)
text file icon --> template.php
picture file icon --> screenshot.png
picture file icon --> logo.png
text file --> azure.info
folder --> templates
folder --> process
folder --> preprocess
folder --> images
folder --> css
The images are in the images folder
global.css is in the css folder
Firebug the page if you need to verify the body class name.
In this case I am changing the background on a Views generated URL of my contact page
Firebug said the body class name was page-contact so we'll use that in the new css code
This is the new code (the original code stays there also)
body {
background-image:url(../images/SS1440-139695916.jpg);
background-position: center center;
background-attachment:fixed;
}
.page-contact{
background-image:url(../images/SS1440-139694956.jpg);
background-position: center center;
background-attachment:fixed;
}
What I am doing now...
It is a month and a half since I was looking into different backgrounds for different URLs. Since then, I have settled on not using different background images for different backgrounds for simplicity reasons. I have found some severe bugs on using background images for the global/mobile use PLUS the use of background images for global/mobile gives the little layout a cluttered look. What I have found best to do is the following CSS(s) for the different layouts...
/global.css-->USE THIS-->/
/* START INTERNETQUEST BACKGROUND ADDITION */
html {
background-color: grey;
}
/* END INTERNETQUEST BACKGROUND ADDITION */
/* omega-kickstart-alpha-default.css-->USE THIS--> */
/* START INTERNETQUEST BACKGROUND ADDITION */
html {
background: url(../images/WIDTH980-IMAGE1.jpg);
background-position: center center;
background-repeat:repeat-y;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
/* END INTERNETQUEST BACKGROUND ADDITION */
/* omega-kickstart-alpha-default-normal.css-->USE THIS--> */
/* START INTERNETQUEST BACKGROUND ADDITION */
html {
background: url(../images/WIDTH1220-IMAGE1.jpg);
background-position: center center;
background-repeat:repeat-y;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
/* END INTERNETQUEST BACKGROUND ADDITION */
/* omega-kickstart-alpha-default-wide.css-->USE THIS--> */
/* START INTERNETQUEST BACKGROUND ADDITION */
html {
background: url(../images/WIDTH1440-IMAGE1);
background-position: center center;
background-repeat:repeat-y;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
/* END INTERNETQUEST BACKGROUND ADDITION */
background images location
Just a note. Using Omega theme I had to put my background image in the themes images folder.
background-image: url(../images/image.png)
...won't look in the sites image folder but instead the themes.