![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
Entry tags:
tutorial || how to automate my codes
preface.
Efficiency is just intelligent laziness. So here's a quick tutorial on how to automate some of my codes! I put a lot of them together in order to create my own personal muselist, so here's how you can build your own.
For what I call the Classic Code, I'll be demonstrating how to automate this code of mine. To skip ahead to that, click here.
For what I call the Supporting Code, I'll be showing how to automate this code. To skip ahead to that, click here.
For each different HTML code, you'll need a new Google Sheet.
The live previews are beneath!
I'll be heavily referencing Slip's CR Chart Automation code throughout! Can't say thank you enough, please use this method to make your life easier all around!
To start - this is the part of the code that you see when it's collapsed! You might notice that the tab itself might not suit the colors you want, so here's a very easy customization rundown on how to adjust it to your liking.
Find the part of the code that says (without spaces between the < >'s):
< summary style="font-family:georgia, garamond, serif; font-weight: bold; font-style: italic; font-size: 36px; cursor:pointer; color: #ad3848;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;" >classics.< /summary >
The colors I'm using are #ad3848 and #fff for the outline. Feel free to adjust. Obviously you should also edit the classics inside the tags to adjust your heading. In the second code, it has other characters. on the inside of the summary tags for you to replace if you want.
For more information on how to use the details and summary tags, please see this tutorial.
classics code.
GOOGLE SHEET AUTOMATION:
For this part of the tutorial, I will be heavily referencing Slip's CR Chart Automation code! I'll providing my own additional instructions and codes alongside the original tutorial. Thanks Slip for changing my life and letting me go max lazy!
To replace Step 1 in Slip's tutorial.
Set up your Google Sheets so it looks like this! This is the exact sheet I used to create the above.
Follow Slip's instructions Steps 2 through 4, then to replace Steps 5 through 8:
When you get to the section about inputting an HTML code, I've done the work for you! Slide one of these codes into the text area for chart.html.
If you want the entire collapsable table:
If you want only the base code without the table:
Follow Slip's instructions Steps 9 through the end.
supporting code.
GOOGLE SHEET AUTOMATION:
For this part of the tutorial, I will be heavily referencing Slip's CR Chart Automation code! I'll providing my own additional instructions and codes alongside the original tutorial. Thanks Slip for changing my life and letting me go max lazy!
To replace Step 1 in Slip's tutorial.
Set up your Google Sheets so it looks like this! This is the exact sheet I used to create the above.
Follow Slip's instructions Steps 2 through 4, then to replace Steps 5 through 8:
When you get to the section about inputting an HTML code, I've done the work for you! Slide this code into the text area for chart.html.
Follow Slip's instructions Steps 9 through the end.
ta-daaaaah.
And that should be it!
These are all codes that I personally use, so there should be any weird glitches but if you play with it and something acts up, please let me know and I'll be happy to help. Otherwise I hope this is a handy dandy tool for anyone and I'll be trying to figure out in the future how to automate my codes and how to streamline the process.
Efficiency is just intelligent laziness. So here's a quick tutorial on how to automate some of my codes! I put a lot of them together in order to create my own personal muselist, so here's how you can build your own.
For what I call the Classic Code, I'll be demonstrating how to automate this code of mine. To skip ahead to that, click here.
For what I call the Supporting Code, I'll be showing how to automate this code. To skip ahead to that, click here.
For each different HTML code, you'll need a new Google Sheet.
The live previews are beneath!
I'll be heavily referencing Slip's CR Chart Automation code throughout! Can't say thank you enough, please use this method to make your life easier all around!
To start - this is the part of the code that you see when it's collapsed! You might notice that the tab itself might not suit the colors you want, so here's a very easy customization rundown on how to adjust it to your liking.
Find the part of the code that says (without spaces between the < >'s):
< summary style="font-family:georgia, garamond, serif; font-weight: bold; font-style: italic; font-size: 36px; cursor:pointer; color: #ad3848;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;" >classics.< /summary >
The colors I'm using are #ad3848 and #fff for the outline. Feel free to adjust. Obviously you should also edit the classics inside the tags to adjust your heading. In the second code, it has other characters. on the inside of the summary tags for you to replace if you want.
For more information on how to use the details and summary tags, please see this tutorial.
classics code.
classics.
GOOGLE SHEET AUTOMATION:
For this part of the tutorial, I will be heavily referencing Slip's CR Chart Automation code! I'll providing my own additional instructions and codes alongside the original tutorial. Thanks Slip for changing my life and letting me go max lazy!
Set up your Google Sheets so it looks like this! This is the exact sheet I used to create the above.
THINGS WORTH NOTING:
☆ Your columns, in order, should be CHARACTER NAME, GAME, PLAYED, IMAGE 1, IMAGE 2, ACCENT COLOR, TAG, NAVIGATION, INFO, INBOX, PERMISSIONS. If this order is changed you'll have to change what you put in the script editor.
☆ IMAGE 1 refers to the first background image, IMAGE 2 is the second one! As per original code instructions, they should be 500px x 350px.
☆ ACCENT COLOR shouldn't have a # in front of your hexcode! That's already built into the script. Also it's the subtle highlight around the character name & arrow color, if you're not sure what it's for.
☆ TAG refers to the part of the original code that says < a name="PAGE1" >< /a > and anywhere in the original code that PAGE appears. I normally put character names there in all caps to make it easier to find and organize in the future if you need to make small individual edits for whatever reason!
When you get to the section about inputting an HTML code, I've done the work for you! Slide one of these codes into the text area for chart.html.
If you want only the base code without the table:
supporting code.
other characters.
Name
Canon
Name
Canon
Name
Canon
Name
Canon
Name
Canon
Name
Canon
GOOGLE SHEET AUTOMATION:
For this part of the tutorial, I will be heavily referencing Slip's CR Chart Automation code! I'll providing my own additional instructions and codes alongside the original tutorial. Thanks Slip for changing my life and letting me go max lazy!
Set up your Google Sheets so it looks like this! This is the exact sheet I used to create the above.
THINGS WORTH NOTING:
☆ Your columns, in order, should be ICON, NAME, CANON. If this order is changed you'll have to change what you put in the script editor.
☆ Add as many as characters as you want! The code will automatically accommodate and put them into rows for you.
When you get to the section about inputting an HTML code, I've done the work for you! Slide this code into the text area for chart.html.
ta-daaaaah.
And that should be it!
These are all codes that I personally use, so there should be any weird glitches but if you play with it and something acts up, please let me know and I'll be happy to help. Otherwise I hope this is a handy dandy tool for anyone and I'll be trying to figure out in the future how to automate my codes and how to streamline the process.