Welcome, Guest
Username: Password: Remember me

TOPIC: Solution to T3 Template conflict issue

Solution to T3 Template conflict issue 2 years 6 days ago #4517

  • Super User
  • Super User's Avatar
  • Offline
  • Administrator
  • Posts: 2763
  • Thank you received: 292
  • Karma: 40
Solution for T3 Template conflict with Jomclassifieds

Bootstrap Issue

This issue occurred because of bootstrap version conflict.That is, Joomla uses Bootstarp 2.3.2 whereas T3 Framework uses Bootstrap 3.

Bootstrap Issue Solution

Admin Backend -> Components -> JomClassifieds -> General Configuration -> General Settings tab -> Bootstrap Handling -> “ No ”

Then,

Go to Root -> components -> com_jomclassifieds -> views -> advert ->view.html.php

In this file do all following changes.

i) Find function "buildCarousel":
function buildCarousel($images)  
  	{    	
       	$html = '<div class="span12">';   }

and replace the class name as given below
function buildCarousel($images)  
  	{    	
            $html = '<div class="col-md-12">';   }

ii) Find class "modal hide fade in ":
$html .= '<div class="modal hide fade in" style="display:none;"  id="jcGal'.$i.'">';

and replace it by
$html .= '<div class="modal fade in" style="display:none;"

iii) Find class "icon-remove" :
$html .= '<a><img src="'.JomclUtils::getImage($images[$i], '_popup') .'" /><span class="close" data-dismiss="modal"><i class="icon-remove"></i></span></a></div></div>';

and replace it by
$html .= '<a><img src="'.JomclUtils::getImage($images[$i], '_popup') .'" /><span class="close" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i></span></a></div></div>';

iv) Find classes given below :
$html .='<a class="carousel-control left" href="#jomclCarousel" data-slide="prev">&lsaquo;</a>';
    	$html .='<a class="carousel-control right" href="#jomclCarousel" data-slide="next">&rsaquo;</a>';

and replace it by
$html .='<a class="carousel-control left" href="#jomclCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>';
   	$html .='<a class="carousel-control right" href="#jomclCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>';


Go to Root-> components -> com_jomclassifieds -> views -> advert -> tmpl -> default.php

In this file perform below changes.
i)Find class "row-fluid":
<div class="row-fluid">

and replace it by
<div class="container-fluid">

ii)Find class "span4" :
<div class="span4">

and replace it by
<div class="col-md-4">

iii)Find class "span5" :
<div class="span5">

and replace it by
<div class="col-md-5">

iv) Find class "span7" :
<div class="span7">

and replace it by
<div class="col-md-7>

v) Find class "span8" :
<div class="span8">

and replace it by
<div class="col-md-8">

vi) Find class "span12" :
<div class="span12">

and replace it by
<div class="col-md-12">

vii)Find class "modal hide" :
<div class="modal hide" id="jomclvideo">

and replace it by
<div class="modal" id="jomclvideo">

viii) Find class "icon-flag" :
<span class="report"> <i class="icon-flag" style="color:#FD6838;"></i>&nbsp;<a data-toggle="modal" href="#jomclreport"><?php echo JText::_('REPORT_THIS_AD') ?></a></span>

and replace it by
<span class="report"> <i class="glyphicon glyphicon-flag" style="color:#FD6838;"></i>&nbsp;<a data-toggle="modal" href="#jomclreport"><?php echo JText::_('REPORT_THIS_AD') ?></a></span>


Go to Root-> components -> com_jomclassifieds -> views -> advert -> tmpl -> default_contact.php

In this file, find class "modal hide fade in" and class "icon-remove" :
<div id="jomclcontact" class="modal hide fade in" style="display:none;"><a><span class="close" data-dismiss="modal"><i class="icon-remove"></i> </span></a>

and replace it by
<div id="jomclcontact" class="modal fade in" style="display:none;"><a><span class="close" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> </span></a>

Go to Root-> components -> com_jomclassifieds -> views -> advert -> tmpl -> default_report.php

In this file, find class "modal hide fade in" and class "icon-remove" :
<div id="jomclreport" class="modal hide fade in" style="display:none;"><a> <span class="close" data-dismiss="modal"><i class="icon-remove"></i></span></a>

and replace it by
<div id="jomclreport" class="modal fade in" style="display:none;"><a> <span class="close" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i></span></a>

Go to Root-> components -> com_jomclassifieds -> models -> advert.php

In this file find function getFavourites and change the class name :
function getFavourites($id)

if($count) {
       	$favourites = '<i class="icon-star" style="color:#FFCC00;"></i>&nbsp;';
       	$favourites .= JText::_('REMOVE_FROM_FAVOURITES');
   	} else {
       	$favourites = '<i class="icon-star" style="color:#FFCC00;"></i>&nbsp;';
       	$favourites .= JText::_('ADD_TO_FAVOURITES');
   	}

and replace it by
function getFavourites($id)

if($count) {
       	$favourites = '<i class="glyphicon glyphicon-star" style="color:#FFCC00;"></i>&nbsp;';
       	$favourites .= JText::_('REMOVE_FROM_FAVOURITES');
   	} else {
       	$favourites = '<i class="glyphicon glyphicon-star" style="color:#FFCC00;"></i>&nbsp;';
       	$favourites .= JText::_('ADD_TO_FAVOURITES');
   	}

Go to Root -> components -> com_jomclassifieds -> views -> advert -> tmpl -> default.php

In this file perform below changes.

Find class "icon-remove" :
<i class="icon-remove"></i>

and replace it by
<i class="glyphicon glyphicon-remove"></i>

Go to Root -> components -> com_jomclassifieds -> css -> jomClassifieds.css -> Make following changes in code.

i) Find div.modal and add the below property :
div.modal {
            	bottom : inherit;
}

ii) Find div#jomclassifieds .jomclspan6 :
div#jomclassifieds .jomclspan6 {
           	width : 58%;
}

and replace it by
div#jomclassifieds .jomclspan6 {
           	width : 70%;
}

iii) Find #jomclcontact, #jomclreport :
#jomclcontact, #jomclreport {
    width: 100%;
    left: 0;
    right: 0;
    position: fixed;
    margin: 0 auto;
    top:0;
}

and replace it by
#jomclcontact, #jomclreport, #jomclvideo {
    width: 100%;
    left: 0;
    right: 0;
    position: fixed;
    margin: 0 auto;
    top:0;
}

Go to Root-> components -> com_jomclassifieds -> css -> jomClassifieds.css -> Add below code at the end of the file
/* T3 issue Fixed Solution */

.jomclassifiedscontact .controls input[type="text"],
.jomclassifiedscontact .controls input[type="email"],
.jomclassifiedscontact .controls textarea {
	width:100%!important;
}
.jomclassifiedscontact label.control-label.empty {
	display:none;
}
.jomclassifiedsreport input[type="radio"] {
	display:inline-block;
}
.jomclassifiedsreport label.description {
	display:block;
}

@media (max-width: 768px) {
.jomclassifiedscontact label.control-label {
	text-align: left!important;
	padding-bottom: 5px;
}
.jomclassifiedscontact div.control-group {
	margin-bottom:5px!important;
}
.jomclassifiedscontact div.control-group div.controls {
	margin-left:0px!important;
}
}

@media (max-width: 768px) {
#jomclcontact, #jomclreport {
	width: 100%;
	left: 0;
	right: 0;
	position: fixed;
	margin: 0 auto;
	top:0;
}
#jomclCarousel div.modal-body img {
	width:100%;
}
}
div#jomclassifieds div.carousel {
	width: 97%;
}
div#jomclassifieds .imgblock {
	width: 100%!important;
}
Last Edit: 2 years 2 days ago by Super User.
The administrator has disabled public write access.
The following user(s) said Thank You: Eugene Schekutiev
Time to create page: 0.215 seconds