How To Edit This Website
This is a manual and html style guide for mTuitive Web editors. You should have your own administrative login.
About The Site
This site is set up using Wordpress as a content management system (CMS). Wordpress is a very popular blogging platform and is used more and more often as a lightweight CMS for small to medium websites. Using a web-based CMS means that the content of the site is managed right on the site. Editors can change pages or add new pages from an administrative console on the server.
Part of moving the site to Wordpress involved an overhaul of the site's html and small redesigns of various elements of the site. This collaborative team effort has really helped the site already (as some changes are already live) and will continue to help tremendously as we move up in search rankings and pages load faster for users. Most importantly, content will be fresh because it will be easier for us to update.
Using a CMS is different from using client-side tools like Dreamweaver or Visual Studio. With the current setup, a customized Wordpress theme provides our standard header, standard footer, and context-sensitive left and right sidebars. The main content of each page is customized right in the Wordpress html editor.
Everyone in the past has tried to edit html that was generated by a conglomeration of tools. Most of these tools generate semi-standard, complicated html that is hard to read, hard to understand, very hard to modify, and worst of all, creates heavyweight pages that are slow to load. This website's theme uses modern, standards-based techniques that produce html that is easy to read and modify and is faster to load.
The biggest change is that all style information -- colors, fonts, spacing, even layout info -- is externalized as cascading style sheets (CSS). A few pages have special css defined in the page, but almost all of the style information is kept in the Wordpress theme's styles.css file. You can view the theme's CSS file, as well as the various PHP files that make up the header, footer, and sidebars, by going to Appearance > Editor in the Wordpress admin. I've documented the CSS so hopefully it is clear what each style is doing. Some are very specific to layout or to content on just one page, but many styles will be reusable. In fact, all the important styles you will be using without even knowing it. The site has global styles defined for the most important elements -- h1, h2, p, a, img, and some others. You can just use these tags in any of your posts and they will take on the look and feel that is consistent throughout the site.
Examples
This is an <h1>
This is an <h2>
This is an <h3>
This is a <p>This is a link <a>
Most of the content on the mTuitive website can be recreated just by using these tags. No need for <font> tags for font styles, <br> tags for vertical spacing, etc. At times you will want to style some information differently. We can add a style for this to the main style sheet for the site. In some cases, it will be better to keep that in the page. However, all styles should be added using css as opposed to older methods. If you aren't sure, ask.
Images
Add images to the site using WordPress's built-in "Add Media" button. This adds the image to a reusable gallery of images and inserts it into the current post for you. There is a globally defined css class called "drop_shadow" in our theme's main css. Just add drop_shadow to the img tag's class attribute (<img class="drop_shadow" ...) and your image will sport a light shadow with the light source directly above, like this:
Enough Already -- How Do I Edit a Page?
To Edit an Existing Page
Go to Posts in the wordpress admin.
Find the post in question and click Edit.
Change the html for the post.
Click Update.
To Create a New Page
Click Posts > Add New in the wordpress admin.
Add title for the post. This becomes the page's title in the browser's window title bar. For press release posts, this is also the title on the page.
Enter html content for the post, usually starting with an h1 for the page title and followed by h2 and p tags for the content.
Add tags for the post. These determine which templates to use and what content to display in sidebars.
Add Slug for the post. This is the post's URL!
Tag Reference AboutPage The AboutPage tag specifies that this page is in the About part of the site and forces the About Us left sidebar navigation to appear. It does not automatically add the page to that navigation. Blog The blog tag marks this page as a blog post. It will appear on the page that shows a list of all blog posts. LeftOpNoteBenefits Displays a list of benefits for OpNote in the left sidebar. News The News tag indicates that this post is a press release. This uses different styling and also ensures that the post shows up in the lists of press releases located throughout the site. NewsLeft The NewsLeft tag forces the news sidebar (like the home page) to appear if no other left sidebar has been specified. NoLeftSidebar Prevents the left sidebar from showing up and expands main content to the left margin. NoRightSidebar Prevents the right sidebar from showing up and expands main content to the right margin.Pathology Indicates that this page is pathology-specific. This will change meta info like keywords and also changes what content appears in the right sidebar. Note that Pathology and Surgery tags may be used together which will cause mixed meta information and sidebar content. Surgery Indicates that this page is surgery-specific. This will change meta info like keywords and also changes what content appears in the right sidebar. Note that Pathology and Surgery tags may be used together which will cause mixed meta information and sidebar content. ProductPage The ProductPage tag specifies that this page is in the Product part of the site and forces the Products left sidebar navigation to appear. It does not automatically add the page to that navigation.
Bookmarklets
Editing html, css, and javascript in a web browser's textarea can be frustrating. Luckily an awesome guy on the Interwebs made his CodeMirror script freely available. I've adapted it to our purposes. If you want the html color-coded and some help with indentation, use the CodeMirror Post bookmarklet. Simply drag this link to your browser's bookmarks bar. Then, the next time you are editing a post, click the bookmark. You will see your html suddenly become much more readable and easier to work with. CodeMirror Post
Go ahead, drag it up there!
When viewing either PHP or CSS files in the Wordpress theme editor (Appearance > Editor), you might want to do the same thing. These bookmarklets are for PHP or CSS files within the theme editor. Drag them to your bookmarks bar and click them when viewing one of those pages.CodeMirror CSS CodeMirror PHP
Even if you are only reading the CSS or PHP (or HTML in a post), this makes a huge difference in understanding the code!