Basic Theme Design - Right To Le
Basic Theme Design - Right To
Left Layout
In Basic Theme Design tutorial, we
learned how to modify or design a theme for YetAnotherForum. Now in this part we
will talk about themes for right to left (RTL) languages such as Persian or
Arabic.
Based on the design of
YetAnotherForum the main layout of all pages is controlled by the file
"Default.aspx", So if you simply make this file RTL you will automatically
change the layout of the whole forum without even touching the theme. You can do
this by opening the file in an editor such as Visual studio or expression web or
Front Page, and then Select page properties and in page direction select "Right
To Left". If you don't have such editors you can simply open the file by Notepad
and change the line as follow:
Original file:
<%@ Page Language="C#"
AutoEventWireup="true" %>
<script runat="server">
public void Page_Error( object sender, System.EventArgs e )
{
Exception x = Server.GetLastError();
YAF.Classes.Data.DB.eventlog_create( forum.PageUserID, this, x );
YAF.Classes.Utils.CreateMail.CreateLogEmail( x );
}
</script>
<!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 id="YafHead" runat="server">
<meta name="Description" content="A bulletin board system written in ASP.NET" />
<meta name="Keywords" content="Yet Another Forum.net, Forum, ASP.NET, BB,
Bulletin Board, opensource" />
<title>This title is overwritten</title>
</head>
<body>
<img src="~/images/YAFLogo.jpg" runat="server" alt="YetAnotherForum" id="imgBanner"
/><br/>
<form id="form1" runat="server" enctype="multipart/form-data">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True"
/>
<YAF:Forum runat="server" ID="forum"></YAF:Forum>
</form>
</body>
</html>
RTL file
<%@ Page Language="C#"
AutoEventWireup="true" %>
<script runat="server">
public void Page_Error( object sender, System.EventArgs e )
{
Exception x = Server.GetLastError();
YAF.Classes.Data.DB.eventlog_create( forum.PageUserID, this, x );
YAF.Classes.Utils.CreateMail.CreateLogEmail( x );
}
</script>
<!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"
dir="rtl">
<head id="YafHead" runat="server">
<meta name="description" content="A bulletin board system written in ASP.NET" />
<meta name="keywords" content="Yet Another Forum.net, Forum, ASP.NET, BB,
Bulletin Board, opensource" />
<title>This title is overwritten</title>
</head>
<body>
<img src="~/images/YAFLogo.jpg" runat="server" alt="YetAnotherForum" id="imgBanner"
/><br/>
<form id="form1" runat="server" enctype="multipart/form-data">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True"
/>
<YAF:Forum runat="server" ID="forum"></YAF:Forum>
</form>
</body>
</html>
Now if you save and run the forum,
you see that the forum is now Right to left. For the theme we created in the
previous section the forum will look like this:
So far so good. But if you look
carefully, you see that some items are not shown properly due to the fact that
they have been for English language with LTR layout. What about them?
well... again it is time to play with
CSS and images to fix these problems. For example the Poll progress bar is
reverse:
You can fix this by changing the name
of the left and right image of the poll. The files which control the left and
right images are "vote_lcap.gif" and "vote_Rcap". You can simply
rename "vote_lcap.gif"
to "vote_Rcap.gif" and "vote_Rcap.gif" to "vote_lcap.gif". Now it is fixed:
As I noticed there are just a very few problems like this ,which even you can
simply ignore. But anyway.. they are for good theme designers :D
Good
Luck
Touradg
(forum name herman_herman)
Attachments:
MyTheme RTLMyTheme
RTL
Article in PDFArticle
in PDF