How can I add text to the Modify record icon

[nycwebmaster]

Hi,

I'm including a picture so you guys can understand what I need to do. Basically I want to add the text "Click To Modify" to the glyph-icon on the children table to say: "Click Here To Modify"

[pbottcher]

Hi,

how did you add this glyph-icon?

[ronwill]

I don't know how to make the change by code but you can modify the 'children-TableName.php' file under templates directory relating to the children table tab.

Should be around line 137, here is image of change made to my file:

Sketch1.png (214.1 KiB) Viewed 7357 times

Result is:

Sketch.png (57.28 KiB) Viewed 7357 times

Naturally this file gets overwritten by AppGini so either make read only or make copy and update when needed etc.

Cheers,
Ron

[nycwebmaster]

Work perfect! Thanks!

[landinialejandro]

hi! you can change dinamically whit the next code in dv.js

Code: Select all

$j('.view-on-click i').append(' click me!');

after loaded page.

[onoehring]

Hi landinialejandro,

your solution does not seem to work. I believe the reason is, that the specific part of the page has not been created in the browser, when the JS command is executed.

Olaf

[onoehring]

Hi,

maybe something like this can be used to make use of a timer which checks continuously (but we need to make sure, the click me is added only once).

Code: Select all

<script>
\$j(function() {
        setInterval(function() {		
		var n = \$j('   search if click me was added already    ').find('     something we need to search      ').length;
		
		if (n < 1 ) {
		\$j('.view-on-click i').append(' click me!');
		} 
		else {
		
		}		
	}, 1000);
})
</script>

Olaf

[jsetzer]

Hey,

what about a PURE CSS ONE-LINER: Paste the following CSS-code into your CSS-file (or into your <style>-section for example in hooks/header-extras.php).

Code: Select all

.children-tabs td.view-on-click a::after { content: "Click here"; }

This is the result:

chrome_2019-08-02_14-42-10.png (61.25 KiB) Viewed 6605 times

Wanna play around a bit more with pure (Vanilla) CSS?

chrome_2019-08-02_14-47-32.png (56.9 KiB) Viewed 6605 times

Only little more in CSS:

Code: Select all

    .children-tabs td.view-on-click a::after { content: "Open"; }
    .children-tabs td.view-on-click .glyphicon { display: none; }
    .children-tabs td.view-on-click a {
        background-color: #fafafa;
        border: 1px solid silver;
        padding: 4px;
        color: black;
    }

Feel free to change the text, colors, borders etc.

Best,
Jan

[jsetzer]

That code above was css-only. There is so much more when using JQuery, for example:

Replacing icon and adding btn-primary style (Bootstrap):

chrome_2019-08-02_15-11-15.png (38.45 KiB) Viewed 6603 times

Additional buttons per row with custom link:

chrome_2019-08-02_15-12-18.png (48.25 KiB) Viewed 6603 times

Regards,
Jan

[onoehring]

Hi Jan,

thank you a lot for your solution and ideas. Really good.

Olaf