Joomla - flash template

Martin a:

Jeg har fundet joomla templates, men er der noget specielt ved dem eller kan man godt bruge flash templates, Css templates osv?

Er ikke 100% sikker på, at jeg forstår dit spørgsmål. Et Joomla template vil altid bestå af CSS og HTML. Et direkte "CSS template" findes ikke (så vidt jeg er bekendt i hvert fald ;P). På samme måde kan du også have et flash-template, der er lavet til Joomla.

Har du blot et template i html/css, der ikke er tilpasset Joomla kræver det en del modificeringer førend du kan importere det til Joomla. Hvis du ikke har prøvet det før, så vil indlæringskurven helt sikkert være stejl. Der er meget der skal laves, før et ikke-joomla-template bliver "joomla venligt".

Tænk på det som et bilmotor; Hvis du har en Joomla bilmotor(template), så vil du kunne sætte den direkte ind i en Joomla bil(Joomla systemet). Har du derimod en anden bilmoter (jf. et template, der ikke er tilpasset Joomla), så vil du stadig kunne få denne motor til at fungere i en Joomla bil, men det kræver, at du beskærer og tilpasser den, så den kan fungere sammen med en Joomla bil. Ved ikke om denne analogi er helt tosset - det er sent, og jeg er træt  Min pointe; Det er slet ikke umuligt at få et ganske normalt template tilpasset til joomla. Men det er ikke noget du lige sætter dig ned og gør på en halv time.

Ang. flash templates, så har de den store svaghed, at flash og søgemaskiner er rigtige dårlige venner. Har du et site, der er lavet 100% i flash, så vil du skulle lave mange hacks og tilpasninger, førend det kan indexeres bare nogenlunde af søgemaskinerne.

Mange hjemmesider benytter derfor en kombination af flash almindelig html output. På den måde kan man fx have et funky top-banner i flash, der giver noget liv på siden, og så udforme selve "kroppen" af hjemmesiden således at den laver html output. På den måde kan du få flotte headers, samtidig med, at du bliver fundet i søgemaskinerne.

Jeg håber, at jeg har forstået dit spørgsmål rigtigt og du kunne bruge svaret til noget.

Forresten driver jeg sitet www.joomlatutorials.dk  - det kunne være lidt du kunne få lidt inspiration til Joomla der.

Det er helt sikkert lettere at sætte et HTML/CSS template op til Joomla end det er at sætte et flash template op.

Jeg er heller ikke enig Rasmus. Hvis HTML templatet først er lavet tager det ikke mange minutter at lave det til et Joomla template, selv for en nybegynder. Headeren skal ændres og der skal tilføjes nogle få tags. Det kræves selvfølgelig at man har styr på HTML og CSS, men det kræver ikke en dybere indsigt i Joomla.

Hvis du vil sætte et flash template op til Joomla skal du lave en del omkodning af Joomlas standard output. Flash templates kan programmeres til at læse indhold fra XML filer - men det kræver selvsagt at der genereres nogle XML filer der kan læses fra.

Hvis flash er vigtigt for dig (personligt synes jeg der er mere stil over et statisk design), så ville jeg, som Rasmus siger, kombinere det med HTML output. Det gør det en del mere simpelt at sætte op til Joomla.

Jeg er ikke vild god til dette men prøver at lære, min mappe som jeg har kaldt

"templates" ligger på mit skrivebord.

"templates" indeholder:

css  <- som er en mappe som indeholder "style.css"

Images <- som er en mappe med diverse billeder.

så har jeg en "component.php" som er blank.

En "index.php" som indeholder den kopieret kode.

En "templateDetails.xml" som indeholder den kopieret kode.

templates
                   css
                                  style.css
                     images                
                                  billeder                 
                  component.php
                  index.php
                  templateDetails.xml

Rasmus link

Koderne i index og templateDetails er de koder på Rasmus link.
Jeg har siddet i et par timer men er nu gået tilbage til start da jeg ikke kan få det til at virke.

style.css indeholder:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
    margin: 0;
    padding: 0;
    background: #F7F7F7 url(templates/images/img01.jpg) repeat left top;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    color: #5A554E;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    color: #32639A;
    font-family: Georgia, "Times New Roman", Times, serif;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 2.4em;
}

h3 {
    font-size: 1.6em;
}

p, ul, ol {
    margin-top: 0;
    line-height: 200%;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
}

ul, ol {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

a {
    text-decoration: underline;
    color: #516C00;
}

a:hover {
    text-decoration: none;
}

h2 a {
    text-decoration: none;
}

#wrapper {
    margin: 0px;
    padding: 0px;
    background: url(templates/images/img02.jpg) repeat-x left top;
}

/* Header */

#header {
    width: 1000px;
    height: 235px;
    margin: 0 auto;
    padding: 0px;
    background: url(templates/images/img03.jpg) no-repeat left top;
}

/* Logo */

#logo {
    float: left;
    margin: 0;
    padding: 115px 0px 0px 50px;
    color: #000000;
}

#logo h1, #logo p {
    margin: 0;
    padding: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
}

#logo h1 {
    letter-spacing: -1px;
    text-transform: lowercase;
    font-size: 44px;
}

#logo h1 a {
    color: #FFFFFF;
}

#logo p {
    margin: -30px 0px 0px 0px;
    padding: 26px 0 0 2px;
    font: normal 19px Georgia, "Times New Roman", Times, serif;
    color: #C5E8FF;
}

#logo a {
    border: none;
    background: none;
    text-decoration: none;
    color: #C5E8FF;
}

/* Search */

#search {
    float: right;
    width: 280px;
    height: 60px;
    padding: 20px 0px 0px 0px;
    background: #E2E2E2;
    border-bottom: 4px solid #FFFFFF;
}

#search form {
    height: 41px;
    margin: 0;
    padding: 10px 0 0 20px;
}

#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#search-text {
    width: 170px;
    padding: 6px 5px 2px 5px;
    border: 1px solid #DEDEDE;
    background: #FFFFFF;
    text-transform: lowercase;
    font: normal 11px Arial, Helvetica, sans-serif;
    color: #5D781D;
}

#search-submit {
    width: 50px;
    height: 22px;
    border: none;
    background: #B9B9B9;
    color: #000000;
}

#banner {
    margin-bottom: 20px;
    border: 12px #ECECEC solid;
}

/* Menu */

#menu {
    width: 1000px;
    height: 65px;
    margin: 0 auto;
    padding: 0;
    background: url(templates/images/img04.jpg) no-repeat left top;
}

#menu ul {
    float: right;
    margin: 0;
    padding: 0px 25px 0px 0px;
    list-style: none;
    line-height: normal;
}

#menu li {
    float: left;
}

#menu a {
    display: block;
    width: 120px;
    height: 39px;
    margin-left: 10px;
    padding-top: 15px;
    background: url(templates/images/img05.jpg) repeat-x left top;
    font-family: Georgia, "Times New Roman", Times, serif;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    font-weight: normal;
    color: #FFFFFF;
    border: none;
}

#menu a:hover, #menu .current_page_item a {
    text-decoration: none;
}

#menu .current_page_item a {
    background: url(templates/images/img06.jpg) no-repeat left top;
    padding-left: 0;
    color: #493E2B;
}

/* Page */

#page {
    width: 900px;
    margin: 0px auto;
    padding: 40px 50px 0px 50px;
    background: #FFFFFF;
}

/* Content */

#content {
    float: left;
    width: 570px;
    padding: 0px 0px 0px 0px;
}

.post {
    margin-bottom: 15px;
}

.post-bgtop {
}

.post-bgbtm {
}

.post .title {
    height: 38px;
    margin-bottom: 10px;
    padding: 12px 0 0 0px;
    letter-spacing: -.5px;
    font-size: 36px;
    color: #493E2B;
}

.post .title a {
    color: #493E2B;
    border: none;
}

.post .meta {
    margin: -10px 0px 0px 0px;
    padding: 0px 0px 10px 0px;
    letter-spacing: -1px;
    font-size: 23px;
    font-weight: normal;
    color: #6E8D3D;
    font-family: Georgia, "Times New Roman", Times, serif;
}

.post .meta .date {
    float: left;
}

.post .meta .posted {
    float: right;
}

.post .meta a {
}

.post .entry {
    background: url(templates/images/img08.jpg) no-repeat left top;
    padding: 25px 0px 0px 0px;
    text-align: justify;
}

.links {
    padding-top: 20px;
}

.more {
    padding-left: 16px;
    background: url(templates/images/img10.gif) no-repeat left 3px;
    text-decoration: underline;
    font-size: 12px;
    font-weight: normal;
}

.comments {
    padding-left: 18px;
    background: url(templates/images/img11.gif) no-repeat left 4px;
    text-decoration: underline;
    font-size: 12px;
    font-weight: normal;
}


/* Sidebar */

#sidebar {
    float: right;
    width: 273px;
    padding: 0px;
    color: #787878;
}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar li {
    margin: 0;
    padding: 0;
}

#sidebar li ul {
    margin: 0px 0px;
    padding-bottom: 20px;
}

#sidebar li li {
    line-height: 35px;
    margin: 0px;
    padding: 2px 0px;
    border-left: none;
}

#sidebar li li span {
    height: 19px;
    margin-right: 16px;
    padding: 4px 12px;
    background: #3D2A0B url(templates/images/img12.jpg) repeat-x left top;
    font-size: 12px;
    color: #FFFFFF;
}

#sidebar li li span a {
    color: #FFFFFF;
}

#sidebar h2 {
    height: 65px;
    background: url(templates/images/img09.jpg) no-repeat left bottom;
    letter-spacing: -.5px;
    font-size: 28px;
    color: #493E2B;
}

#sidebar p {
    margin: 0 0px;
    padding: 0px 0px 30px 0px;
    text-align: justify;
}

#sidebar p strong {
    color: #4A3E29;
}

#sidebar a {
    border: none;
}

#sidebar a:hover {
}

/* Calendar */

#calendar {
}

#calendar_wrap {
    padding: 20px;
}

#calendar table {
    width: 100%;
}

#calendar tbody td {
    text-align: center;
}

#calendar #next {
    text-align: right;
}

/* Footer */

#footer-content {
    width: 900px;
    height: 255px;
    margin: 0 auto;
    padding: 60px 50px 0px 50px;
    background: url(templates/images/img15.jpg) no-repeat left top;
    font-size: 12px;
    color: #887450;
}

#footer-content .column1 {
    float: left;
    width: 570px;
}

#footer-content .column2 {
    float: right;
    width: 273px;
}

#footer-content h2 {
    padding-bottom: 10px;
    font-size: 22px;
    color: #E3D2B6;
}

#footer-content strong {
    color: #E3D2B6;
}

#footer-content a {
    color: #AA8B55;
}

#footer-content a:hover {
    color: #AA8B55;
}

.list li {
    margin-bottom: 6px;
}

#footer {
    height: 50px;
    margin: 0 auto;
    padding: 0px 0 15px 0;
    font-family: Arial, Helvetica, sans-serif;
}

#footer p {
    margin: 0;
    line-height: normal;
    font-size: 12px;
    text-align: center;
    color: #82A2B9;
}

#footer a {
    text-decoration: underline;
    color: #82A2B9;
}