1. 홈
  2. 질의 응답
  3. 첫 번째 Joomla 템플릿을 만드는 방법

첫 번째 Joomla 템플릿을 만드는 방법

2009-08-17 3 views

답변

1

대부분의 사람들에게 첫 번째 템플릿은 설치시 기본 템플릿을 사용하고 몇 가지 사항을 변경하여 수행됩니다. 이 비틀기에 대한 몇 가지 팁은 here입니다.

커뮤니티 포럼 here에도 잘 구성된 섹션이 있습니다.

출처

2009-08-17 10:51:57 butterchicken

0

대부분 나는 joomla에 대해 배우는 데 시간을 보내고 CSS를 공부하는 데 지출되었습니다. 처음에 그렇게하는 것이 좋습니다. 아직하지 않았다면.

출처

2009-10-02 16:30:19 birukw

1

내가 생각할 수있는 가장 단순한 joomla 템플릿은 다음과 같습니다. 켜져 있다면 디버그 메시지의 헤드 비트, 일부 모듈 비트, 구성 요소 비트, 메시지 비트 및 스팟이 필요합니다.

그리고 내가 예 거기 모듈 코드 형태를 취할 당신에게 등 자신의 HTML 및 CSS를 통합 할

<html> 
    <head> 
    <jdoc:include type="head" /> 
    </head> 
    <body> 
    <jdoc:include type="modules" name="top" /> 

    <jdoc:include type="message" /> 
    <jdoc:include type="component" /> 

    <jdoc:include type="modules" name="bottom" /> 

    <jdoc:include type="modules" name="debug" /> 
    </body> 

</html>

참고 :

는 대부분의 joomla 구성 요소 templatesused overwride 할 수 있으며 모듈. (그들은 html 폴더에 저장되어 있습니다. joomla와 함께 제공되는 기본 템플릿에서 이러한 예제를 볼 수 있습니다.)

또한 템플릿 디렉토리에서 파일을 업데이트해야합니다. 가장 중요한 것은 xml 파일입니다. 기본 모듈을 살펴보고 거꾸로/리버스 엔지니어로 작업하십시오.

지금 대부분의 템플릿에서 사용하는 표준 모듈 위치를 사용하는 것이 좋습니다 ... 템플릿을 쉽게 전환 할 수 있습니다.

출처

2009-10-07 00:29:06 Bingy

1

Blank을 살펴볼 수 있습니다. 그것은 Joomla에 대한 자신의 템플릿을 시작하는 데 필요한 모든 것을 제공합니다. 다행히도, 나는 이것에 대한 개발을 선택합니다 ;-)하지만 기본으로 시작하고 싶다면 Mini을 계속 주시하십시오. 이것이 전체 템플릿에 필요한 것입니다. 다른 모든 것들은 모든 웹 사이트 (html, css, javascript 등)와 같은 웹 개발 일뿐입니다.

btw, "joomla1.5"로 답변에 태그를 답니다. 이 오래된 버전의 템플릿을 개발하고 싶지는 않습니다. 어쩌면 당신이 그것을 retag.

출처

2016-12-07 07:54:36

0 
**The index.php file should start with:** 

    <!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" /></head> 

Those lines specify the beginning of the HTML output of your website. This PHP code 

    <jdoc:include type="head" /> 

will include in your page the Joomla header content (the page title, meta description, keywords, etc.) that you have added in the administrative end of your application. 

Next, we have to add the "body" part of your website: 

<body> 
<jdoc:include type="component" /> 
</body> 
</html> 
**Edit your index.php file and change the lines between <body> and </body> to:** 

    <div id="container"> 
    <div id="header"> 
    <jdoc:include type="modules" name="top" /> 
    </div> 
    <div id="sidebar_left" > 
    <jdoc:include type="modules" name="left" /> 
    </div> 
    <div id="content" > 
    <jdoc:include type="component" /> 
    </div> 
    <div id="sidebar_right"> 
    <jdoc:include type="modules" name="right" /> 
    </div> 
    <div id="footer" > 
    <jdoc:include type="modules" name="footer" /> 
    </div> 
    </div> 

Note that we have surrounded those in <div> tags and added information about their classes and ID's. In addition, we have wrapped everything in a div with ID "container" which allows us to set the basic dimensions of your page. The div classes will be defined in the template.css file once we create it. 

**At this point, however, your index.php should look like this:** 

    <!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" /> 
    </head> 
    <body> 
    <div id="container"> 
    <div id="header"> 
    <jdoc:include type="modules" name="top" /> 
    </div> 
    <div id="sidebar_left" > 
    <jdoc:include type="modules" name="left" /> 
    </div> 
    <div id="content" > 
    <jdoc:include type="component" /> 
    </div> 
    <div id="sidebar_right"> 
    <jdoc:include type="modules" name="right" /></div> 
    <div id="footer" > 
    <jdoc:include type="modules" name="footer" /> 
    </div> 
    </div> 
    </body> 
    </html> 
**Now we have to edit the templateDetails.xml file. In it, paste the following lines:** 

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" 
"http://dev.joomla.org/xml/1.5/template-install.dtd"> 
<install version="1.5" type="template"> 
<name>tutorial_template</name> 
<creationDate>02/2008</creationDate> 
<author>SiteGround</author> 
<authorEmail>[email protected]</authorEmail> 
<authorUrl>http://www.siteurl.com</authorUrl> 
<copyright>SiteGround</copyright> 
<license>SG TOS</license> 
<version>1.0.0</version> 
<description>Basic Joomla Template</description> 
<files> 
<filename>index.php</filename> 
<filename>templateDetails.xml</filename> 
<filename>css/template.css</filename> 
</files> <positions> 
<position>left</position> 
<position>right</position> 
<position>top</position> 
<position>footer</position> 
</positions> 
</install> 

**The next step is to add some styling to the template. First, open the index.php file and add the following line just before the </head> tag:** 

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates 
    /tutorial_template/css/template.css" type="text/css" /> 

**Now, you should edit the css/template.css file and add the following lines to it:** 

    * { padding: 0; margin: 0;} 
    img { border: 0;} 
    body { font-family: Arial, Helvetica, sans-serif; line-height: 1.3em; margin: 0; padding: 0; 
    font-size: 13px; color: #0F0F0F; } 
    a:link, a:visited { text-decoration: underline; font-weight: normal; color: #000; outline: 
    none; text-align: left; } 
    .float { float: left; } 
    .clear { clear: both; } 
    .overall { background-color: #fff; } 
    div.center { text-align: center; margin: 0px auto 0 auto; padding: 0; width: 950px; 
    background: #FFFFFF; } 
    #container { width:960px; margin: auto; background-color: #f4f9fc; border: 1px solid 
    #e2e2e2; text-align: left; } 
    #header { text-align: center; background-color:#f4f9fc; height: 80px; } 
    #content { width: 598px; text-align: left; background-color:#f4f9fc; padding: 5px; } 
    #sidebar_left { text-align: center; background-color:#f4f9fc; width: 165px; border- 
    right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; padding: 5px; } 
    #sidebar_right { background-color:#f4f9fc; text-align: center; width: 165px; border 
    -left: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; padding: 5px; } 
    #footer { background-color:#f4f9fc; text-align:center; border-top: 1px solid #e2e2e2; border- 
    bottom: 1px solid #e2e2e2; padding: 5px; }

출처

2017-01-09 09:53:26

관련 문제

 관련 문제