Morgain
Well-known member
If you're doing small stuff you probably have instructions from the forum here on which template to work on.
Find your template by opening your admin area (admincp) and click the Templates area.
PASTE the name of the template in the box on the top bar on that page.
In the template you can always test for where to put something by putting in
TEST TEST TEST
then see where it shows up!
Do not use punctuation like
commas , or " exclamation marks ! question marks ? hyphen - underscore _ or a dot .
These get code dangeroudly excited. If you just use letters it won't damage anything.
Basic safety rules foir tweaking (adding small bits of code).
1. Code has to be EXACT. It is cruel and stupid in its reactions if you make one dot or one bracket wrong. DO NOT RUSH.
But you rarely cause disaster of you follow these rules.
2. Do one tiny item at a time. Check the public view (frontend). Not OK?
back in the template use keyboard CTRL+Z to Undo, then try again.
3. If you can, allow 2 empty lines of space above AND below your change so it is easy to find when you return - do NOT rely on memory.
4. Never delete the code you see.
You may need it again if your change does not work. Also if you get help your helper will find it useful.
Use comment brackets instead.
Put <!-- before the part you do not want. Put --> after it.
This hides or disables whatever is in that bracet. It cannot be seen in public (frontend) and the system cannot use it.
In a css list put /* before and */ after the part you want to disable.
If you MUST delete because it is too mixed in with the code, keep a copy in a document log so as to replace it later if necessary.
4. Learn to respect <xen: if> and <div> brackets.
These are brackets that MUST match a partner. The partner will be further down.
If you put code in the wrong place so these brackets are disturbed you get strange results. If you follow the basic rules above you can fix it. But it's faster for you when you do not need to fix it.
<div xxx> matches the NEXT </div> you see.
Disturbing this marriage can make a whole page go crazy!
<xen: if xxx> matches the NEXT </xen: if> you see.
In the same family is -
<xen:else> matches <xen:else />
<xen:foreach> matches </xen:foreach>
5. Use comment code to LABEL what you do.
In 6 months you will not remember what you did. If it fights something else you add later you will not understand. Or you might want to remove this later. Or someone who comes to help or work with you will need to find it.
<!-- hides whatever you place after it until it reaches its partner bracket - but YOU can see it in the code. You CAN use punctuation inside this safe place. -->
<!-- example - MY SHOUTBOX -->
In a css list this might be /* SHOUTBOX DESIGN */
6. Keep a log - a brief diary of all changes. Then you can find it later.
I make lots of changes but I transferred them all to a new site in just over an hour because I keep a list, and use comment brackets in the templates.
Example part of my log record. I keep mine A-Z.
ARTICLES Addon installed - see waindigo in templates list
CATEGORY BARS See /* Jake Bunce*/ section in EXTRA.css
http://xenforo.com/community/threads/category-design-jake-bunce-tribute.22381/
SHOUTBOX Inserted in sidebar_online_users
Source www.MYSHOUTBOX.com
SIDEBAR Inserted in templates below:
<xen:sidebar>
<xen:include template="nodemenu" />
</xen:sidebar>
I have a list of around 12 templates here. "nodemenu" is my own template sidebar section which adds to the XF sidebar. See the link in my sig.
This forum is useful:
Styling and Customisation Questions
http://xenforo.com/community/forums/styling-and-customization-questions.47/
(also see Template Modifications for nice ideas)
Find your template by opening your admin area (admincp) and click the Templates area.
PASTE the name of the template in the box on the top bar on that page.
In the template you can always test for where to put something by putting in
TEST TEST TEST
then see where it shows up!
Do not use punctuation like
commas , or " exclamation marks ! question marks ? hyphen - underscore _ or a dot .
These get code dangeroudly excited. If you just use letters it won't damage anything.
Basic safety rules foir tweaking (adding small bits of code).
1. Code has to be EXACT. It is cruel and stupid in its reactions if you make one dot or one bracket wrong. DO NOT RUSH.
But you rarely cause disaster of you follow these rules.
2. Do one tiny item at a time. Check the public view (frontend). Not OK?
back in the template use keyboard CTRL+Z to Undo, then try again.
3. If you can, allow 2 empty lines of space above AND below your change so it is easy to find when you return - do NOT rely on memory.
4. Never delete the code you see.
You may need it again if your change does not work. Also if you get help your helper will find it useful.
Use comment brackets instead.
Put <!-- before the part you do not want. Put --> after it.
This hides or disables whatever is in that bracet. It cannot be seen in public (frontend) and the system cannot use it.
In a css list put /* before and */ after the part you want to disable.
If you MUST delete because it is too mixed in with the code, keep a copy in a document log so as to replace it later if necessary.
4. Learn to respect <xen: if> and <div> brackets.
These are brackets that MUST match a partner. The partner will be further down.
If you put code in the wrong place so these brackets are disturbed you get strange results. If you follow the basic rules above you can fix it. But it's faster for you when you do not need to fix it.
<div xxx> matches the NEXT </div> you see.
Disturbing this marriage can make a whole page go crazy!
<xen: if xxx> matches the NEXT </xen: if> you see.
In the same family is -
<xen:else> matches <xen:else />
<xen:foreach> matches </xen:foreach>
5. Use comment code to LABEL what you do.
In 6 months you will not remember what you did. If it fights something else you add later you will not understand. Or you might want to remove this later. Or someone who comes to help or work with you will need to find it.
<!-- hides whatever you place after it until it reaches its partner bracket - but YOU can see it in the code. You CAN use punctuation inside this safe place. -->
<!-- example - MY SHOUTBOX -->
In a css list this might be /* SHOUTBOX DESIGN */
6. Keep a log - a brief diary of all changes. Then you can find it later.
I make lots of changes but I transferred them all to a new site in just over an hour because I keep a list, and use comment brackets in the templates.
Example part of my log record. I keep mine A-Z.
ARTICLES Addon installed - see waindigo in templates list
CATEGORY BARS See /* Jake Bunce*/ section in EXTRA.css
http://xenforo.com/community/threads/category-design-jake-bunce-tribute.22381/
SHOUTBOX Inserted in sidebar_online_users
Source www.MYSHOUTBOX.com
SIDEBAR Inserted in templates below:
<xen:sidebar>
<xen:include template="nodemenu" />
</xen:sidebar>
I have a list of around 12 templates here. "nodemenu" is my own template sidebar section which adds to the XF sidebar. See the link in my sig.
This forum is useful:
Styling and Customisation Questions
http://xenforo.com/community/forums/styling-and-customization-questions.47/
(also see Template Modifications for nice ideas)
Happy tweaking!
.
