0

I recently downloaded the ja_nuevo template from JoomlArt. On the homepage of its sample site, there was a module called Services, and it used an alternative layout from ja_nuevo to have a specific, unique and dynamic view and functionality. I wanted to transfer this very part of the ja_nuevo home page, exactly as it is, and use it on another custom site, with a different template.

Copying the module and its core functionality succedded, but the look and feel was due to the alternative layout provided by ja_nuevo.

Is there any possibility to manage to get that specific layout to be used on the other site, even though it is of a different template?

I know that this is not possible directly by choosing so in the module options, so what I am asking for essentially is how to "copy" a layout from one template to another for direct use?

0

I had a quick look at the template and I saw a section called Services. So I assume you want to create something similar with the 3 boxes and their icons that move when you put your mouse over them.

What I see on the template is that this is all pure CSS. If you are unable to create this at your own, then you will need to study a bit the CSS of the demo site of the template with your browser's inspector, find any elements and their ids and classes that are involved and then find the css code that gives this style and moving effect.

To help you out I will put here the html of the Services section and the CSS that is involved.

<div class="t3-spotlight t3-spotlight-1 row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="t3-module module" id="Mod105">
            <div class="module-inner">
                <div class="module-ct">
                    <div class="custom">
                        <div class="ja-special-content">
                            <div class="circle-icon background-1"></div>
                            <h4>
                                <a href="/index.php/en/web-design">Web design</a>
                            </h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid dunt ut labore et dolore magna aliqua.
                            </p><a class="btn btn-link" href="/index.php/en/web-design">Read more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class=" col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="t3-module module" id="Mod111">
            <div class="module-inner">
                <div class="module-ct">
                    <div class="custom">
                        <div class="ja-special-content">
                            <div class="circle-icon background-2">
                                &nbsp;
                            </div>
                            <h4>
                                <a href="/index.php/en/security-proofed">Cloud Solutions</a>
                            </h4>
                            <p>
                                There are many variations of passages of Lorem Ipsum available, but the majority have many suffered alteration in some form.
                            </p><a class="btn btn-link" href="/index.php/en/security-proofed">Read more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class=" col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="t3-module module" id="Mod112">
            <div class="module-inner">
                <div class="module-ct">
                    <div class="custom">
                        <div class="ja-special-content">
                            <div class="circle-icon background-3"></div>
                            <h4>
                                <a href="/index.php/en/coding">Coding</a>
                            </h4>
                            <p>
                                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                            </p><a class="btn btn-link" href="/index.php/en/coding">Read more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is the most important parts of the CSS - Note that this is only for Desktop view.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.col-lg-4 {
    width: 33.33333333%;
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
}
.t3-module {
    position: relative;
}
.t3-module .module-inner {
    padding: 0;
}
.module-ct {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 14px;
}
.ja-special-content {
    text-align: center;
    height: auto;
    overflow: hidden;
    height: 320px;
}
.circle-icon.background-1 {
    background: #73bfe6;
}
.circle-icon {
    border-radius: 150px;
    display: inline-block;
    height: 150px;
    text-align: center;
    line-height: 150px;
    margin: 0 0 24px;
    overflow: hidden;
    width: 150px;
    zoom: 1;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.circle-icon .fa {
    color: #ffffff;
    font-size: 40px;
    line-height: 150px;
    display: block;
    overflow: hidden;
    zoom: 1;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ja-special-content > h4 {
    margin-top: -150px;
}
.ja-special-content > h4 {
    font-size: 18px;
}
.ja-special-content > h4 {
    color: #406a80;
    font-family: 'Montserrat',sans-serif;
    font-size: 16px;
    margin-bottom: 12px;
    margin-top: 0;
    line-height: 1.5;
    text-transform: uppercase;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.ja-special-content > h4 a {
    color: #406a80;
    text-decoration: none;
}
.ja-special-content > p {
    font-size: 14px;
    line-height: 24px;
    margin: 0 0 12px;
}
.ja-special-content:hover .btn {
    display: inline-block;
}
.ja-special-content .btn {
    display: none;
}
.btn-link {
    color: #73bfe6;
    font-size: 14px;
    text-transform: uppercase;
    padding-left: 0;
    padding-right: 0;
    display: inline;
}
.btn-link:after {
    content: "\f178";
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    margin-left: 12px;
}
.ja-special-content:hover .circle-icon {
    -webkit-transform: translate(0,-360px);
    -moz-transform: translate(0,-360px);
    -o-transform: translate(0,-360px);
    -ms-transform: translate(0,-360px);
    transform: translate(0,-360px);
}
.ja-special-content:hover h4 {
    margin-top: -150px;
}

Of course it's very likely that you might have to adjust the above code to meet your template's structure and overall styling. Also keep in mind that some of these style rules might conflict or affect other areas of your site.

  • Where can these be found in the site structure? – Noob Doob Aug 20 '15 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.