How to customize? (beginner-level instructions)

  • Resolved lcolucci

    (@lcolucci)


    10 years, 2 months ago

    I just installed your plugin and love it! I would like to do some customization but am completely new to how to do this. Could you provide some more step-by-step directions for how to customize. For example…

    #1 JavaScript customization
    In a different thread you wrote:

    If you’re able to add JavaScript to your theme, you can do that. Any and all DataTables-enhanced tables can be modified by using the DataTables API.

    For instance, to disable paging, add a JavaScript to your theme that looks like this:

    jQuery(window).load(function () {
    jQuery(‘#igsv-MY_TABLE_KEY’).dataTable().api().page.len(-1).draw();
    });

    • How do I know if I am able to add JavaScript to my theme? And how would I go about adding it?
    • In which file would I add the code that you wrote out? I have the following files in my plugin editor:

      • inline-google-spreadsheet-viewer/igsv-datatables.js (inactive)
      inline-google-spreadsheet-viewer/inline-gdocs-viewer.php (active)
      inline-google-spreadsheet-viewer/igsv-gvizcharts.js (inactive)

    • If I have to create a new file how do I do that?

    #2 CSS Customization
    I would like to change the column widths, remove the gray background from the table, remove the default buttons, etc. which I *think* should be done with css. You wrote that:

    Yes, if you’re able to change your theme’s style sheet. Use the igsv-table class from your style sheets to target the plugin’s <table> element.

    • Where is the .css file? I don’t see one in the plugin editor and the css file for my theme doesn’t contain any mention of igsv-table.
    • Do I have to manually create a css file instead of editing an existing one, and if so, how do I do that?

    Here is my website if it helps to see what I’m referring to: https://www.whoswhoindigitalhealth.com/

    Thanks so much for your help and great plugin!

    https://www.ads-software.com/plugins/inline-google-spreadsheet-viewer/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Meitar

    (@meitar)

    Hi.

    Unfortunately what you’re asking for help with is generic to any and all WordPress themes and plugins, so I can’t answer with step-by-step instructions because they would be subtly different depending on your specific setup. Instead, I suggest you take a look through some of relevant documentation WordPress provides about how its templating/themeing system works.

    Briefly, however:

    1. For simple, blanket, site-wide customizations, you will need to find an appropriate file in your theme, which is likely but not necessarily going to be called footer.php to which you append the JavaScript code you want to use to customize the table. Otherwise, you’ll want to make more specific customizations and for that, again, I refer you to the JavaScript portion of the WordPress theme documentation.
    2. The stylesheet for a theme will always be called style.css so at the very end of that file is where you want to make CSS customizations. But again, this is a theme change, so consider reading about Stylesheets in WordPress’s documentation.

    The long and short of it is that you’re missing some requisite knowledge about general web design techniques, knowledge so general and fundamental that this isn’t an appropriate place to go through it all. If you want to dive deep into those topics, you’re more than welcome to get a copy of my book, “Foundation Website Creation,” either by buying a copy or by pirating it (I am perfectly comfortable with you “stealing” it, though it may not actually be legal to do so).

    Hope this helps. Good luck!

    Thread Starter lcolucci

    (@lcolucci)

    Ok – thanks for the pointers!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to customize? (beginner-level instructions)’ is closed to new replies.