Summary
In this KB article I’ll be covering the Advanced Application Settings (AAS) module. If you don't have any experience with AAS then see this link. Whether you are a developer that wants to change the look of the entire site or you just want to update the header links with a new page that you added this module helps with that. Apart from further customization of your website AAS allows you to create At Code. I’ll cover everything about the AAS module in further detail as outlined below:
At Code
What is At Code?
Creating At Code for your site
Using At Code
Styling your website
More Web Building Things
Working with the Header
Working with the Footer
Creating essential pages for your website.
What is At Code?
If you’re familiar with programming concepts At Code is pretty much analogous to a global variable. This can be inserted anywhere in your website. Let’s say you have some information that repeats itself a lot all over your website and you end up having to change it lots of times. This is an example where At Code helps out.
Creating At Code
Creating At Code is very simple. If you’re not already within the Advanced Application Settings click on that module. Once this is done you’ll see a grid as shown below.
From here you just need to click the add new button. After that you should see something like the picture below.
Now for At Code you must specify the Category of “website.” You can then name it whatever you want in the field name field. If you’re typing in english then you can select English (*). Display order tells the system what order to display things on the screen.
Finally in the field value you actually set the value of the At Code. You can actually use At Codes in an At Code definition. There’s no limit to how many At Code within At Codes that you could have. You can have HTML, CSS even Javascript in the At Codes. This makes it easy for one to create little modularized chunks of code that can be easily placed anywhere on the site.
*Note: English is our only option currently. If however you have a need to write in a languages other than english please let us know and we’ll add that language to the dropdown.
How to Use At Code
The use of At Code is even more simple than creating it. To start let’s go over a few things and make some assumptions.
The value of Category is, “website”
The value of Field Name is, “business button”
There’s another At Code with the field name of Business address.
The value of Field Value is, “
<div>
<h1>The Business button is below</h1>
<button style = “background-color: grey”>@BUSINESSADDRESS@</button>
</div>
”
The value of Business Address’s Field Value is, “403 East Lincolnway Valparaiso, IN 46383”
With this information try to imagine the output of @BUSINESSBUTTON@ on a blank page with no styling.
Our styles are by default a little different and therefore the output may be different from what you expected. However we do have a H1 followed by a button filled with the content of
another At Code. You can change your css code yourself very easily to customize the look the way you want!
Styling your website
To change the CSS of your site you must edit a specific application setting. Start by clicking on the Application Settings Advanced. Then in Field Name type, “Administration.” Press enter and wait until the settings are filtered to Categories with Administration contained in the Category string. Next type , “Style,” into the Field Name column. Press enter and wait until it is filtered down to the Stylesheet setting. Click the edit button.
As you can probably see this is where the CSS is stored for your website. Now you may say, “It’s kind of difficult to edit CSS in form.” I would agree. I would highly recommend using a live css editor extension in Chrome. That edited CSS can then just be copy pasted back into the Stylesheet field value.
No matter what live CSS editor you choose you will have this general process after the editor is on installed:
Copy paste the Stylesheet Field Value without the <style> </style> tags into the editor
Make your edits and see changes in real time
Copy then paste the new styles in the editor to the Stylesheet Field Value in between the <style></style> tags.
Save the application setting
Personally I think that the editor at this link is the best free one out there but there are a lot of good free ones out there. There’s also a great one that costs some money. For the functionality it is well worth it. It’s called Stylizer and you can find it at this link.
More Web Building Things
This section will teach you how to customize your website from Scratch. Let’s begin by defining what I mean by “Scratch.” If you use any programming language today you aren’t writing it from scratch. Similarly in the JM2 CMS. The only difference is the level of systematization or abstraction. That being said JM2 CMS is like a uber-high level programming language for website design. If you read the article on Advanced Application Settings (AAS) already then you may have found that the header and footer are actually settings that can be changed. The values of those settings can be code. So if you’d like to change the header given to you then you can! This is especially useful if you wanted to add some new link to the header or footer.
Working with the Header
In AAS search “Website” in the Category and then “Header” in the Field Name. You should then see something like this:
You’ll then click the edit symbol. After that you’ll have access to the code that generates the header. Of you happen to have any system alerts activated they’ll show up before the rest of the header information. One particular thing that I mentioned in the previous section is that one might want to know how to edit the contents of the Header. Let’s pretend you just added a new page to your website through the Page Content module and you want to add this to your Header because it’s important to your business and you think customers should know about it. You may add some code as depicted below to put your page on the Header.
Direct your attention to the highlighted text. There you can see a new link that was added. To the Header. I created two of them to test what happens when the Header Links go over the margins. The results of which are shown below:
Working with the Footer
Similar to finding the header search “Website” in the Category and then “Footer” in the Field Name. From there the steps of adding any content to the footer is exactly the same as that of the header.
Creating essential pages for your website
For this section, though I won’t be showing the intricacies of the Page content module I will be telling you to focus on a particular part. That part is just 2 settings within the page that you’d like to add in the Advanced Administrative Information tab. These settings are called Category and Page name. This is what determines the URL and directory under which your content will be stored. The details on this are talked about is the Page Content article if you’re interested. Check the section on How to Create and Customize your Content.
With the understanding of how the URLs work you can add pages and modify your header and footer with ease.
