How to edit the HTML of a page directly

Created by Margie Wylie-Petruzziello, Modified on Thu, 11 Jan at 3:15 PM by Margie Wylie-Petruzziello


BEFORE YOU GET STARTED
Please do not insert CSS styles or other hacks to circumvent default styles. These can break the site and will cause a lot of grief in a redesign. If you ever have any questions about allowed HTML edits, please open a ticket. We will be happy to consult with you.


SilverStripe 4.x (CRD, CS, ESnet, and NERSC)

  1. In the content window, select the pointed brackets "<>" button from the editing tools (see below).

  2. A separate, text-only editing window will open in an overlay (titled: "Source code.")
  3. Make edits the HTML in this window, or cut-and-paste it into a text editor (such as BBedit or Atom) where you can make edits, then cut and paste back into the HTML window. If there is a lot of text, this is often the best way to deal with it. 
    • NOTE: (Don't use the "notes" app in Mac or Windows. These are rich text editors that will insert extra markup.)
  4. Select the "Ok" button in the HTML window to inject your changes back into the rich-text editing window.
  5. Select "Save" to save your changes to the DRAFT site. Review and adjust your changes by repeating these steps.
  6. When you are satisfied with your changes, select "Publish" from the bottom left of the editing window to save the changes to both the draft and live sites.


NOTE

Some edits that you can successfully insert into the content editing window may be stripped from the page when you save. Some are forbidden (such as inserting Java scripts), but most of the time, the editor deletes or attempts to modify malformed HTML. If you are "losing" HTML changes on save, double-check your syntax for missing brackets, quotation marks, closing tags, or other common issues. Need help with HTML syntax? W3Cschools.com offers an authoritative and easy-to-use tutorial.


SilverStripe 3.x (only fasterdata.es.net) instructions

  1. In the content window, select the tiny HTML button that appears in the editing tools (see below).



  2. A separate, text-only editing window will appear with the HTML. You can edit the HTML here, or you can cut-and-paste it into a text editor (such as BBedit or Atom) where you can make edits that you cut and paste back into the HTML window. If there is a lot of text, this is often the best way to deal with it. (Don't use the "notes" app in Mac or Windows. These are rich text editors that will insert extra markup.)
  3. Select the "Insert" button to inject your changes into the rich-text editing window. 
  4. Select "Save" to save your changes to the DRAFT site.
  5. When you are happy with your work select "Save & Publish" to save the changes to both the draft and live sites.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article