Teaching and Learning with Technology

Computing With Accents and Foreign Scripts

Blog Platforms at Penn State

 

This Page

  1. Blogs (Movable Type)
  2. Sites (WordPress)
  3. Sample CSS Code

Blogs (Movable Type)

Publish Entry or Page

The publishing system at Blogs at Penn State (http://blogs.psu.edu) is Movable Type which publishes content in Unicode by default. See information below about publishing and adjusting formatting.

To publish a blog entry or page with non-ASCII characters

  1. Log in to your blog at http://blogs.psu.edu.
    Note: Information about creating and editing a blog can be found in the IT Knowledge Base.
  2. Open a blog entry or page.
  3. Switch your keyboards to the appropriate script.
  4. Type the message then send it. It will be properly encoded.

Adjust Blog Formatting

Depending on your content, you may wish to adjust your default font styling to ensure consistent formatting. This is best done by amending the CSS styles in the Templates. To adjust the CSS.

  1. Log in to your blog at http://blogs.psu.edu.
  2. From the Design menu, select Templates.
  3. Click the link for Stylesheet - Main (styles.css) to open the CSS editing window.
  4. Add your CSS code at the end of the text field then click Save & Publish.
    Note: You should not remove the existing code in the template. Just add your code beneath it.
  5. To test changes, click the View Site button to open your published blog in a new window.
  6. Press Shift+Control+R (Windows) or Shift+Command+R (Mac) to reload the page with updated styles.
  7. To further adjust styles, repeat steps #4-6 until the page appearance is what you desire.

Top of Page

 

Sites (WordPress)

Publish Entry ot Page

This publishing system at http://sites.psu.edu is WordPress which publishes content in Unicode by default.

To publish a blog entry or page with non-ASCII characters

  1. Log in to your blog at http://sites.psu.edu.
    Note: Information about creating and editing a blog can be found under the Support tab.
  2. Open a blog entry or page.
  3. Switch your keyboards to the appropriate script.
  4. Type the message then send it. It will be properly encoded.

Adjust Blog Formatting

Depending on your content, you may wish to adjust your default font styling to ensure consistent formatting. This is best done by amending the CSS styles via the Jetpack plugin.

However, you must activate an account at WordPress.com (free) in order to use JetPack

Activate Jet Pack

  1. Open a browser and go to https://wordpress.com/
  2. Click Sign Up and complete the application form. The free account is sufficient and you do NOT need to blog at this site (although the option is available).
  3. Log in to your Penn State WordPress blog at http://sites.psu.edu to view the blog Dashboard.
  4. Click the Plugins link in the left menu to see a list of available plugins.
  5. Check Jetpack as an option.
  6. In "Bulk Actions" menu at the top or bottom (the menu is duplicated in both locations), change Bulk Actions to Activate, then click the Apply button. The Jetpack link should now be available in the left main menu.

Adjust CSS Styles

  1. In the Dashboard of your blog, click Jetpack in the left main menu to view a list of Jetpack modules.
  2. Beneath to the Custom CSS module, then click the Configure. A CSS editing window opens.
  3. Add your CSS code to the page. Click the Preview button to check the effect on a page and Save Stylesheet to finalize.
  4. To test changes, open your public blog in a new window. This can be done by clicking on the name of your blog then selecting View Sites.
  5. Press Shift+Control+R (Windows) or Shift+Command+R (Mac) to reload the page with updated styles.
  6. To further adjust styles, repeat steps #3-6 until the page appearance is what you desire.

Top of Page

 

Sample CSS Code

This code globally changes a blog font to Arial Unicode MS which includes a wide set of character.. Other recommended fonts include Lucida Grande. The code below globally changes the font to Arial Unicode MS, Lucida Grande or some other possible fonts. See the CSS page for additional examples.

body {
   font-family: "Arial Unicode MS", "Lucida Grande", hirakakupro-w3, osaka, "ms pgothic", sans-serif;
}

Overriding CSS default

In some cases, it may be necessary to add "!important" to the end of a CSS declaration to override some default formatting. See example below.

body {
   font-family: "Arial Unicode MS", "Lucida Grande", hirakakupro-w3, osaka, "ms pgothic", sans-serif#important;
}

Top of Page

Last Modified: Tuesday, 04-Jun-2013 12:39:17 EDT