T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. Igor Cunha
  2. Vanity Monster Sherlock Holmes The Voice
  3. General Discussion
  4. Thursday, 23 January 2014
  5.  Subscribe via email
Hello, I need of modal of T3 framework with bootstrap 3 in T3 framework with bootstrap 2. it's possible with injection javascript?
Comment
There are no comments made yet.
Accepted Answer Pending Moderation
0
Votes
Undo
Hi igor,

It is possible but it is NOT recommend.

You can add this block to "Before </head>"

<style>
.modal-open {
overflow: hidden;
}

.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
display: none;
overflow: auto;
overflow-y: scroll;
width: auto;
margin: 0;
background: transparent;
}

.modal.fade .modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}

.modal-dialog {
position: relative;
z-index: 1050;
width: auto;
margin: 10px;
}

.modal-content {
position: relative;
background-color: #ffffff;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
}

.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
background-color: #000000;
}

.modal-backdrop.fade {
opacity: 0;
filter: alpha(opacity=0);
}

.modal-backdrop.in {
opacity: 0.5;
filter: alpha(opacity=50);
}

.modal-header {
min-height: 16.428571429px;
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}

.modal-header .close {
margin-top: -2px;
}

.modal-title {
margin: 0;
line-height: 1.428571429;
}

.modal-body {
position: relative;
padding: 20px;
}

.modal-footer {
padding: 19px 20px 20px;
margin-top: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}

.modal-footer:before,
.modal-footer:after {
display: table;
content: " ";
}

.modal-footer:after {
clear: both;
}

.modal-footer:before,
.modal-footer:after {
display: table;
content: " ";
}

.modal-footer:after {
clear: both;
}

.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}

.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}

.modal-footer .btn-block + .btn-block {
margin-left: 0;
}

@media screen and (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
}

.modal.fade.in {
top: 0;
}

</style>


And this code in "Before </body>"

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
jQuery('#myModal').on('show', function(){
jQuery(document.body).addClass('modal-open')
}).on('hidden', function(){
jQuery(document.body).removeClass('modal-open')
})
</script>



You can change the content inside
<div class="modal-body">
...
</div>

Hope it helps,

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
I changed the bootstrap.less file ( templates/t3_blank/less) in line

// Components: Popoversnew
@import "../../../plugins/system/t3/base/bootstrap/less/modals.less"; old <------- changed by-----> new @import "../../../plugins/system/t3/base-bs3/bootstrap/less/modals.less";

and changed name de bootstrap.less file by bootstrap3.less. I also created a theme for me with all the files. Bootstrap css 2, but I changed the codes from the modal bootstrap2 by boostrap 3 in my theme.

I can upgrade without problems ?

I have new t3 plugin installed with t3_blank with bootstrap 2.

I started using joomla to 4 months, and then I met T3 framework, I saw it was a great base to work with. Easy to use and customize.

Thanks.
  Resende - Rio de Janeiro, Brazil
Visit 
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi igor,

When you upgrade, all the changes which you make to default file will be overwritten.
Though, you can backup and re-apply them easily.

I would recommend you create a new theme, and put your custom less files there.
It will not be overwritten when you upgrade the template.

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.