By Anonymous (not verified) on

delete

⋅ Categories: Drupal 6.x

Comments

vm’s picture

vm commented

the acquia slate theme does this you may want to look into how they do it. They wrap a spam called first.word and it increases font weight and changes the color.

Anonymous’s picture

Anonymous (not verified) commented

deleted

vm’s picture

vm commented

Ah I see, this should actually be placed in the documentation area rather than in the forums where it will essentially disappear into the ether.

Anonymous’s picture

Anonymous (not verified) commented

deleted

vm’s picture

vm commented

theme developers guide, in the snippets area somewhere.

Jeff Burnz’s picture

Jeff Burnz commented

Well to be fair the wordlimit function and the way its used in Acquia slate is a tad more powerful than the code above - it takes three params, $string, $length and $ellipsis, so in block.tpl.php its called with $block->subject, 1, ""; and the code in block template allows you to add whatever html you want, span, strong, em, its easily editable.

I can also do this in 3 lines of jQuery when I want it purely for design - http://3rdworldthemes.org/snippets/wrap-block-title-first-word-span-tags

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
Anonymous’s picture

Anonymous (not verified) commented

delete

Jeff Burnz’s picture

Jeff Burnz commented

Cool, do what work for you, however my point was that the wordlimit function is an elegant and more flexible approach, because it does not have to be the first word that gets wrapped, it can be any word in a string of any length. To be frank when I really want to get serious with the code I simply code every block by hand, each one is individually tailored to its context and content.

My apologies if it sounded like I was telling you to do something etc, I was merely leaving additional options for other readers.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
brentini’s picture

brentini commented

Thanks for that snippet! It works flawlessly. I have been trying to figure out how to add a span tag to the first word in block title and this worked beautifully! Mad props!

I simply replaced strong with span in every instance and voila!

456,283,791 thanks to you!!!!!!

This made my week!

paskainos’s picture

paskainos commented

I realize this is an old thread, but this still comes up from time to time. When choosing a solution for this challenge, the argument is often made that jQuery is unreliable due to browser inconsistency, and thus, PHP is the better choice. The Acquia Slate first word snippet referenced above has proven itself reliable over the past few years, and so hopefully that offers a bit of js 'redemption'. Personally, I have found JeffreyWay's jQuery Stylewords a neat, tidy solution. It's super lightweight, and works exactly 'as advertised'. Once jQuery Stylewords is onboard, all that's left is something like this:

jQuery(function($) {
    $('.site-name a span').styleWords(1);
});

And voila! The first word (or two, or however many you like) is wrapped in:
<span class="styleWords"></span>

joshuautley’s picture

joshuautley commented

@ paskainos - Thank you!!! I designed a layout that required this functionality wrote my own js and failed. Then found your post about Jeffery Way's jQuery styleWords tried it out and after a little frustration got it working.

Some useful tips...

Just reference the scripts in your .info file if this is something you'll be using throughout the site. Use page preprocess if its for a specific page(s).

Example:

scripts[] = js/jquery.styleWords.min.js
scripts[] = js/your_style.js

In "your_style.js" use what ever code you choose from Jeffery's examples. I used the following:

jQuery(function($) {
  $('h1').styleWords(1, {
		'class': 'first-word'
	});
});

NOTE that if you do it the following way you will fail, as I did:

(function ($) {
  $('h1').styleWords(1, {
		'class': 'first-word'
	});
})(jQuery);

If anyone can explain why this method doesn't work for styleWords please let me know. I've used this method of ending the function with jQuery before with success so I am a little perplexed but happy that I figured I should just implement the code verbatim and see if it worked which it did. (=

Josh Utley, President & CEO
Intrepid Network Inc. | Multimedia Services & Business Solutions

"Our mission is to provide a more personable multimedia service along with the highest quality business solutions."