Ego One - Pure | Fresh | First
Would you like to react to this message? Create an account in a few clicks or log in to continue.

We're Moving. So, we've disabled new registrations on this forum. The forum will not officially be released until 8 PM Pacific Standard Time (Friday, Sept, 9th, 2010)~ http://www.ego-one.net/

View previous topic View next topic Go down  Message [Page 1 of 1]

Jalokim

Jalokim
Manager
Understanding FM template editing ... part 1 2poxxz5
This is the first part of a series of quick beginner walkthroughs in the lovely world of template editing. Get a comfy pillow and prepare to learn.


Before we begin, I'll try to make this walkthrough as simple as possible and use some easy to understand examples.
BUT ... all this information will be useless if you do not know anything about HTML or CSS.
HTML and CSS is easy to learn and understand... and as webmasters on your forumotion boards its vital to know a thing or two about web languages ... especially if you have a template editing active board.

I promise you, if you had basic HTML skills you'd be able to create all that I've done on ego-one yourselves!

If you don't know what href is and how to link an image... I think there is no sense reading on. Come back later once you got the tools of the trade.
Suspect


Step1 : Use what ego has already offered

Variables List

I prepared a basic variables list for the index_body template a long while ago.
It holds some of the key elements like for example, how to hide elements from guests or members.

Take a moment to check the list and see what the variables look like and what they do.


Step2 : Basic understanding of templates

The templates may look scary at first... with their PHP like { fancy brackets } but the fact of the matter is that the templates where made available for the public so that normal grey users can customise it.

There are 2 types of codes in general
the bracket codes ...
for example
Code:
{index}
and comment codes
for example
Code:
<!--- END USER_AUTH -->



The comment codes come in pairs ... there will always be a < --BEGIN and a < --END .
If you do not close these tags properly you will experience problems.

In general all you need to know is already in the codes name... for example:
Code:
<!-- BEGIN switch_user_logged_in -->
<!-- END switch_user_logged_in -->


take a step back and think. switch user logged in. So switch item (div) for logged in users.

The above code shows things for logged in members.
Anything between the < begin and the < end part will be invisible to guests

lets test it out!

Go to your admin panel-> display-> templates -> general -> index_box (edit the template)

at the very top before:
Code:
<div class="pun-crumbs
type this:

Code:
<!-- BEGIN switch_user_logged_in -->
<div>Hello registered user</div><!-- END switch_user_logged_in -->


Save and publish your template.
Refresh your forum and you'll see that at the top of your page, exactly above your forum crumbs1 you'll see your message.

Lets try this for guests now.

Go back to your template you just edited.
and before the code you pasted just now paste this one:
Code:
<!-- BEGIN switch_user_logged_out -->
<div>OMG you are not logged in!</div>
<!-- END switch_user_logged_out -->


Save and publish your template.
Now check your forum ... log out and you will see that you'll see the OMG you are logged out text ... but you wont see the Hello registered user text.


AS you can see the codes are easy to decipher.
Use the variables list I provide to help you.


The bracket code are identical to understand.
These are the working codes... they do the stuff... the comment codes activate the bracket codes.

for example we have this code:
Code:
<a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a>

As we know from basic HTML ... a href is a link. The link has to be in quotation marks \\\\"\\\\"
now U_MARK_READ is the link to \\\\"mark all forums as read\\\\".
Why does it have the brackets around it?

Well since there are millions of forums it be hard to manually add everyones address into each link. So this is a PHP array. it is filled automatically with your personal http link to your site and its mark its forum read link.
same goes for L_MARK_FORUMS_READ ...
since there is a couple language versions on forumotion its easier to create a PHP array with a set definition of languages. depending on your forum language the PHP automatically picks the correct translation of mark your forums as read.


Step3 : Everything is placed according to its order on the live forum

What this means is WYSIWYG (what you see is what you get)
The templates are ordered exactly as they appear on the forum itself.

For example:
Code:
<a href="{U_INDEX}"  id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

                  <!-- BEGIN switch_h1 -->
                  <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>
                  <!-- END switch_h1 -->

                  <!-- BEGIN switch_desc -->
                  <p id="pun-desc">{switch_desc.SITE_DEscriptION}</p>
                  <!-- END switch_desc -->
               </div>
               <div id="pun-head">
                  <div id="pun-navlinks" style="margin-right: -12px;">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>

AS we can see U_INDEX is the link to your forum
LOGO - is your forum banner
MAIN_SITENAME -is your title
DEscriptION - is your forums description
GENERATED_NAV_BAR


if you look at your forum you'll see that it has its logo with a link to your forum, and your site description and title.
under it the navbar.

Everything is in order.
whats under the navbar? the crumbs then the forum body, then the who is online , then the footer.

though the templates are split they will always be in order according to WYSIWYG.



This concludes part1 of understanding templates.
Use the variable codes and using HTML knowledge try to create some new areas... some visible only to guests others only to members.

and stay tuned for more parts coming soon.



____________________________________________
1 - crumbs = crumbs are a quick stacking navigation.
example: Ego One - Pure | Fresh | First » Official » Forum1





Sanket

Post Mon May 17, 2010 9:48 pm by Sanket

Great Information Wink

iJerick

Post Tue May 18, 2010 10:12 am by iJerick

Thanks..

SYKO

Post Tue May 18, 2010 1:38 pm by SYKO

great for beginner Template Editor. Smile

thanks Jalo, I'm waiting more advance parts. Smile

avatar

Post Tue Jun 15, 2010 1:28 pm by Christos

interesting post Wink

Anonymous

Post Tue Jun 15, 2010 6:25 pm by Guest

Nice one miko Smile

Death the Kid

Post Mon Aug 30, 2010 3:25 am by Death the Kid

Very interesting, thanks for the info Surprised

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum




Site powered by Forumotion
Copyright 2006-2013 | JalokimGraphics | Ego-One
<!-- <script type="text/javascript"> var vglnk = { key: '0d80ae9fe71cec9484f682bd59232f9e' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = '//cdn.viglink.com/api/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script> <div id="Forumactif_Video"></div> <script type="application/javascript"> //<![CDATA[ var slmadshb = slmadshb || {}; slmadshb.que = slmadshb.que || []; slmadshb.que.push(function() { slmadshb.display("Forumactif_Video"); }); //]]> </script> <script type="text/javascript">window._taboola = window._taboola || []; _taboola.push({flush: true});</script> <!-- BEGIN 1425605 - etoxic - FR - CDB - PCK - sticky footer - 728x90--> <div id="criteo_sticky"> <script type="text/javascript"> function CreateStickyFooterContainer(e) { var t = document.getElementById(e); t.style.position = "fixed", t.style.zIndex = "2147483646", t.style.bottom = "0", t.style.left = "0", t.style.padding = "0", t.style.borderColor = "rgb(196, 196, 196)", t.style.width = "100%", t.style.backgroundColor = "rgba(245, 245, 245, 0.54902)", t.style.borderStyle = "solid", t.style.borderWidth = "1px"; var o = document.createElement("a"); t.appendChild(o), o.style.backgroundColor = "rgb(221, 221, 221)", o.style.backgroundImage = "url('//static.criteo.net/images/criteo/publishertag/close.png')", o.style.backgroundRepeat = "no-repeat", o.style.backgroundPosition = "center", o.style.display = "block", o.style.position = "absolute", o.style.left = "0", o.style.top = "-24px", o.style.width = "23px", o.style.height = "24px", o.style.borderBottomColor = "#6d6c71", o.style.cursor = "pointer", o.onclick = function() { t.style.display = "none" }; var l = document.createElement("div"); l.id = "cto_sticky", l.style.margin = "0 auto", l.style.display = "table"; t.appendChild(l); return l.id }; Criteo.events.push(function() { if(!isMobile){ Criteo.Passback.RenderAd(CreateStickyFooterContainer("criteo_sticky"), function(){ var slotid = "criteo_sticky"; var div = document.getElementById(slotid); div.removeAttribute("style"); }); } else{ var slotid = "criteo_sticky"; var div = document.getElementById(slotid); div.style.display = "none"; } }); </script> </div> <!-- END CRITEO TAG --></body></html><strong><a href="https://www.forumotion.com/" target="_blank">Free forum</a></strong>&nbsp;|&nbsp;<span class="gensmall">&copy;</span><a href="https://www.forumotion.com/phpbb" target="_blank">phpBB</a>&nbsp;|&nbsp;<a name="bottom" href="https://help.forumotion.com/" target="_blank">Free forum support</a>&nbsp;|&nbsp;<a href="/abuse?page=%2Ft1386-understanding-fm-template-editing-part-1&amp;report=1" rel="nofollow">Report an abuse</a>&nbsp;|&nbsp;<strong><a href="https://www.forumotion.com" target="_blank">Forumotion.com</a></strong>Derp