Ghost/core/client/app/docs/psm.html

---
layout: default
title: Ghost UI · Making publishing beautiful.
---

<header class="page-header">
    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
    <h2>Home</h2>
</header>

<section class="page-content">

    <h3>Post Settings Menu</h3>

    <!-- Styles used only for docs presentation -->
    <style>
        .docs-psm-wrapper {overflow: hidden;}
        .post-settings-menu {float: left; margin: 30px; outline: 1px solid #EDECE4;}
    </style>
    <div class="docs-psm-wrapper">

    <div class="post-settings-menu">
        <div class="post-settings-header">
            <h4>Post Settings</h4>
            <button class="close icon-x post-settings-header-action"><span class="hidden">Close</span></button>
        </div>
        <div class="post-settings-content">

            <section class="image-uploader">
                <span class="media">
                    <span class="hidden">Image Upload</span>
                </span>
                <img class="js-upload-target" style="display: none;" src="">
                <div class="description">Add image of <strong></strong></div>
            </section>

            <div class="form-group">
                <label for="blog-title">Post URL</label>
                <span class="input-icon icon-link">
                    <input type="text" value="myblog.com/this-is-my-post/" />
                </span>
            </div>

            <div class="form-group">
                <label for="blog-title">Publish Date</label>
                <span class="input-icon icon-calendar">
                    <input type="text" value="23 Apr 14 @ 11:59" />
                </span>
            </div>

            <div class="form-group for-select">
                <label for="activeTheme">Author</label>
                <span class="input-icon icon-user">
                    <span class="gh-select">
                        <select>
                            <option>Lorem Ipsum</option>
                            <option>Corporis Voluptates</option>
                            <option>Veniam Quae</option>
                        </select>
                    </span>
                </span>
            </div>

            <ul class="nav-list nav-list-block">
                <li class="nav-list-item">
                    <a href="#">
                        <b>Revision History</b>
                        <span>12 versions of this post by 3 people.</span>
                    </a>
                </li>
                <li class="nav-list-item">
                    <a href="#">
                        <b>Advanced Settings</b>
                        <span>Convert to a page, mark as featured.</span>
                    </a>
                </li>
                <li class="nav-list-item">
                    <a href="#">
                        <b>Meta Data</b>
                        <span>Extra content for SEO and social media.</span>
                    </a>
                </li>
                <li class="nav-list-item">
                    <a href="#">
                        <b>Custom App</b>
                        <span>Registered an advanced setting panel.</span>
                    </a>
                </li>
            </ul>

        </div>
    </div>

    <!-- This would be a class on the body, or container.
        Here, it'll change the alignment of .post-settings-header -->
    <div class="subview">
        <div class="post-settings-menu">

            <div class="post-settings-header">
                <button class="back icon-chevron-left post-settings-header-action"><span class="hidden">Back</span></button>
                <h4>Meta Data</h4>
            </div>

            <div class="post-settings-content">
                <div class="form-group">
                    <label for="blog-title">Meta Title</label>
                    <input type="text" value="My Post is Super SEO Friendly" />
                    <p>Recommended: <b>70</b> characters. You’ve used <b class="green">43</b></p>
                </div>

                <div class="form-group">
                    <label for="blog-title">Meta Description</label>
                    <textarea>In this fascinating posts I explore the value of SEO meta descriptions and their impact on blogging. Don’t miss my stunning insights!</textarea>
                    <p>Recommended: <b>156</b> characters. You’ve used <b class="green">133</b></p>
                </div>

                <div class="form-group">
                    <label>Search Engine Result Preview</label>
                    <div class="seo-preview">
                        <div class="seo-preview-title">My Post is Super SEO Friendly</div>
                        <div class="seo-preview-link">myblog.com/this-is-my-post/</div>
                        <div class="seo-preview-description">In this fascinating posts I explore the value of SEO meta descriptions and their impact on blogging. Don’t miss my stunning insights!</div>
                    </div>
                </div><!-- .post-settings-search-preview -->

            </div><!-- .post-settings-content -->

        </div><!-- .post-settings-menu -->
    </div><!-- .subview -->

    </div><!-- .docs-psm-wrapper -->

</section>