Μη ξεχάσετε να κρατήσετε Backup στο Overall_Header.HTML με το οποίο θα ασχοληθούμε!
Οπτικό Integration είναι λοιπόν, το να έχουμε δύο ιστοσελίδες στημένες σε διαφορετικά συστήματα(Joomla! και phpBB για παράδειγμα, όπως τώρα) και με διαφορετικά Templates και Styles, να καταφέρουμε να τις κάνουμε να είναι πανομοιότυπες, χωρίς κούραση αλλά με λίγο κόπο.
Επειδή όπως και εγώ (κάποτε) ψαχνόμουν για το πώς να το κάνω, κάθησα σήμερα και είπα να γράψω το παρακάτω. Ελπίζω να σας βοηθήσω όσο μπορώ.
Βήμα 1.
Ανοίγουμε το αρχείο Overall_Header.HTML με κάποιο πρόγραμμα επεξεργασίας κώδικα(όπως π.χ. DreamWeaver)
Βήμα 2.
Εφόσον έχουμε μπροστά μας τον κώδικα του SubSilver2, θα επεξεργαστούμε κάποια πράγματα.
Αρχικά θα προσθέσουμε κάποια πράγματα.
- Αρχίζουμε με:
> <link href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" /> <link href="/templates/yoo_phoenix/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link rel="stylesheet" href="/templates/yoo_phoenix/css/template.css" type="text/css" /> <link rel="stylesheet" href="/templates/yoo_phoenix/css/variations/barorange.css" type="text/css" /> <link rel="stylesheet" href="http://*************/modules/mod_yoo_login/mod_yoo_login.css.php" type="text/css" />
Προσοχή! Αυτά είναι από το Template που χρησιμοποιώ. Εσείς θα τα δείτε πηγαίνοντας στην Joomla σελίδα σας, επιλέγοντας "Δεξί Κλικ--->Προβολή Πηγαίου Κώδικα". Θα είναι σε στυλ "<link rel................type="text/css" />
Αυτά τα κάνουμε επικόλληση κάτω από τα:><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
κ.λπ. που θα μας δίνει η phpBB.
- Μετά θα επεξεργαστούμε κάτι άλλο:
Ισως το Template σας λέει σε ένα σημείο:
> <style type="text/css"> <!-- .wrapper { width: 100%; } #main-shift { margin-left: 215px; } #left { width: 200px; } #menu .dropdown { width: 300px; } #menu .columns2 { width: 600px; } --> </style>
Αυτό θα το κάνετε αντιγραφή και θα το επικολλήσετε ακριβώς κάτω από τα:> <link rel=********type="text/css" />
Αν δεν υπάρχει, συνεχίζουμε με το επόμενο βήμα
Βήμα 3.
Σε αυτό το βήμα θα χρειαστεί να κάνουμε και άλλη μία επικόλληση. Αρχικά, θα βρούμε στον πηγαίο κώδικα του Joomla! κάποιες σειρές σε στυλ:
> <script type="text/javascript" src="***************************"></script>
Αυτές λοιπόν τις αντιγράφουμε όλες και τις κάνουμε επικόλληση κάτω από το:
>
<style type="text/css">
<!--
.wrapper { width: 100%; }
#main-shift { margin-left: 215px; }
#left { width: 200px; }
#menu .dropdown { width: 300px; }
#menu .columns2 { width: 600px; }
-->
</style>
(εφόσον υπάρχει, ειδάλλως, το κάνουμε επικόλληση κάτω από τα:
><link rel="stylesheet"************************************ type="text/css" />
Βήμα 4.
Σε ένα σημείο στον πηγαίο κώδικα του Joomla! θα βρούμε κάτι σαν αυτό:
><body id="page" class="****** ">
και στο phpBB αυτό:
><body class="{S_CONTENT_DIRECTION}">
Αντικαθιστούμε λοιπόν αυτό του phpBB με του Joomla!.
Βήμα 5.
Στο phpBB θα βρούμε ένα σημείο με:
>
<div id="wrapheader">
<div id="logodesc">
<table width="100%" cellspacing="0">
<tr>
<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
</tr>
</table>
</div>
και στο Joomla! ένα σημείο με:
> div id="page-body"> <div class="wrapper"> <div class="wrapper-bg1"> <div class="wrapper-bg2"> <div id="header"> <div id="toolbar"> </div> <div id="headerbar"> </div>
Προσοχή! Θυμηθείτε οτι δε χρησιμοποιούμε το ίδιο Template στο Joomla, οπότε δε θα μας δίνει τα ίδια. Αντικαθιστούμε λοιπόν αυτά του phpBB με τα αντίστοιχα του Joomla!. Για παράδειγμα το: (του phpBB)
><div id="wrapheader">
το αλλάζουμε με το: (του Joomla!)
>div id="page-body">
Βήμα 6.
Στο phpBB θα πρέπει να αντικαταστήσουμε το:
><div id="menubar">
με του Joomla!:
> <div id="menubar"> <div class="menubar-2"> <div class="menubar-3"></div> </div> </div>
*Μη ξεχνάτε οτι δεν έχουμε ίδιο Template. Οπότε σε εσάς θα έχει άλλα.
Βήμα 7.
Τέλος, αντιγράφουμε οτιδήποτε άλλο θέλουμε να προσθέσουμε και το κάνουμε επικόλληση κάτω από το:
> <!-- INCLUDE breadcrumbs.html -->
Φυσικά, μπορεί να μην πρέπει να μπει εκεί αλλά κάπου ενδιάμεσα στον κώδικα. Παίξτε μαζί του και θα τα καταφέρετε.
Αν θέλετε να αναδημοσιεύσετε το άρθρο σε μια άλλη ιστοσελίδα, παρακαλώ πάρα πολύ να επικοινωνήσετε μαζί μου είτε μέσω ΠΜ είτε μέσω email (giorgos147 at hotmail dot com)
Οποιοδήποτε πρόβλημα και αν αντιμετωπίσετε, απλά στείλτε μου ένα μήνυμα ή email.