background color of page content

By spitcher on 26 Feb 2014 at 20:19 UTC

I am using the 'Block Class' module to control the colors of my blocks from the front end. (I have a bunch of classes defined with different background colors). This works great, except that the page content section isn't a block.

Is there a module that does the same thing as 'Block Class' for the content section of a site? I found the CSS module, but it hasn't been upgraded to Drupal 7.

Or, is there a way to create blank pages (no title or anything else). I would then use a block for the content section. Right now I have a block in the content section but there is a large space above it where the page title and content go.

Comments

You can use body class to

see15_aug commented 27 February 2014 at 12:22

You can use body class to make different background for different page. These classes are default added in body tag. As given example:
<body class="html not-front logged-in no-sidebars page-node page-node- page-node-61 node-type-page ff ff18 win desktop admin-menu lightbox-processed">

Thank you, but that is not

spitcher commented 27 February 2014 at 22:02

Thank you, but that is not quite what I am looking for. Each section of my site (teens, adults, and children) has a different color scheme. If I add a new page to the site I want to be able to designate the background color, of the page content area, the color that correlates with the content being created (i.e. a teen page has a blue background, an adult page has a green background, etc.).

The 'Block Class' module does this beautifully for the sidebars, but doesn't extend to the body of the page. I have tried using a block for the body of the page, but this has several drawbacks. One is that Drupal leaves a space for the pages content, even if there isn't any content to display. Two, extras (like breadcrumbs, and taxonomy links) appear outside of the block in the body of the page.

How to tell what section a page is in

edrupal commented 27 February 2014 at 23:16

What method are you using to determine which section a page applies to? Does it just depend on which menu structure you add the page to? Are you using taxonomy to add a node to a section? Are you using different content types?

Would help to know to then suggest possible solutions.

Sorry I am a noob so I am not

spitcher commented 28 February 2014 at 16:23

Sorry I am a noob so I am not sure what you are asking. Here is an answer though.

I am using the Zen starter theme. Right now I have access to article, panel, and page content types. Most of my content will be pages (there will be some blogs and such, but I am trying to tackle one theming issue at a time).

I am using the Class Block module to manage the background colors of the left and right sidebars. I have declared a bunch of classes in my css, with different colored backgrounds, which can be manually chosen when a block is created. My problem is, using a block for the content leaves the extras (breadcrumbs and such) outside the content area. So I am looking for a solution that will allow me to declare the background color of the page content (the central block) on page creation from pre-declared classes.

Here is an image of my concept mock-up.

Here is an image of my development site (the site lives on my local computer at the moment so I can't link to it).

How are you setting the

Jaypan commented 28 February 2014 at 16:47

How are you setting the different sections of your site - teen, adult and children? When you create a page, what are you using to differ between these?

Mostly it is just creating a

spitcher commented 28 February 2014 at 21:25

Mostly it is just creating a page and adding the link to the appropriate navigation menu.

I have also created a taxonomy set containing each of my main categories and plan to have each page tagged with the proper taxonomy term. Truthfully I am doing this because I am told it is a great idea, and I understand metadata is a good thing, but I have no idea what it does on a Drupal site.

Node class

spitcher commented 3 March 2014 at 15:30

I found the Node Class module which seems to do what I want. Thank you to everyone who responded.

Update

spitcher commented 4 March 2014 at 16:26

update - Node Class doesn't work (or not fully).

I spent the last day trying to figure out where my page title went, only to discover the Node Class doesn't extend to the page title (it was white text on the page background making it look like it wasn't there when it just didn't have a background color).

Anyone know of a module that will allow me to set a class, for the content region of a page, on the front end?

I have almost made Node Class

spitcher commented 4 March 2014 at 18:02

I have almost made Node Class work by disabling the page title with 'visibility: none'. But, I still have a gap above my node content, where the title would have gone. I can fill in the gap by adding a class, to the node, that adds padding to the top. But, that leaves a lot of space at the top of my content (even if it is the right color).

I would be happy to post code, just not sure where the problem is or which file to post.

A different approach

edrupal commented 5 March 2014 at 00:13

If it were me I would take a slightly different approach. From what you said you are already using taxonomy to tag each node with what type of node it is (e.g. Adults, Teens etc). It would be great if a class were added to the page's body element for each tag. Then you could style exactly what you wanted for every element on the page.

To achieve this you could add the following code to your theme's template.php file.

function MY_THEME_preprocess_html(&$variables) {
  if ($node = menu_get_object()) {
    // Return an array of taxonomy term ID's.
    $termids = field_get_items('node', $node, 'taxonomy_forums');
    // Load all the terms to get the name and vocab.
    foreach ($termids as $termid) {
      $terms[] = taxonomy_term_load($termid['tid']);
    }
    // Assign the taxonomy values.
    foreach ($terms as $term) {
      $class = strtolower(drupal_clean_css_identifier($term->name));
      $variables['classes_array'][] = $class;
    }
  }
}

Don't forget to clear the cache after adding the function. Now you should have all the classes to style the pages exactly as you want.

Thank you Ed! This sounds

spitcher commented 5 March 2014 at 15:59

Thank you Ed! This sounds like exactly what I want. How do I create the styles for each tag?

I am not familiar with php, so I am not 100% sure what the function does. How do I take the information gathered by the function and use it to create css based on my taxonomy?

css files

edrupal commented 5 March 2014 at 21:27

So the function will add different classes to the body tag of each page. The names of the classes will depend on the names you've used for the taxonomy tags.

Then you can use normal css to style the pages as required.

Once you got the function in place and working you can use something like firebug (or some other way to inspect the html) to check the classes attached to the body tag and style away as required.

How can I tell if it is

spitcher commented 6 March 2014 at 22:02

How can I tell if it is working? I have been testing it by searching the page with firebug and through the pages source code for a class named Adults (a known taxonomy term). I have had no luck finding it. Do you have an trouble shooting suggestions, to get it to work?

Thank you for all your help!

The class will be part of the

Jaypan commented 6 March 2014 at 22:39

The class will be part of the body tag.

The body tag doesn't look any

spitcher commented 6 March 2014 at 23:28

The body tag doesn't look any different with the function activated than it does with-out. I have fiddled with the code to the best of my understanding and nothing seems to make it work. I'm not sure what else to do with it.

Copy of your code

edrupal commented 6 March 2014 at 23:39

In which file did you put your code? Can you paste an exact copy of what you added? That would give a chance to check it over. Also did you clear all the caches?

<?phpfunction cpl_zensubtheme

spitcher commented 7 March 2014 at 14:16

function cpl_zensubtheme_preprocess_html(&$variables) {
  if ($node = menu_get_object()) {
    // Return an array of taxonomy term ID's.
    $termids = field_get_items('node', $node, 'taxonomy_forums');
    // Load all the terms to get the name and vocab.
    foreach ($termids as $termid) {
      $terms[] = taxonomy_term_load($termid['tid']);
    }
    // Assign the taxonomy values.
    foreach ($terms as $term) {
      $class = strtolower(drupal_clean_css_identifier($term->name));
      $variables['classes_array'][] = $class;
    }
  }
}

It is pasted at the bottom of my template.php file. One of the variations I tried (again I don't know php so I was shooting in the dark) was to replace 'taxonomy_forums' with the name of my taxonomy 'main_categories'. The cache has been cleared multiple times (every time I tired changing something).

My mistake

edrupal commented 7 March 2014 at 18:54

Ah, my mistake for not being clearer. In the line

$termids = field_get_items('node', $node, 'taxonomy_forums');

'taxonomy_forums' actually refers to the machine name of the field in your node that holds the taxonomy reference.

If you go to edit the content type in question, select the 'manage fields' tab, and look in the Machine Name column, you can get the machine name of the field holding your taxonomy reference.

Use this instead.

Apologies for any confusion, and let me know if this works.

It works!

spitcher commented 11 March 2014 at 15:41

It works!!!!!!!!!!!

If anyone else wants to do this same thing, and are using the Zen subtheme, here is the css I used to designate colors for each region:

.yourTaxonomyTerm .region-sidebar-first {
background-color: #ffffff;
}

.yourTaxonomyTerm .region-sidebar-second {
background-color: #ffffff;
}
.yourTaxonomyTerm #content {
background-color: #ffffff;
}

error messages

spitcher commented 12 March 2014 at 18:17

Hi, it is still working, but I am getting error messages popping up on my site. They are directing me to the code from this discussion. Should I be worried about these messages (see below)? FYI, they started showing up after I applied my theme to a new site on a live production platform (as apposed to my desktop computer). The site is here, if that helps.

Warning: Invalid argument supplied for foreach() in cpl_zensubtheme_preprocess_html() (line 163 of C:\Sites\sites\all\themes\cpl_zensubtheme\template.php).
Notice: Undefined variable: terms in cpl_zensubtheme_preprocess_html() (line 167 of C:\Sites\sites\all\themes\cpl_zensubtheme\template.php).
Warning: Invalid argument supplied for foreach() in cpl_zensubtheme_preprocess_html() (line 167 of C:\Sites\sites\all\themes\cpl_zensubtheme\template.php).

Check if variables present

edrupal commented 12 March 2014 at 22:35

It's probably because the node being displayed doesn't have any taxonomy fields. Try adding a test to check for this. Something like:

<?php
function cpl_zensubtheme_preprocess_html(&$variables) {
  if ($node = menu_get_object()) {
    // Return an array of taxonomy term ID's.
    $termids = field_get_items('node', $node, 'taxonomy_forums');
    // If there are any term ids, load all the terms to get the name and vocab.
    if ($termids) {
      foreach ($termids as $termid) {
        $terms[] = taxonomy_term_load($termid['tid']);
      }
      // Assign the taxonomy values.
      foreach ($terms as $term) {
        $class = strtolower(drupal_clean_css_identifier($term->name));
        $variables['classes_array'][] = $class;
      }
    }
  }
}
?>

That definitely broke it (the

spitcher commented 13 March 2014 at 22:23

That definitely broke it (the code stopped working). Is this something I need to fix, or can it be ignored? The warnings show up when I am going from a content node (so something that isn't a page) to any other page on the website. Curiously the home page doesn't seem to bother it, and that doesn't have a taxonomy term attached to it.

That shouldn't have broken it

Jaypan commented 13 March 2014 at 22:48

That shouldn't have broken it. Show us your code. And please wrap it in <?php ?> tags.

My bad, I tried the code

spitcher commented 14 March 2014 at 13:25

My bad, I tried the code again and it worked. I forgot to change taxonomy_forms to the appropriate machine name the first time I tried it. The warnings are now gone.

Thank you everyone for all of your help!!!