Style (CSS) and Eloquence (Languages) - Revision history

Pm705 at 15:34, 28 March 2011

2011-03-28T15:34:32Z

DaveTarrant: moved Ending with style (CSS) and eloquence (Languages) to Style (CSS) and Eloquence (Languages): Removing temporal context from the title

2010-12-10T11:06:38Z

moved Ending with style (CSS) and eloquence (Languages) to Style (CSS) and Eloquence (Languages): Removing temporal context from the title

Pm705: /* Creating the theme */

2010-12-08T00:42:32Z

‎Creating the theme

Pm705: /* Language Packs */

2010-12-08T00:37:28Z

‎Language Packs

Pm705: /* Adding a style sheet */

2010-12-05T18:13:48Z

‎Adding a style sheet

Pm705: /* Language Packs */

2010-12-05T17:34:26Z

‎Language Packs

Pm705 at 16:49, 5 December 2010

2010-12-05T16:49:16Z

Pm705: /* Adding Some Images */

2010-12-05T16:17:10Z

‎Adding Some Images

Pm705: /* Creating the theme */

2010-12-05T16:02:25Z

‎Creating the theme

Pm705: /* Creating the theme */

2010-12-05T14:04:15Z

‎Creating the theme

← Older revision		Revision as of 15:34, 28 March 2011
Line 1:		Line 1:
		+	[[Category:EPrints_Bazaar]]
	EPrints has a rather complex hierachy of style sheets. You have eprints default styles which is then overwritten (where appropriate) by a local theme which is then overwritten in turn by your repositories local style sheets. Themes have been around since EPrints 3.0 but they are almost never used because very few people ever style more than one repository. Themes are a pack of style sheets, images, templates, static pages, and javascript which can completely change the look and feel of an EPrints repository. In EPrints 3.3 themes have been revisited and polished up so that they can be easily made into EPrints Bazaar packages.		EPrints has a rather complex hierachy of style sheets. You have eprints default styles which is then overwritten (where appropriate) by a local theme which is then overwritten in turn by your repositories local style sheets. Themes have been around since EPrints 3.0 but they are almost never used because very few people ever style more than one repository. Themes are a pack of style sheets, images, templates, static pages, and javascript which can completely change the look and feel of an EPrints repository. In EPrints 3.3 themes have been revisited and polished up so that they can be easily made into EPrints Bazaar packages.

← Older revision		Revision as of 00:42, 8 December 2010
Line 120:		Line 120:
	When you refresh the page changes should be applied.		When you refresh the page changes should be applied.

		+	=== Packaging Your Theme ===
		+
		+	To package your theme simply remove the files you have created from the archive and package them in the same way you have in the earlier excises. If you have problems getting your style to revert back to the original delete the directory <eprintsroot>/archives/<archiveid>/html/style/ manually. This is a known bug which could be solved by using a prerm method. We should have fixed this before release.

	== Language Packs ==		== Language Packs ==

@@ Line 125: / Line 125: @@
 Language packs allow you to easily add interfaces for different languages to your repository. There are quite a few translations of EPrints which already exist but now those translations can be easily installed through the bazaar.
-To create a language pack you create a folder in <eprintsroot>archives/<archiveid>/cfg/lang/<languagecode>. Now copy the language specific elemenets of the repository configuration from <eprintsroot>/lib/lang into this folder. Now you must go through the pain staking process of translating all of those files into your chosen language. The phrase ids stay the same but the phrases are changed.
+To create a language pack you create a folder in <eprintsroot>archives/<archiveid>/cfg/lang/<languagecode>. Now copy the language specific elements of the repository configuration from <eprintsroot>/lib/lang into this folder. Now you must go through the pain staking process of translating all of those files into your chosen language. The phrase ids stay the same but the phrases should be changed. If you want to skip this step you can use the phrases and static files from one of the available EPrints translations available at http://files.eprints.org/view/type/translation.html
-You can enable your chosen language by modifying languages.pl
+Again to enable your chosen language pack you must make a cfg.d file which adds your new language code to the languages array. This cfg.d file must be alphabetically later than languages.pl

← Older revision		Revision as of 18:13, 5 December 2010
Line 51:		Line 51:
	</pre>		</pre>

		+	To enable your theme you will need to create file in cfg.d which tells EPrints which theme it should use. If you don't do this EPrints will use the default theme. I called my file cfg.d/x_abstract_flash.pl it contains this directive:
		+
		+	$c->{theme} = "abstract_flash";

	===Changing the template===		===Changing the template===

← Older revision		Revision as of 17:34, 5 December 2010
Line 121:		Line 121:

	Language packs allow you to easily add interfaces for different languages to your repository. There are quite a few translations of EPrints which already exist but now those translations can be easily installed through the bazaar.		Language packs allow you to easily add interfaces for different languages to your repository. There are quite a few translations of EPrints which already exist but now those translations can be easily installed through the bazaar.
		+
		+	To create a language pack you create a folder in <eprintsroot>archives/<archiveid>/cfg/lang/<languagecode>. Now copy the language specific elemenets of the repository configuration from <eprintsroot>/lib/lang into this folder. Now you must go through the pain staking process of translating all of those files into your chosen language. The phrase ids stay the same but the phrases are changed.
		+
		+	You can enable your chosen language by modifying languages.pl

← Older revision	Revision as of 11:06, 10 December 2010
(No difference)

← Older revision		Revision as of 16:49, 5 December 2010
Line 116:		Line 116:

	When you refresh the page changes should be applied.		When you refresh the page changes should be applied.
		+
		+
		+	== Language Packs ==
		+
		+	Language packs allow you to easily add interfaces for different languages to your repository. There are quite a few translations of EPrints which already exist but now those translations can be easily installed through the bazaar.

← Older revision		Revision as of 16:17, 5 December 2010
Line 114:		Line 114:

	wget http://cdn1.iconfinder.com/data/icons/iconic/raster/16/rss.png -O feed-icon-14x14.png		wget http://cdn1.iconfinder.com/data/icons/iconic/raster/16/rss.png -O feed-icon-14x14.png
		+
		+	When you refresh the page changes should be applied.

← Older revision		Revision as of 16:02, 5 December 2010
Line 106:		Line 106:

	</pre>		</pre>
		+
		+	=== Adding Some Images ===
		+
		+	There are a number of reasons your might add images to a theme. Maybe you want a colourful background image or maybe you want to make EPrints icons fit in with the rest of your theme. In this example my goal the later although the mechanism works for the former.
		+
		+	I want to replace RSS feed icons. To do this I create the directory themes/abstract_flash/style/images/. In this directory I can add image files which I then reference in my style sheet. The RSS feed icon already exists in EPrints and is used in the default style sheet. To replace it I simply create a file of the same name (in this case feed-icon-14x14.png). I'm using this icon I found on Icon Finder http://www.iconfinder.com/icondetails/42454/16/
		+
		+	wget http://cdn1.iconfinder.com/data/icons/iconic/raster/16/rss.png -O feed-icon-14x14.png

← Older revision		Revision as of 14:04, 5 December 2010
Line 52:		Line 52:


		+	===Changing the template===

−	which are ~~stored~~ in <~~code~~><~~eprints_root~~>/~~lib~~/~~static~~/style/~~auto~~</~~code~~>	+	Our theme can also contain a template. The template is the frame in which pages are displayed.
		+
		+	I suggest copying your template file from the lib directory <code>lib/templates/default.xml</code>. The template can go in either cfg/themes/abstract_flash/templates/default.xml or cfg/themes/abstract_flash/lang/[langid]/templates/default.xml (if you want a language specific template)
		+
		+	In this example I have moved the key tools bar so that it is a menu on the right of the screen. To do this you must edit your template and move the "login_status" pin from inside the search bar to below it. This exert shows what I have done:
		+	<pre>
		+	<table class="ep_tm_searchbar">
		+	<tr>
		+	<td> <!-- login_status pin was here--> </td>
		+	<td align="right" style="white-space: nowrap">
		+	<epc:pin ref="languages" />
		+	<form method="get" accept-charset="utf-8" action="{$config{http_cgiurl}}/search" style="display:inline">
		+	<input class="ep_tm_searchbarbox" size="20" type="text" name="q"/>
		+	<input class="ep_tm_searchbarbutton" value="Search" type="submit" name="_action_search"/>
		+	<input type="hidden" name="_action_search" value="Search"/>
		+	<input type="hidden" name="_order" value="bytitle"/>
		+	<input type="hidden" name="basic_srchtype" value="ALL"/>
		+	<input type="hidden" name="_satisfyall" value="ALL"/>
		+	</form>
		+	</td>
		+	</tr>
		+	</table>
		+	</div>
		+
		+
		+	<epc:pin ref="login_status"/>
		+
		+	</pre>
		+
		+	You must reload your configuration for this change to take affect.
		+
		+	You should now find that login information is outside of the search search bar area. Now we apply some style rules to position it on the right and make it look slightly more attractive. The style rules i chose are below.
		+
		+	<pre>
		+
		+	.ep_tm_key_tools {
		+	width: 200px;
		+	float: right;
		+	background: none repeat scroll 0 0 #D4FAE7;
		+	margin:0;
		+	border-left: 1px solid #525252;
		+	border-bottom: 1px solid #525252;
		+	}
		+
		+	.ep_tm_key_tools li, .ep_tm_key_tools li:first-child {
		+	border:none;
		+	font-size: 110%;
		+	display: block;
		+	padding: 10px;
		+	}
		+
		+	</pre>