Application Settings (Advanced)

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.