Forum moderator: bigblog  
uCoz Community » For Webmasters » Design Customization » Help on Template Builder (How to Create a Skeleton ?)
Help on Template Builder
Sunny
Posts: 9296
Reputation: 456

Message # 1 | 10:47 AM
How to Create a Skeleton


When you open a Templates Builder section you can see the following options:
1. Rules for creating a skeleton
2. Sample skeleton
3. Skeletons of standard designs
4. You're using default style sheet of the design #, or Personal style sheet is in use


Those are the links to definite pages of the Control Panel. #1 and #2 are pop-up windows, # 3 opens a drop-down list with the links to standard skeletons (if you click on one of them it will be loaded to the editing area). And finally, #4 will open a pop-up window with the link to the CSS file.


Let’s get back to item 2 (sample skeleton). There are three buttons at the top of the opened window – Skeleton code, View, Edit. Active button is in a pale color, it is Skeleton code by default. When you click View you’ll see the page as it will look. We can view the appearance of the main site page (and main module pages), forum and pop-up windows. Pop-up windows are a user profile, poll results, a list of PMs etc. When you click on Edit the skeleton code will be copied to the editing area of the Templates Builder. Below are the checkboxes by means of which you can change the design either of the whole website or of some definite module(s): just remove the checkmarks for those modules which you don’t want to change. Under the checkboxes you can see the following buttons:

1. File Manager
2. View
3. Create templates (after you have clicked on this button the templates of the marked modules will change)
4. Additional options
a) Add to designs set (Addition of the created design to the set of default designs. This design will be used when restoring templates)
b) Archive the skeleton (Creation of an archive which will contain skeleton code file, style sheets file, files of images, setup manual file for installation of the skeleton on any other uCoz site)
c) Save skeleton (Saving skeleton code in a file to continue its configuring in future (backup))

Sometimes your code may contain mistakes then the system will warn you before creating an archive. The archive will be saved together with a special error file where all confusing places of the code will be listed.

If you have already edited uCoz templates then you are familiar with the principles of their structure and with the special uCoz codes. You can use in the skeleton only those codes that are working in all templates. You’ll have to paste all codes, specific for certain modules, manually. Except the standard codes, special skeleton codes are used.


The list of special Templates Builder codes:

1. [TITLE] – page name (for the tag)
2. [CSS_URL] – URL of the CSS file
3. [RSS_URL] – URL of the RSS feed (for the modules that have it)
4. [MODULE_PAGE_URL] – URL of the main module/section page (for the modules that have it)
5. [MODULE_NAME] – module name
6. [CATS_TITLE] – name of the block with the module categories list
7. [CATEGORIES] – list of the module categories (for the modules that have them)
8. [CALENDAR_TITLE] – name of the block with the calendar of additions
9. [CALENDAR] – calendar of additions (for the modules that have it)
10. [SEARCH_TITLE] – name of the search block
11. [SEARCH_FORM] – search block for searching module entries (for the modules that have this feature)
12. [BODY] – main part of the page (list of entries etc.)


When installing a skeleton on the site the Templates Builder will automatically replace those codes by the equivalent standard codes, specific for each module. In the general case [BODY] is not equal to $BODY$. For example, you’ll get the following code instead of [BODY] on the main page:

Code
<table border="0" cellpadding="5" cellspacing="0" width="100%" class="tabbody">
<tr>
<td class="tdbody"><a href="$HOME_PAGE_LINK$">Main page</a> </td></tr>
<tr>
<td class="tdbody1">
%IF($ADD_NEWS_LINK$)%<div style="text-align:right;padding-bottom:3px;">[ <a href="$ADD_NEWS_LINK$">Add new entry</a> ]</div>%ENDIF%
$LAST_NEWS$
</td>
</tr>
</table>


And for the File Catalog (the source code is the same):

Code
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="80%"><a href="$HOME_PAGE_LINK$">Main</a> » Files</td>
<td align="right" style="white-space: nowrap;">%IF($ADD_ENTRY_LINK$)%[ <a href="$ADD_ENTRY_LINK$">Add new entry</a> ]%ENDIF%</td>
</tr>
</table>
<hr />
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="60%">Total entries in catalog: <b>$NUM_ENTRIES$</b>%IF($NUM_SHOWN$)%
Shown entries: <b>$NUM_SHOWN$</b>%ENDIF%</td>
<td align="right">%IF($PAGE_SELECTOR$)%Pages: $PAGE_SELECTOR$%ENDIF%</td>
</tr>
</table>
<hr />
$BODY$
%IF($PAGE_SELECTOR1$)%<div style="text-align:center;">$PAGE_SELECTOR1$</div>%ENDIF%
</td>
</tr>
</table>


And for the Forum you’ll get just ..., ... and the following code in between:

Code
<table border="0" cellpadding="0" height="30" cellspacing="0" width="100%" align="center">
<tr>
<td align="right">[      
<a class="fNavLink" href="$RECENT_POSTS_LINK$" rel="nofollow">Recent messages</a> •      
<a class="fNavLink" href="$MEMBERS_LIST_LINK$" rel="nofollow">Members</a> •      
<a class="fNavLink" href="$BOARD_RULES_LINK$" rel="nofollow">Forum rules</a> •      
<a class="fNavLink" href="$SEARCH_PAGE_LINK$" rel="nofollow">Search</a> •
<a class="fNavLink" href="$BOARD_RSS_LINK$" rel="nofollow">RSS</a> ]</td>
</tr>
</table>
$BODY$


The conditional operators for the Templates Builder also have unique features. They are of two types: ordinary %IF% %ELSE% %ENDIF% and {IF} ... {ENDIF}. The first type is described in the Control Panel. The second type is easy to understand: these codes are used for those parts of the code that will be displayed for certain modules only. The system knows itself what and where to display.

That is what you should know when working with the Templates Builder.

I'm not active on the forum anymore. Please contact other forum staff.
carloscompu
Posts: 246
Reputation: 1

Message # 76 | 12:06 PM
If this is it can i Continue my codes in an index
Is there a way posible that the module will read it

Its a code that I have to build for each user individualy until I find a way to make it work automatically
I know that even if i remove a user i will have to enter this index and find the exact user code and delete it
Its alot of work but I need it

Added (2013-01-05, 6:06 AM)
---------------------------------------------
Im having prob with a style sheet that im editing

Im using the same code on both website

cyberq.org
moviecube.do.am (new)

and the code works good on all the browsers in cyberq.org
but in moviecube it dont work on mozilla firefox

this is the style sheet code:
box-shadow: 40px 40px 40px #000;
-moz-box-shadow: inset -5px -5px 5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888
;padding-left:20px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;25px solid #ffffff;
border-bottom-left-radius: 15px;3px solid #75D6FF;
background: -moz-linear-gradient(top, #660000, #CC0000);
background: -webkit-linear-gradient(top, #660000, #CC0000);
background: -o-linear-gradient(top, #660000,#CC0000);
background: linear-gradient(top, #660000, #CC0000)}

Im just thinking is it because moviecube is not paid service?(Im still editing ,it will be payed and opened soon )

Or is it some other reason?

Because both webpage have the same code for the box class

Post edited by carloscompu - Saturday, 2012-11-10, 3:14 PM
Sunny
Posts: 9296
Reputation: 456

Message # 77 | 1:48 PM
carloscompu, actually, there is no such code on your new website, as well as the following
<link rel="alternate stylesheet" type="text/css" media="screen" title="CyberqMuros" href="http://cyberq.org/Cyberq_CSS.css" />


And please provide more info: what code it is, what it does, where it is written in the website code (number of the line).

I'm not active on the forum anymore. Please contact other forum staff.
carloscompu
Posts: 246
Reputation: 1

Message # 78 | 1:13 AM
Its on the line 74 of the style sheet on moviecube.do.am,Its an eBlock ,changes the style of the table block

I got this code from my older webste cyberq,org on the stylesheet line 102

Actually you are looking at the wrong page where the prob is
This page cyberq.org works perfectly ,I copied the same eblock code to my new website moviecube.do.am,but it dont work on all browsers like it does with cyberq

My question is Why it works on one page but not on the other?
Paradox
Old Guard
Posts: 3284
Reputation: 145

Message # 79 | 8:03 AM
carloscompu, are you using a <!DOCTYPE> on one site and not the other? This can sometimes be the case when referring the browser compatability.
Jack of all trades in development, design, strategy.
Working as a Support Engineer.
Been here for 13 years and counting.
carloscompu
Posts: 246
Reputation: 1

Message # 80 | 1:45 AM
Well i dont understand much about this code but Ill add the same doc to the new one and see

I paste the same doc on the new one
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


The only difrence is that the table got wider on bothe browsers
but the background color and borders dont show on mozilla only in chrome
sushan
Posts: 1
Reputation: 0

Message # 81 | 4:14 PM
i have a problem i want to enter on admin panel on control panel but that page i can't use how to open that page my page name is www.nagdaha.ucoz.com can you suggest some information cry
Sunny
Posts: 9296
Reputation: 456

Message # 82 | 5:46 PM
sushan, your website and its Control Panel load fine. Please describe the problem in more detail.
I'm not active on the forum anymore. Please contact other forum staff.
Ace6645
Posts: 1
Reputation: 0

Message # 83 | 4:47 AM
Ok. I want to use the background that I mad. How do i put that in? cry
Sunny
Posts: 9296
Reputation: 456

Message # 84 | 8:57 AM
Ace6645, provide the address of your website and the design number you are using.
I'm not active on the forum anymore. Please contact other forum staff.
opcrashme101
Posts: 1
Reputation: 0

Message # 85 | 2:10 PM
hello looking for help with my code

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>$SITE_NAME$ - $MODULE_NAME$</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?$META_DESCRIPTION$?>
<?$META_KEYWORDS$?>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script type="text/javascript">
var e = ("article, aside, details, figcaption, figure,
footer, header, main, nav, section, summary").split(',');
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]-->
<link type="text/css" rel="StyleSheet" href="/.s/src/css/1051.css" />
</head>

<body>
$ADMIN_BAR$
<script type='text/javascript' src='/.s/t/1051/template.min.js'></script>

<script>
jQuery(function(){

jQuery('#camera_wrap').camera({
height: '390px',
loader: 'none',
pagination: true,
thumbnails: false,
navigation: false,
hover: false,
opacityOnGrid: false,
overlayer: true,
playPause: false,
time: 30000,
imagePath: '/.s/t/1051/'
});

});
</script>

<header class="header">
<div class="logo-row clr">
<div class="cont-wrap">
<a class="logo-b" title="Home" href="$HOME_PAGE_LINK$">
<span class="logo-name"><!-- <logo> -->My site<!-- </logo> --></span>
<br>
<span class="logo-slogan">$SITE_NAME$</span>
</a>

<div class="welcome-b clr">
<div class="welcome-inf">
<span>$WDAY$, $DATE$,   $TIME$  </span>
<span>
<?if($USER_LOGGED_IN$)?>
<!--<s5200>-->Logged in as<!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a>
<?else?>
<!--<s5212>-->Welcome<!--</s>-->, <b>$USERNAME$</b>
<?endif?> |
<?if($RSS_LINK$)?>
<a href="$RSS_LINK$" title="RSS">RSS</a>
<?endif?>
</span>
</div>
<div class="welcome-buttons">
<a title="Log out" href="$LOGOUT_LINK$" class="btn-lnk btn-lnk-home"><!--<s5176>-->Home<!--</s>--></a>

<?if($USER_LOGGED_IN$)?>
<a title="Log out" href="$LOGOUT_LINK$" class="btn-lnk enter"><!--<s5164>-->Log out<!--</s>--></a>
<a title="My profile" href="$PERSONAL_PAGE_LINK$" class="btn-lnk dark-gr"><!--<s5214>-->My profile<!--</s>--></a>
<?else?>
<a title="Log In" href="$LOGIN_LINK$" class="btn-lnk enter"><!--<s3087>-->Log In<!--</s>--></a>
<a title="Sign Up" href="$REGISTER_LINK$" class="btn-lnk dark-gr"><!--<s3089>-->Sign Up<!--</s>--></a>
<?endif?>
</div>
</div>
</div>

</div>

<nav class="nav-row clr">
<div class="cont-wrap">
<?if($SEARCH_FORM$)?>$SEARCH_FORM$<?endif?>
<!-- <sblock_nmenu> -->
<?if($NMENU_1$)?>
<div class="show-menu"></div>
<div class="main-menu"><?if($NMENU_1$)?><!-- <bc> -->$NMENU_1$<!-- </bc> --><?endif?></div>
<?endif?>
<!-- </sblock_nmenu> -->
</div>
</nav>
</header>

<!-- </header> -->
<?if($URI_ID$="page1")?>
<div class="slider-row">
<div class="cap"></div>
<div class="cont-wrap">
<div class="slider pattern" id="camera_wrap">
<div data-src="/.s/t/1051/slide1.jpg">
<div class="camera_caption fadeFromLeft">
<h2 class="slide-ttl">Lorem Ipsum is simply</h2>
<div class="slide-descr">printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to</div>
<a href="#" class="btn-lnk dark-gr">watch online</a>
</div>
<div class="fadeIn camera_effected slide-inner-b"></div>
</div>
<div data-src="/.s/t/1051/slide2.jpg">
<div class="camera_caption fadeFromLeft">
<h2 class="slide-ttl">Lorem Ipsum is simply</h2>
<div class="slide-descr">printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to</div>
<a href="#" class="btn-lnk dark-gr">watch online</a>
</div>
<div class="fadeIn camera_effected" style="position: absolute;"></div>

</div>
</div>
</div>

<div class="cap"></div>
</div>
<?endif?>
<section class="middle clr">
<!-- <middle> -->

<div class="cont-wrap">

<section class="content">
<!-- <body> -->$CONTENT$<!-- </body> -->
</section>

<aside class="sidebar">

$GLOBAL_CLEFTER$

</aside>

</div>

<!-- </middle> -->
<div class="soc-row">
<ul class="soc-list">
<li class="soc-l-item"><a href="" class="soc-link facebook">facebook</a></li>
<li class="soc-l-item"><a href="" class="soc-link twitter">twitter</a></li>
<li class="soc-l-item"><a href="" class="soc-link linkedin">linkedin</a></li>
<li class="soc-l-item"><a href="" class="soc-link rss">rss</a></li>
</ul>
</div>
<div class="cap"></div>
</section>

$GLOBAL_BFOOTER$

<div style="display:none;">

</div>

</body>
</html>

im trying to add more sliders to my site not sure where the code starts and stops please help
Post edited by opcrashme101 - Monday, 2016-06-06, 2:11 PM
uCoz Community » For Webmasters » Design Customization » Help on Template Builder (How to Create a Skeleton ?)
Search: