Style topic title "Keywords" Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

    Style topic title "Keywords"

    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    Tutorial Style topic title "Keywords"

    Post by Ange Tuteur June 23rd 2014, 1:57 pm

    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 :

    Style topic title "Keywords" Sa10


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

    ACP Style topic title "Keywords" Arrow10Modules Style topic title "Keywords" Arrow10HTML & Javascript Style topic title "Keywords" Arrow10Javascript code management


    Make sure javascript codes management is set to 'yes'

    then create a new javascript code Style topic title "Keywords" 29877


    Note: You have to choose the javascript code that corresponds to your forum version Style topic title "Keywords" Icon_thumright

    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 Style topic title "Keywords" Arrow10Display Style topic title "Keywords" Arrow10Images & Colors Style topic title "Keywords" Arrow10Colors Style topic title "Keywords" Arrow10CSS 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.