WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Forumotion Theme Changer!

Go to page : Previous  1, 2, 3, 4, 5, 6, 7  Next

View previous topic View next topic Go down  Message [Page 4 of 7]

1Accespted Forumotion Theme Changer! Tue Feb 02, 2010 8:17 pm

ankillien

ankillien
Administrator
Administrator
First topic message reminder :

Forumotion Theme Changer
Style sheet changer for Forumotion forums.

Hello Everyone Very Happy

I know, all Forumotion users want to have a theme changer or having multiple themes for their Forumotion forums. Here is a simple tutorial that will guide you to install a theme changer.

First of all, you need to go to get the JavaScript code which is provided by DynamicDrive.com. The JavaScript file is found on this page.


  • Navigate to your Admin Panel > Modules > HTML Page Management > Create New Page > Add the JavaScript code in the page and save it.

  • Navigate to Admin CP > Display > Templates > General > overall_header_new
    Find out this part in the template...
    Code:
    </head>

    Right before that you need to link the HTML page that you just created. You need to use the following code for that...
    Code:
    <script src="HTML PAGE URL HERE" type="text/javascript"></script>

  • Now you need to attach stylesheets Wink You can use the following code to link the stylesheets/themes.
    Code:
    <link rel="alternate stylesheet" type="text/css" media="screen" title="default" href="DEFAULT STYLE SHEET URL HERE" />

    <link rel="alternate stylesheet" type="text/css" media="screen" title="theme1" href="STYLE SHEET 1 URL HERE" />

    <link rel="alternate stylesheet" type="text/css" media="screen" title="theme2" href="STYLE SHEET 2URL HERE" />

    You can add as many stylesheets/themes as yo want. Just update the title attribute with increasing number. Like if you are going to add one more stylesheet, the code will look like this...
    Code:
    <link rel="alternate stylesheet" type="text/css" media="screen" title="theme3" href="STYLE SHEET 3 URL HERE" />
    Notice the value title attribute was changed to theme3.

    Remember that the <link...> tag for attaching stylesheet must go before the <script...> tag which you used to link the JavaScript code.

    Note : You can add as many style sheets as you want but don't forget to put link to your default style sheet too so that your members can change back to normal style as well. Title for default styleheet should be set to 'default'.

  • Now you need to create radio buttons with with the members can choose style they like. Here is the HTML code for that which should be placed anywhere inside the body tag. You can put it in footer or on top of the page. We will put it on top of the page. Add the following code right after the <body> tag starts in the template code.
    Code:
    <form id="switchform">

    <!-- Choose theme 1 -->
    <input type="radio" name="choice" value="default" onClick="chooseStyle(this.value, 60)">Default Theme<br />

    <!-- Choose theme 2 -->
    <input type="radio" name="choice" value="theme1" onClick="chooseStyle(this.value, 60)">Theme 1 Name<br />

    <!-- Choose theme 3 -->
    <input type="radio" name="choice" value="theme2" onClick="chooseStyle(this.value, 60)">Theme 2 Name
    </form>

    Notice the value attribute in the codes. It should be corresponding to the title of the respective theme.

  • Its almost done now. Save the template, publish the template and see if it works.


Hope the tutorial is simple enough to make sense to you Smile


Thank You Very Happy

The credit for the JavaScript and HTML codes goes to DynamicDrive.com. To learn more on how this code works and how to customize it, please visit here.


How to know the URL of desired style sheet?
Spoiler:

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.



Last edited by ankillien on Sun Feb 21, 2010 8:38 pm; edited 2 times in total

76Accespted Re: Forumotion Theme Changer! Wed Apr 07, 2010 5:45 am

Light


Registered Member
Registered Member
yea the drop meni works find thanks for all the help Laughing

77Accespted Re: Forumotion Theme Changer! Wed Apr 07, 2010 5:45 am

ecatodarcus


Registered Member
Registered Member
ok then! my fault! i am glad i helped you!

78Accespted Re: Forumotion Theme Changer! Thu Apr 22, 2010 4:54 am

f123123


Registered Member
Registered Member
I'm stuck at step 2 lol I can't seem to find the template thing Surprised.

79Accespted Re: Forumotion Theme Changer! Thu Apr 22, 2010 9:02 am

ankillien

ankillien
Administrator
Administrator
f123123 wrote:I'm stuck at step 2 lol I can't seem to find the template thing Surprised.

Hello,

Template editing is only available in phpBB2 and punBB versions.
If you are using other version, you won't be able to install theme changer.

80Accespted Re: Forumotion Theme Changer! Fri Apr 23, 2010 4:09 am

f123123


Registered Member
Registered Member
My theme version says its phpbb2 o.O

81Accespted Re: Forumotion Theme Changer! Fri Apr 23, 2010 8:48 am

ankillien

ankillien
Administrator
Administrator
What part you can't find in templates?

82Accespted Re: Forumotion Theme Changer! Sat Apr 24, 2010 5:25 am

f123123


Registered Member
Registered Member
I go to display but I can't find templates any where on the page :O

83Accespted Re: Forumotion Theme Changer! Sat Apr 24, 2010 9:19 am

ankillien

ankillien
Administrator
Administrator
Note that only founder admin can access templates. If you are not the founder of the forum, you can't edit/see the templates.

84Accespted Re: Forumotion Theme Changer! Sat Apr 24, 2010 9:20 am

f123123


Registered Member
Registered Member
ah I see tyvm I'll have to get into contact with the admin.

85Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 12:18 am

private bob4


Registered Member
Registered Member
This doesn't work for some reason....
My forum is http://admincommunity.forumotion.com/index.htm
When I choose a radio button, nothin happens.

86Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 11:51 am

Behavior???


Registered Member
Registered Member
I dont know how to upload my stylesheets? I registerd a account in bravehost.com and I have all my CS saved in the desktop, now what dod I do to upload it?

http://www.thedungeons.info

87Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 12:53 pm

Sanket

Sanket
Administrator
Administrator
Behavior??? wrote:I dont know how to upload my stylesheets? I registerd a account in bravehost.com and I have all my CS saved in the desktop, now what dod I do to upload it?

Which are the skins on hitskin.com that you want to add ?

http://www.webartzforum.com

88Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 1:26 pm

Behavior???


Registered Member
Registered Member
http://pa.hitskin.com/search-a-skin/hogwarts--153448.htm

http://st.hitskin.com/search-a-skin/hogwarts-123-148641.htm

http://en.hitskin.com/search-a-skin/hogwarts-by-hogwartsforumturkproforumcom-116414.htm

http://en.hitskin.com/?afolder=theme&id=142885

I checked using the CSS grabber, but then when I publish the changes I made to my ACP, it still doesnt show up!

I tried adding it in the header, but then when I publish and the results donot appear, but then when I again check the header section, it seems that the default value gets back and the changes I made have gone
please verify this too

http://www.thedungeons.info

89Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 3:31 pm

Sanket

Sanket
Administrator
Administrator
http://your_forum_address/No-ltr.css

Replace the No with these numbers.
153448
148641
116414
142885

http://www.webartzforum.com

90Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 3:31 pm

Behavior???


Registered Member
Registered Member
I tried adding it in the header, but then when I publish and the results donot appear, but then when I again check the header section, it seems that the default value gets back and the changes I made have gone

http://www.thedungeons.info

91Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 3:37 pm

Sanket

Sanket
Administrator
Administrator
Whats your forum address?

http://www.webartzforum.com

92Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 8:50 pm

Behavior???


Registered Member
Registered Member
http://www.thedungeons.info

http://www.thedungeons.info

93Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 9:36 pm

ankillien

ankillien
Administrator
Administrator
Behavior??? wrote:I tried adding it in the header, but then when I publish and the results do not appear, but then when I again check the header section, it seems that the default value gets back and the changes I made have gone

You mean the templates are not working?
Try making other small changes in any templates and see if they save the changes. If they don't there is a problem with your templates or Forumotion Rolling Eyes

94Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 10:19 pm

Behavior???


Registered Member
Registered Member
I checked by that small changes, and its working!

http://www.thedungeons.info

95Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 10:20 pm

ankillien

ankillien
Administrator
Administrator
hmm..
Then you might have done something wrong when putting things together for theme changer. Please recheck the codes that you put there.

96Accespted Re: Forumotion Theme Changer! Mon Jun 07, 2010 10:22 pm

Behavior???


Registered Member
Registered Member
This is what i have put there

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" xmlns="http://www.w3.org/1999/xhtml"><link rel="alternate stylesheet" type="text/css" media="screen" title="default" href="http://dungeons.forumotion.com/156742-ltr.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme1" href="http://dungeons.forumotion.com/156742-ltr.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="theme2" href="http://dungeons.forumotion.com/142885-ltr.css" />
    <script src="http://www.thedungeons.info/Javadynamic-h19.htm" type="text/javascript"></script>
<head>
   <!-- BEGIN meta_emulate_ie7 -->
   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
   <!-- END meta_emulate_ie7 -->
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   {META_FAVICO}
   {META}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
   <!-- BEGIN switch_ticker -->
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <!-- END switch_ticker -->
   <script type="text/javascript">
   //<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;
   <!-- END switch_login_popup -->
   //]]>
   </script>

   {GREETING_POPUP}
   <!-- BEGIN hitskin_preview -->
   <style type="text/css">
   #hitskin_preview {
      margin: 0; padding: 0;
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 65px;
      background: url('http://2img.net/i/fa/hitskin/hitskin_bar.png') repeat-x left -15px;
      color: #fff;
   }
   * html #hitskin_preview { /* Fix for IE6 since it doesn't implement fixed positionning */
      position: absolute;
      top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
      z-index: 2;
      background: transparent url('http://2img.net/i/fa/hitskin/hitskin_bar-ie6.gif') repeat-x left -15px;
   }
   * html { /* Gunlaug's Speed fix for the above positionning fix. Sorry for the fix for the fix */
    background: #fff url(foo) fixed;
    }
   #hitskin_preview h1 {
      float: left;
      margin: 3px 0 0 0;
      padding: 0 0 0 10px;
      font: italic normal 25px Arial,sans serif;
      color: #fff;
   }
   #hitskin_preview h1 img {
      vertical-align: middle;
   }
   #hitskin_preview em {
      color: #7CBA2C;
      font-weight: bold;
   }
   #hitskin_preview a {
   color: #fff;
   }
   #hitskin_preview a:hover {
   text-decoration: underline;
   }

   #hitskin_preview .content {
      text-align: right;
   }
   #hitskin_preview .content p {
      margin: 4px 1em 0px 1em;
      font-size: 13px;
      line-height: 1.8em;
      color: #fff;
      font-weight: bold;
   }
   #hitskin_preview .content p span {
      font-weight: normal;
      font-size: 0.8em;
   }
   body {
      margin-top: 40px !important;
   }
   {hitskin_preview.HITSKIN_RTL_CSS}
   </style>
   <!-- END hitskin_preview -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <td align="center" width="100%" valign="middle">
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </td>
                  <!-- END switch_logo_left -->

                  <!-- BEGIN switch_logo_center -->
                  <td align="center" width="100%" valign="middle">
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a><br />
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}</span><form id="switchform">

<!-- Choose theme 1 -->
<input type="radio" name="choice" value="default" onClick="chooseStyle(this.value, 60)">Default Hogwarts Theme<br />

<!-- Choose theme 2 -->
<input type="radio" name="choice" value="theme1" onClick="chooseStyle(this.value, 60)">Hogwarts Theme-2<br />

<!-- Choose theme 3 -->
<input type="radio" name="choice" value="theme2" onClick="chooseStyle(this.value, 60)">Hogwarts Theme-3
</form>
                  </td>
                  <!-- END switch_logo_center -->

                  <!-- BEGIN switch_logo_right -->
                  <td align="center" width="100%" valign="middle">
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </td>
                  <td>
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                  </td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->

Now its working, but then again only those buttons appear, its not bringing the desired result though!

http://www.thedungeons.info

97Accespted Re: Forumotion Theme Changer! Thu Jul 22, 2010 4:15 am

Aiko


Registered Member
Registered Member
this is not working for me Mad

98Accespted Re: Forumotion Theme Changer! Fri Jul 23, 2010 10:42 pm

Faz


Registered Member
Registered Member
I got it to work, but there is no way of changing the banner or nav icons?

99Accespted Re: Forumotion Theme Changer! Fri Jul 23, 2010 11:01 pm

ankillien

ankillien
Administrator
Administrator
@Aiko, where are you stuck at? It should work if you have added the codes correctly.

@Faz, unfortunately, there is no way. This theme changer only changes the CSS so it won't change the xHTML part.

100Accespted Re: Forumotion Theme Changer! Fri Jul 23, 2010 11:16 pm

Faz


Registered Member
Registered Member
Ok, thanks anyways for the great tutorial!

101Accespted Re: Forumotion Theme Changer! Sat Jul 24, 2010 10:19 am

Faz


Registered Member
Registered Member
Sorry, i hate to double post, but is there anything i can do do make my theme changer load other themes without the old background loading in the background, then going to the theme's current background?

Sponsored content


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

Go to page : Previous  1, 2, 3, 4, 5, 6, 7  Next

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Forumotion Theme Changer!

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