HOW TO MAKE YOUR INTERNET REGISTRATION WEBSITE YOUR OWN IN CLASS. Andrew Chau

Transcription

1 HOW TO MAKE YOUR INTERNET REGISTRATION WEBSITE YOUR OWN IN CLASS Andrew Chau 1

2 ABOUT ME MY ACTIVE IS Dodgeball Volleyball Golf Cooking 2

3 AGENDA USEFUL TOOLS EDIT BANNER UPDATE START IMAGE WEBSITE COLORS ADDITIONAL IMAGES COURSE IMAGES FACILITY IMAGES OTHER USEFUL LINKS WHERE IS THE FOLD? 3

4 USEFUL TOOLS Google Chrome Browser Built-in tool to Inspect Element and find CSS/HTML information on the page Better than Internet Explorer s Developer Tools Don t need to download anything additional like FireFox s FireBug tool Downloadable for free at 4

5 USEFUL TOOLS Pixie Tool Color picking tool to get color codes in multiple formats for the customization of the rest of the pagehttp:// Downloadable for free at 5

6 USEFUL TOOLS Paint.NET Photo editing software much like Photoshop but free Downloadable for free at 6

7 USEFUL TOOLS Notepad++ Notepad tool that shows you the line number on the left hand side with more functionality than normal notepad Downloadable for free at 7

8 CUSTOMIZATION STARTING POINT Please note we are also using the Custom Template This is configured in CLASS > System Maintenance > Maintain Internet Settings > General > Color Template > Custom Template 8

9 EDIT BANNER Update banner Right-click on banner and Inspect element Info shows up on bottom right corner Info is pulled from a CSS file 9

10 EDIT BANNER Update banner CSS file tells me that it s 944 pixel by 85 pixel so we have 2 options: make my image match that size specification, or change the CSS file In this example, we choose option 1 10

11 EDIT BANNER Update banner Google Chrome also tells me that the file I m looking to update is site-logo.gif so I replace that file with my own file Google Chrome gives the exact path of the file we look for 11

12 EDIT BANNER Change to rotating GIF files, clickable Site Logo link Because the website uses a GIF file, we can use a rotating GIF file as the banner as well Additionally, CLASS provides a field for you to enter into should we want to make the Site Logo clickable This is found in Maintain Internet Settings > Start > City Logo Bar Hyperlink 12

13 EDIT BANNER Update banner 13

14 UPDATE START IMAGE Start Image customization is done the same way as the banner at the top Using Google Chrome, we can right click and inspect element to gather info on the size of the picture and the name and location of the picture This time we will update the size of the image via the CSS Note that the Google Chrome provides a testing tool on the bottom right to see the changes on the screen without making it permanent 14

15 UPDATE START IMAGE Google Chrome tells us that the CSS section affecting the start image is called #start-image and on line 20 of the CSS file. Using Notepad++, I can easily find this section and update to my appropriate file size We update the size in the Custom.css file and save as well as move the image into the appropriate folder as specified by Chrome 15

16 16 UPDATE START IMAGE

17 WEBSITE COLORS Change border color Sometimes the information in Google Chrome shows up in the HTML section, other times in the CSS section When working with the CSS section, look for an entry that says custom.css:### This example tells me that the border color is an image file called site-bg.png 17

18 WEBSITE COLORS Change border color We can use a combination of Pixie tool and Paint.net to find the color of my start image and change the color of the border to that same shade of green Paint.net and most picture editing software is equipped to utilize color codes 18

19 19 WEBSITE COLORS

20 WEBSITE COLORS Change background color Background color of the website can also be updated to whichever color you want Google Chrome is your friend don t be afraid to use the right click and Inspect Element on anything and everything The CSS editor tool that comes with Google Chrome allows you to preview changes Changes made in Google Chrome are not permanent it s simply a preview tool You will still need to update the corresponding line in the Custom.css file to what you want it to be 20

21 21 WEBSITE COLORS

22 WEBSITE COLORS Change the icons We can change the colors of the icons on this main screen or even remove them When we inspect element on the buttons, we find that they are simply additional graphics in the CSS file. 22

23 WEBSITE COLORS Change the icons In CSS, the code display:none; hides that section Finally, any wording that s on the website can be removed as well in Maintain Internet settings 23

24 WEBSITE COLORS Change the icons We can use this display:none; option to remove the Register for Programs and Book Facilities button and even the Search Bar on the main screen. The buttons are already accessible as tabs at the top of the screen, so I will remove the buttons 24

25 25 WEBSITE COLORS

26 WEBSITE COLORS Update the color scheme The same principle is applied towards updating the rest of the websites color scheme and font colors Google Chrome provides the information when we right click and Inspect Element whether it s an image file we update (like the blue heading at the top) or the font size, font type and font color 26

27 WEBSITE COLORS Font has been changed to Arial Tab tool bar at the top is now in Gray shade 27

28 WEBSITE COLORS Add images through the website with HTML Next, we may want to add images to some areas that may not by default have an image 28

29 WEBSITE COLORS Add images through the website with HTML If we want to add an image in the area surround up top, we can use some HTML 29

30 WEBSITE COLORS Add images through the website with HTML The first step is to find the section we update inside of CLASS Next, we need to insert some html: <img src=../lib/theme/customtemplate/images/name_of_file.jpg > 30

31 ADDITIONAL IMAGES Add images through the website with HTML We insert <img src=../lib/theme/customtemplate/images/activenetworkimage.jpg > into Maintain Internet Settings > Start > More Information 1 Text for it to show up ActiveNetworkImage.jpg We can then upload this file to the website using the uploads utility or place it into the correct folder depending on whether your website is a hosted or non hosted solution 31

32 ADDITIONAL IMAGES In summary: 1) Find where you want picture 2) Note down where you ve placed the image file and it s name 3) Use HTML code (included in these slides!) 32

33 ADDITIONAL IMAGES: COURSE Report Printing > System > Activity ID Listing report This allows you to find the ID of each Activity in your system Images labeled with the following format c#.jpg, where the # is the Activity ID will display online These need to be placed in the appropriate folder within the website C58.jpg 33

34 34 ADDITIONAL IMAGES: COURSE

35 ADDITIONAL IMAGES: FACILITY Report Printing > System > Facility ID Listing report This allows you to find the ID of each Facility in your system Images labeled with the following format f#.jpg, where the # is the FacilityID will display online These need to be placed in the appropriate folder within the website F46.jpg 35

36 36 ADDITIONAL IMAGES: FACILITY

37 FACILITY PAGES GOOGLE MAP We can also associate some links to Google maps through the Facilities Description field in CLASS 37

38 FACILITY PAGES GOOGLE MAP We can also associate some links to Google maps through the Facilities Description field in CLASS We would insert this into the Pool facility in the description field: <a href=" Maps</a> 38

39 39 FACILITY PAGES GOOGLE MAP

40 OTHER USEFUL LINKS Facebook, Twitter, Youtube, etc You can incorporate non default images like we discussed previous with links and place these on the main screen Brochure Guide Links to brochure guide can be attached on main screen 40

41 WHERE IS THE FOLD 41

42 SUMMARY USEFUL TOOLS EDIT BANNER UPDATE START IMAGE WEBSITE COLORS ADDITIONAL IMAGES COURSE IMAGES FACILITY IMAGES OTHER USEFUL LINKS WHERE IS THE FOLD? 42

43 LEARN. CONNECT. GROW. 3 CLOSING THOUGHTS 1. Ask us questions 2. Schedule a 1:1 3. Let us know what you think! 43

44 44 THANK YOU!