MIT Sites (CampusPress) - Adding Custom HTML and Custom CSS

On this page:

Adding Custom HTML in Campus Press

Custom HTML can be added in two ways: using the the WordPress block editor, or working within the code editor.

Working with the Block Editor

1. Create a new page or post by going to Pages > Add New or Posts > Add New. Or edit an already existing page or post by going to Pages > All Pages or Posts > All Posts and mousing over the file you wish to edit and clicking the Edit option.
2. Give your post a title and add blocks for your content.
3. Add a new block by clicking on the + icon at the right of an empty block or at the top left of the editor.
4. Then click the Custom HTML block.
   If you do not see the Custom HTML block you can search for it by clicking on Browse all to view all block options. An alternative method is to quickly find the Custom HTML block by typing / followed "Custom HTML" or "HTML".
5. Add your custom HMTL to the block

Custom HTML Block Example

Here is a published Custom HTML Block example: https://sites.mit.edu/campuspress-demo/custom-html-demo/

Working with the Code Editor

If you want to edit the HTML of your entire post, then you can use the Code Editor in the WordPress block editor.

# Access the code editor by clicking the three-dots option in the top right corner. Then select Code Editor from the drop-down options.
# Add your HTML Code to the page in the area provided and save your work.

Additional Information about Custom HTML and CampusPress

•  The CampusPress guide https://help.edublogs.org/custom-html-block/

Custom HTML Code Editor Example

•  Live custom HTML example in the code editor: https://sites.mit.edu/campuspress-demo/code-editor-demo/

Adding Custom CSS in CampusPress

The CampusPress Custom CSS plugin enables you to modify the theme’s fonts, colors, border and backgrounds by adding custom stylesheets to your blog.

• If you have not already done so, activate the Custom CSS plugin in Adding Custom HTML & Custom CSS.
  Result: You’ll see a new "Custom CSS" menu item added.
  
• In the Main Menu, click on Appearance > Custom CSS
  Result: The CSS editor opens_._
  
• Copy and Paste or enter your CSS in the editor
• Click Save Changes.

Additional information about using CSS in CampusPress

For more information, refer to the CampusPress guide at https://help.edublogs.org/editing-css/

Custom CSS Example

Here is an example of a published page with Custom CSS: https://sites.mit.edu/campuspress-demo/custom-css-example/

See Also

• Sites (CampusPress) Landing Page