Joomla! 1.5 template

Billenhoofd · 28 mei 2009

Ik ben sinds enkele weken dus aan het proberen om mijn eigen Joomla! 1.5 template te ontwerpen.
Het lukt me echter niet om de juiste indeling te krijgen in de template. Ik denk zelf dat het komt doordat de DIV's niet goed communiceren met m'n .CSS-bestand maar ik heb zelf te weinig kennis om dit op te lossen.

Opbouw template.
css/template.css

images/arrow.png
images/footer.png
images/header.png

index.html [leeg; optioneel bestand]
index.php
params.ini [leeg; optioneel bestand]
templateDetails.xml

template.css

Code:

body {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
}

#container {
	background-color: #ffffff;
	border: 1px solid #ff0000;
	height: auto;
	margin: 0;
	padding: 0;
	width: 900px;
}

#header {
	background-image: url('../images/header.png');
	border: 1px solid #000000;
	height: 250px;
	margin: 0;
	padding: 0;
	width: 700px;
}

#latest_news {
	background-color: #ffffff;
	border: 1px solid #000000;
	height: 250px;
	line-height: 1.2em;
	margin: 0px;
	padding: 5px;
	width: 200px;
}

#content {
	background-color: #ffffff;
	border: 1px solid #000000;
	height: auto;
	line-height: 1.2em;
	margin: 0px;
	padding: 15px;
	width: 700px;
}

#sidebar_right {
	background-color: #ffffff;
	border: 1px solid #000000;
	height: auto;
	line-height: 1.2em;
	margin: 0px;
	padding: 5px;
	width: 200px;
}

#footer {
	background-image: url('../images/footer.png');
	height: 30px;
	margin: 0;
	padding: 0;
	width: 900px;
}

	/** dropdown **/

ul#menulist_root li ul {
	display: none;
	height: 30px;
	line-height: 1.2em;
}

ul#menulist_root li:hover ul {
	display: block;
	background: none;
	height: 30px;
	line-height: 1.2em;
}

ul#menulist_root li ul li {
	background: #ff0000;
	clear: both;
	height: 30px;
	line-height: 1.2em;
}

ul#menulist_root li ul li a{
	background: none;
	height: 30px;
	line-height: 1.2em;
	width: auto;
}

ul#menulist_root li ul li a:hover {
	background: none;
	color: #000000;
	height: 30px;
	line-height: 1.2em;
}

	/** links **/
	
a:link {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: normal;
	text-decoration: none;
}	

a:visited {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: normal;
	text-decoration: none;
}

a:hover {
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: normal;
	text-decoration: underline;
}

a:active {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: normal;
	text-decoration: underline;
}

	/** breadcrumbs **/
	
.pathway {
	background-color: #ffffff;
}

a.pathway {
	background-color: #ffffff;
	border: none;
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 8pt;
	font-weight: normal;
	line-height: 1.2em;
	text-decoration: underline;
}

a.pathway:visited {
	background-color: #ffffff;
	border: none;
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 8pt;
	font-weight: normal;
	line-height: 1.2em;
	text-decoration: underline;
}

a.pathway:hover {
	background-color: #ffffff;
	border: none;
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 8pt;
	font-weight: normal;
	line-height: 1.2em;
	text-decoration: underline;
}

	/** forms settings **/
	
.button {
	background-color: #ff0000;
	color: #ffffff;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2em;
}

.inputbox {
	background-color: #ffffff;
	border: 1px solid #000000;
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: normal;
	line-height: 1.2em;
}

.search {
	background-color: #ffffff;
	border: 1px solid #000000;
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: normal;
	line-height: 1.2em;
}

	/** menu settings **/
	
a.mainlevel {
	background-color: #ffffff;
	border: 1px solid #000000;
}

a.mainlevel:link {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0;
	padding: 5px;
	text-decoration: none;
}

a.mainlevel:visited {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0;
	padding: 5px;
	text-decoration: none;
}

a.mainlevel:hover {
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0;
	padding: 5px;
	text-decoration: underline;
}

a.mainlevel:active {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0;
	padding: 5px;
	text-decoration: underline;
}

a.sublevel {
	background-color: #ffffff;
	border: 1px solid #000000;
}

a.sublevel:link {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: italic;
	line-height: 1.2em;
	margin: 0;
	padding: 5px;
	text-decoration: none;
}

a.sublevel:visited {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: italic;
	line-height: 1.2em;
	margin: 0;
	padding: 5px;
	text-decoration: none;
}

a.sublevel:hover {
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: italic;
	line-height: 1.2em;
	margin: 0;
	padding: 5px;
	text-decoration: underline;
}

a.sublevel:active {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: italic;
	line-height: 1.2em;
	margin: 0;
	padding: 5px;
	text-decoration: underline;
}

	/** read more **/
	
a.readon:link {
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2em;
	text-decoration: none;
}

a.readon:visited {
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: 11pt;
	font-weight: bold;
	line-height: 1.2em;
	text-decoration: none;
}

a.readon:hover {
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2em;
	text-decoration: underline;
}

	/** buttons **/
	
.back_button {
	background-color: #ff0000;
	border: 1px solid #000000;
	color: #ffffff;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2em;
}

.pagenav_prev {
		background-color: #ff0000;
	border: 1px solid #000000;
	color: #ffffff;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2em;
}

.pagenav_next {
	background-color: #ff0000;
	border: 1px solid #000000;
	color: #ffffff;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2em;
}

	/** latest news **/
	
.latestnews ul {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: normal;
	line-height: 1.2em;
}

.latestnews li {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: normal;
	line-height: 1.2em;
}

	/** date & author **/
	
.createdate {
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 8pt;
	font-weight: italic;
	line-height: 1.2em;
}

.modifydate {
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 8pt;
	font-weight: italic;
	line-height: 1.2em;
}

.small {
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 8pt;
	font-weight: italic;
	line-height: 1.2em;
}

.smalldark {
	color: #ff0000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 8pt;
	font-weight: italic;
	line-height: 1.2em;
}

	/** description **/
	
.contentdescription {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: italic;
	line-height: 1.2em;
}

	/** section **/
	
.sectiontableheader {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 12pt;
	font-weight: bold;
	line-height: 1.2em;
	text-decoration: underline;
}

.sectiontableentry1 {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: bold;
	line-height: 1.2em;
	text-decoration: none;
}

.sectiontableentry2 {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: italic;
	line-height: 1.2em;
	text-decoration: none;
}

	/** module table **/

table.moduletable {
	background-color: #ffffff;
	border: 1px solid #000000;
}

table.moduletable th {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 12pt;
	font-weight: bold;
	line-height: 1.2em;
}

table.moduletable td {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: normal;
	line-height: 1.2em;
}

	/** content to click **/
	
table.contenttoc {
	background-color: #ffffff;
	border: 1px solid #000000;
}

table.contenttoc th {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 12pt;
	font-weight: bold;
	line-height: 1.2em;
}

table.contenttoc td {
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: normal;
	line-height: 1.2em;
}

.poll {
	background-color: #ffffff;
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 11pt;
	font-weight: normal;
	line-height: 1.2em;
	text-decoration: none;
}

.pollstableborder {
	border: 1px solid #000000;
}

index.php

Code:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
	<head>
		<jdoc:include type="head" />
		
		<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/demo/css/template.css" type="text/css" />
	</head>

	<body>
		<div id="container">
			<div id="header">
				<jdoc:include type="modules" name="top" />
			</div>
			
			<div id="latest_news">
				<jdoc:include type="modules" name="user1" />
			</div>
			
			<div id="dropdown">
				<jdoc:include type="modules" name="user3" />
			</div>
			
			<div id="content" class="float">
				<jdoc:include type="modules" name="breadcrumb" />
				<jdoc:include type="component" />
			</div>
			
			<div id="sidebar_right" class="float">
				<jdoc:include type="modules" name="right" />
			</div>
			
			<div id="footer" class="clear">
				<jdoc:include type="modules" name="footer" />
			</div>
		</div>
	</body>
</html>

templateDetails.xml

Code:

<?xml version="1.0" encoding="utf-8"?>

<mosinstall version="1.0" type="template">
	<name>Test</name>
	
	<creationDate>27/05/2009</creationDate>
	
	<author>Libelnet</author>
	
	<copyright>Copyright 2009 - Libelnet</copyright>
	
	<authorEmail>info@libelnet.nl</authorEmail>
	
	<authorUrl>http://www.libelnet.nl/</authorUrl>
	
	<version>1.0</version>
	
	<description>Joomla! 1.5 template by Libelnet.</description>
	
	<files>
		<fileName>index.html</fileName>
		<fileName>index.php</fileName>
		<fileName>params.ini</fileName>
		<fileName>templateDetails.xml</fileName>
	</files>
	
	<css>
		<fileName>css/template.css</fileName>
	</css>
	
	<images>
		<fileName>images/arrow.png</fileName>
		<fileName>images/footer.png</fileName>
		<fileName>images/header.png</fileName>
	</images>
	
	<positions>
		<position>top</position>
		<position>user1</position>
		<position>user3</position>
		<position>breadcrumb</position>
		<position>right</position>
		<position>footer</position>
	</positions>
</mosinstall>

Dit is hoe mijn website er tot dusver uitziet.
[smallimg]http://i41.tinypic.com/343hnhu.jpg[/smallimg]

Frats · 28 mei 2009

Open de broncode van je site eens, kijk waar de .css heenwijst, en ga eens naar die link? Krijg je dan de css te zien? Zo niet, dan klopt je link niet en dan heb je idd geen CSS.

Billenhoofd · 28 mei 2009

Frats zei:
Open de broncode van je site eens, kijk waar de .css heenwijst, en ga eens naar die link? Krijg je dan de css te zien? Zo niet, dan klopt je link niet en dan heb je idd geen CSS.

Heb even gekeken en geen enkele DIV linkt me door naar de CSS die ik daarvoor heb gemaakt,
Iemand zo vriendelijk om dit voor me op te lossen? Of me te vertellen hoe ik het zelf kan oplossen?

Tha Devil · 28 mei 2009

Installeer de plugin "Web Developer" eens voor Firefox.

Daarmee kun je wat meer testjes doen

Verder: Wat Frats bedoelt is dat je even moet kijken of je CSS-bestand ook wel bestaat op de plek waarheen je in het HTML verwijst.

Die verwijzing staat in de broncode

Billenhoofd · 28 mei 2009

De verwijzing klopt gewoon.
Maar m'n CSS krijgt geen grip op de DIV's waardoor m'n hele website onjuist is verdeeld.

Tha Devil · 28 mei 2009

Dat kan niet, als je CSS goed is gekoppeld dan zal hetgeen voor #container ook op <div id="container"> worden toegepast.

Het lijkt er haast op dat je in Firefox hebt aangegeven geen CSS weer te laten geven.
In andere browsers ook problemen?

Kun je anders de URL hier plaatsen?

Billenhoofd · 28 mei 2009

Tha Devil zei:
In andere browsers ook problemen?

Ja, in zowel Firefox als in Internet Explorer werkt het niet.

Url:
http://www.libelnet.eu/testing/testsite/

Tha Devil · 28 mei 2009

Zoals Frats al vermoedde en ik ook: Je CSS referentie klopt niet.

Volgens je HTML moet je CSS hier te vinden zijn: http://www.libelnet.eu/testing/testsite/templates/demo/css/template.css

Daar staat ie dus niet.

Johantrax · 29 mei 2009

'Fouten' zoals deze zijn zeer eenvoudig op te sporen adhv de FireBug add-on voor FireFox. Deze heeft een tab 'Net' waarin je kan zien welke bestanden allemaal worden ingeladen samen met de actieve pagina. Niet-gevonden bestanden/errors staan daar in het rood, met hun volledig adres..

Billenhoofd · 29 mei 2009

Tha Devil zei:
Zoals Frats al vermoedde en ik ook: Je CSS referentie klopt niet.

Volgens je HTML moet je CSS hier te vinden zijn: http://www.libelnet.eu/testing/testsite/templates/demo/css/template.css

Daar staat ie dus niet.

Bedankt. Dit probleem is nu de wereld uit.

Nu is m'n website echter nog steeds fout ingedeeld. Iemand een idee hoe dit is op te lossen?

http://www.libelnet.eu/testing/testsite/

Billenhoofd · 4 jun 2009

Niemand die mij kan helpen?

defietser · 4 jun 2009

Billenhoofd,
Ik heb daar zojuist uw testsite (http://www.libelnet.eu/testing/testsite/)bekeken in vijf verschillende browsers.
En in alle vijf wordt die site correct weergegeven.
Heb je al eens uw pagina venieuwd in de browser kan een stuk schelen nu de cache van de site vernieuwd is.
Mvg
defietser

Joomla! 1.5 template

Billenhoofd

Gebruiker

Frats

Terugkerende gebruiker

Billenhoofd

Gebruiker

Tha Devil

Moderator

Billenhoofd

Gebruiker

Tha Devil

Moderator

Billenhoofd

Gebruiker

Tha Devil

Moderator

Johantrax

Terugkerende gebruiker

Billenhoofd

Gebruiker

Billenhoofd

Gebruiker

defietser

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy