The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Style topic title "Keywords"

View previous topic View next topic Go down

Style topic title "Keywords"

Post by Ange Tuteur on June 23rd 2014, 8:57 am

Style topic title "Keywords"


1. Definition
Thanks to this tutorial, you will now be able to highlight specific words (let's call this "keywords") in your topic title. Just like the example shown below :



2. The JavaScript code
To add the JavaScript, please follow the steps below :

ACP Modules HTML & Javascript Javascript code management


Make sure javascript codes management is set to 'yes'

then create a new javascript code


Note: You have to choose the javascript code that corresponds to your forum version

PhpBB3
Title: Your choice
Placement: In the topics
Code:
$(function() {
  var c = document.querySelectorAll('h2.topic-title, h1.page-title');
  for (i=0; i<c.length; i++) {
  c[i].innerHTML = c[i].innerHTML.replace(/#TEXT/g,'<span id="TEXT">TEXT</span>');
  }
});


Invision
Title: Your choice
Placement: In the topics
Code:
$(function() {
  var c = document.querySelectorAll('.postdetails h3');
  for (i=0; i<c.length; i++) {
  c[i].innerHTML = c[i].innerHTML.replace(/#TEXT/g,'<span id="TEXT">TEXT</span>');
  }
});


PunBB
Title: Your choice
Placement: In the topics
Code:
$(function() {
  var c = document.querySelectorAll('.posthead');
  for (i=0; i<c.length; i++) {
  c[i].innerHTML = c[i].innerHTML.replace(/#TEXT/g,'<span id="TEXT">TEXT</span>');
  }
});



3. The style
Please go to the following page :

ACP Display Images & Colors Colors CSS stylesheet


and add the following code to your CSS stylesheet :
Code:
#TEXT {
 background: #FFF;
 padding: 0px 5px 1px 4px;
 border-radius: 6px !important;
 font-size: 11px;
 float: left;
 margin-right: 4px;
 border: 1px solid #CCC;
 box-shadow: 0px 1px 1px #FAFAFA;
}


#TEXT: replace this TEXT with the word you want to transform (but do not remove the # before it, or the css code won't style your word)

4. Modifications
In the javascript code you have this line:
.innerHTML.replace(/#TEXT/g,'<span id="TEXT">TEXT</span>');



  • #TEXT: this is the first TEXT you find. You have to replace it with the word you want to change
    Note: It is important that the word you replace here is the SAME written in the title;
    this part is CASE sensitive, so if you have Hello in the title and you write hello the code won't work

  • TEXT: the second TEXT you find. It is the ID used to style your keyword, if you have multiple keyword styles change it to the ID you want.
  • TEXT: the third TEXT you find. Replace it with the word you want to change


You can style multiple keywords by adding another replace method after the first one :
Code:
.innerHTML.replace(/#TEXT/g,'<span id="TEXT">TEXT</span>').replace(/\[TEST\]/g,'<span id="TEST">Test</span>');


Exclamation Attention :
There are some special characters that must be Escaped to be replaced as a keyword.

Brackets must be written as :
\[ and \]

Parenthesis must be written as :
\( and \)

If your keyword is not being replaced use the escape character \ before newly added characters.


Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum