Customize the section titles

gudmundurulfarsson / 2008-10-23 14:34:54   

Is there any way i can use css/html in the section titles?

What i'd like to do is to have the titles in 2 languages so it would look some thing like this:

Icelandic English

Possible?

Thanks for your help.

(btw i got the icelandic letters to work)

unttld / 2008-10-23 14:39:50   

So you want the titles in the menu to appear in italics/bold?

gudmundurulfarsson / 2008-10-23 14:52:55   

Well that was an example.

I actually want them to appear in: grey / blue.
But i figured it was pretty much the same question.
That is, if it's possible to use somekind of css/html in the section titles.
Would i have to do this with somekind of php script?

unttld / 2008-10-23 15:16:53   

http://www.dynamicsitesolutions.com/javascript/first-word-selector/

This is some javascript that can be of help. You may need to do some poking around with the html/css to get this working properly.

Vaska A / 2008-10-23 15:24:57   
  1. #menu ul li.section-title { font-weight: bold; }
gudmundurulfarsson / 2008-10-26 22:18:39   

Vaska.. no need to disrespect.

Vaska A / 2008-10-26 22:33:57   

What? That's an example how to do this...but I didn't catch the two language part.

Geezus...

LeslieOA / 2008-10-27 01:17:57   

Wow, guess not everyone had/is having a good Sunday, let me see if I can change that...

Similar to the JavaScript unttld linked to and using the CSS info the wonderful Vaska helpfully pointed out, incorporate the following: -

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
  2. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  3. <head>
  4. <title>First word selector example</title>
  5. <style media='screen' type='text/css'><!--
  6. ¬† ¬† #menu ul li a { color: blue; }
  7. ¬† ¬† #menu ul li a strong { color: grey; }
  8. --></style>
  9. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js'></script>
  10. <script type='text/javascript'><!--
  11. $(document).ready(function() {
  12. ¬† ¬† $('#menu ul li a').each(function(){
  13. ¬† ¬† ¬† ¬† var language = $(this);
  14. ¬† ¬† ¬† ¬† language.html( language.text().replace(/(^w+)/,'<strong>$1</strong>') );
  15. ¬† ¬† ¬† ¬† });
  16. ¬† ¬† });
  17. --></script>
  18. </head>
  19. <body>
  20. <h1>First word selector</h1>
  21. <div id='menu'>
  22. <ul>
  23. ¬† ¬† <li><a href='a.html'>First Second</a></li>
  24. ¬† ¬† <li><a href='b.html'>English Icelandic</a></li>
  25. ¬† ¬† <li><a href='c.html'>Annoyed Irritable Calm Docile</a></li>
  26. ¬† ¬† <li><a href='d.html'>Obama or McCain?</a> Well, I'd vote for the <em>grey</em> and <em>bold</em> one ;-P</li>
  27. ¬† ¬† </ul>
  28. ¬† ¬† </div>
  29. <p>...see what I did there?</p>
  30. </body>
  31. </html>

Works a treat, requires jQuery (link from your own file if you want) and you can do pretty much anything with the first word.

Download the above

Peace and love.

unttld / 2008-10-27 01:42:07   

happy Sunday Leslie. Nice javascript ;)

This thread has been closed, thank you.