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.

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

View previous topic View next topic Go down

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

Post by Imeo on September 13th 2016, 8:55 am

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


Last edited by Imeo on September 13th 2016, 3:15 pm; edited 1 time in total

Imeo
Forumember

Posts : 38
Reputation : 2
Language : Greek-English

http://ggcigs@gmail.com

Back to top Go down

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

Post by Ace 1 on September 13th 2016, 1:10 pm

@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);
  }
});


Last edited by Ace 1 on September 13th 2016, 2:57 pm; edited 2 times in total

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

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

Post by Imeo on September 13th 2016, 1:48 pm

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

Imeo
Forumember

Posts : 38
Reputation : 2
Language : Greek-English

http://ggcigs@gmail.com

Back to top Go down

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

Post by Ace 1 on September 13th 2016, 2:42 pm

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

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

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

Post by Imeo on September 13th 2016, 2:53 pm

still nothing Ace, sorry

Imeo
Forumember

Posts : 38
Reputation : 2
Language : Greek-English

http://ggcigs@gmail.com

Back to top Go down

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

Post by Ace 1 on September 13th 2016, 2:58 pm

@Imeo, try one more time Wink

I edited it again.

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

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

Post by Imeo on September 13th 2016, 3:15 pm

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!

Imeo
Forumember

Posts : 38
Reputation : 2
Language : Greek-English

http://ggcigs@gmail.com

Back to top Go down

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

Post by Ace 1 on September 13th 2016, 3:31 pm

It does work.

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

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

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

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

Post by Imeo on September 13th 2016, 3:39 pm

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

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.

Imeo
Forumember

Posts : 38
Reputation : 2
Language : Greek-English

http://ggcigs@gmail.com

Back to top Go down

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

Post by Ace 1 on September 13th 2016, 3:43 pm

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

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

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

Post by Imeo on September 13th 2016, 4:32 pm

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

Imeo
Forumember

Posts : 38
Reputation : 2
Language : Greek-English

http://ggcigs@gmail.com

Back to top Go down

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

Post by Ace 1 on September 13th 2016, 5:40 pm

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.

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

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

Post by Imeo on September 13th 2016, 6:50 pm

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 Smile

Imeo
Forumember

Posts : 38
Reputation : 2
Language : Greek-English

http://ggcigs@gmail.com

Back to top Go down

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

Post by Ace 1 on September 13th 2016, 7:22 pm

@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.

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

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

Post by Imeo on September 13th 2016, 8:08 pm

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

Imeo
Forumember

Posts : 38
Reputation : 2
Language : Greek-English

http://ggcigs@gmail.com

Back to top Go down

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

Post by Ace 1 on September 13th 2016, 8:18 pm

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.

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

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

Post by Imeo on September 13th 2016, 9:33 pm

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
Forumember

Posts : 38
Reputation : 2
Language : Greek-English

http://ggcigs@gmail.com

Back to top Go down

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

Post by Ace 1 on September 13th 2016, 10:45 pm

@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);
  }
});

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

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

Post by Imeo on September 13th 2016, 11:25 pm

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 Smile. 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

Imeo
Forumember

Posts : 38
Reputation : 2
Language : Greek-English

http://ggcigs@gmail.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