Skip to Main Content

Using Kentico

Advanced Kentico Documentation

This page is for advanced Kentico editors.

Page Names and Titles

When editing a page, there are 4 places to change PAGE NAMES/TITLES.

  1. to edit PAGE TITLE THAT APPEARS ABOVE PAGE CONTENT IN BLUE:
    PAGE tab > Page Title field
  2. to edit PAGE NAME THAT APPEARS IN KENTICO FILE-TREE, ON BROWSER PAGE TITLE TOP, and ON LEFTNAV-MENU:
    Form tab > Page Name field
  3. to edit URL SUFFIX (not recommended, keep as is):
    Properties tab > URL > Page Alias field
  4. to overwrite #2 above for a DIFFERENT LEFTNAV-MENU NAME (not recommended, leave blank):
    Properties tab > Navigation > Menu Caption field

Styling Red Buttons:

  • Select text and click Link icon button.
  • Under General tab, type URL.
  • Under Target tab, if link is external to lacitycollege.edu, select "New Window (_blank)" and the little right-pointing-arrow icon will appear.
  • Under Advanced tab, type redButton zButton into Class field.

Adding Wheelchair icon to links:

Add class="accessIcon"  to <a> tag around Office of Special Services links. EXAMPLE:
<a class="accessIcon" href="/Resources-Services/Office-Special-Services/Department-Home">

Overriding resized/non-centered In-Content Images:

  1. Double-click image and look at General tab. Set Align: to "(none)" and click grey "Reset size" button. Click Save&Close to get back to editing window.

  2. Type text near image, drag image into text. Set that line to Heading4 (or Heading5 or Heading6). Click Center-Align button. Delete text.

Creating Accessible Tables:

All HTML tables on lacitycollege.edu need special hand-coding (in source code) in order to comply with Accessibility requirements:

  1. ALWAYS use the first table row as a table-header row: use <th> tags and scope="col" parameter.
  2. ALWAYS add content into those first header row's cells.
  3. SUGGESTED to add a descriptive caption to table: use <caption> tags.
  4. SUGGESTED to use first table column as a table-header column: use <th> tags and scope="row" parameter.
  5. SUGGESTED if table needs to be "responsive" (such as collapsing into one column for mobile-devices): add class="responsiveTable-z" to the opening  <table> tag

EXAMPLE:
<table class="responsiveTable-z">
<caption>Shelly's Daughters</caption>

<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>

<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>

<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>

</table>

Documentation here: http://webaim.org/techniques/tables/data
 

Creating Anchors inside of Landing Pages:

  • add a “Static HTML” widget to the landing page above the tab you would like to target, and fill it with the following code:
    <a id="myAnchor" name="myAnchor">Hidden Anchor</a>
  • Replace “myAnchor” with the anchor text you would like to use, and be sure that there is some content inside the A tag. This will add the anchor to the page as an editable widget.

If a leftnav menu item is an external link:

If a leftnav menu item is an external link (rather than a page), it needs to open in a new tab/window, and styled with the "external link" icon:

  • Create a New Page.
  • Select Form tab, type into Page Name formfield (which appears in leftnav menu).
  • Select Properties tab > Navigation > Set Menu actions to "URL Redirection" and type URL.
  • Scroll down to Menu item design, and in "Menu item CSS class" formfield, type newWindow and click Save button.

Redirection of default pages:

Landing Page URLs have duplicate name in path. So root directory redirects to its default Landing Page. Example:
     /Faculty-Staff     redirects to    /Faculty-Staff/For-Faculty-Staff

Navigation Settings for Directories/Pages:

When editing a page, Properties > Navigation tab:

-- Setting a directory to not "Show in Navigation" or "Show in sitemap" (unchecking) will impact all its children folders/pages. Good.

-- Setting a directory to "Exclude from search" (checking) does NOT impact all its children folders/pages.

Obscure red line on links (such as for linked images):

Images that are turned into links have a small red underlining artifact after them. This artifact rises up (like a link) when the cursor rolls over the image. If the link is external, then the whole red arrow will display.

To obscure the red underline and any icons after the link:
Add the CSS class: "imageLink" to the link.

 Contact Us

Mike Bilz
Website Architect
AD Room 107
323.953.4000 ext.2046
bilzms@lacitycollege.edu

 Office Hours

Monday - Friday: 8:00am - 4:30pm
Saturday - Sunday: Closed

Los Angeles City College | 855 N. Vermont Avenue, Los Angeles California 90029

|

Phone: 323.953.4000

|

Emergency: 323.953.2911