Difference between revisions of "Support Wiki Style Guide"

From Support Wiki
Jump to navigation Jump to search
 
(142 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
__NOTOC__
+
==Banners==
−
{|style="padding:5px; text-align:left;background:#FFFDDF; width:100%; margin-bottom:.2em;"
+
 
 +
{|style="padding:5px; text-align:left; background-color: #d9edf7; padding:10px; width: 100%; margin-top:25px"
 +
|-
 +
|'''Note: '''For more information on how to set up Integrated Payment Processing contact '''[[Main_Page|Customer Support]]'''.
 +
|}
 +
 
 +
{|style="padding:5px; text-align:left;background:#ffcccc; padding:10px; width: 100%; margin-top:25px"
 +
|-
 +
|'''Warning: '''This is the color for warnings.
 +
|}
 +
 
 +
{|style="padding:5px; text-align:left;background:#FFFDDF; padding:10px; width: 100%; margin-top:25px"
 +
|-
 +
|'''Tip: '''This is the color for tips
 +
|}
 +
 
 +
{|style="background-color: #dff0d8; padding:10px; width: 100%; margin-top:25px"
 +
|-
 +
|'''Example''' this is the color for examples
 +
|}
 +
 
 +
 
 +
==Icons==
 +
[[File:Vid.png|link=#]]
 +
 
 +
[[File:Pdf_icon.png|link=#]]
 +
 
 +
==Fonts==
 +
{|class="wikitable"
 +
|+
 +
!Item
 +
!Example
 +
!Code
 +
|-
 +
|Paths
 +
|'''Members''' ➝ '''Web''' ➝ '''Web Participation Options''' 
 +
|<html><span style="white-space: nowrap"><b>. Arrow symbol code: ➝
 +
|-
 +
|Captions
 +
|<html><small><b>This is caption text</b></small></html>
 +
|&lt;html>&lt;small>&lt;b>This is caption text&lt;/b>&lt;/small>&lt;/html>
 +
|}
 +
 
 +
 
 +
 
 +
 
 +
==Step by Step==
 +
 
 +
{|
 
|-
 
|-
−
|'''Attention: '''This page refers to legacy software.
+
|style="width:40px; vertical-align:top; padding-top:16px"|
 +
[[File:stepbystep.png]]
 +
 
 +
|style="vertical-align:top; width: 95%; padding-right: 70px;"|
 +
 
 +
#Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare neque vel lacinia
 +
#Number
 
|}
 
|}
 +
 +
 +
 +
==Alternative Layouts==
 +
  
 
{|class=""  
 
{|class=""  
Line 11: Line 70:
  
 
|style="vertical-align:top"|
 
|style="vertical-align:top"|
 +
 
=='''In-depth Article'''==
 
=='''In-depth Article'''==
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare neque vel lacinia ultricies. Phasellus vestibulum dignissim nisl id cursus.  
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare neque vel lacinia ultricies. Phasellus vestibulum dignissim nisl id cursus.  
Line 17: Line 77:
  
 
Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna.Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna. Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna.
 
Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna.Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna. Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna.
−
 
−
{|style="padding:5px; text-align:left; background-color: #cce5ff; width:100%; margin-bottom:.2em;"
 
−
|-
 
−
|'''Note: '''For more information on how to set up Integrated Payment Processing contact '''[[Main_Page|Customer Support]]'''.
 
−
|}
 
  
  
Line 41: Line 96:
 
|}
 
|}
  
−
=='''One Column Section'''==
+
 
 +
 
 +
=='''Overview of the Communication Module'''==
 +
{|
 +
|-
 +
|style="width: 80%; padding-right: 30px"|
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare neque vel lacinia ultricies. Phasellus vestibulum dignissim nisl id cursus.  
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare neque vel lacinia ultricies. Phasellus vestibulum dignissim nisl id cursus.  
  
 
Quisque at nulla blandit, hendrerit lorem ut, ultrices odio. Integer eget imperdiet sapien. Maecenas velit ex, pretium vel facilisis at, faucibus eu turpis. Fusce quis lacus condimentum, lobortis elit sit amet, eleifend dui. Nunc a diam a arcu facilisis tristique non id diam. Sed at laoreet tellus. Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna.  
 
Quisque at nulla blandit, hendrerit lorem ut, ultrices odio. Integer eget imperdiet sapien. Maecenas velit ex, pretium vel facilisis at, faucibus eu turpis. Fusce quis lacus condimentum, lobortis elit sit amet, eleifend dui. Nunc a diam a arcu facilisis tristique non id diam. Sed at laoreet tellus. Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna.  
  
−
Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna.Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna. Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna. Read more...
+
Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna.Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna. Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna. Quisque at nulla blandit, hendrerit lorem ut, ultrices odio. Integer eget imperdiet sapien. Maecenas velit ex, pretium vel facilisis at, faucibus eu turpis. Fusce quis lacus condimentum, lobortis elit sit amet, eleifend dui. Nunc a diam a arcu facilisis tristique non id diam. Sed at laoreet tellus. Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna.
 +
 
 +
Quisque at nulla blandit, hendrerit lorem ut, ultrices odio. Integer eget imperdiet sapien. Maecenas velit ex, pretium vel facilisis at, faucibus eu turpis. Fusce quis lacus condimentum, lobortis elit sit amet, eleifend dui. Nunc a diam a arcu facilisis tristique non id diam. Sed at laoreet tellus. Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna.
 +
 
 +
|style="border: 1px solid #ddd; background-color: #eee; vertical-align:top; text-align: center; padding: 5px"|
 +
===Related===
 +
{|
 +
|-
 +
|style="text-align: left; padding:5px"|
 +
*'''[[Using_Add_Member_Button|Adding a Member]]'''
 +
*'''[[Using_Add_Member_Button|Removing a Member]]'''
 +
*'''[[Using_Add_Member_Button|Adding a Rep]]'''
 +
*'''[[Using_Add_Member_Button|Removing a Rep]]'''
 +
|}
 +
|}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
  
−
<nowiki>
 
  
−
<p id="clickme">click me</p>
 
  
  
−
$( "#clickme" ).click(function() {
 
−
  $( "#accordion" ).hide( "slow");
 
−
});
 
−
 
  
  
−
<div id="accordion">
+
 
−
  <h3>Section 1</h3>
+
__NOINDEX__
−
  <div>
+
 
−
    <p>
+
 
−
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+
__NOTOC__
−
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
 
−
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
 
−
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
 
−
    </p>
 
−
  </div>
 
−
  <h3>Section 2</h3>
 
−
  <div>
 
−
    <p>
 
−
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
 
−
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
 
−
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
 
−
    suscipit faucibus urna.
 
−
    </p>
 
−
  </div>
 
−
  <h3>Section 3</h3>
 
−
  <div>
 
−
    <p>
 
−
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
 
−
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
 
−
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
 
−
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
 
−
    </p>
 
−
    <ul>
 
−
      <li>List item one</li>
 
−
      <li>List item two</li>
 
−
      <li>List item three</li>
 
−
    </ul>
 
−
  </div>
 
−
  <h3>Section 4</h3>
 
−
  <div>
 
−
    <p>
 
−
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
 
−
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
 
−
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
 
−
    mauris vel est.
 
−
    </p>
 
−
    <p>
 
−
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
 
−
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
 
−
    inceptos himenaeos.
 
−
    </p>
 
−
  </div>
 
−
</div>
 
−
</nowiki>
 

Latest revision as of 23:00, 2 February 2016

Banners

Note: For more information on how to set up Integrated Payment Processing contact Customer Support.
Warning: This is the color for warnings.
Tip: This is the color for tips
Example this is the color for examples


Icons

Vid.png

Pdf icon.png

Fonts

Item Example Code
Paths Members ➝ Web ➝ Web Participation Options <html><span style="white-space: nowrap"><b>. Arrow symbol code: &#10141;
Captions This is caption text <html><small><b>This is caption text</b></small></html>



Step by Step

Stepbystep.png

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare neque vel lacinia
  2. Number


Alternative Layouts

HelpPage IconPack-03.png

In-depth Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare neque vel lacinia ultricies. Phasellus vestibulum dignissim nisl id cursus.

Quisque at nulla blandit, hendrerit lorem ut, ultrices odio. Integer eget imperdiet sapien. Maecenas velit ex, pretium vel facilisis at, faucibus eu turpis. Fusce quis lacus condimentum, lobortis elit sit amet, eleifend dui. Nunc a diam a arcu facilisis tristique non id diam. Sed at laoreet tellus. Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna.

Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna.Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna. Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna.


HelpPage IconPack-06.png

Finding Help

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare neque vel lacinia ultricies. Phasellus vestibulum dignissim nisl id cursus. Quisque at nulla blandit, hendrerit lorem ut, ultrices odio. Integer eget imperdiet sapien. Maecenas velit ex, pretium vel facilisis at, faucibus eu turpis. Fusce quis lacus condimentum, lobortis elit sit amet, eleifend dui. Nunc a diam a arcu facilisis tristique non id diam. Sed at laoreet tellus.

Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna. Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna.

  • List item one
  • List Item two
  • List item three


Overview of the Communication Module

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare neque vel lacinia ultricies. Phasellus vestibulum dignissim nisl id cursus.

Quisque at nulla blandit, hendrerit lorem ut, ultrices odio. Integer eget imperdiet sapien. Maecenas velit ex, pretium vel facilisis at, faucibus eu turpis. Fusce quis lacus condimentum, lobortis elit sit amet, eleifend dui. Nunc a diam a arcu facilisis tristique non id diam. Sed at laoreet tellus. Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna.

Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna.Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna. Duis neque leo, cursus a ante id, pulvinar volutpat tellus. Donec non dui magna. Quisque at nulla blandit, hendrerit lorem ut, ultrices odio. Integer eget imperdiet sapien. Maecenas velit ex, pretium vel facilisis at, faucibus eu turpis. Fusce quis lacus condimentum, lobortis elit sit amet, eleifend dui. Nunc a diam a arcu facilisis tristique non id diam. Sed at laoreet tellus. Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna.

Quisque at nulla blandit, hendrerit lorem ut, ultrices odio. Integer eget imperdiet sapien. Maecenas velit ex, pretium vel facilisis at, faucibus eu turpis. Fusce quis lacus condimentum, lobortis elit sit amet, eleifend dui. Nunc a diam a arcu facilisis tristique non id diam. Sed at laoreet tellus. Maecenas faucibus, ligula in dignissim auctor, justo libero vehicula nulla, quis aliquet ante ex vitae urna.

Related









Retrieved from "http://supportwiki.chambermaster.com/index.php?title=Support_Wiki_Style_Guide&oldid=44851"