change the picture, the text and the backround of the buttons
2 posters
Page 1 of 1
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
Last edited by Imeo on September 13th 2016, 3:15 pm; edited 1 time in total
Re: change the picture, the text and the backround of the buttons
@Imeo ACP > Modules > HTML & Javascript > Javascript codes management > Create new javascript
Title: Topic Actions Text
Placement: In all the pages
Code:
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
Re: change the picture, the text and the backround of the buttons
thank you very much Ace but unfortunately it doesnt work at any of the buttons
Re: change the picture, the text and the backround of the buttons
I've edited my post. The code should work now.
Re: change the picture, the text and the backround of the buttons
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!
Also, dont worry about me, I am here all the time. You are the one that does the hard work!
Re: change the picture, the text and the backround of the buttons
It does work.
http://ggforum.forumotion.com/f1-gg-threads
You wanted the images to be converted to text, no?
http://ggforum.forumotion.com/f1-gg-threads
You wanted the images to be converted to text, no?
Re: change the picture, the text and the backround of the buttons
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.
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.
Re: change the picture, the text and the backround of the buttons
So you just want to change the title attribute of the buttons?
Re: change the picture, the text and the backround of the buttons
yes, the titles. And to add border and background to all buttons Ace
Re: change the picture, the text and the backround of the buttons
For the border and background, go to AP > Display > Colors > CSS Stylesheet and add this code:
As for the titles, create a new Javascript and enable it in all the pages. Use the following code:
You can change the titles of each one by editing each object parameter. Above are the defaults. For example, if you wanted to change
to
then you would go to Line 3 and change the text within the single quotation marks to New Topic.
- 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
|
|
Re: change the picture, the text and the backround of the buttons
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
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
Re: change the picture, the text and the backround of the buttons
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.
Re: change the picture, the text and the backround of the buttons
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
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
Re: change the picture, the text and the backround of the buttons
1/2. I'm going to assume that you want the Edit one changed as well. Replace the JS above with this:
3. In order to change that, you need to change the
text in Line 4 of the script.
4. Replace the CSS code I gave you earlier with this:
You should be straight after 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
|
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.
Re: change the picture, the text and the backround of the buttons
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. 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
Re: change the picture, the text and the backround of the buttons
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
|
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);
}
});
Re: change the picture, the text and the backround of the buttons
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
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
Similar topics
» Nav buttons are black with blue text...need to change them
» How do I change buttons to text
» I would like to change the post buttons into a text
» The Backround Picture Isn't Working...
» How to change "Post Buttons" from image to text
» How do I change buttons to text
» I would like to change the post buttons into a text
» The Backround Picture Isn't Working...
» How to change "Post Buttons" from image to text
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum