Skinning Your Article Site Manager Website

As of version 4.0 your article site manager website is fully skinnable if you host your website with us (due to the amount of server-side libraries and code this version is not usable on other servers, look for that feature in ASM 5.0). To 'skin' your website simply follow these instructions.

Required elements

Our skinning engine is a DOM injection system. The following elements are required in your HTML file (styled and placed anywhere you wish) for your skin to work properly:

element IDs

main_page_link - the main name of your website (the header) and link back to your home page
menu - a div element that contains the menu list that contains the following list items:
- full_listing - the full article listing menu item
- submit_article - the submit and article menu item (can be turned on and off from the admin panel)
- advertise - the advertise with us menu item
- links - the links menu item
- contact_us - the contact us menu item
- about_us - the about us menu item
- site_map - the site map menu item
- home - the home menu item
search_field - the sites search form will be injected into this element
topgoogle - one of the google adsense fields 9this can be turned on and off in the admin panel)
articleAdsense - the adsense block within the article (it does not have to be positioned there and can be turned on and off from the admin panel))
bottom_google_ad - another adsense block (this can be turned on and off in the admin panel)
right_google - another adsense block (this can be turned on and off in the admin panel)
paid_ads - this element contains any paid ads you enter into the system (see "you can own this website in the existing sites")
rssfeeds - this contains the RSS feed icons
related_articles_blocks - this contains the "related articles" injected from the system
main_article_div - the pages article and or site information text is injected into this element
rss_news_feeds - the RSS news feed out put is injected into this element
articlevideo - if you use video clips this element contains one of them (not required to be in the article)
videoblock - a secondary video block
article_image - if you use the article image feature that image will be placed inside this element
logo - when you upload a logo to the system is is placed within this element

Optional Elements

These are element that can not be turned on or off in the admin but will fill with the required data when used, all are IDs (not classes)

a id='top_100' - if used this will display a link that will calls the application's top 100 read articles, add whatever text you wish the link to show
motto - if you wish to display a site motto (added from the admin panel) include this element
main_content_title - this displays the "Today's featured Article" header, this is also used for the SIFR styling of that text
related_news_hdr - if you wish to have a header that displays the news source for your related news section use this element the system will inject the phrase "Related {site name word one from admin website name section} News and Articles From {rss name you enter in the rss news set up section}
current_date - Our system will add today's date to this element
welcome_message - if used this will display "Welcome To {your site name}"
main_link_wrap - If you wish to use the SIFR styling of the pages header (main link text - see ID main_page_link above) wrap it in an element with this ID
related_article_header - if you wish to use the SIFR text styling for your "related articles" header use this ID

Other elements our system adds to your layout

These elements are automatically added to your layout when content is added from the system, they allow you more control over your layout and styling:

Menu List: the system will add class='active' to the list item in the menu for the current active page the user is viewing

RSS News area:

1. div class='itemtitle' - this is the title and hyperlink for an RSS news item, the actual content is surround by a paragraph tag

2. div class='itemdescription' - this is the text of an RSS news item

There will always be one itemtitle element and one itemdescription element for each RSS news item, the actual content is surround by a paragraph tag

Paid Ads Section (entered into the system via the admin panel)

<h3> - this is the ad title you have entered into the admin section for a given ad
<div class='right_articles'> - this div tag is directly below the h3 tag and surrounds the ad text (one or two paragraphs) and the bottom link (if used) (items 3 - 5 below)
<p> - first paragraph of an ad
<p> - second paragraph of an ad (if used)
<a> - the lower link to the target website

RSS Feed icons

The RSS feed icons are presented with lists as such (note: links removed for clarity):

<div id='rssfeeds'>
	 <ul>
		<li><a href="" title="Subscribe to my feed"><img src="/images/RSS-images/xml.gif" width='91' height='17' alt='subscribe to our XML feed' /></a></li>
		<li><a href=""><img src="/images/RSS-images/google-all.gif" width='91' height='17' alt="Google Reader or Homepage" /></a></li>
	</ul>
	<ul>
		<li><a href=""><img src="/images/RSS-images/yahoo.gif" width='91' height='17' alt="Add to My Yahoo!" /></a></li>
		<li><a href=""><img src="/images/RSS-images/newsgator.gif" width='91' height='17' alt="Subscribe in NewsGator Online" /></a></li>
	</ul>
	<ul>
		<li><a href="" target='_blank'><img src="/images/RSS-images/msn.gif" width='91' height='17' alt='add our feed to your MSN subsciptions' /></a></li>
		<li><a href=""><img src="/images/RSS-images/aol.gif" width='92' height='18' alt="Add to My AOL" /></a></li>
	</ul>
	<div id='under_rss_icons'></div>
</div>

Notice the div id='under_rss_icons' in the above code - we have added a div directly below the RSS icon ul tags so that you may clear a float if used on the icons

Related Ads

Within the div id='related_ads_blocks' Our system will include the amount of related articles you specify in the admin panel. Each related article will be added as follows:

<div class='right_articles'>
	<img  /> - the image you specify in the admin section (defaults to the main image if you do not add more images)
	<p><a href=''>{The title of the related article}</a></p>
	<p>{The first paragraph of the related article}</p>
	<p class='more'><a href='{Link to the article}' title='{Articles title}'>read article > ></a></p>
</div>

Footer

The following is added to your footer element by our system:

<p>{disclaimer text if turned on in the admin panel}</p>
<p>Copyright © {year} <a href="{link to your parent company}" title="{Company hyperlink title text - from admin}" target="_blank">{Company Name - from admin}</a>     <a href='{link to your privacy policy}'>privacy policy</a></p>
<p>powered by <a href="http://www.articlesitemanager.net" title="powered by article site manager" target="_blank">article site manager ®</a></p> - this paragraph is not editable

Example HTML file

This is just one example of an html skin for article site manager, the variations are literally endless!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title></title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<link href="default.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div id="header">

			<div id="logo"></div>
			<div><a id="top_100"></a></div>
                        <p id="welcome_message"></p>
                        <div id="current_date"></div>
                        <h3 id="main_content_title"></h3>

			<div id="namebar">
				<h1 id="main_link_wrap"><a href="" id="main_page_link" title=""></a></h1>
				<p id="motto"></p>
			</div>

			<div id="menu">
				<ul>
					<li id="full_listing"></li>
					<li id="submit_article"></li>
					<li id="advertise"></li>
					<li id="links"></li>
					<li id="about_us"></li>
					<li id="contact_us"></li>
					<li id="site_map"></li>
					<li id="home"></li>
				</ul>
			</div>

		</div> <!-- end header div //-->

		<div id="wrapper">

			<div id="content">

				<div id="sidebar">

					<div id="search_field"></div>	
				
					<div id="videoblock"></div>

					<div id="topgoogle"></div>

					<div id="paid_ads"></div>

					<div id="rssfeeds"></div>			

					<div id="right_google" style="height: 60px; text-align: center;"></div>

					<h3 id="related_article_header">Related Articles:</h3>

					<div id="related_articles_blocks"></div>

				</div> <!-- end sidebar div //-->

				<div id="main">

					<div id="articleAdsense"></div>

					<div id="article_image"></div>

					<div id="articlevideo"></div>

					<div id="main_article_div"></div>

					<div id="bottom_google_ad"></div>

					<div id="rss_news_feeds">
						<h3 id="related_news_hdr"></h3>
					</div>

				</div> <!-- end main div //-->

			</div> <!-- end content div //-->

			<div style="clear: both;"> </div>
		
		</div> <!-- end wrapper div //-->

		<div id="footer">
		</div>
	</body>
</html>

Article Site Manager ^® is a registered trademark

application overview

site function controls

look and feel controls

article management

statistical functions

admin functions

admin panel screen shots

Skinning Your Article Site Manager Website