4

When viewing the teaser for a node, all labels are output as uppercase. I want them titleized (meaning the first letter of every word is capitalized). What's the best way to go about doing this? Currently there is no CSS effecting the label field, so I know Drupal is just outputting all capitals.

I don't know why Drupal is rendering the label text in all capitals, so I was looking for a theme preprocessor function in the Drupal 7 API that could maybe dig into the label data and then change it to all lowercase from there, but I couldn't find anything concrete. I could then apply CSS to format the label how I want. However, until I know HOW Drupal renders the labels I can't apply any CSS that will have the desired effect.

EDIT: I changed the title from "Change label in teaser output to lowercase" to "Change the formatting of a label in Drupal 7" as I think that the question can be answered in a less specific sense, and I may have found the reason my labels are turning up in all caps.

  • If you're going to downvote the question, at least explain why you're downvoting so the reasoning can be considered and addressed. – Lester Peabody Jan 26 '12 at 17:38
  • Ive upvoted the answer to neutralize the downvote. I think the question is more than fair. Theming fields, or finding where someone else might have hooked into the field rendering process is pretty common. – amateur barista Jan 28 '12 at 1:31
1

This is likely controlled by CSS, you can change it by adding a rule to your CSS file similar to this:

.node-teaser label{text-transform:capitalize}

You might need to target the particular element a bit more precisely so have a look with Firebug to see what rule is setting the text-transform on the labels currently.

  • Tried this already. This doesn't have the desired effect if all of the letters are already uppercase, it simply changes the first letter of every word to be capitalized, which obviously is already the case if everything is already uppercase. Here's the fiddle jsfiddle.net/h5q4x – Lester Peabody Jan 26 '12 at 16:34
  • 1
    Well just go and change the labels to the case you want them in, as pointed out by dymonkeyninja they shouldn't be in all caps anyway it doesn't make sense – Clive Jan 26 '12 at 16:38
  • 1
    @Lester, see my answer. You'd be better to not store the labels as uppercase. – drmonkeyninja Jan 26 '12 at 16:39
  • @Clive You can't just say "go and change the labels" because the question I asked was "How do I change the labels to do this..." implying that I don't know how to change the way the labels are rendered by Drupal. I know it doesn't make sense to output them this way, and I don't know why they're being output as uppercase, that's why I want to change it. – Lester Peabody Jan 26 '12 at 16:49
  • @LesterPeabody: So are you saying you've been into the field settings for each field and checked that the label is being set in normal case, and that somewhere in the process Drupal is converting them in PHP to uppercase? Your question is not clear. – Clive Jan 26 '12 at 17:06
3

Something is odd about this as you say your labels are in lower case but they are being rendered in all caps. I would view it with Firebug / Chrome Web Inspector to make sure there is not a higher level selector in your CSS that's transforming it to all caps in which case you would have a tough time going back to title case if your selector does not override the one thats making it all caps.

At any rate you can't transform all caps back to titlecase but you could with jQuery:

https://stackoverflow.com/questions/3471157/css-text-transform-capitalize-on-all-caps

Also see this for reference, http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

"capitalize 
Puts the first character of each word in uppercase; other characters are unaffected."

But before you go an add some JQuery, I would take a serious look at your CSS with Firebug to make absolute sure that something is not transforming it to all caps in the first place.

  • I've been through the element hierarchy and there is definitely no text-transform affecting things. I agree, there is definitely something amiss. This code is inherited so the previous developer might have done something a bit odd somewhere, I'm trying to find what he changed :) – Lester Peabody Jan 26 '12 at 17:31
  • ah, that could be key "This code is inherited so the previous developer might have done something a bit odd somewhere." That's happened to me a few times. I am guessing the previous dev might have hacked something up somewhere in the theme. Perhaps try doing some searches in your IDE to try to find out where this might have been done. – Danny Englander Jan 26 '12 at 17:34
2

Okay, since this code was inherited I began to suspect that the previous dev had done some fishy things, which he in fact did. Here is the code I found in the ridiculously huge template.php file.

function ccom_field($variables) {
  $output = '';

  // Render the label, if it's not hidden.
  if (!$variables['label_hidden']) {
    $output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . strtoupper($variables['label']) . '</div>'; //<-- HERE the colon
  }

  // Render the items.
  $output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
  foreach ($variables['items'] as $delta => $item) {
    $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
    $output .= '<div class="' . $classes . '"' . $variables['item_attributes'][$delta] . '>' . drupal_render($item) . '</div>';
  }
  $output .= '</div>';

  // Render the top-level DIV.
  $output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '>' . $output . '</div>';

  return $output;
}

Notice the line that has the strtoupper call... That was the issue. I removed that and everything is now how it should be.

There's been a couple of other methods mentioned here for altering the data stored in the label variable during the rendering process. They all would be effective, including the method I just posted. The method I posted has the added effect of allowing you to change the structure of the field as it is rendered in your theme. For the sake of rewarding other's efforts in answering this ridiculous question, I'll find the next closest answer and set it as the accepted answer.

  • Glad you found the problem, I think the previous dev created a lot of code and overhead for no good reason and in a ridiculous manner. In the end, to simply add odd / even, one line of JQuery targeting the element would have worked. – Danny Englander Feb 7 '12 at 15:32
  • After looking up the default field implementation on the Drupal site, this actually was the default, just copy pasted, but just capitalizing all of the labels and stripping the colon. The odd even classes are good for CSS. He wasn't entirely crazy, just, weird... – Lester Peabody Feb 7 '12 at 16:46
1

First of all you need to establish what html is wrapping your labels, you can use firebug or just look for them in the source html.

For instance I find the labels on a site I happen to be working on are wrapped in <h3 class="field-label">, so some css like .field-label { text-transform: lowercase; text-transform: capitalize;} in your theme's stylesheet should do the trick.

  • Unfortunately this is not the way CSS works. CSS simply specifies rules, it doesn't take any action. A browser looks through these rules and then cascades them. So, the only property the browser would apply would be the last text-transform you mentioned, and would apply text-transform: capitalize; to the field, which is already rendered in full uppercase, resulting in no visual change. Make sense? – Lester Peabody Jan 26 '12 at 17:57
  • You are absolutely right, I just ran a test and it will only apply the last rule, so not so much "last-rule wins" as last-rule-applied". Interesting ;-) – hutch Jan 26 '12 at 18:21
0

Seeing as this is a style issue you could do this using the text-transform property in CSS:-

text-transform: capitalize;

Really, your labels you've defined in Drupal shouldn't all be in uppercase. It would be better to use text-transform: uppercase; for your form labels if that is what you are aiming for. Style should be kept separate from content.

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.