it-swarm-id.com

membuat template baru di 3.3

Saya membuat template baru 1 saya - sangat pemula.

Saya memiliki situs web HTML5 dan CSS3 statis yang saya buat sendiri dari awal dan mengonversinya menjadi templat Joomla 3.3.

Saya sudah membaca beberapa tutorial tentang cara membuat templat dasar dan sebagainya, tetapi saya benar-benar tidak punya waktu untuk mengerjakan semuanya, jadi saya butuh solusi cepat yang bisa saya gunakan semua gaya CSS dan mengabaikan apa pun yang datang dari Joomla.

Saya sudah mencoba menaruh beberapa gaya <div> memberi tag pada indeks saya atau sebagai modul di bawah (html khusus) tetapi ada beberapa gaya css yang mengesampingkan aturan css saya jadi saya hanya ingin menyingkirkan semuanya dari joomla dan menjaga templat baru saya tetap bersih.

Saya memiliki ini di dalam index.php saya

$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
$doc->addScript('/templates/' . $this->template . '/js/main.js', 'text/javascript');

tapi saya pikir gaya utama yang menimpa saya berasal dari garis ini

<jdoc:include type="head" />

yang saya tidak tahu apa yang dibawanya.

4
Elhamy

Aturan umum saat melakukan templat adalah memuat file CSS Anda sendiri setelah the <jdoc:include type="head" />. Itu penting karena dengan cara ini Anda memiliki keputusan final atas aturan CSS. Namun itu juga berarti bahwa Anda tidak menggunakan $doc->addStyleSheet() dalam templat Anda. Sebaliknya Anda hanya menulisnya sebagai HTML biasa di kepala Anda setelah pernyataan jdoc.

Ada satu alasan untuk tetap menggunakan API untuk menambahkan file JavaScript atau CSS di dalam templat Anda. Itu jika Anda memuat aset yang mungkin juga dimuat oleh ekstensi. Maka Joomla akan memastikan bahwa itu hanya dimuat satu kali, sedangkan sebaliknya Anda mungkin telah memuatnya dua kali.

Jadi mungkin masuk akal untuk memuat file bootstrap menggunakan API, tetapi gaya template Anda sendiri (style.css) dan JavaScript (main.js) harus dimuat dengan hardcoded setelah tag jdoc.

Pada sidenote: Anda dapat memuat Bootstrap CSS dengan menggunakan JHtmlBootstrap::loadCSS() ( http://api.joomla.org/cms-3/classes/JHtmlBootstrap .html # method_loadCss ). Ini sangat bagus jika dilakukan di dalam templat. Tetapi jangan pernah menggunakan panggilan ini dalam ekstensi.

Namun mungkin lebih masuk akal untuk bekerja dari file Bootstrap KURANG dan kompilasi file CSS Anda sendiri darinya. Kemudian Anda bahkan dapat mencampur dan mencocokkan hal-hal yang Anda butuhkan dan memanfaatkan mixin dan variabel yang sudah disediakan oleh Bootstrap.

6
Bakual

Sayangnya Joomla tidak berfungsi seperti ini. Untuk membuat templat Joomla, Anda harus memiliki beberapa elemen dinamis seperti tag jdoc yang mengimpor komponen dan sebagainya.

<jdoc:include type="head" /> juga merupakan persyaratan dan sangat praktis. Pada dasarnya, ia mendapatkan semua skrip, tautan, dan apa pun yang seharusnya disuntikkan ke dalam <head> dari ekstensi, dan suntikkan di sana untuk Anda. Misalnya, katakanlah Anda memiliki modul yang memerlukan graph.js. Untuk mengimpor ini, Anda akan menggunakan sesuatu seperti ini:

JHtml::_('script', JUri::root() . 'modules/my_module/js/graph.js');

Sekarang <jdoc:include type="head" /> mendapatkan kode di atas dan menyuntikkannya ke <head> untuk Anda sehingga Anda tidak perlu melakukannya secara manual. Karena itu, tetap di sana iklan jangan hapus itu. Saya juga akan diminta untuk beberapa skrip inti yang dikirimkan bersama Joomla.

Jika Anda ingin menggunakan modul di situs Anda, Anda tidak bisa hanya menambahkan kode HTML ke index.php Anda dan berharap itu berfungsi dengan baik dan menjadi dinamis. Inilah mengapa kami menggunakan:

<jdoc:include type="modules" name="position-7" />

yang mengimpor modul dan struktur HTML yang dikodekan dengannya. Anda dapat namun menambahkan HTML khusus untuk membungkus modul seperti:

<div class="sidebar">
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-7" />
    </div>
    <div class="sidebar-inner">
        <jdoc:include type="modules" name="position-8" />
    </div>
</div>

Itu tidak terlalu rumit dan juga membuat hidup jadi lebih sederhana. Joomla tidak didasarkan pada pendekatan statis karena itu Anda harus tetap pada cara kerjanya.

4
Lodder

Ketika saya pertama kali memulai, template Joomla yang tidak biasa tidak begitu bersih, dan itu bagus untuk pemula.

Saya memiliki bagian kepala yang terlihat seperti ini ...

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/layout.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/menus.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/modules.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/styles.css?v=20140508" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/peter.css?v=20140508-6" type="text/css" />

Secara khusus, stylesheet tidak termasuk dalam cara "Nice" dengan addStyleSheet, dan sebagai hasilnya, mereka tetap di tempatnya, terakhir! Setiap lembar gaya yang ditambahkan secara dinamis dimasukkan di <jdoc:include type="head" /> titik.

Apa yang mungkin terjadi dalam templat Anda adalah bahwa stylesheet Anda dimuat lebih dulu, lalu yang ditambahkan Joomla secara dinamis ditambahkan terakhir. Itu semua tergantung di mana fungsi addStyleSheet dipanggil.

Jika Anda yakin bahwa Anda memiliki semua yang Anda butuhkan di templat, dan tidak perlu tambahan bit dinamis yang ditambahkan (mis. Untuk editor frontend), atau untuk ekstensi apa pun yang Anda tambahkan, maka Anda mungkin dapat menghapus _ <jdoc:include type="head" />, setidaknya untuk templat pemula.

Atau ... tambahkan saja stylesheet Anda pada titik tetap, di luar kepala yang disertakan.

Setelah Anda melampaui pemula, Anda mungkin ingin memasukkan bagian kepala. Ada cara untuk memanipulasi konten dinamis, meskipun tidak harus untuk pemula. Misalnya, untuk debugging, saya memiliki stylesheet yang saya tambahkan secara dinamis menggunakan ekstensi khusus, jika saya pengguna yang login.

1
Peter Wiseman

Jika style Anda sedang diganti, tidak diragukan lagi karena css Bootstrap, karena menggunakan beberapa penyeleksi dengan spesifisitas tinggi.

Apakah situs statis Anda menggunakan Bootstrap? Jika tidak, maka Anda hampir pasti lebih baik tanpanya di templat Joomla Anda. Anda hanya akan berakhir berkelahi dengannya. Saya pikir ini yang sudah Anda lihat.

Jika Anda situs statis tidak menggunakan Bootstrap juga maka Anda bisa melupakan semua pembicaraan di sini KURANG dan cukup memasukkan CSS dan JS Anda sendiri, seperti yang telah Anda lakukan. Anda tidak harus menggunakan Bootstrap di templat Joomla Anda.

1
Seth Warburton