[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
Locked
User avatar
asrock
Registered User
Posts: 244
Joined: Sat May 10, 2008 9:05 pm

Re: [How To] Modify prosilver's header

Post by asrock » Thu Jun 18, 2009 3:48 pm

Thank You Thank you for the reply, maybe thats where I've been going wrong all this time... I was led to believe that Avalon was Prosilver based! Its the complete header I want to replace with my own. My own header is 940 x 234 px size and has already been saved as png format, I would also like it to be centered when opened in most browsers. Can I ask one more tiny question? Does the site logo.gif need to be gif format or can I use png format? If so is there anything else I need to replace / modify to use my header?


Thank You!
Image

User avatar
asrock
Registered User
Posts: 244
Joined: Sat May 10, 2008 9:05 pm

Re: [How To] Modify prosilver's header

Post by asrock » Thu Jun 18, 2009 4:34 pm

Managed to get my custom header online and visible, so thanks for the help Hard Style. One minor problem however, can you tell me how to centre my custom header now as its currently showing very much to the left. Also is it at all possible to protect my header image somehow, basically to stop someone right clicking on my header and copying or viewing its properties or URL? Many thanks, and sorry for being a pest! ;)
Image

djdrageris
Registered User
Posts: 63
Joined: Tue Apr 28, 2009 7:52 pm

Re: [How To] Modify prosilver's header

Post by djdrageris » Fri Jun 19, 2009 8:30 am

how i can replacing header with this code???

Code: Select all

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/spider.xml&up_spiderName=Spider&up_backgroundImage=http%3A%2F%2Fdarkness.lt%2Fstyles%2FeMuz%2C.a2%2Ftheme%2Fimages%2Flogo.jpg&up_headColor=666666&up_bellyColor=666666&up_legColor=333333&up_backgroundColor=%231A1A1A&up_size=.6&up_speed=1&up_originalLook=0&up_userColor1=&up_userColor2=&up_userColor3=&up_userColor4=&synd=open&w=900&h=230&title=Darkness.lt&border=%23ffffff%7C0px%2C1px+solid+%23595959%7C0px%2C1px+solid+%23797979%7C0px%2C2px+solid+%23898989&output=js"></script>

The Doyle
Registered User
Posts: 73
Joined: Wed Jul 30, 2008 2:01 am

Re: [How To] Modify prosilver's header

Post by The Doyle » Mon Jun 22, 2009 6:37 am

I took out the search box for the forum and topic pages a while ago, but have since decided that I actually want them in their. Could somebody please tell me the original code that I need, and where I need to put it? Thank you.

drkdeath
Registered User
Posts: 19
Joined: Tue Sep 02, 2008 11:13 am

Re: [How To] Modify prosilver's header

Post by drkdeath » Tue Jun 23, 2009 5:32 pm

Hi,
Id like to move the board index link along with the link which tells you were you are in the forum to below the topic/forum title. For example http://e-co.forumotion.net/rank-recogni ... 7-t873.htm you see under new recruits i would like to have my links in the same place.
Link to my site http://easyco.co.cc/viewtopic.php?f=2&t=7
As you can see ive already had a go at moving the links about but i cant seem to move the board index to where i want.
Any help will be appreciated.
Thanks.

User avatar
Josh
Former Team Member
Posts: 1882
Joined: Sun Jan 25, 2009 3:08 pm
Location: Melbourne, AUS
Name: Josh Simpson
Contact:

Re: [How To] Modify prosilver's header

Post by Josh » Wed Jun 24, 2009 4:02 am

drkdeath wrote:Id like to move the board index link along with the link which tells you were you are in the forum to below the topic/forum title.
open overall_header.html
remove:

Code: Select all

&#187; <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 --></li>
open viewform_body.html
find:

Code: Select all

<h2><a href="{U_VIEW_FORUM}">{FORUM_NAME}</a></h2>
add after

Code: Select all

<ul class="linklist navlinks">
<li>&#187; <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 --></li>
</ul>
open viewtopic_body.html
find:

Code: Select all

<h2><a href="{U_VIEW_TOPIC}">{TOPIC_TITLE}</a></h2>
add after

Code: Select all

<ul class="linklist navlinks">
<li>&#187; <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 --></li>
</ul>
If you still want it on the index page, open index_body.html
find:

Code: Select all

<!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
add before

Code: Select all

<ul class="linklist navlinks">
<li>&#187; <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 --></li>
</ul>
The Doyle wrote:Could somebody please tell me the original code that I need, and where I need to put it? Thank you.
Original Search code:

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 -->
Place it after the site-description div.

Code: Select all

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
Josh Simpson- Formerly known as "HardStyle"
Styles: Submission Policy | Database | Knowledge Base | Demo
Please do not PM me for personal support.
Image

The Doyle
Registered User
Posts: 73
Joined: Wed Jul 30, 2008 2:01 am

Re: [How To] Modify prosilver's header

Post by The Doyle » Wed Jun 24, 2009 5:01 am

Thanks a lot, HardStyle! :)

drkdeath
Registered User
Posts: 19
Joined: Tue Sep 02, 2008 11:13 am

Re: [How To] Modify prosilver's header

Post by drkdeath » Thu Jun 25, 2009 12:13 am

Thanks that did the trick :)
How do i go about changing the navigation menu link colours, it seems to be the style ul.navlinks but putting a colour code in there didnt do anything so im guessing its somewhere else i couldnt find anything specific to naviagtion a:link

drkdeath
Registered User
Posts: 19
Joined: Tue Sep 02, 2008 11:13 am

Re: [How To] Modify prosilver's header

Post by drkdeath » Thu Jun 25, 2009 10:31 am

Never mind i found it, the specific code was

Code: Select all

a:link	{ color: #ffffff; }
a:visited	{ color: #ffffff; }
a:hover	{ color: #ffffff; }
a:active	{ color: #ffffff; }

User avatar
Androgene
Registered User
Posts: 2
Joined: Thu Jul 02, 2009 5:31 am

Re: [How To] Modify prosilver's header

Post by Androgene » Thu Jul 02, 2009 6:20 am

:mrgreen: Thanks alot for this thread and tutorial

anyways, a little error occured on my platform, maybe someone else had the same problem.

1. I use PHP Version 5.2.8 subsilver

in colours.css:

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/imageset/bg1.jpg");
	color: #FFFFFF; }

I changed the folder-path from images to imageset, but it didn't work :o, (no image is shown).
So I used the http-address and it's working fine.

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url(http://www.xyz.net/WCC/styles/prosilver/imageset/bg1.jpg);
	color: #FFFFFF; }
I don't know what I did wrong. (I tried it with the folder name /images/ instead of imageset too!)

I can live with the http address, but I also want to know what the problem is, so if someone has a clue :idea:
pls let me know!
A person who never made a mistake never tried anything new.
(Albert Einstein)

User avatar
Josh
Former Team Member
Posts: 1882
Joined: Sun Jan 25, 2009 3:08 pm
Location: Melbourne, AUS
Name: Josh Simpson
Contact:

Re: [How To] Modify prosilver's header

Post by Josh » Thu Jul 02, 2009 5:12 pm

Androgene wrote:I changed the folder-path from images to imageset, but it didn't work , (no image is shown).
Its because there is no imageset folder inside the "theme" folder by default ;)

Here is what some of the template syntax codes equal to..

Code: Select all

{T_THEME_PATH} 			=	./styles/prosilver/theme
{T_TEMPLATE_PATH} 		=	./styles/prosilver/template
{T_IMAGESET_PATH} 		=	./styles/prosilver/imageset
{T_IMAGESET_LANG_PATH}  =	./styles/prosilver/imageset/en
so you can change this;

Code: Select all

   background-image: url(http://www.xyz.net/WCC/styles/prosilver/imageset/bg1.jpg);
into this

Code: Select all

   background-image: url("{T_IMAGESET_PATH}/bg1.jpg");
and it should work :)
Josh Simpson- Formerly known as "HardStyle"
Styles: Submission Policy | Database | Knowledge Base | Demo
Please do not PM me for personal support.
Image

User avatar
Androgene
Registered User
Posts: 2
Joined: Thu Jul 02, 2009 5:31 am

Re: [How To] Modify prosilver's header

Post by Androgene » Fri Jul 03, 2009 11:50 am

Thx alot, ure a real pal, :P its working :!:

There is another funny thing happening with the header.

bg1.jpg dimensions: 1600px* 170px

When I use opera, the complete Header gets zoomed (logo, background and searchbar) and the
quality gets worse due to interpolation.

Pls take a look:
Image]

Firefox doesn't do zoom, but if the background-image isn't wide enough, the blue background-color is shown at the right end. That's the reason, why I made it 1600px wide.

I don't want to fix the boards' width e.g. to 1024px, or use margin :!:

Also I am aware of the wellknown problem that browsers handle data different, but maybe there is an easy way to prevent them to do so.

Thanks alot in advance :D
A person who never made a mistake never tried anything new.
(Albert Einstein)

lovelysummer
Registered User
Posts: 437
Joined: Fri Mar 20, 2009 1:49 pm

Re: [How To] Modify prosilver's header

Post by lovelysummer » Tue Jul 07, 2009 8:47 am

I have made a flash swf background-image but do not know how to put a flash swf image to the headerbar, it seems that only change the file doesn't work. And I am confused because besides a swf file , there is also a html file comes with it. :cry:

Here is the html file

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>forumbanner950</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#99cccc">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
			'width', '980',
			'height', '90',
			'src', 'forumbanner950',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'false',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'forumbanner950',
			'bgcolor', '#99cccc',
			'name', 'forumbanner950',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'forumbanner950',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="980" height="90" id="forumbanner950" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="forumbanner950.swf" /><param name="loop" value="false" /><param name="quality" value="high" /><param name="bgcolor" value="#99cccc" />	<embed src="forumbanner950.swf" loop="false" quality="high" bgcolor="#99cccc" width="980" height="90" name="forumbanner950" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</noscript>
</body>
</html>
This what I edit in the colour.css

Code: Select all

.headerbar {
	background-color: #12A3EB; 
	background-image: url("{T_THEME_PATH}/images/banner950.swf");
	color: #FFFFFF;
}
Tks in advance.

MRM
Registered User
Posts: 13
Joined: Tue Jul 07, 2009 8:41 pm

Re: [How To] Modify prosilver's header

Post by MRM » Tue Jul 07, 2009 9:25 pm

I to have a SWF banner I wish to add to the site but unfortunately it is not displaying when I swapped out the placeholder logo for my SWF file.

Code: Select all

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background-color: #336699;
	background-image: url("{T_THEME_PATH}/images/MCFHeader.swf");
	color: #336699;

COOLORANGEFREEZE
Registered User
Posts: 72
Joined: Wed Apr 22, 2009 6:06 pm

Re: [How To] Modify prosilver's header

Post by COOLORANGEFREEZE » Thu Jul 09, 2009 5:43 am

This should be simple... I followed the instructions on the first page to get rid of the logo (I assume this is to remove the phpbb logo?)

I went into the proper file and removed this line -

<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>

I saved changes and refreshed the forum. The phpbb building communities logo is still there.

I have 3.0.5 styles/forum so what am I doing wrong?

Please help.

Locked

Return to “[3.0.x] Styles Support & Discussion”