On the General tab of the Web Site Editor, if you have advanced knowledge of HTML, JavaScript, and Cascading Style Sheets (CSS), you can use the editor to modify the look and feel of your Web site.
Important: The General tab has advanced features and functionality that shouldonlybe modified by users with significant HTML, JavaScript, and CSS knowledge. These fields areNOT supported by Abila Support staff. For users well-versed in these areas, there are many advantages to using these options. However, modification to these fields may pose significant changes to your Web site’s structure, overall look and feel, as well as search engine ranking. People without knowledge of HTML, JavaScript, and CSS risk damaging their organization’s Web site. Finally, Clients should use the CSS to store the Javascript, headers, and so forth so that other netFORUM licensed staff administrators cannot edit or change those fields.
The Site Image & Upload Options section of the General tab has the following buttons:
-
Upload Header Image button (Use this link to upload your Web site header image and display it on top of all pages.)
-
Upload CSS Stylesheet button (Use this link to upload a CSS style sheet to change the look and feel of the Site. It will also be loaded into all pages of your site.)
-
Upload JavaScript File (Use this link to upload a JavaScript file for custom JavaScript code that should run in the viewer's browser.)
The Advanced Site-Level HTML Options section of the General tab gives you the ability to add advanced formatting information to the Head tag of your Web site. The Head tag is where information about the site is stored, referenced, and read first by the user’s browser.
Note: Not all search engines support using Header fields, but most of the more commonly used do.
-
Header Description field (Use this field to add a description to your Head tag to enhance search engine ranking)
-
Header Keywords field (Use this field to enter keywords to your Head tag to help search engines find your site)
-
Header Meta Tags field (Use this field to add meta tags to the Head tag)
-
Header CSS Styles field (Use this field to add CSS styles to the Head tag inside of a <style> tag)
-
Header JavaScript field (Use this field to add Javascript to the Head tag inside of a <script> tag)
-
Raw Headers field (Use this field to add additional raw headers in HTML code, CSS styles, or client-side scripts. You can use this field to link to an external, customized CSS or Javascript file.)
-
The Body Tag Attributes field gives you the ability to add additional functionality to the Body tag for all the Web pages on your site.)
Tip: To avoid conflict, do not use both the Site CSS Style Sheet File and the Header CSS Styles, or the Site Javascript File and the Header Javascript. Use the Site Javascript File if you are going to use more than 10 lines of code and the Header JavaScript field for less than 10 lines of code.
Site Header Image
You can upload a Web Site Header Image (e.g., your organization's name or logo) using the Upload Header Image button and the graphic will display on the top of all of your Web site pages. When you use this link to upload the image, the image is automatically uploaded to the Image Gallery (in the Administration module). You can also remove the image from your Web site and the Image Gallery using this link with the Delete Uploaded Image button as seen below.
Note: The graphic file must be a JPEG or GIF with a file size of 100 KB or less. To extend the header the full width of the page, the recommended image size is 1000 x 80 pixels.
Site CSS Style Sheet File
You can upload your own site CSS style sheet file containing style classes that will format all your Web pages. With an advanced knowledge of CSS style sheets, you also have the ability to re-define, or overwrite netFORUM's system (baseline) style classes for any element in your site that has either a "class" or an "id" attribute. For more information on how to create your own custom CSS from netFORUM's baseline template view the help topic, How to Create a Custom CSS from netFORUM's Baseline Template.
Site Javascript File
You can upload a site JavaScript file containing custom JavaScript code that will run in the viewer's browser. With an advanced knowledge of JavaScript, you have the ability to execute script code that can be used to display visual effects, run custom client-side validations, manipulate HTML code at run-time, and much more.
Header Description
The Header Description field allows you to provide a description for your Web site, so that search engines will find your site when a user searches for information with that description. Because the description can affect your search engine ranking, consider carefully what you enter here. The limit for this field is 200 characters.
Using the example above, if this Web site were searched for in a popular search engine, first the title of the site would be listed and then ”Abila is the leading company in providing Association Management Software (AMS) for membership-based organizations of all sizes.” would follow.
Header Keywords
The Header Keywords field allows you to specify additional words to be used by the search engines to find your Web site. Keywords are important for search engine ranking and should match the content of your page for maximum effectiveness. Further, you should specify what users will likely search on most first in your list. The limit for this field is 200 characters.
In the screenshot above, the keyword Abila is first and assumes that people will search first for Abila, Membership second, Members third, and so forth in order of keyword importance for this particular site.
Header Meta Tags
The Header Meta Tags field allows you even further control over search engine indexing by specifying meta tags on your site. There are several tutorials on meta tags on the Web if you need them. The limit for this field is 200 characters.
Header CSS Styles
The Header CSS Styles field allows you to apply a custom CSS to all of the pages in your Web site. Only users experienced with using CSS should modify this field since it applies the styles to your entire site and could significantly change the look and feel of your site. Use this feature if your code is 10 lines or less. If you have more than 10 lines of code or significant changes, you should upload an entire Site CSS Style Sheet File in the Site File and Image Upload Options section.
Header JavaScript
The Header JavaScript field allows you to embed custom JavaScript across your site. Only advanced users with JavaScript experience should modify this field, as the functionality of your site will be effected.
Note: If you have an error in your JavaScript, since this particular script is placed in the Head tag, every page on your site will throw a JavaScript error. Use with caution.)
Raw Headers
The Raw Header field allows you to add additional raw headers in HTML code, CSS styles, or client-side scripts. You can use this field to link to an external, customized CSS or Javascript file. (If you are adding a link to an external file, if the external file is removed, the user will receive an error message. Site performance may be effected because every time a page is loaded – which means a new Head tag – the site will once again search for the missing file.)
Important: If you use this field to link to resources that are stored on a site that is not secured (http), a security warning will display to visitors indicating that parts of the Web site are not secure. This could discourage visitors from viewing your site. To avoid the security warning, any site you link to from here should begin with "https."
Body Tag Attributes
The Body Tag Attributes field is the only field on the General Site Settings page that does not use the Head tag. The Body Tag Attributes field allows you to add additional functionality to the body tag for all the Web pages on your site. Only HTML and JavaScript are accepted in this field and it is limited to 200 characters. Be aware that since this is a site-level field, whatever functionality you place here will occur on every page of your site.
The sample script above is stating onload, which means in JavaScript, "after every page loads – do something," though "something" is not specified in this example.