Button

[PapaFrizArcade]

Remembering that I am a hack at best (yes,  I'm dangerous!)...

I've managed to add a button to the left side to view all ratings...



I even realized there are two spots that needed to be modified as the "button" that shows before rating a post is a different "button" that shows after...

However,  when I attempted to do the same input button command I used for the two View List buttons for the "Undo Rating" button I've failed over and over.  I would prefer the "Undo Rating" text that appears be in button format if possible. 

This is the code I am attempting to use that is failing:

document.getElementById("errrateawemsgid" + msgID).innerHTML = "<a href=\"#undorate\" onclick=\"return AweAjaxRatingUndo(" + msgID + ");\">' . '<input type="button" value="View List">' . '</a>";   

Now that portion I changed ('<input type="button" value="View List">') is all I added to the display.template and awesome2.templates to get the View List to work.  That said... I recognize they are in the template directory and the file I need to modify for Undo Rates is in the sources directory... which may or may not mean anything because like I said... I'm a hack and I have no idea.

NOW... I did just realize there is that little #undorate tag... which mean (I think) I can create specific css for that button... right? (I am JUST starting to learn css).  Is there a way to create the button via css or do I have to do it in the code directly?

ALTERNATIVELY ... to be honest... i wanted to load up an ICON rather than even the button in both the View List and Undo Ratings locations... I am guessing that would be pretty simple to do for something who knows what they are doing... for me?  I failed miserably... hence the reason I went with the button.    If you could provide the code to load up an image at both locations that would be even all the sweeter.  I was thinking I'd run a little crank image for the view list and maybe a "RATE" with a red circle/line through it for UNDO RATING or something.

Thank you for all you're help thus far...

[SMFHacks]

I don't have much experience myself with css/styling I generally look at guides online and do very minimal css changes in all my mods. You can target items if they have a class or an id field with css.
Using an <input type="button" value="View List">' might be tricky i have hard time myself with those. I would look into maybe an image based button instead?

[PapaFrizArcade]

I've managed to get a "gear" icon to appear over in the View List section (both when you rate and after you've rated)... however,  like the BUTTON command,  when I attempt to switch over from loading up the text string from the language file for "UNDO RATING" by replacing the $txt['awe_text_undorating'] portion with <img src="https://www.xxxx.com/apricons/undo.png"> basically it breaks the ability to click the ratings.  It doesn't break the page,  I just can't select an icon.

That very same command worked for the VIEW LIST lines...

Any suggestions on how to display an image vs the text and still have the icons selectable?

[PapaFrizArcade]

It appears I get to try to learn how ajax works.  It appears I am doing it wrong as to how to make an image appear in an ajax function.   Everything I try breaks the function thus far...

Hmmm...

It completely breaks the function as even trying to rate a post that has already been rated produces no result.

Interesting.

[SMFHacks]

I would need to see what you are trying right now what breaks

[PapaFrizArcade]

Example of what worked:

Original code:

Code: [Select]

$data .= '<a href="' . $scripturl . '?action=awesome;sa=viewratings;msgid=' . $msgID . '" onclick="return reqWin(this.href, 600, 400, false);">' . $txt['awepost_text_viewlist'] . '</a>';
Modified code to add gear:

Code: [Select]

$data .= '<a href="' . $scripturl . '?action=awesome;sa=viewratings;msgid=' . $msgID . '" onclick="return reqWin(this.href, 600, 400, false);">' . '&nbsp;&nbsp;<img src="https://www.xxxx.com/apricons/gear.png">' . '</a><br>';

That works fantastically.


When I attempt to use the same method with the UNDO RATING it fails.

Here is the original code:

Code: [Select]

document.getElementById("errrateawemsgid" + msgID).innerHTML = "<a href=\"#undorate\" onclick=\"return AweAjaxRatingUndo(" + msgID + ");\">' . $txt['awe_text_undorating'] . '</a>";

Here is what I attempt to do:

Code: [Select]

document.getElementById("errrateawemsgid" + msgID).innerHTML = "<a href=\"#undorate\" onclick=\"return AweAjaxRatingUndo(" + msgID + ");\">' . '<img src="https://www.xxxx.com/apricons/undo.png">' . '</a>";
I've tried moving that IMG code around that line ... next to the </a> for example,  etc... fails each time.  Basically it breaks somewhere and doesn't allow a selection to happen.

[SMFHacks]

I would try added it to image itself the onclick

Code: [Select]

document.getElementById("errrateawemsgid" + msgID).innerHTML = "<a href=\"#undorate\" onclick=\"return AweAjaxRatingUndo(" + msgID + ");\">' . '<img src="https://www.xxxx.com/apricons/undo.png"  onclick=\"return AweAjaxRatingUndo(" + msgID + ");\">' . '</a>";


[PapaFrizArcade]

Unfortunately... same result.  Clicking ICON has no effect.

Thanks for the suggestion however.   

[PapaFrizArcade]

My original attempt was so close...

Code: [Select]

document.getElementById("errrateawemsgid" + msgID).innerHTML = "<a href=\"#undorate\" onclick=\"return AweAjaxRatingUndo(" + msgID + ");\">' . '<img src="https://www.xxxx.com/apricons/undo.png">' . '</a>";
What worked:

Code: [Select]

document.getElementById("errrateawemsgid" + msgID).innerHTML = "<a href=\"#undorate\" onclick=\"return AweAjaxRatingUndo(" + msgID + ");\">' . '<img src=\"https://www.xxxx.com/apricons/undo.png\">' . '</a>";
It came down to two "\" ...

[SMFHacks]

Glad you have it figured out. A single character sometimes can cause the issue.