change the picture, the text and the backround of the buttons

Technical Details

Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
When the problem appeared : 1 week ago
Forum link : http://ggforum.forumotion.com/

Description of problem

Hi again. I dont use images but text for my buttons and I am trying to change the text and also the small pic that appears at the left side of the text, witch by the way is the same pic on all buttons.
I am talking about all post buttons and also for the buttons "back to top", "go down" , "post reply", "new topic".

I also need to add some class for the buttons, like a border and a background colour

A pic of my buttons is below

https://postimg.org/image/8cuf6jye3/



ps...... I have already found a css code for editing the text of the "edit/delete" button, so now it only says "edit". The java for this is:

Code:

$(function() {
          var new_title = 'Edit';
       
          $('.i_icon_edit[title^="Edit/Delete"]').attr({
            title : new_title,
            alt : new_title
          });
        });

I tried to modify the java for the rest of the buttons but it doesnt work the way I am trying to do it

So.....I cant do it for the rest of the buttons nor the buttons for topics like "back to top", "go down" , "post reply", "new topic"

Any help would be really appreciated

@Imeo ACP > Modules > HTML & Javascript > Javascript codes management > Create new javascript

Title: Topic Actions Text
Placement: In all the pages

Code:

Code:

/\/[ft]\d+/.test(window.location.href) && $(function() {
  var links = {
    'New Topic' : $('a[href*="mode=newtopic"]'),
    'Post Reply' : $('a[href*="mode=reply"]'),
    'Go Down' : $('a[href="#bottom"]'),
    'Back to Top' : $('a[href="#top"]')
  }, i;

  $('a[href*="mode=newtopic"] img, a[href*="mode=reply"] img, a[href="#bottom"] img, a[href="#top"] img').remove();

  for ( i in links ) {
    if (links.hasOwnProperty(i)) links[i].html(links[i].html() + i);
  }
});

thank you very much Ace but unfortunately it doesnt work at any of the buttons

I've edited my post. The code should work now.

still nothing Ace, sorry

@Imeo, try one more time

I edited it again.

thank you Ace but still nothing.

Also, dont worry about me, I am here all the time. You are the one that does the hard work!

It does work.

http://ggforum.forumotion.com/f1-gg-threads

You wanted the images to be converted to text, no?

In fact, I wanted to change the names of the buttons Ace. Thats what I wrote on my first post

My concern was not to change the buttons to text. I know that this can be done from the css colors tab and thats how I did it for all the post buttons.

What I want is to change the names of the buttons. For example, the "reply with quote" has to be "quote", etc.

And yes, I would like to add border around the button's text and a background. So if I have the whole code for all butons, I will be able to change the colors, the size and the backround of them.

So you just want to change the title attribute of the buttons?

yes, the titles. And to add border and background to all buttons Ace

For the border and background, go to AP > Display > Colors > CSS Stylesheet and add this code:

Code:

a[href*="mode=newtopic"] img, a[href*="mode=reply"] img, a[href="#bottom"] img, a[href="#top"] img, .post .inner > table ul.profile-icons li a img {
    border: 1px solid #XXX;
    background: black;
}

As for the titles, create a new Javascript and enable it in all the pages. Use the following code:

Code:

/\/t\d+/.test(window.location.href) && $(function() {
  var links = {
    'Post new topic' : $('div.buttons a[href*="mode=newtopic"]'),
    'Reply to topic' : $('div.buttons a[href*="mode=reply"]'),
    'Go down' : $('p.left-box a[href="#bottom"]'),
    'Back to top' : $('p.left-box a[href="#top"]'),
    '+' : $('li.fa_reputation a'),
    'Reply to topic' : $('li a[href*="mode=reply"]'),
    'Select/unselect multi-quote' : $('img[src="MULTIQUOTE"]').parent(),
    'Reply with quote' : $('li a[href*="mode=quote"]'),
    'Report post to moderator or admin' : $('li a[href*="mode=report"]'),
    'Lock post for new reports' : $('li a[href*="mode=lock"]')
  }, i;
 
  for ( i in links ) {
    if (links.hasOwnProperty(i)) links[i].children('img').attr('title', i);
  }
});

You can change the titles of each one by editing each object parameter. Above are the defaults. For example, if you wanted to change

Code: Post new topic

to

Code: New Topic

then you would go to Line 3 and change the text within the single quotation marks to New Topic.

fantastic work on css Ace, thank you!

But the java doesnt work. I change the names but names dont change. And the vote button has border around it, something that I dont really like

Ace 1 wrote:So you just want to change the title attribute of the buttons?

Then I think you meant the alt text attribute.

In that case you'll have to change the code to this:

Code:

/\/t\d+/.test(window.location.href) && $(function() {
  var links = {
    'Post new topic' : $('div.buttons a[href*="mode=newtopic"]'),
    'Reply to topic' : $('div.buttons a[href*="mode=reply"]'),
    'Go down' : $('p.left-box a[href="#bottom"]'),
    'Back to top' : $('p.left-box a[href="#top"]'),
    '+' : $('li.fa_reputation a'),
    'Reply to topic' : $('li a[href*="mode=reply"]'),
    'Select/unselect multi-quote' : $('img[src="MULTIQUOTE"]').parent(),
    'Reply with quote' : $('li a[href*="mode=quote"]'),
    'Report post to moderator or admin' : $('li a[href*="mode=report"]'),
    'Lock post for new reports' : $('li a[href*="mode=lock"]')
  }, i;
 
  for ( i in links ) {
    if (links.hasOwnProperty(i)) links[i].children('img').attr('alt', i);
  }
});

Basically, line 16 is the only one that's been altered. If you get the pun.

thank you Ace, it works now!

We still have some issues:

1. There is no code to change the DELETE
2. There is no code to change the VIEW IP ADDRESS
3. The "reply to topic" (the one to the upper left corner) didnt change when I modified Java
4. The multiquote doesnt have border and background
5. The "back to top" button and the "go down" button can be changed only for the ones that are on top and bottom of the page and not inside the posts
6. The vote hand has now border around it witch has to be removed

1/2. I'm going to assume that you want the Edit one changed as well. Replace the JS above with this:

Code:

/\/t\d+/.test(window.location.href) && $(function() {
  var links = {
    'Post new topic' : $('div.buttons a[href*="mode=newtopic"]'),
    'Reply to topic' : $('div.buttons a[href*="mode=reply"]'),
    'Go down' : $('p.left-box a[href="#bottom"]'),
    'Back to top' : $('p.left-box a[href="#top"]'),
    '+' : $('li.fa_reputation a'),
    'Reply to topic' : $('li a[href*="mode=reply"]'),
    'Select/unselect multi-quote' : $('img[src="MULTIQUOTE"]').parent(),
    'Reply with quote' : $('li a[href*="mode=quote"]'),
    'Edit' : $('li a[href*="mode=editpost"]'),
    'Delete' : $('li a[href*="mode=delete"]'),
    'Report post to moderator or admin' : $('li a[href*="mode=report"]'),
    'Lock post for new reports' : $('li a[href*="mode=lock"]'),
    'View IP address of poster' : $('li a[href*="mode=ip"]'),
  }, i;
 
  for ( i in links ) {
    if (links.hasOwnProperty(i)) links[i].children('img').attr('alt', i);
  }
});

3. In order to change that, you need to change the

Code: Reply to topic

text in Line 4 of the script.

4. Replace the CSS code I gave you earlier with this:

Code:

a[href*="mode=newtopic"] img, a[href*="mode=reply"] img, a[href="#bottom"] img, a[href="#top"] img, .post .inner > table ul.profile-icons li:not(.fa_reputation) a img {
    border: 1px solid #XXX;
    background: black;
}

You should be straight after this.

that you Ace. We are close. We still have the following for the perfection

1. The vote hand still has background and border around it
2. The reply on the upper left corner still doesnt change
3. The pictures on buttons came back
4. multiquote still doesnt have border and background
5. The buttons "back to top" and "go down" doesnt change their text

Imeo wrote:that you Ace. We are close. We still have the following for the perfection

1. The vote hand still has background and border around it
2. The reply on the upper left corner still doesnt change
3. The pictures on buttons came back
4. multiquote still doesnt have border and background
5. The buttons "back to top" and "go down" doesnt change their text

1. Did you delete the first CSS code I sent you and add this one in it's place?

Ace 1 wrote:4. Replace the CSS code I gave you earlier with this:

Code:

a[href*="mode=newtopic"] img, a[href*="mode=reply"] img, a[href="#bottom"] img, a[href="#top"] img, .post .inner > table ul.profile-icons li:not(.fa_reputation) img {
    border: 1px solid #XXX;
    background: black;
}

This should also fix the mutli-quote border as well.

2. There are two occurrences of

Code: Reply to topic

within the Javascript code. The first one is for the top left option and the second one is for the one under posts.

3. You never told me to get rid of them ._. Do you want them gone? (by gone I mean replacing it with text or an empty image)

4. [Listed with Question 1]

5. If you're talking about the options within the post profile, then change the code to this:

Code:

/\/t\d+/.test(window.location.href) && $(function() {
  var links = {
    'Post new topic' : $('div.buttons a[href*="mode=newtopic"]'),
    'Reply to topic' : $('div.buttons a[href*="mode=reply"]'),
    'Go down' : $('a[href="#bottom"]'),
    'Back to top' : $('a[href="#top"]'),
    '+' : $('li.fa_reputation a'),
    'Reply to topic' : $('li a[href*="mode=reply"]'),
    'Select/unselect multi-quote' : $('img[src="MULTIQUOTE"]').parent(),
    'Reply with quote' : $('li a[href*="mode=quote"]'),
    'Edit' : $('li a[href*="mode=editpost"]'),
    'Delete' : $('li a[href*="mode=delete"]'),
    'Report post to moderator or admin' : $('li a[href*="mode=report"]'),
    'Lock post for new reports' : $('li a[href*="mode=lock"]'),
    'View IP address of poster' : $('li a[href*="mode=ip"]'),
  }, i;
 
  for ( i in links ) {
    if (links.hasOwnProperty(i)) links[i].children('img').attr('alt', i);
  }
});

1. yes I did Ace. But its ok now, almost all things are working

2. I know and I replace it all the times you told me but still nothing. The issue is there

3. I asked about it on my very first post . By the way, I only want the text. No pic at all

So the remaining issues are:

a. reply to topic at the upper left corner doesnt change
b. There is the symbol of the empty picture before the text on buttons and I would like you to remove it. I only want to see text and nothing else