Branding, the next level - Revision history

Pm705 at 12:49, 20 March 2010

2010-03-20T12:49:02Z

← Older revision		Revision as of 12:49, 20 March 2010
Line 1:		Line 1:
	[[Category:Branding]]		[[Category:Branding]]
	~~[[Category:Howto]]~~
	This document describes how to completely customise the template of your EPrints 3 repository. Not just changing some colour schemes and images, but a reworking of the structure of the HTML.		This document describes how to completely customise the template of your EPrints 3 repository. Not just changing some colour schemes and images, but a reworking of the structure of the HTML.

Pm705 at 11:37, 8 February 2010

2010-02-08T11:37:12Z

← Older revision		Revision as of 11:37, 8 February 2010
Line 1:		Line 1:
	[[Category:Branding]]		[[Category:Branding]]
			[[Category:Howto]]
	This document describes how to completely customise the template of your EPrints 3 repository. Not just changing some colour schemes and images, but a reworking of the structure of the HTML.		This document describes how to completely customise the template of your EPrints 3 repository. Not just changing some colour schemes and images, but a reworking of the structure of the HTML.

Pm705 at 11:33, 8 February 2010

2010-02-08T11:33:47Z

New page

[[Category:Branding]]

This document describes how to completely customise the template of your EPrints 3 repository. Not just changing some colour schemes and images, but a reworking of the structure of the HTML.

== Introduction ==
The redesign process is not an easy one.<br/>
No, let me rephrase that: When designing a complete re-branding, altering the EPrints files is pretty - easy however the design, the xhtml and the css all requires some skill and knowledge. That part of the process is not discussed here, sorry.

== Step One: design ==
Get the design right.<br/>
Speak to Web Designers/Graphic Artists about layout/graphics/composition.<br/>
Speak to xhtml coders and CSS monkeys about accessibility, cross-browser compatibility, and good practice.<br/>
Make up some static pages to get the page right ''before'' you edit any EPrints files.

This is the design I'm going to talk about:
[[Image:overview.png]]

== Step Two: implement ==
Let us assume that you have configured the basic repository, created the database, and created an admin user.<br/>
Let us further assume that you are at the top of the installed EPrints software (<code>/opt/</code> or <code>/usr/local</code> or <code>/home/eprints</code> or wherever you've installed it)

Edit the default template for your repository:
<pre>
vi archives/ARCHIVEID/cfg/lang/en/templates/default.xml
</pre>

Edit the file, or delete all the contents and start again.
=== Head section ===
<pre>

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE html SYSTEM "entities.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epc="http://eprints.org/ep3/control" xml:lang="en" lang="en">
<head>
<title><epc:pin ref="title" textonly="yes"/> - <epc:phrase ref="archive_name"/></title>
<script src="/javascript/auto.js" type="text/javascript"></script>
<style type="text/css" media="screen">@import url(/style/auto.css);</style>
<style type="text/css" media="screen"> @import url(/style/eprints.css); </style>
<style type="text/css" media="print">@import url(/style/print.css);</style>


<link rel="icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<link rel="Top" href="{$config{frontpage}}"/>
<link rel="Search" href="/perl/search"/>
<epc:pin ref="head"/>
</head>

</pre>

This is the head section of the xhtml for our demo page. <br/>
* <code><title><epc:pin ref="title" textonly="yes"/> - <epc:phrase ref="archive_name"/></title></code> shows that the title is made from two elements defined in one of the ''phrases'' files
* <code><script src="/javascript/auto.js" type="text/javascript"></script></code> is the line that pulls in the auto-completer javascript
* <code><style type="text/css" media="screen">@import url(/style/auto.css);</style></code> is the bit that pulls in all the default javascript styling
* <code><style type="text/css" media="screen"> @import url(/style/eprints.css); </style></code> is my extra CSS for my design
* <code><style type="text/css" media="print">@import url(/style/print.css);</style></code> is the css that is referenced when printing to the page
* <code></code> is my hack to include IE-specific CSS that the web validators won't see (or complain about)
* <code><epc:pin ref="head"/></code> is a pin-holder for any extra head-section tags that are defined (''where?'')

=== Body section ===
<pre>

<body>
<div class="ep_noprint"><noscript><style type='text/css'>@import url(/style/nojs.css);</style></noscript></div>
<div id="container">
<div id="banner" class="ep_noprint">
<div id="banner_inner">
<span id="the_depot_logo" >The DEPOT</span>
</div> 
</div> 
<div id="main_area" class="clearfix"> 
<div id="top_menu" class="ep_noprint" >
<div id="tabcontainer">

<ul id="navtabs"><epc:pin ref="login_status"/></ul>
</div> 
</div> 
<div id="content" >
<epc:pin ref="page"/>
</div> 
</div> 
<div id="footer" class="clearfix ep_noprint">
<img src="/images/logos.gif" title="Logos for EDINA and SHERPA" alt="[LOGOS]" class="edina_logo" style="float:left"/>
<span id="banner_image_copyright">Banner image © JupiterImages 2006</span>
<div id="credit">This service is running on <em>GNU EPrints</em> repository-creating software, which generates
repositories that are compliant with the <a href="http://www.openarchives.org">Open Archives Protocol for
Metadata Harvesting OAI 2.0</a>.<br />
<span id="take_down">» <a href="/policy.html" title="What to do when you discover a deposit that infringes
UK laws">how to complain</a> about a paper in the Depot</span></div>
</div> 
</div>
</body>

</pre>

So - what do we have here?
* <code><noscript><style type='text/css'>@import url(/style/nojs.css);</style></noscript></code> is a non-complient ''bodge'' to include extra CSS (used by the core eprints code) when there is no Javascript available.
* <code><ul id="navtabs"><epc:pin ref="login_status"/></ul></code> is the bit that defines the toolbar (more later)
* <code><epc:pin ref="page"/></code> is the bit that defines where the code sits
The rest is all design and layout (and there is a ''lot'' of design and layout in <code>/style/eprints.css</code>

== Toolbar ==

=== Changing the separator ===
The toolbar in a standard EPrints system is a series of <span>'ed items, with a defined separator.

To change the seperator to (say) the hash symbol ('#'), edit the file <code>archives/deposit/cfg/lang/en/phrases/dynamic.xml</code> and add
<pre>
<epp:phrase id="Plugin/Screen:tool_divide"> # </epp:phrase>
</pre>
(the <code>dynamic.xml</code> file needs to be valid XML, so you can't change the separator to something like <code></li><li></code>.)

=== Changing the toolbar items ===
The toolbar is dynamically created.
* there is one form for an anonymous user
** (this is where a user logs in, or creates a new account)
*** [[image:anon_toolbar.png]]
* and one for a logged in user
** The toolbar for an admin-level user could look like:
*** [[image:admin_toolbar.png]]

To deviate from the default toolbar, you will need to provide your own xhtml. Edit <code>archives/deposit/cfg/lang/en/phrases/dynamic.xml</code> and add:
<pre>
<epp:phrase id="dynamic:not_logged_in"><li><a class="h_menulink" href="/view/">Browse</a></li><li><a class="h_menulink" href="{$config{userhome}}">Login</a></li><li><a class="h_menulink" href="{$config{perl_url}}/register">Create Account</a></li></epp:phrase>

<epp:phrase id="dynamic:logged_in"><li class="logged_in_as" style="float: right">Logged in as <epc:pin name="user"/></li><li><a class="h_menulink" href="/view/">Browse</a></li><epc:pin name="tools" /><li><a class="h_menulink" href="{$config{perl_url}}/logout">Logout</a></li></epp:phrase>
</pre>
my example is different from the standard EPrints layout in that I am also switching to using a list for each of my toolbar items

'''Note''': the use of the xhtml comments as above is part of a CSS "trick"

=== Removing items from the user list ===
Items can easily be removed from the toolbar (I have removed the '''Saved Searches''' item.)

Edit <code>archives/deposit/cfg/cfg.d/plugins.pl</code>
<pre>
# option to disable the functionality all together
$c->{plugins}->{"Screen::User::SavedSearches"}->{params}->{disable} = 1;
</pre>

Where <code>Screen::User::SavedSearches</code> corresponds to <code>perl_lib/EPrints/Plugin/<strong>Screen/User/SavedSearches.pm</strong></code>

=== Changing the actual format ===

In my example, we have actually changed the toolbar to be a series if List Items (<code><li>foo</li></code>)

This is somewhat more complex, and requires code-hacking

The toolbar is created in <code>perl_lib/EPrints/Session.pm</code>, in a function called <code>render_toolbar</code>.

This needs to be changed in several places, however in essence, you need to replace:
<pre>
my $first = 1;
foreach my $tool ( @core )
{
if( $first )
{
$first = 0;
}
else
{
$core->appendChild( $self->html_phrase( "Plugin/Screen:tool_divide" ) );
}
my $a = $self->render_link( $url."?screen=".substr($tool->{screen_id},8) );
$a->appendChild( $tool->{screen}->render_title );
$core->appendChild( $a );
}
</pre>
with:
<pre>
foreach my $tool ( @core )
{
my $a = $self->render_link( $url."?screen=".substr($tool->{screen_id},8) );
$a->appendChild( $tool->{screen}->render_title );
my $li = $self->make_element('li', class=>"");
$li->appendChild($a);
$core->appendChild( $li );
}
</pre>
(Thanks to Ben Wheeler for that)

== Rebuild the web pages ==
Every time you alter <code>archives/ARCHIVEID/cfg/lang/en/templates/default.xml</code>, you need to regenerate the pages of the service:
<pre>
bin/generate_static ''archiveID''
bin/generate_views ''archiveID''
bin/generate_abstracts ''archiveID''
</pre>

Every time you alter any of the <code>.xml</code> you need to reload the configuration:
<pre>
bin/epadmin reload ''archiveID''
</pre>
(though a proper web server restart is the best thing to do once you are happy with the configuration:
<pre>
/path/to/web_server/bin/apachecfg restart
</pre>

Kiz: /* Removing items from the user list */

2007-03-28T13:35:11Z

Removing items from the user list

← Older revision		Revision as of 13:35, 28 March 2007
Line 147:		Line 147:
	# option to disable the functionality all together		# option to disable the functionality all together
	$c->{plugins}->{"Screen::User::SavedSearches"}->{params}->{disable} = 1;		$c->{plugins}->{"Screen::User::SavedSearches"}->{params}->{disable} = 1;
			</pre>

	~~# option to keep the functionality, but leave it out the toolbar~~		Where <code>Screen::User::SavedSearches</code> corresponds to <code>perl_lib/EPrints/Plugin/<strong>Screen/User/SavedSearches.pm</strong></code>
	~~$c-~~>~~{plugins}->{"~~Screen::~~Items~~::SavedSearches~~"}-~~>~~{appears}-~~>~~{key_tools} = undef;~~
	</~~pre~~>

	=== Changing the actual format ===		=== Changing the actual format ===

Kiz: /* Changing the actual format */

2007-03-28T13:30:57Z

Changing the actual format

← Older revision		Revision as of 13:30, 28 March 2007
Line 160:		Line 160:
	The toolbar is created in <code>perl_lib/EPrints/Session.pm</code>, in a function called <code>render_toolbar</code>.		The toolbar is created in <code>perl_lib/EPrints/Session.pm</code>, in a function called <code>render_toolbar</code>.

	This needs to be changed in several places, however in essence, to need to replace:		This needs to be changed in several places, however in essence, you need to replace:
	<pre>		<pre>
	my $first = 1;		my $first = 1;

Fmccown: General clean-up

2007-03-23T19:53:24Z

General clean-up

← Older revision		Revision as of 19:53, 23 March 2007
Line 1:		Line 1:

	This document describes how to completely customise the template of your EPrints 3 repository. Not just changing some colour schemes and images, but a reworking of the structure of the HTML.		This document describes how to completely customise the template of your EPrints 3 repository. Not just changing some colour schemes and images, but a reworking of the structure of the HTML.

Line 21:		Line 20:
	Edit the default template for your repository:		Edit the default template for your repository:
	<pre>		<pre>
	vi archives/~~deposit~~/cfg/lang/en/templates/default.xml		vi archives/ARCHIVEID/cfg/lang/en/templates/default.xml
	</pre>		</pre>

	Edit the file, or delete all the contents and start again.		Edit the file, or delete all the contents and start again.
	=== ~~the head~~ section ===		=== Head section ===
	<pre>		<pre>

Line 60:		Line 59:
	* <code><epc:pin ref="head"/></code> is a pin-holder for any extra head-section tags that are defined (''where?'')		* <code><epc:pin ref="head"/></code> is a pin-holder for any extra head-section tags that are defined (''where?'')

	=== ~~the body~~ section ===		=== Body section ===
	<pre>		<pre>

Line 102:		Line 101:
	The rest is all design and layout (and there is a ''lot'' of design and layout in <code>/style/eprints.css</code>		The rest is all design and layout (and there is a ''lot'' of design and layout in <code>/style/eprints.css</code>

	== ~~The toolbar~~ ==		== Toolbar ==

	=== Changing the separator ===		=== Changing the separator ===
Line 192:		Line 191:
	(Thanks to Ben Wheeler for that)		(Thanks to Ben Wheeler for that)

	== ~~rebuild~~ the web pages ==		== Rebuild the web pages ==
	Every time you alter <code>archives/~~deposit~~/cfg/lang/en/templates/default.xml</code>, you need to regenerate the pages of the service:		Every time you alter <code>archives/ARCHIVEID/cfg/lang/en/templates/default.xml</code>, you need to regenerate the pages of the service:
	<pre>		<pre>
	bin/generate_static ''archiveID''		bin/generate_static ''archiveID''

WikiSysop at 00:22, 2 March 2007

2007-03-02T00:22:04Z

← Older revision		Revision as of 00:22, 2 March 2007
Line 1:		Line 1:

			This document describes how to completely customise the template of your EPrints 3 repository. Not just changing some colour schemes and images, but a reworking of the structure of the HTML.

			== Introduction ==
	The redesign process is not an easy one.<br/>		The redesign process is not an easy one.<br/>
	No, let me rephrase that: When designing a complete re-branding, altering the EPrints files is pretty - easy however the design, the xhtml and the css all requires some skill and knowledge. That part of the process is not discussed here, sorry.		No, let me rephrase that: When designing a complete re-branding, altering the EPrints files is pretty - easy however the design, the xhtml and the css all requires some skill and knowledge. That part of the process is not discussed here, sorry.

Kiz at 11:04, 27 February 2007

2007-02-27T11:04:11Z

← Older revision		Revision as of 11:04, 27 February 2007
Line 6:		Line 6:
	Speak to Web Designers/Greaphic Artists about layout/graphics/composition.<br/>		Speak to Web Designers/Greaphic Artists about layout/graphics/composition.<br/>
	Speak to xhtml coders and CSS monkeys about accessibility, cross-browser compatibility, and good practice.<br/>		Speak to xhtml coders and CSS monkeys about accessibility, cross-browser compatibility, and good practice.<br/>
	Make up some static pages to get the page right ''before'' you edit ~~the~~ EPrints files.		Make up some static pages to get the page right ''before'' you edit any EPrints files.

	This is the design I'm going to talk about:		This is the design I'm going to talk about:
	[[Image:overview.png]]		[[Image:overview.png]]

	== Step Two: ~~impliment~~ ==		== Step Two: implement ==
	Let us assume that you have configured the basic repository, created the database, and created an admin user.<br/>		Let us assume that you have configured the basic repository, created the database, and created an admin user.<br/>
	Let us further assume that you are at the top of the installed EPrints software (<code>/opt/</code> or <code>/usr/local</code> or <code>/home/eprints</code> or wherever you've installed it)		Let us further assume that you are at the top of the installed EPrints software (<code>/opt/</code> or <code>/usr/local</code> or <code>/home/eprints</code> or wherever you've installed it)
Line 157:		Line 157:
	The toolbar is created in <code>perl_lib/EPrints/Session.pm</code>, in a function called <code>render_toolbar</code>.		The toolbar is created in <code>perl_lib/EPrints/Session.pm</code>, in a function called <code>render_toolbar</code>.

	This needs to be changed in several places, however in essence, to need to replace		This needs to be changed in several places, however in essence, to need to replace:
	<pre>		<pre>
	my $first = 1;		my $first = 1;
Line 175:		Line 175:
	}		}
	</pre>		</pre>
	with		with:
	<pre>		<pre>
	foreach my $tool ( @core )		foreach my $tool ( @core )

Kiz: /* Step One: design */

2007-02-27T10:57:43Z

Step One: design

← Older revision		Revision as of 10:57, 27 February 2007
Line 8:		Line 8:
	Make up some static pages to get the page right ''before'' you edit the EPrints files.		Make up some static pages to get the page right ''before'' you edit the EPrints files.

	This is ~~our~~ design:		This is the design I'm going to talk about:
	[[Image:overview.png]]		[[Image:overview.png]]

Kiz at 10:57, 27 February 2007

2007-02-27T10:57:02Z

← Older revision		Revision as of 10:57, 27 February 2007
Line 187:		Line 187:
	</pre>		</pre>
	(Thanks to Ben Wheeler for that)		(Thanks to Ben Wheeler for that)

			== rebuild the web pages ==
			Every time you alter <code>archives/deposit/cfg/lang/en/templates/default.xml</code>, you need to regenerate the pages of the service:
			<pre>
			bin/generate_static ''archiveID''
			bin/generate_views ''archiveID''
			bin/generate_abstracts ''archiveID''
			</pre>

			Every time you alter any of the <code>.xml</code> you need to reload the configuration:
			<pre>
			bin/epadmin reload ''archiveID''
			</pre>
			(though a proper web server restart is the best thing to do once you are happy with the configuration:
			<pre>
			/path/to/web_server/bin/apachecfg restart
			</pre>