[STYLESDB] IDLaunch Fresh

[FreakyBlue]

Style name: IDLaunch Fresh
Author: FreakyBlue

Discuss: discuss
Download: download
Report a bug: report a bug
Demo: demo

Screenshot:


Style version: 1.0.0
Based on: Prosilver
Supported Language: en

[bipenett]

Hi there, FreakyBlue!

I like your style because it is kinda clean. Congratulations, man!

But I have 3 questions for you:

1) I've just installed this style in my board, but at bottom, in the right side of "View unanswered posts", it says { SEARCH_UNREAD } . How do I fix that?

2) I sweat I had this style installed in my board for 2 days, but only TODAY that I've seen that there is horizontal menu in the top of the style. I am sure that my user would need 2 or more days to find this menu also. So how do I put this horizontal menu of the top of the page inside the blue bar at the bottom of the logo?

3) Is that style compatible with the "Annoucement Centre Board" MOD?

Thank's for this oportunity to talk to you. - Peace, buddy.

[FreakyBlue]

Thnx. Always a pleasure to hear that people like my styles

1) I've just installed this style in my board, but at bottom, in the right side of "View unanswered posts", it says { SEARCH_UNREAD } . How do I fix that?

I guess you're missing a language constant. I did not add or alter any, so I guess your language file isn't complete.
To make sure open language/en/common.php and search for:

Code: Select all

SEARCH_UNREAD

I guess you can't find it, so add this:

Code: Select all

'SEARCH_UNREAD'				=> 'View unread posts',

2) I sweat I had this style installed in my board for 2 days, but only TODAY that I've seen that there is horizontal menu in the top of the style. I am sure that my user would need 2 or more days to find this menu also. So how do I put this horizontal menu of the top of the page inside the blue bar at the bottom of the logo?

Open styles/IDLaunch_Fresh/template/overall_header.html
Find

Code: Select all

<!-- IF not S_IS_BOT -->
  		<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
        <li><a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/icon_register.gif" width="16" height="14" alt="*" /> {L_REGISTER}</a></li><!-- ENDIF -->
		<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><img src="{T_THEME_PATH}/images/icon_logout.gif" width="16" height="14" alt="*" /> {L_LOGIN_LOGOUT}</a></li>
        <!-- ENDIF -->
        <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
       	<li><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e"><img src="{T_THEME_PATH}/images/icon_ucp.gif" width="16" height="14" alt="*" /> {L_PROFILE}</a></li>
		<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/icon_posts.gif" width="16" height="14" alt="*" /> {PRIVATE_MESSAGE_INFO}</a></li><!-- ENDIF -->
        <!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH_SELF}"><img src="{T_THEME_PATH}/images/icon_search.gif" width="16" height="14" alt="*" /> {L_SEARCH_SELF}</a></li><!-- ENDIF -->
        <!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF --></li>
        <!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><img src="{T_THEME_PATH}/images/icon_members.gif" width="16" height="14" alt="*" /> {L_MEMBERLIST}</a></li><!-- ENDIF -->
        <li><!-- IF U_TEAM --><a href="{U_TEAM}"><img src="{T_THEME_PATH}/images/icon_team.gif" width="16" height="14" alt="*" /> {L_THE_TEAM}</a><!-- ENDIF --></li>
       	<!-- ENDIF -->
        <li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><img src="{T_THEME_PATH}/images/icon_faq.gif" width="16" height="14" alt="*" /> {L_FAQ}</a></li>

Replace with

Code: Select all

Find

Code: Select all

<li <!-- IF $_SERVER['SCRIPT_NAME'] == '/your page here' --> class="chosen" <!-- ENDIF -->><a href="#">Your link here</a></li>

Add after

Code: Select all

<!-- IF not S_IS_BOT -->
  		<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
        <li><a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/icon_register.gif" width="16" height="14" alt="*" /> {L_REGISTER}</a></li><!-- ENDIF -->
		<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><img src="{T_THEME_PATH}/images/icon_logout.gif" width="16" height="14" alt="*" /> {L_LOGIN_LOGOUT}</a></li>
        <!-- ENDIF -->
        <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
       	<li><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e"><img src="{T_THEME_PATH}/images/icon_ucp.gif" width="16" height="14" alt="*" /> {L_PROFILE}</a></li>
		<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/icon_posts.gif" width="16" height="14" alt="*" /> {PRIVATE_MESSAGE_INFO}</a></li><!-- ENDIF -->
        <!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH_SELF}"><img src="{T_THEME_PATH}/images/icon_search.gif" width="16" height="14" alt="*" /> {L_SEARCH_SELF}</a></li><!-- ENDIF -->
        <!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF --></li>
        <!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><img src="{T_THEME_PATH}/images/icon_members.gif" width="16" height="14" alt="*" /> {L_MEMBERLIST}</a></li><!-- ENDIF -->
        <li><!-- IF U_TEAM --><a href="{U_TEAM}"><img src="{T_THEME_PATH}/images/icon_team.gif" width="16" height="14" alt="*" /> {L_THE_TEAM}</a><!-- ENDIF --></li>
       	<!-- ENDIF -->
        <li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><img src="{T_THEME_PATH}/images/icon_faq.gif" width="16" height="14" alt="*" /> {L_FAQ}</a></li>

Refresh your template files at your ACP and it should be allright.

3) Is that style compatible with the "Annoucement Centre Board" MOD?

I did not test it, so I honestly don't know. But I guess it should be. If you install that MOD, use the prosilver style edits.

[bipenett]

Thank's a lot, FreakyBlue!

[bipenett]

Hello FreakyBlue!

That's me again. I've made the changes that you suggested.

But I would like to change the style a little bit more. Actually I would like to make 7 changes over the board as you can see in this link http://sites.google.com/site/forumsenhasx20/changes.jpg.

Could you help me with that, please?! I'm gonna apreciate that so much, FreakyBlue!

[FreakyBlue]

1. Remove this gray bar
Open styles/IDLaunch_Fresh/template/overall_header.html
Remove (around line 105)

Code: Select all

<div id="roofbar">
	<ul id="roofbar">
    	<!-- IF not S_IS_BOT -->
  		<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
        <li><a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/icon_register.gif" width="16" height="14" alt="*" /> {L_REGISTER}</a></li><!-- ENDIF -->
		<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><img src="{T_THEME_PATH}/images/icon_logout.gif" width="16" height="14" alt="*" /> {L_LOGIN_LOGOUT}</a></li>
        <!-- ENDIF -->
        <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
       	<li><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e"><img src="{T_THEME_PATH}/images/icon_ucp.gif" width="16" height="14" alt="*" /> {L_PROFILE}</a></li>
		<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/icon_posts.gif" width="16" height="14" alt="*" /> {PRIVATE_MESSAGE_INFO}</a></li><!-- ENDIF -->
        <!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH_SELF}"><img src="{T_THEME_PATH}/images/icon_search.gif" width="16" height="14" alt="*" /> {L_SEARCH_SELF}</a></li><!-- ENDIF -->
        <!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF --></li>
        <!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><img src="{T_THEME_PATH}/images/icon_members.gif" width="16" height="14" alt="*" /> {L_MEMBERLIST}</a></li><!-- ENDIF -->
        <li><!-- IF U_TEAM --><a href="{U_TEAM}"><img src="{T_THEME_PATH}/images/icon_team.gif" width="16" height="14" alt="*" /> {L_THE_TEAM}</a><!-- ENDIF --></li>
       	<!-- ENDIF -->
        <li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><img src="{T_THEME_PATH}/images/icon_faq.gif" width="16" height="14" alt="*" /> {L_FAQ}</a></li>
	</ul>
</div>

2. buttons sequence
Arrange the sequence by ordering the <li> tags in the div menubar / <ul>:

Code: Select all

<ul id="menubar">
    		<li></li>
		<li></li>
   		</ul>

2. height and width buttons
To arrange the hight and width between the buttons you have to edit the fresh.css file located at styles/IDLaunch_Fresh/theme/
More precise this piece of code, just play with it to get the right settings.

Code: Select all

#menubar li a {
	display: block;
	float: left;
	color: #ccc;
	text-decoration: none;
	padding: 16px 23px 13px;
	font-size: 14px;
	font-weight: bold;
	font-family: Arial Narrow, Arial, Helvetica, sans-serif;
}

3. remove faq and members
Open styles/IDLaunch_Fresh/template/overall_header.html
Remove

Code: Select all

<!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><img src="{T_THEME_PATH}/images/icon_members.gif" width="16" height="14" alt="*" /> {L_MEMBERLIST}</a></li><!-- ENDIF -->

Remove

Code: Select all

<li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><img src="{T_THEME_PATH}/images/icon_faq.gif" width="16" height="14" alt="*" /> {L_FAQ}</a></li>

4. Remove breadcrumb
Open styles/IDLaunch_Fresh/template/overall_header.html
Remove

Code: Select all

<div class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></div>

5. elevate the board
It doesn't need to. You're the only one (with other moderators/adm) who see the white space, because of of the moderator link. And it only works if you remove or replace that link and you don't want that.

6. Adjust width forum/topics/posts/poster bar
Open styles/IDLaunch_Fresh/theme/content.css
Find and adjust percentage

Code: Select all

ul.topiclist dt {
	display: block;
	float: left;
	width: 50%;
	font-size: 1.1em;
	padding-left: 5px;
	padding-right: 5px;
}

Find and adjust percentage

Code: Select all

dd.posts, dd.topics, dd.views {
	width: 8%;
	text-align: center;
	line-height: 2.2em;
	font-size: 1.2em;
}

7. Remove word sizer
Open styles/IDLaunch_Fresh/template/overall_footer.html
Remove

Code: Select all

<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

Purge your cache after making these edits and refresh your theme files also.

[bipenett]

Man, you are simply fantastic!

How can I thank you, FreakyBlue? Seriously.

[FreakyBlue]

By giving me a donation

[bipenett]

By giving me a donation

Fair enough, buddy! I am going to do that soon.

I PROMISE!

[bipenett]

Hey FrekyBlue,

You`ve got some from me. Go check your PayPal account.

Man, other question for you.

Part of the template's overall_header.html looks like that:

Code: Select all

<ul id="menubar">
		<!-- IF not S_IS_BOT -->
  		<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
    		<li><a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/icon_register.gif" width="16" height="14" alt="*" /> {L_REGISTER}</a></li><!-- ENDIF -->
			<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x"><img src="{T_THEME_PATH}/images/icon_logout.gif" width="16" height="14" alt="*" /> {L_LOGIN_LOGOUT}</a></li>
        <!-- ENDIF -->
		<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
       	<li><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e"><img src="{T_THEME_PATH}/images/icon_ucp.gif" width="16" height="14" alt="*" /> {L_PROFILE}</a></li>
		<!-- IF S_DISPLAY_PM --><li><a href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/icon_posts.gif" width="16" height="14" alt="*" /> {PRIVATE_MESSAGE_INFO}</a></li><!-- ENDIF -->
		 <!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH_SELF}"><img src="{T_THEME_PATH}/images/icon_search.gif" width="16" height="14" alt="*" /> {L_SEARCH_SELF}</a></li><!-- ENDIF -->
		 <!-- IF U_RESTORE_PERMISSIONS --><li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF --></li>
		 		  <li><!-- IF U_TEAM --><a href="{U_TEAM}"><img src="{T_THEME_PATH}/images/icon_team.gif" width="16" height="14" alt="*" /> {L_THE_TEAM}</a><!-- ENDIF --></li>
       	<!-- ENDIF -->
		   		</ul>

As you can see, the search bar is coded to appear in the blue bar, but actually it doesn't appear. I can see all the rest of the buttons over the blue bar, but the search bar definitely is not in the blue bar. Do you have any idea of what I'm doing wrong, buddy?

edit: Oh... And I also can't find a way to change the main logo of your style to MY logo. I am following the steps over the article http://www.phpbb.com/kb/article/changin ... oard-logo/ but it seems it won't work.

[FreakyBlue]

I can't access my files at this moment because I'm at work. So I can't give you a detailed tut at this moment. I will try to give that later this day/evening/night

[bipenett]

I can't access my files at this moment because I'm at work. So I can't give you a detailed tut at this moment. I will try to give that later this day/evening/night

That's alright, man.

[FreakyBlue]

This piece of code handles your searchfield.
Open template/overall_header.html

Code: Select all

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="searchbar">
	<form action="{U_SEARCH}" method="post">
		<input class="inputbox" type="text" name="keywords" value="{L_SEARCH}" onfocus="this.value = '';" onblur="if(this.value=='') this.value='{L_SEARCH}';" />
	</form>
</div>
<!-- ENDIF -->

It is controlled with this piece of code in the fresh.css file
Open theme/fresh.css

Code: Select all

#searchbar {
	position: absolute;
	top: 3px;
	right: 10px;
	height: 35px;
	width: 210px;
	background: url('{T_THEME_PATH}/images/searchbox.png') no-repeat;
	overflow: hidden;
}

#searchbar .inputbox {
	background: transparent;
	color: #008ebd;
	padding: 3px 3px;
	border: none;
	margin: 4px 0 0 35px;
	width: 150px;
	height: 14px;
	font-size: 12px;
	font-family: tahoma, sans-serif;
}

Now play with the top: 3px part, for example 100px.

About the logo. It is located in the theme/images/ folder.
It's called logo.png. This is a 1000px width logo image. Space left and right of it is filled by the top-bg.png image.
You can simply overwrite the logo.png with your own logo.

The part of the logo is controlled in the fresh.css file located at your theme folder with this code:

Code: Select all

#topbar {
	height: 114px;
	background: url('{T_THEME_PATH}/images/top-bg.png') 0 0 repeat-x;
}

#header {
	position: relative;
	overflow: hidden;
	height: 114px;
}

.wrapper_header {
	width: 1000px;
	margin: 0 auto;
	padding: 0;
}

#logo, #logo a {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 1000px;
	height: 114px;
	background: url('{T_THEME_PATH}/images/logo.png') no-repeat;
}

Hope it helps you.

[bipenett]

Alright! thank's, FreakyBlue!

I'm gonna try these later.

By the way, would you give me more personal support about your style over e-mail, messenger or Personal Message under more donation?

[FreakyBlue]

By the way, would you give me more personal support about your style over e-mail, messenger or Personal Message under more donation?

That's possible. For this please register @ http://www.IDLaunch.org