Printable Version of Topic
Click here to view this topic in its original format
Jcink.com Forums > General Support > Replacing Text (Edit Profile)


Posted by: Faith Aug 10 2017, 03:48 PM
A while back I asked for some help on changing something in the edit profile section. At that time John also pointed me to a thread for replacing text in this post here:


https://forum.jcink.com/index.php?showtopic=20078&view=findpost&p=158005


Unfortunately, I can no longer access that thread. It say I don't have permission to view it.


What I am looking to do is to change the text in the Edit Profile Information section that says:


YOUR PERSONAL PROFILE, THIS SECTION IS OPTIONAL


Also if I could change the text for the standard Date of Birth field as well. I'd like to be able to make that specifically refer to the user and not their character. Or possibly hiding that Date of Birth field as well would work.




Posted by: John Aug 10 2017, 03:49 PM
Here is the content of the replacing text post that I linked, it should help explain it further:

Purpose: This explains how to replace text in various areas of the forum.
Preview: No preview necessary, self explanatory.
Instructions: ACP -> Skins & Templates -> Board Wrappers -> In the footer, below <% COPYRIGHT %>

So, you find a piece of text you want to replace but you're not sure how to change it. Changing text is simpler than it seems and only requires a few lines of jQuery.

Base code:

CODE
<script>
replace_str = $('ELEMENT').html().replace(/Text To Replace/gi,'Replacement Text');
$('ELEMENT').html(replace_str);
</script>


How can we use this to replace text? Below are a few simple examples:

Replace "Logged in as:" with "Account:"

Step #1: Identify the element that contains the text you're trying to replace. In our case, the text "Logged in as:" appears in the user links bar. The element we're looking for then, is #userlinksbar.

How can you find element names? Simple, check the http://jcink.com/main/wiki/jfb-skinning-css-guide.

Step #2: Replace ELEMENT in the code with the name:

CODE
<script>
replace_str = $('#userlinks').html().replace(/Text To Replace/gi,'Replacement Text');
$('#userlinks').html(replace_str);
</script>


Step #3: Add the text we want to replace exactly as shown, and exactly what we want to replace it with:

CODE
<script>
replace_str = $('#userlinks').html().replace(/Logged in as:/gi,'Account:');
$('#userlinks').html(replace_str);
</script>


You're done!

You can now place this in board wrappers to get the replacement you need. You can do this for any other element within the forum.

Here are a few other examples:

CODE
<script>
// Change board statistics text
replace_str = $('#boardstats').html().replace(/Board Statistics/gi,'Forum Stats');
$('#boardstats').html(replace_str);
</script>


CODE
<script>
// Change left profile column text
replace_str = $('.profile-left').html().replace(/Personal Photo/gi,'My Photo');
$('.profile-left').html(replace_str);
</script>


CODE
<script>
// Remove subforums text
replace_str = $('.subforums').html().replace(/Subforums:/gi,'');
$('.subforums').html(replace_str);
</script>

Posted by: Faith Aug 13 2017, 12:17 AM
Thanks for supplying that information.


I am not getting it to work for some reason.

This is what I'm trying to change here:

CODE
<div class="pformstrip">Your personal profile, this section is optional</div>



This is the code I tried to put in and it didn't work. I placed it at the very body of the wrappers after some of the other scripts. I also tried higher up in the code in the javascript area.


CODE
<script>
// Change pformstrip
replace_str = $('.pformstrip').html().replace(/Your personal profile, this section is optional/gi,'all the words i want to put go here does it matter how many there are?');
$('.pformstrip').html(replace_str);
</script>

Posted by: Bingpot Jul 11 2018, 06:03 AM
Hello. http://files.b1.jcink.com/html/emoticons/smile.gif

This text replacement code has been very useful in places, so first of all thank you John!

However, it doesn't appear to work in some areas. It works for the #ucpcontent and #navstrip elements, but I haven't been able to get it to work anywhere else.

For example, I'd like to replace the "Registration Form" header text, "Topic Moderation Options" dropdown menu text, and "Posted on" date suffix on the "Last 10 posts" screen when posting. I don't seem to be able to find the correct element to use for these.

I'd also love to be able to include HTML in text replacements where possible.

Many thanks for your help. http://files.b1.jcink.com/html/emoticons/smile.gif

Posted by: Cory Jul 11 2018, 01:23 PM
Use these selectors:

CODE
form[name="REG"] div.maintitle

CODE
select[name="mod_options"] option[value="-1"]:eq(1)

CODE
td.post2[width="80%"]

You can use HTML with what John provided.

Posted by: Bingpot Jul 11 2018, 04:43 PM
Thanks Cory. The following isn't working -- am I using the selector right?

CODE

<script>
replace_str = $('form[name="REG"] div.maintitle').html().replace(/Registration Form/gi,'Character Sheet');
$('form[name="REG"] div.maintitle').html(replace_str);
</script>

Posted by: Cory Jul 12 2018, 12:30 AM
Works fine on my test board, can I see a link to your board?

Posted by: Bingpot Jul 12 2018, 02:01 AM
Sure, I've PMed you the deets. http://files.b1.jcink.com/html/emoticons/smile.gif

Posted by: Cory Jul 12 2018, 02:13 AM
Try this for your JavaScript instead:

CODE
<script>
var replace_str;

if ($('#ucpcontent').length) {
   replace_str = $('#ucpcontent').html().replace(/Required Information, this section must be completed/gi, 'Character Information');
   $('#ucpcontent').html(replace_str);

   replace_str = $('#ucpcontent').html().replace(/Welcome to your control panel/gi, 'Control Panel');
   $('#ucpcontent').html(replace_str);

   replace_str = $('#ucpcontent').html().replace(/Your personal profile, this section is optional/gi, 'Player Information — Optional!');
   $('#ucpcontent').html(replace_str);

   replace_str = $('#ucpcontent').html().replace(/Your Avatar Settings/gi, 'Avatar Settings');
   $('#ucpcontent').html(replace_str);

   replace_str = $('#ucpcontent').html().replace(/Your Current Avatar/gi, 'Current Avatar');
   $('#ucpcontent').html(replace_str);

   replace_str = $('#ucpcontent').html().replace(/Your image avatars/gi, 'Upload Avatar');
   $('#ucpcontent').html(replace_str);
}

if ($('form[name="REG"] div.maintitle').length) {
   replace_str = $('form[name="REG"] div.maintitle').html().replace(/Registration Form/gi, 'Character Sheet');
   $('form[name="REG"] div.maintitle').html(replace_str);
}

if ($('select[name="mod_options"] option[value="-1"]:eq(1)').length) {
   replace_str = $('select[name="mod_options"] option[value="-1"]:eq(1)').html().replace(/Topic Moderation Options/gi, 'Thread Finished?');
   $('select[name="mod_options"] option[value="-1"]:eq(1)').html(replace_str);
}

if ($('td.post2[width="80%"]').length) {
   replace_str = $('td.post2[width="80%"]').html().replace(/Posted on/gi, 'Posted');
   $('td.post2[width="80%"]').html(replace_str);
}

replace_str = $('#navstrip').html().replace(/Your control panel/gi, 'Control Panel');
$('#navstrip').html(replace_str);

replace_str = $('#navstrip').html().replace(/Viewing Profile/gi, 'Character Sheet');
$('#navstrip').html(replace_str);
</script>

Posted by: Bingpot Jul 12 2018, 02:43 AM
That works a charm! Thank you very much!

So there needs to a new "if" for each element? (Except navstrip?)

Edit: Cory Would you be able to help me with changing the following two pieces of text as well? http://files.b1.jcink.com/html/emoticons/smile.gif

"No topics were found. This is either because there are no topics in this forum, or the topics are older than the current age cut-off." (in forum listing)

and

"Amend my profile" (when editing your profile)

Very much appreciated. http://files.b1.jcink.com/html/emoticons/smile.gif

Posted by: Cory Jul 12 2018, 10:34 AM
The if statement is to ensure it doesn't create a 'null' error that causes the other codes to dysfunction. It's basically saying if this selector exists, parse this code.

For those two, try these selectors:

CODE
tr.topic-subheader + tr td.row4 b:contains(No topics were found.)

CODE
input[value="Amend my profile"]

You'll need to use the if statement for these two, because unlike the navstrip they don't exist on every page.

Posted by: Bingpot Jul 12 2018, 10:51 AM
I see what you mean, thanks for explaining.

Hmm, no joy with those selectors. This is the code I've used:

CODE
if ($('tr.topic-subheader + tr td.row4 b:contains(No topics were found.)').length) {
  replace_str = $('tr.topic-subheader + tr td.row4 b:contains(No topics were found.)').html().replace(/No topics were found. This is either because there are no topics in this forum, or the topics are older than the current age cut-off. /gi, '');
  $('tr.topic-subheader + tr td.row4 b:contains(No topics were found.)').html(replace_str);
}


if ($('input[value="Amend my profile"]').length) {
  replace_str = $('input[value="Amend my profile"]').html().replace(/Amend my profile/gi, 'Posted');
  $('input[value="Amend my profile"]').html(replace_str);
}

Posted by: Cory Jul 12 2018, 11:03 AM
For the first one, remove the space before '/gi'.

For the second one, try this instead:

CODE
$('input[value="Amend my profile"]').val('Posted');

Posted by: Bingpot Jul 12 2018, 11:39 AM
Neither working I'm afraid. The second one possibly because I'm not sure what to do with that new selector --

CODE
if ($('tr.topic-subheader + tr td.row4 b:contains(No topics were found.)').length) {
  replace_str = $('tr.topic-subheader + tr td.row4 b:contains(No topics were found.)').html().replace(/No topics were found. This is either because there are no topics in this forum, or the topics are older than the current age cut-off./gi, '');
  $('tr.topic-subheader + tr td.row4 b:contains(No topics were found.)').html(replace_str);
}


if ( $('input[value="Amend my profile"]').val('Posted') {
 replace_str = $('input[value="Amend my profile"]').val('Posted').html().replace(/Amend my profile/gi, 'Posted');
 $('input[value="Amend my profile"]').val('Posted').html(replace_str);
}

Posted by: Cory Jul 12 2018, 12:07 PM
CODE
$('input[value="Amend my profile"]').val('Posted');

Use that only for the second one. Fixing this may fix the first one.

Posted by: Bingpot Jul 12 2018, 12:42 PM
Like this?

CODE
if ($('tr.topic-subheader + tr td.row4 b:contains(No topics were found.)').length) {
  replace_str = $('tr.topic-subheader + tr td.row4 b:contains(No topics were found.)').html().replace(/No topics were found. This is either because there are no topics in this forum, or the topics are older than the current age cut-off./gi, '');
  $('tr.topic-subheader + tr td.row4 b:contains(No topics were found.)').html(replace_str);
}

$('input[value="Amend my profile"]').val('Posted');

Posted by: Cory Jul 12 2018, 12:44 PM
Yes.

Posted by: Bingpot Jul 12 2018, 01:00 PM
No joy I'm afraid.

Posted by: Cory Jul 12 2018, 01:04 PM
CODE
replace_str = $('td[width="20%"] div.button-large').html().replace(/Topic Options/gi, '<a href="http://sunbound.jcink.net/index.php?showtopic=9">Any Questions?</a>');
$('td[width="20%"] div.button-large').html(replace_str);

This needs the if statement.

Posted by: Bingpot Jul 12 2018, 01:47 PM
Thank you, that fixed the profile button!

The only one not working now is the "No topics were found" text.

Posted by: Cory Jul 12 2018, 02:02 PM
Insert it before all of the other replace text scripts.

Posted by: Bingpot Jul 12 2018, 02:51 PM
Bingo! Thanks again! http://files.b1.jcink.com/html/emoticons/biggrin.gif

'
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)