Components: Difference between revisions

mNo edit summary
No edit summary
 
(72 intermediate revisions by 6 users not shown)
Line 1: Line 1:
__NOTOC__
<center>
{| class="wikitable" border=1 cellspacing=0 cellpadding=3
!colspan="6"|<font size=3>Content Components</font>
|-
| [[Image:Customicon.PNG|link=TextorContentBlockComponent]]
| Text or Content Block
| Add text and images using a visual editor
|-
| [[Image:HeaderIcon.png|link=HeadingComponent]]
| Heading
| Add a customizable text heading using a visual editor
|-
| [[Image:Htmlicon.PNG|link=HTMLComponent]]
| HTML/Javascript
| Embed third party widgets or write your own code
|-
| [[Image:spacericon.png|link=SpacerComponent]]
| Spacer
| Adds a spacer between components
|-
| [[Image:Imageicon.PNG|link=ImageComponent]]
| Single Image
| Place a single image on your page
|-
| [[Image:Imageslideshowicon.PNG|link=ImageSlideshowComponent]]
| Image Slideshow
| Add a slideshow from all of the images in a folder
|-
| [[Image:Imagegalleryicon.PNG|link=ImageGalleryComponent]]
| Image Gallery
| Add a number of images to your site in a variety of ways
|-
| [[Image:Formicon.PNG|link=FormComponent]]
| Contact Form
| Display a simple form on your site that e-mails you submissions
|-
| [[Image:Feedicon.PNG|link=FeedComponent]]
| Web Feed
| Add content from websites that publish feeds of their content
|-
| [[Image:Googlemapsicon.PNG|link=GoogleMapComponent]]
| Google Maps
| Display a map with a location on it
|-
| [[Image:Navigationicon.PNG|link=NavigationComponent]]
| Navigation
| Create an extra navigation menu
|-
| [[Image:WorldMapicon.png|link=WorldMapComponent]]
| Interactive World Map
| Display an interactive map with custom markers
|-
| [[Image:Bnetappsicon.PNG|link=BravenetComponent]]
| Bravenet Web Apps
| Add A Bravenet Web App to your site
|-
| [[Image:Guestbookicon.PNG|link=GuestbookComponent]]
| Guestbook
| Allow your visitors to write a message to you!
|-
| [[Image:Pagecountericon.PNG|link=PageCounterComponent]]
| Page Counter
| Display your number of unique visits or page views on your website
|-
!colspan="6"|<font size=3>Blogging Components</font>
|-
| [[Image:Blogicon.PNG|link=BlogComponent]]
| Blog Posts
| Display blog posts you have written as a list, summary or full posts
|-
| [[Image:Blogcommenticon.PNG|link=BlogCommentComponent]]
| Blog Comments
| Display recent comments made on your blog posts
|-
| [[Image:Blogsearchicon.PNG|link=BlogSearchComponent]]
| Blog Search
| Display a search box so that your blog can be searched
|-
| [[Image:Blogarchiveicon.PNG|link=BlogArchiveComponent]]
| Blog Archive
| Show links to your old blog posts by dates, categories or tags
|-
!colspan="6"|<font size=3>Multimedia Components</font>
|-
| [[Image:beforeaftericon.png|link=BeforeAfterComponent]]
| Before After
| Show a before and after image
|-
| [[Image:html5videoicon.png|link=HTML5VideoComponent]]
| HTML5 Video
| Display an HTML5 Video on your website
|-
| [[Image:Youtubeicon.PNG|link=YoutubeComponent]]
| Youtube Video
| Display a YouTube video on your site
|-
| [[Image:GDocsicon.PNG|link=GoogleDocsViewerComponent]]
| Google Docs Viewer
| Display a document on your website
|-
| [[Image:Flickricon.PNG|link=FlickrGalleryComponent]]
| Flickr Gallery
| Display a collection of images from Flickr in a customizable gallery
|-
| [[Image:Videoplayericon.PNG|link=VideoPlayerComponent]]
| Video Player
| Display a video on your website.
|-
| [[Image:Flashicon.PNG|link=FlashComponent]]
| Embed Flash
| Embed a Flash SWF on your website
|-
| [[Image:Vimeoicon.PNG|link=VimeoComponent]]
| Vimeo
| Display a Vimeo video on your site
|-
| [[Image:Audioplayericon.PNG|link=AudioPlayerComponent]]
| Audio Player
| Let your visitors listen to music on your website
|-
!colspan="6"|<font size=3>Social Components</font>
|-
| [[Image:Sociabuttonsicon.PNG|link=ShareButtonsComponent]]
| Social Sharing Buttons
| Add icons that allow visitors to share your webpages through a variety of social networks.
|-
| [[Image:Lastfmicon.PNG|link=LastfmComponent]]
| Last.FM
| Display music that you listen to through your Last.FM account
|-
| [[Image:Followersicon.PNG|link=TwitterFollowerComponent]]
| Twitter Followers
| Display the icons of people following you, or people you're following
|-
| [[Image:Twittericon.PNG|link=TwitterComponent]]
| Twitter Timeline
| Display your recent Twitter updates on your page
|-
| [[Image:Githubicon.PNG|link=GitHubRepositoriesComponent]]
| GitHub Repositories
| This component will display a list of recent GitHub repositories for a GitHub user
|-
| [[Image:Tweetbuttonicon.PNG|link=TweetButtonComponent]]
| Tweet Button
| Allow users to share your site on Twitter
|-
| [[Image:facesiteicon.PNG|link=FacebookActivityComponent]]
| Facebook Site Activity
| Show the recent Facebook activity on your site
|-
| [[Image:facelikeicon.PNG|link=FacebookLikeComponent]]
| Facebook Like Button
| Allow users to like a page or item on Facebook
|-
| [[Image:facestaticon.PNG|link=FacebookStatusComponent]]
| Facebook Status Updates
| Display your recent Facebook Status updates on your page
|-
| [[Image:Redditicon.PNG|link=RedditComponent]]
| Reddit
| Display stories from reddit.com on your website
|-
| [[Image:Blogrollicon.PNG|link=BlogrollComponent]]
| Blogroll
| Display a list of your favorite blogs
|-
| [[Image:Friendfeedicon.PNG|link=FriendfeedComponent]]
| Friendfeed
| Display your recent online activity from a variety of other websites
|-
| [[Image:Deliciousicon.PNG|link=DeliciousComponent]]
| Del.icio.us
| Display your recently bookmarked websites
|-
| [[Image:Friendicon.PNG|link=FriendComponent]]
| Friend List
| Add a list of friends to your site
|-
| [[Image:Gamercardicon.PNG|link=GamercardComponent]]
| Xbox GamerCard
| Show off your scores by entering your XBOX GamerTag
|-
!colspan="6"|<font size=3>eCommerce Components</font>
|-
| [[Image:Paypalicon.PNG|link=PaypalComponent]]
| Paypal
| Display a Paypal "buy now" button on your site
|-
| [[Image:Ecwidsbicon.PNG|link=EcwidShoppingBagComponent]]
| Ecwid Shopping Bag
| Create a digital shopping bag for your website
|-
| [[Image:Ecwidpsicon.PNG|link=EcwidProductSearchComponent]]
| Ecwid Product Search
| Create a search box for the products you sell
|-
| [[Image:Ecwidplicon.PNG|link=EcwidProductListingComponent]]
| Ecwid Product Listing
| Display products from your Ecwid.com online store
|-
| [[Image:Bookfreshicon.PNG|link=BookFreshComponent]]
| BookFresh Online Scheduling
| Let new and existing clients schedule with your business online
|-
| [[Image:Ebayitemsicon.PNG|link=ebayItemsComponent]]
| eBay Listings
| Display a list of the items you're selling on eBay
|-
|}


Content Components are chunks of html that are dynamically generated and inserted into Content Locations. Each content component can be edited, dragged, or removed dynamically using the Viviti editor toolbar. Here is a list of content components that can be styled:
</center>


    * [[#Custom | Custom]]
    * [[#HTML | HTML]]
    * [[#Navigation | Navigation]]
    * [[#Friends | Friends]]
    * [[#Blog | Blog]]
    * [[#Feed | Feed]]
    * [[#Xbox Gamertag | Xbox Gamertag]]
    * [[#Image gallery | Image gallery]]
    * [[#Lastfm Component | Lastfm Component]]


Although your Viviti theme will work if you do not apply any css styles to the html for the optional content components, you will need to style them if you want to give them a unique design rather than the default style that is applied.
Although your Website Builder theme will work if you do not apply any css styles to the html for the optional content components, you will need to style them if you want to give them a unique design rather than the default style that is applied.




<hr>
Want to see these components at work? An example site has been set up to display them all at http://builderexample.com
 
===Custom===
<br>
 
A custom component is used for text and/or images. It is for creating generic content blocks where you can place whatever content you wish.
 
 
====Custom component dynamically generated html:====
 
<pre>
<div class="component custom_component">
<h2><span>custom component title</span></h2>
  <div class="component_content">
    <div>
    <p>custom component content</p>
    </div>   
  </div>
</div>
</pre>
 
When a user adds a custom component to their Viviti site, this is the html that is dynamically generated.
 
 
<hr>
 
===HTML===
<br>
 
An HTML component is used for adding custom html chunks.
 
 
====HTML component dynamically generated html:====
 
<pre>
<div class="component html_component">
  <h2><span>html component title</span></h2>
  <div class="component_content">
    <div>
      html component content
    </div>
  </div>
</div>
</pre>
 
When a user adds an html component to their Viviti site, this is the html that is dynamically generated.
 
 
<hr>
 
===Navigation===
<br>
 
A navigation component is used for adding navigation items in the form of lists of links.
 
 
====Navigation component dynamically generated html:====
 
<pre>
<div class="component navigation_component">
  <h2><span>navigation component title</span></h2>
  <div class="component_content">
    <ul class="navigation">
      <li>
        <div class="navigation_label">navigation label name</div>
        <ul>
          <li>sub link name</li>
        </ul>       
      </li>
      <li>link name</li>
    </ul>
  </div>
</div>
</pre>
 
 
When a user adds a navigation component to their Viviti site, this is the html that is dynamically generated.
 
 
<hr>
 
===Friends===
 
<br>
 
A friends component is used for adding a list of friends from various web sites including Flickr, LiveJournal, LinkedIn, and any URL.
 
 
====Friends component dynamically generated html:====
 
<pre>
<div class="component friend_component">
  <h2>
    <span>Friends Component Title</span>
  </h2>
  <div class="component_content">
    <ul class="friends">
      <li>
        <a href="">
          <img width="48" height="48" src="" />
          <div class="friend_name">Friend Name</div>
        </a>
      </li>
    </ul>
  </div>
</div>
</pre>
 
 
When a user adds a friends component to their Viviti site, this is the html that is dynamically generated.
 
 
You can disable the buddy icons for the friends in the friends component and it will alter the html that is outputted.
 
====Friends component with buddy icons disabled:====
 
<pre>
<div class="component friend_component">
  <h2>
    <span>Friends Component Title</span>
  </h2>
  <div class="component_content">
    <ul>
      <li>
        <a href="">Friend Name</a>
      </li>
    </ul>
  </div>
</div>
</pre>
 
When a user adds a friends component to their Viviti site, this is the html that is dynamically generated if they have buddy icons disabled.
 
 
<hr>
 
===Blog===
 
<br>
 
The blog component is unique in that it has more than one section of html to style over multiple dynamically created pages. The blog component consists of the following:
 
    * Blog posts
    * Comments
    * A comments submission form
    * A blog archive page
 
 
For the best results you need to style each piece. Below you can see the html for each piece of the blog component.
 
====Blog post dynamically generated html - Full Post and Summary Post:====
 
<pre>
<div class="component blog_component">
  <h2><span>blog component title</span></h2>
  <div class="component_content">
   
    <div class="blog_post">
      <h3 class="title"><a href="">blog post title here</a></h3>
      <div class="post_wrapper">
        <div class="date">Posted date goes here</div>
        <div class="content">
          <p>post content goes here</p>
        </div>
 
        <div class="metadata">
          <div class="comments"><a href="">0 comments</a></div>
          <span class="category">
            Posted in <a href="">category name here</a>.
          </span>
          <div class="tags"><a href="">a tag</a></div>
        </div>
      </div>
    </div>
   
  </div>
</div> 
</pre>
 
 
When a user adds a blog component with the Full setting specified, this is the html that is inserted.
 
====Blog post dynamically generated html - Do Not Display Post (show titles only):====
 
<pre>
<div class="component blog_component">
  <h2>
    <span>blog title goes here</span>
  </h2>
  <div class="component_content">
    <ul>
      <li>
        <a href="">blog post title goes here</a>
      </li>
    </ul>
  </div>
</div> 
</pre>
 
 
When a user adds a blog component with the Do Not Display setting specified, this is the html that is inserted.
 
====Comments area dynamically generated html:====
 
<pre>
<div id="comments"> 
  <div class="comment even">
    <span class="comment_number">
      <a href="">Comment Number Goes Here</a>
    </span>
    <span class="comment_name">
      <a href="">Name Goes Here</a>
    </span>
    <span class="date">Date Goes Here</span>
    <div class="content">
      <p>Comment Goes Here</p>
    </div>   
  </div>
</div>
</pre>
 
 
This html is dynamically generated for the comments section of a Viviti blog.
 
====Add comment form dynamically generated html:====
 
<pre>
<div id="comment_form_area">
  <h2>Add comment</h2>
  <form id="comment_form">
    <div>
      <div class="input_wrapper">
        <label>Name: </label>
        <input id="new_comment_name" type="text" size="30" />
      </div>
      <div class="input_wrapper">
        <label>Email: </label>
        <input id="new_comment_email" type="text" size="30" />
      </div>
      <div class="input_wrapper">
        <label>Website: </label>
        <input id="new_comment_website" type="text" size="30" />
      </div>
      <div class="input_wrapper textarea_wrapper">
        <label>Comment: </label>
        <textarea id="new_comment_body" cols="40" rows="20" />
      </div>
      <div class="submit_wrapper">
        <input type="submit" value="Submit" />
      </div>
    </div>
  </form>
</div>
</pre>
 
 
This html is dynamically generated for the comments section of a Viviti blog.
 
 
<hr>
 
===Feed===
 
<br>
A feed component is used for adding RSS or similar feeds.
 
====Feed component dynamically generated html (showing titles only):====
 
<pre>
<div class="component feed_component">
  <h2><span>feed title</span></h2>
  <div class="component_content">
    <h3>feed name</h3>
    <ul>
      <li>
        <a href="">feed item title</a>
      </li>
    </ul>
  </div>
</div>
</pre>
 
When a user adds a feed component to their Viviti site, this is the html that is dynamically generated.
 
====Feed component dynamically generated html (showing full content):====
 
<pre>
<div class="component feed_component">
  <h2>Feed Component Title</h2>
  <div class="component_content">
    <h3>Feed Title</h3>
    <div class="feed_entry">
      <h3 class="title">
        <a href="">Entry Title Goes Here
      </h3>
      <div class="content">
      Entry Content Goes Here
      </div>
    </div>
  </div>
</div>
</pre>
 
When a user adds a feed component to their Viviti site, this is the html that is dynamically generated.
 
 
<hr>
 
===Xbox Gamertag===
 
<br>
An Xbox Gamertag component is used for adding a Gamertag.
 
====Gamertag component dynamically generated html:====
 
<pre>
<div class="component gamercard_component">
  <h2><span>gamertag</span></h2>
  <div class="component_content">
    <div class="gamer_card">
    </div>
  </div>
</div>
</pre>
 
When a user adds an XboxGamertag to their Viviti site, this is the html that is dynamically generated.
 
 
<hr>
 
===Image gallery===
 
<br>
An Image Gallery component is used for adding a number of images to your site, in a variety of ways.
 
====Image Gallery component dynamically generated html:====
 
<pre>
<div class="component image_component">
  <h2>
    <span>Image Gallery Title Here</span>
  </h2>
  <div class="component_content">
    <div class="images">
      <div class="image">
        <a href="">
          <img src="" />
        </a>
      </div>
    </div>
  </div>
</div>
</pre>
 
When a user adds an Image Gallery to their Viviti site, this is the html that is dynamically generated.
 
 
<hr>
 
===Lastfm Component===
 
<br>
A Lastfm component is used for displaying information about what music you listen to.
 
====Lastfm top artists component dynamically generated html:====
 
<pre>
  <div class="component lastfm_component">
    <h2>Title goes here</h2>
    <div class="component_content">
      <div class="top_artists">
        <div class="first even item_0 lastfm_entry artist">
          <span class="lastfm_image">
            <img width="48" height="48" src=""/>
          </span>
          <div class="lastfm_metadata">
            <span class="lastfm_artist"></span>
            <span class="lastfm_playcount"></span>
          </div>
        </div>
 
        <div class="last odd item_1 lastfm_entry artist">
          <span class="lastfm_image">
            <img width="48" height="48" src=""/>
          </span>
          <div class="lastfm_metadata">
            <span class="lastfm_artist"></span>
            <span class="lastfm_playcount"></span>
          </div>
        </div>
      </div>
    </div>
  </div> 
</pre>
 
Fig 1.1 - When a user adds a lastfm component to their Viviti site with the top artists option selected, this is the html that is dynamically generated.
 
 
====Lastfm top tracks component dynamically generated html:====
 
<pre>
  <div class="component lastfm_component">
    <h2>Title goes here</h2>
    <div class="component_content">
      <div class="top_tracks">
        <div class="first even item_0 lastfm_entry song">
          <span class="lastfm_track_name"></span>
          <span class="lastfm_artist"></span>
          <span class="lastfm_playcount"></span>
        </div>
 
        <div class="last odd item_1 lastfm_entry song">
          <span class="lastfm_track_name"></span>         
          <span class="lastfm_artist"></span>
          <span class="lastfm_playcount"></span>
        </div>
      </div>
    </div>
  </div> 
</pre>
 
Fig 1.1 - When a user adds a lastfm component to their Viviti site with the top tracks option selected, this is the html that is dynamically generated.

Latest revision as of 03:02, 18 October 2017

Content Components
Customicon.PNG Text or Content Block Add text and images using a visual editor
HeaderIcon.png Heading Add a customizable text heading using a visual editor
Htmlicon.PNG HTML/Javascript Embed third party widgets or write your own code
Spacericon.png Spacer Adds a spacer between components
Imageicon.PNG Single Image Place a single image on your page
Imageslideshowicon.PNG Image Slideshow Add a slideshow from all of the images in a folder
Imagegalleryicon.PNG Image Gallery Add a number of images to your site in a variety of ways
Formicon.PNG Contact Form Display a simple form on your site that e-mails you submissions
Feedicon.PNG Web Feed Add content from websites that publish feeds of their content
Googlemapsicon.PNG Google Maps Display a map with a location on it
Navigationicon.PNG Navigation Create an extra navigation menu
WorldMapicon.png Interactive World Map Display an interactive map with custom markers
Bnetappsicon.PNG Bravenet Web Apps Add A Bravenet Web App to your site
Guestbookicon.PNG Guestbook Allow your visitors to write a message to you!
Pagecountericon.PNG Page Counter Display your number of unique visits or page views on your website
Blogging Components
Blogicon.PNG Blog Posts Display blog posts you have written as a list, summary or full posts
Blogcommenticon.PNG Blog Comments Display recent comments made on your blog posts
Blogsearchicon.PNG Blog Search Display a search box so that your blog can be searched
Blogarchiveicon.PNG Blog Archive Show links to your old blog posts by dates, categories or tags
Multimedia Components
Beforeaftericon.png Before After Show a before and after image
Html5videoicon.png HTML5 Video Display an HTML5 Video on your website
Youtubeicon.PNG Youtube Video Display a YouTube video on your site
GDocsicon.PNG Google Docs Viewer Display a document on your website
Flickricon.PNG Flickr Gallery Display a collection of images from Flickr in a customizable gallery
Videoplayericon.PNG Video Player Display a video on your website.
Flashicon.PNG Embed Flash Embed a Flash SWF on your website
Vimeoicon.PNG Vimeo Display a Vimeo video on your site
Audioplayericon.PNG Audio Player Let your visitors listen to music on your website
Social Components
Sociabuttonsicon.PNG Social Sharing Buttons Add icons that allow visitors to share your webpages through a variety of social networks.
Lastfmicon.PNG Last.FM Display music that you listen to through your Last.FM account
Followersicon.PNG Twitter Followers Display the icons of people following you, or people you're following
Twittericon.PNG Twitter Timeline Display your recent Twitter updates on your page
Githubicon.PNG GitHub Repositories This component will display a list of recent GitHub repositories for a GitHub user
Tweetbuttonicon.PNG Tweet Button Allow users to share your site on Twitter
Facesiteicon.PNG Facebook Site Activity Show the recent Facebook activity on your site
Facelikeicon.PNG Facebook Like Button Allow users to like a page or item on Facebook
Facestaticon.PNG Facebook Status Updates Display your recent Facebook Status updates on your page
Redditicon.PNG Reddit Display stories from reddit.com on your website
Blogrollicon.PNG Blogroll Display a list of your favorite blogs
Friendfeedicon.PNG Friendfeed Display your recent online activity from a variety of other websites
Deliciousicon.PNG Del.icio.us Display your recently bookmarked websites
Friendicon.PNG Friend List Add a list of friends to your site
Gamercardicon.PNG Xbox GamerCard Show off your scores by entering your XBOX GamerTag
eCommerce Components
Paypalicon.PNG Paypal Display a Paypal "buy now" button on your site
Ecwidsbicon.PNG Ecwid Shopping Bag Create a digital shopping bag for your website
Ecwidpsicon.PNG Ecwid Product Search Create a search box for the products you sell
Ecwidplicon.PNG Ecwid Product Listing Display products from your Ecwid.com online store
Bookfreshicon.PNG BookFresh Online Scheduling Let new and existing clients schedule with your business online
Ebayitemsicon.PNG eBay Listings Display a list of the items you're selling on eBay


Although your Website Builder theme will work if you do not apply any css styles to the html for the optional content components, you will need to style them if you want to give them a unique design rather than the default style that is applied.


Want to see these components at work? An example site has been set up to display them all at http://builderexample.com

Retrieved from "https://wiki.bravesites.com/index.php?title=Components&oldid=5267"