Title Spans

Hi there,

I would like to change the colour of the first word in my all my page titles and also module titles.
I have read quite a bit about adding a span into the title but have no idea how to implement this. Can somebody give me a hand?

Cheers

For module titles add below code to any of the css files. If available add it to override.css

Add your css parameters as you need , such as changing color of font to #000.

Code: Select all

.moduletable h3 span { color: #000; }


Keep in mind single words will be inside <span> tags.

Show me a page or a screenshot of your page title as i did not understand which section you are referring to.

See you around...

Works like a charm, brilliant... your a legend!

Right final thing is the article title...

Ive tried adding .contentheading h3 span { color:#333; } but that didnt work, any ideas?

Thanks again

You need to make changes to php code to seperate first word in article title. Which article system are you using. Joomla articles or K2 Articles?

Just normal joomla articles yes...

How it looks:


Find File: \templates\gk_blackandwhite\html\com_content\article\default.php
Find Lines: 45 to 51 Which is below

Code: Select all

   <?php if ($this->params->get('link_titles') && $this->article->readmore_link != '') : ?>
   <span>
      <a href="<?php echo $this->article->readmore_link; ?>" class="contentpagetitle<?php echo $this->escape($this->params->get( 'pageclass_sfx' )); ?>"><?php echo $this->escape(isset($this->article->page_title)?$this->article->page_title:$this->article->title); ?></a>
   </span>
   <?php else : ?>
   <span><?php echo $this->escape(isset($this->article->page_title)?$this->article->page_title:$this->article->title); ?></span>
   <?php endif; ?>


Replace with below

Code: Select all

   <?php
      $article_one = explode(' ', $this->article->title);
      $article_one = $article_one[0];
         if(count(explode(' ', $this->article->title)) > 1)
         {
            $article_two = substr($this->article->title, strpos($this->article->title,' '));
         }
         else
         {
            $article_two = '';
         }
   ?>
   <span><?php echo $article_one; ?></span><?php echo $article_two; ?>


Add following css code and change as necessary. For test i have made font yellow , background black.

Code: Select all

.contentheading span { color: #ffff00; background: #000; padding: 10px; }


I haven't checked what happens if you enable article links etc from article parameters. If any side effects let me know.

See you around...

Brilliant mate, thank you. Works perfect.

Any ideas how we can get around titles with a link?

Ive tried...

Code: Select all

.contentheading span a { color: #e0e14c; }

But it makes the whole title the particular colour. Thank you for your help, much appreciated.

Cheers

Use below php code instead of previous post.

Code: Select all

   <?php
      $article_one = explode(' ', $this->article->title);
      $article_one = $article_one[0];
         if(count(explode(' ', $this->article->title)) > 1)
         {
            $article_two = substr($this->article->title, strpos($this->article->title,' '));
         }
         else
         {
            $article_two = '';
         }
   ?>
   <?php if ($this->params->get('link_titles') && $this->article->readmore_link != '') : ?>
   <a href="<?php echo $this->article->readmore_link; ?>" class="contentpagetitle<?php echo $this->escape($this->params->get( 'pageclass_sfx' )); ?>"><span><?php echo $article_one; ?></span><?php echo $article_two; ?></a>
   <?php else : ?>
   <span><?php echo $article_one; ?></span><?php echo $article_two; ?>
   <?php endif; ?>


Also use following css together.

Code: Select all

.contentheading span { color: #ffff00; background: #000; padding: 10px; }
a.contentpagetitle span:hover,
a.contentpagetitle span:active,
a.contentpagetitle span:focus,
a.contentpagetitle span { color: #ffff00; background: #000; padding: 10px; }


Although i haven't seen any usage for links in articles , if links are active only in blog layout or category layout then you might need to alter other files as well.

See you around...