[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: Select all

<!-- 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: Select all

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

Add after:

Code: Select all

<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: Select all

.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: Select all

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

Adjust it to your needs.


Open common.css

Find:

Code: Select all

#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: Select all

<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: Select all

<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: Select all

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

Replace with:

Code: Select all

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

[Marc]

Open styles/proFormell/template/overall_header.html

Find:

Code: Select all

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

Before add:

Code: Select all

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

Find:

Code: Select all

<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: Select all

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

Replace with:

Code: Select all

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

Open styles/proFormell/theme/colours.css

Find:

Code: Select all

.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: Select all

.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: