Προς το περιεχόμενο

Βοήθημα- Οπτικό Integration σε ιστοσελίδα Joomla με γεφύρωση

giorgos147

Από τον giorgos147
στο Web Design - Development

Προτεινόμενες αναρτήσεις

giorgos147 Grand Master

giorgos147

Δημοσ.
Δημοσ.

Μη ξεχάσετε να κρατήσετε BackUp στο Overall_Header.HTML με το οποίο θα ασχοληθούμε!

 

Οπτικό Integration είναι λοιπόν, το να έχουμε δύο ιστοσελίδες στημένες σε διαφορετικά συστήματα(Joomla! και PhpBb για παράδειγμα, όπως τώρα) και με διαφορeτικά 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 -->

<br />

Φυσικά, μπορεί να μη πρέπει να μπει εκεί αλλά κάπου ενδιάμεσα στον κώδικα. Παίξτε μαζί του, και θα τα καταφέρετε.

 

Αν θέλετε να αναδημοσιεύσετε το άρθρο σε μια άλλη ιστοσελίδα, παρακαλώ πάρα πολύ να επικοινωνήσετε μαζί μου είτε μέσω ΠΜ είτε μέσω email(giorgos147 at hotmail dot com)

 

Οποιοδήποτε πρόβλημα και αν αντιμετωπίσετε, απλά στείλτε μου ένα μήνυμα ή email.

 

---------- Το μήνυμα προστέθηκε στις 00:00 ----------

 

Τελικά ξαναέφραψα το άρθρο σε 7 πολύ εύκολα βήματα. Ελπίζω να σας βοηθήσω όσο μπορώ.

Περιμένω σχόλια!

UpToDate_ Crazy Insomniac

UpToDate_

Δημοσ.
Δημοσ.

Ωραιος!!

Αν και δεν εχω ιδεα τι ειναι αυτο , φενεται πολυ καλη δουλεια!

Ειδικα τα χρωματα!

:-D

 

:lol::lol:

Περα απ'την πλακα,περιληπτικά ξερω περι τινος προκειται,καλη δουλεια.^^

 

 

deminho11 Proficient

deminho11

Δημοσ.
Δημοσ.
Ωραιος!!

Αν και δεν εχω ιδεα τι ειναι αυτο , φενεται πολυ καλη δουλεια!

Ειδικα τα χρωματα!

:-D

 

:lol::lol:

Περα απ'την πλακα,περιληπτικά ξερω περι τινος προκειται,καλη δουλεια.^^

 

 

Είσαι ΓΑΜΑΤΟΣ!!!

snik Crazy Insomniac

snik

Δημοσ.
Δημοσ.

giorgos147 ωραιο το αρθρο σου, καλο θα ηταν να το βαλεις σε wiki.

Θα ηθελα να μου δειξεις αν εχεις καποιο website που εχεις δοκιμασει τον παραπανω οδηγο.

Αρχειοθετημένο

Αυτό το θέμα έχει αρχειοθετηθεί και είναι κλειστό για περαιτέρω απαντήσεις.

Προς την λίστα θεμάτων
  • Δημιουργία νέου...