By BlueDragon-1 on

I have been looking for a solution to have some site-name letters in various different colors. Though I had a deep look in the various zen css files I could not find any solution. In page.css I found various ways to influence the overall letter color (div#site-name) but not for single letters. I also tried to add some html tags in the Drupal System Site information 'Site name' box but the tags are finally stripped out.

I guess there must be a way to add some code in the proper template file and / or have a div or id created for this purpose to be added in the page.css file but it's somewhat beyond my present knowledge... :/

If I don't find a solution I will try to use an image though I am sure there must be smarter solution with css.

Can anybody enlight me on this subject please?

Thanks a lot!

⋅ Categories: Drupal 7.x

Comments

epruett’s picture

epruett commented

An image actually might be the easiest and most manageable solution if this is going to change often.
Because you can quickly update this file with no code changes to the site.

If however you do want to do this via code then yes add some appropriate div's with specific classes to your page.tpl.php file at the site name area and then add the appropriate CSS to your style.css
So each letter you want to change the color on will have it's own specific class.

ishmael-sanchez’s picture

ishmael-sanchez commented

In your template.php file you could just define your own site name variable and wrap elements (spans or other HTML tags) around letters and output that instead. Ex.

<?php
function YOURTHEMENAME_preprocess_page(&$vars) {
 $vars['site_name'] = '<span class="highlight">' . t('My') . '</span><span class="lowlight">' . t('Site') . '</span>';
}
?>

This will overwrite you current site name with the text 'Mysite' which will be wrapped in two spans with different classes so that you can style differently.

BlueDragon-1’s picture

BlueDragon-1 commented

Thanks to all for your appreciated inputs.

I tried to paste this php code in the zen page.tpl.php file and also tried to replace the YOURTHEMENAME with my theme (folder) name but it's not working. :/

Here is the relevant part of the code (I think):

<div id="header"><div class="section clearfix">

    <?php if ($logo): ?>
      <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>
    <?php endif; ?>

    <?php if ($site_name || $site_slogan): ?>
      <div id="name-and-slogan">
        <?php if ($site_name): ?>
          <?php if ($title): ?>
            <div id="site-name"><strong>
              <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
            </strong></div>
          <?php else: /* Use h1 when the content title is empty */ ?>
            <h1 id="site-name">
              <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
            </h1>
          <?php endif; ?>
        <?php endif; ?>

        <?php if ($site_slogan): ?>
          <div id="site-slogan"><?php print $site_slogan; ?></div>
        <?php endif; ?>
      </div><!-- /#name-and-slogan -->
    <?php endif; ?>

Where exactly should I add what code in order to have the site-name wrapped in 2 spans with different classes?...

Thanks and sorry for my ignorance! :-O

ishmael-sanchez’s picture

ishmael-sanchez commented

Check in the template.php file. If you are using zen you should have that file. Look for the page process function. A preprocess function will impact the variables before they are sent to the page.tpl.php file so you shouldn't have to muck around in that file.

BlueDragon-1’s picture

BlueDragon-1 commented

Yes indeed I just figured it out by myself... but you were faster. :D

I'll test it as soon as my shared host will do me the favour to reply...

Thanks again!

BlueDragon-1’s picture

BlueDragon-1 commented

You are the best ishmael!

I inserted your php snippet above in the zen template.php (without ?> at the end because apparently according to the commented examples in the file it's not needed) and I added the needed classes in the page.css sub-theme file.

It works like a charm!! :))

Thank you so much!

justanothermark’s picture

justanothermark commented

If you don't mind them only being different colours when Javascript is enabled you could have a look at using lettering.js with Drupal.

RKopacz’s picture

RKopacz commented

I realize this is an old thread, but I have the same problem and have tried lettering.js and it does not seem to work. The scripts are appearing in the template just fine, and the script selecting the element seems to be written "as instructed". In fact, the scripts are identical to this static html page. Yet the spans are not injected. When I run a debug in firebug I get the error "$ is not a function". Not sure what I am doing wrong. I am on Drupal 7.15 and using a subtheme of Omega 7.3.1. currently on a local dev environment.

Only thing I can think of is there is some conflict with the built in scripts in Drupal or Omega.

While I like the preprocess solution above, I need to inject a span per letter, and doing so in preprocess seems tedious and a bit rigid. I would like the flexibility to permit the owner of the site to change the name of the site and have the spans automatically updated. Perhaps there is some way to explode the string with a php function and then insert the spans?

If anybody has any tips they can share with me on this I would appreciate it.