[EN] Styles FAQ

[Marc]

Customization:

proFormell 1.2.0 - 1.2.2:

• [How To] Remove the search box and add a search link on the navbar
• [How To] Remove the border from proFormell
• [How To] Make proFormell Auto-Width

proFormell 1.0.x:

• [How To] Remove the search box and add a search link on the navbar
• [How To] Adjust the width of proFormell
• [How To] Integrate proFormell into Joomla

No guarentee on any of these edits.

[Marc]

[How To] Remove the search box and add a search link on the navbar:

Open overall_header.html

Find:

Code: Alles auswählen

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
         <div id="search-box">
            <form action="{U_SEARCH}" method="post" id="search">
            <fieldset>
               <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
               <input class="button2" value="{L_SEARCH}" type="submit" /><br />
               <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
      <!-- ENDIF -->

Delete it

Find:

Code: Alles auswählen

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

Add after:

Code: Alles auswählen

<li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH_EXPLAIN}">{L_SEARCH}</a></li>

That should do it.

[Marc]

[How To] Adjust the width of proFormell:

Since the whole board is a fixed with, the header background is also fixed. It is an image with the exact width. If you use a different width you either have to use a different image or modify header_bg.png.

For changing the width you need to change several things:

Open colours.css
Find:

Code: Alles auswählen

.headerbar {
   background-color: #FFFFFF;
   background-image: url("{T_THEME_PATH}/images/header_bg.png");
   width: 850px;
   height: 150px;
   min-width: 635px;
   color: #FFFFFF;
}

And change it to your needs.

Find:

Code: Alles auswählen

.outside {
   margin: 0 auto;
   width : 950px;
   }

Adjust it to your needs.


Open common.css

Find:

Code: Alles auswählen

#wrap {
   padding: 0 20px;
   width: 862px;
   margin: 0 auto;
   min-width: 650px;
}

Adjust the width.

[Marc]

If you use the standard proFormell in a Joomla wrap, it will always be shifted to the right. Therefore you have to leave out the borders and get an auto-width version of proFormell. It can be downloaded here:
proFormellX (without header/borders w/ auto-width)

[Marc]

Open proFormell/template/overall_header.html

Find:

Code: Alles auswählen

<div class="outside">
 <div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
<div class="inside">
 <div class="notopgap">

Delete it.

Open overall_footer.html

Find:

Code: Alles auswählen

<div class="nobottomgap"></div>
 </div>
<div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right">
</div>
</div>

Delete it.

Open proFormell/theme/colours.css

Find:

Code: Alles auswählen

html, body {
   color: #000000;
   background-color: #aba7a0;
}

Replace with:

Code: Alles auswählen

html, body {
   color: #000000;
   background-color: #ffffff;
}

[Marc]

Open styles/proFormell/template/overall_header.html

Find:

Code: Alles auswählen

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />

Before add:

Code: Alles auswählen

<link type='text/css' href='{T_THEME_PATH}/standard.css' rel='stylesheet' />

Find:

Code: Alles auswählen

<script type="text/javascript">
// <![CDATA[

/*
Style semi-dynamic width by Marc Alexander (c) 2008
Parts based on styleswitcher.js contained in prosilver

*/


var x,y;
   if (self.innerHeight) // all except Explorer
   {
      x = self.innerWidth;
      y = self.innerHeight;
   }
   else if (document.documentElement && document.documentElement.clientHeight)
      // Explorer 6 Strict Mode
   {
      x = document.documentElement.clientWidth;
      y = document.documentElement.clientHeight;
   }
   else if (document.body) // other Explorers
   {
      x = document.body.clientWidth;
      y = document.body.clientHeight;
   }
   
   if (x >= 1420)
   {
      document.write("<link type='text/css' href='{T_THEME_PATH}/widest.css' rel='stylesheet' />");
   } else if (x >= 1220)
   {
      document.write("<link type='text/css' href='{T_THEME_PATH}/wider.css' rel='stylesheet' />");
   } else if (x >= 1070)
   {
      document.write("<link type='text/css' href='{T_THEME_PATH}/wide.css' rel='stylesheet' />");
   } else
   {
      document.write("<link type='text/css' href='{T_THEME_PATH}/standard.css' rel='stylesheet' />");
   }
// ]]>
</script>

Delete it.

Open styles/proFormell/theme/common.css

Find:

Code: Alles auswählen

#wrap {
   padding: 0 20px;
   width: 862px;
   margin: 0 auto;
   min-width: 650px;
}

Replace with:

Code: Alles auswählen

#wrap {
   padding: 0 20px;
        width: 95%;
   margin: 0 auto;
   min-width: 650px;
}

Open styles/proFormell/theme/colours.css

Find:

Code: Alles auswählen

.headerbar {
   background-color: #FFFFFF;
   background-image: url("{T_THEME_PATH}/images/header_bg.png");
   width: 850px;
   height: 150px;
   min-width: 635px;
   color: #FFFFFF;
}

Replace with:

Code: Alles auswählen

.headerbar {
   background-color: #FFFFFF;
   background-image: url("{T_THEME_PATH}/images/header_bg.png");
   background-repeat:repeat-x;
   width: 95%;
   height: 150px;
   min-width: 635px;
   color: #FFFFFF;
}

Now just replace styles/proFormell/theme/images/header_bg.png with this version: