By lethu on

Hello, since am adding a second user/author to my blog, I wanted to distinguish each of the authors' submitted stories by giving them a different background colour, this way user_1 would have a white background for his stories while user_2 would have a grey background, for instance.
Can somebody please tell me how I can achieve that in Drupal 5.x.
Thank you :D

⋅ Categories: Drupal 5.x

Comments

mooffie’s picture

mooffie commented

There's the blog theme module that lets users pick the theme shown for their nodes (it's not just for blogs). Inside your theme folder create subfolders, for every 'mood', with a 'style.css' --these will appear in the themes lists.

(If you know a bit PHP there are other approaches: you could open 'page.tpl.php' in an editor and add to <body> a CSS class based on the node author's preferences. Then in your 'style.css' you'd do e.g. "body.sunny { background: yellow }")

lethu’s picture

lethu commented

Oh I will try this, thank you !

lethu

lethu’s picture

lethu commented

Hello again, I have installed the "blog theme" module and then tried playing with the style.css file of a copy of the default theme, until I made the stories' background look the way I wanted (white for the default theme, light green for the modified copy).
However when I chose the modified theme with my second user, the articles made under him do show a light green background only after jumping into the full articles, so in the main page all the articles share the same default theme background which is white, like if the default theme did override the second theme's background setting in the main page, which shares both themes when there are stories from both users.

Please help, I have next to no php/css skills but I really need this to work for my site :D
thanks.

lethu

mooffie’s picture

mooffie commented

only after jumping into the full articles, so in the main page all the articles share the same default theme background

That's correct. And it's logical: a list of articles (the "main page") doesn't belong to a certain user. A list of articles shows articles from different users, so there's no point in changing the background of the page to that of a random user.

But there's a solution:

We can change the background color for the node box only. The backgorund of the "big" page will remain fixed. Is that OK?

Are you working with the built-in 'profile' module?
Or are you using the 'nodeprofile', or the 'bio', module?

lethu’s picture

lethu commented

We can change the background color for the node box only. The backgorund of the "big" page will remain fixed. Is that OK?

Yup I think am ok with that.
And yes I am using the built-in profile module.

Thank you for your time :)

lethu

mooffie’s picture

mooffie commented

(BTW, this is going to work for comments too.)

I am using the built-in profile module.

OK. There are three steps here.

  1. Create a 'mood' profile field ('mood' is more expressive than 'color'). Make it of a 'list selection' type, and type 'yellowish', 'redish' etc into the 'Selection options' textreas. In the 'Form name' setting type 'profile_mood'. It's important that the name of this field be profile_mood, because that's what our code will look for.

    Users will now have a 'mood' selector when they edit their account page.

  2. Locate your template.php file and paste the following at its end:
    /*
 * Get the user's mood, as a CSS class
 *
 * @param $node
 *   The node, or comment, whose user to examine. If missing, infer
 *   the user from the url.
 * @param $field_name
 *   The profile field containing the mood.
 */
function user_mood_css($node = NULL, $field_name = 'profile_mood') {
  $uid = 0;
  if (isset($node)) {
    // pick the node's user.
    $uid = $node->uid;
  } else {
    // infer the user from the url.
    if ((arg(0) == 'user' || arg(0) == 'blog') && is_numeric(arg(1))) {
      $uid = arg(1);
    }
    else if (arg(0) == 'node' && ($node = node_load(arg(1)))) {
      $uid = $node->uid;
    }
  }
  if (!$uid) {
    return;
  }
  static $cache = array();
  if (!isset($cache[$uid])) {
    // load the user's profile:
    $cache[$uid] = user_load(array('uid' => $uid));
  }
  $user = $cache[$uid];
  if (!empty($user->$field_name)) {
    $mood = drupal_strtolower($user->$field_name);
    // Get rid of non-English letters (you may exclude other, national, letter ranges):
    $mood = preg_replace('/[^a-zA-Z]+/u', '-', $mood);
    return "user-mood-$mood";
  } else {
    // for debugging:
    return "user-mood-default";
  }
}
  3. Open 'node.tpl.php' in your editor. Add the following into it:
    <?php print user_mood_css($node); ?>

    (It's not very important where exactly you put it. Preferably not outside the outer DIV.)

Now, check things out. Fill out some 'moods' for some users and examine their nodes: you should see "user-mood-redish" etc etc printed with the nodes. If all works fine, there's very little left to do.

lethu’s picture

lethu commented

The theme I am using didn't already have a template.php file so I made a new one (I don't know if this was a good thing to do), I then have added the php line as you told me in the 'node.tpl.php' file but then got the following error in the begining of all of the site's pages.

/* * Get the user's mood, as a CSS class * * @param $node * The node, or comment, whose user to examine. If missing, infer * the user from the url. * @param $field_name * The profile field containing the mood. */ function user_mood_css($node = NULL, $field_name = 'profile_mood') { $uid = 0; if (isset($node)) { // pick the node's user. $uid = $node->uid; } else { // infer the user from the url. if ((arg(0) == 'user' || arg(0) == 'blog') && is_numeric(arg(1))) { $uid = arg(1); } else if (arg(0) == 'node' && ($node = node_load(arg(1)))) { $uid = $node->uid; } } if (!$uid) { return; } static $cache = array(); if (!isset($cache[$uid])) { // load the user's profile: $cache[$uid] = user_load(array('uid' => $uid)); } $user = $cache[$uid]; if (!empty($user->$field_name)) { $mood = drupal_strtolower($user->$field_name); // Get rid of non-English letters (you may exclude other, national, letter ranges): $mood = preg_replace('/[^a-zA-Z]+/u', '-', $mood); return "user-mood-$mood"; } else { // for debugging: return "user-mood-default"; } }

I guess something went wrong but I have no idea what it is :s
I also tried moving the php line arround in the 'node.tpl.php' file but with no success.

lethu

mooffie’s picture

mooffie commented

didn't already have a template.php file so I made a new one [...]
but then got the following error in the begining of all of the site's pages

That's ok. Type <?php  right at the start of that 'template.php' file. Had that file existed alreay, it'd have had that tag. Since you created it yourself, you need to type this starting tag yourself.

(BTW, I run this code on my blog. Here's what you should expect --note the "user-mood-yellow".)

lethu’s picture

lethu commented

It works now as expected :D, there is a "user-mood-redish" text above each story's title when I chose redish and so on in the profile. However I couldn't enter your blog to see the exemple, as my connection is quite unstable these last days :s. Anyway let's move on to next step :)

lethu

mooffie’s picture

mooffie commented

The next step is to move the <?php print user_mood_css($node); ?> to the right place.

Open your 'node.tpl.php' in an editor. At its very beginning you'll find:

<div ...... class="node......" ......>

where "......" stands for anything (or nothing). Change it to:

<div ...... class="<?php print user_mood_css($node); ?> node......" ......>

In other words, the "user-mood-redish", or whatever, will now be a CSS class of this node (you can verify this by doing 'View Source' in your browser and inspecting our modified HTML).

The final step is to add the following to your 'style.css':

.user-mood-yellowish {
  background-color: yellow;
}

.user-mood-redish {
  background-color: red;
}

(Of course, you can do much more here, e.g. put a background image, add paddings, etc.)

Browsers cache CSS files, so you may have to click the refresh button for the change to take effect.

That's all.

(If you want to apply the styles to comments as well, do to 'comment.tpl.php' what you did to 'node.tpl.php', except change '$node' to '$comment'.)

lethu’s picture

lethu commented

Ok I carefully followed your instructions however I have got an unexpected result, the stories' background didn't change as expected and a bottom as well as a top decoration borders that used to delineate the stories (see the following pictures) have stopped showing where they should.

Here are two screenshots (before and after), I have taken so you can have a better idea of what is going on:

http://i258.photobucket.com/albums/hh265/uhtel/linox_.jpg

http://i258.photobucket.com/albums/hh265/uhtel/linox.jpg

My website address is: http://linox.lescigales.org/

Thank you very much again for your time, I really appreciate it :D

lethu

mooffie’s picture

mooffie commented

I have a guess as to what happend. There's a little detail in my code that you might have failed to see, because the width of my replies is narrowing and the text is being wrapped.

I asked you to change:

<div class="node">

To:

<div class="<?php ... ?> node">
                        ^--- note the space

But I guess you changed it to:

<div class="<?php ... ?>node">
                        ^--- note no space :-(

There has to be a space there.

(If there's still any problem, don't undo your work: let me see the site.)

lethu’s picture

lethu commented

You guessed it right! :D, I added that naughty space and now everything is working as it should, thank you very much for your time and effort, I am pretty sure I wouldn't have made it without your help :D

lethu

mooffie’s picture

mooffie commented

You're welcome.

Note there's a glitch on your first page: after the "Linox pour toujours !" node everything is colored yellow. That's because you have invalid HTML on that page, which confuses the browse. E.g.:

<div align="left"><img ... src=".../prestige.png" ... />......</p>

The opening DIV doesn't match the closing P. You should change that DIV to P. There are some more similar errors on that page. Use an HTML validator to find them all.

lethu’s picture

lethu commented

Sweet :D, you fixed again what would have taken me days to figure out! Very kind of you I should put something on my site in your honour, you definitly deserve it :)

lethu

lethu’s picture

lethu commented

It's ok I managed to access your blog, the result in my site indeed looks the same.

lethu