HOW TO MAKE YOUR INTERNET REGISTRATION WEBSITE YOUR OWN IN CLASS Andrew Chau 1
ABOUT ME MY ACTIVE IS Dodgeball Volleyball Golf Cooking 2
AGENDA USEFUL TOOLS EDIT BANNER UPDATE START IMAGE WEBSITE COLORS ADDITIONAL IMAGES COURSE IMAGES FACILITY IMAGES OTHER USEFUL LINKS WHERE IS THE FOLD? 3
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 https://www.google.com/intl/en/chrome/browser/ 4
USEFUL TOOLS Pixie Tool Color picking tool to get color codes in multiple formats for the customization of the rest of the pagehttp://www.nattyware.com/pixie.php Downloadable for free at http://www.nattyware.com/pixie.php 5
USEFUL TOOLS Paint.NET Photo editing software much like Photoshop but free Downloadable for free at http://www.getpaint.net/ 6
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 http://notepad-plus-plus.org/ 7
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
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
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
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
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
EDIT BANNER Update banner 13
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
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 UPDATE START IMAGE
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
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 WEBSITE COLORS
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 WEBSITE COLORS
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
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
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 WEBSITE COLORS
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
WEBSITE COLORS Font has been changed to Arial Tab tool bar at the top is now in Gray shade 27
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
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
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
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
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
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 ADDITIONAL IMAGES: COURSE
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 ADDITIONAL IMAGES: FACILITY
FACILITY PAGES GOOGLE MAP We can also associate some links to Google maps through the Facilities Description field in CLASS 37
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="http://goo.gl/maps/kxp12">google Maps</a> 38
39 FACILITY PAGES GOOGLE MAP
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
WHERE IS THE FOLD http://www.whereisthefold.com/ 41
SUMMARY USEFUL TOOLS EDIT BANNER UPDATE START IMAGE WEBSITE COLORS ADDITIONAL IMAGES COURSE IMAGES FACILITY IMAGES OTHER USEFUL LINKS WHERE IS THE FOLD? 42
LEARN. CONNECT. GROW. 3 CLOSING THOUGHTS 1. Ask us questions 2. Schedule a 1:1 3. Let us know what you think! 43
44 THANK YOU!