New template Gentlix

Discussion in 'Subrion CMS Templates' started by olairmarcos, Apr 10, 2014.

  1. olairmarcos

    olairmarcos Member

    Fantastic new template Gentlix.
    I found a small problem that appears when we activated the Sticky navbar in the control panel. The characters of the menu are the same color as the background. This case can be easily solved with the addition of this style code in the user-style.css

    HTML:
    /* USER STYLES */
    .navigation-sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background:#38B7EA;
    z-index: 7000;
    padding-top: 0;
    padding-bottom: 0;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
     
    If you want to change the icon "back to top page" so that it looks like the buttons on the template add the following code in the file.
    HTML:

    #backToTop a:hover {
    background: #fff;
    color: #1490c1;
    border: 1px solid #387cea;
    }

    #backToTop a {
    display: block;
    width: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    height: 40px;
    line-height: 35px;
    color: #fff;
    text-decoration: none;
    font-size: 30px;
    background: #38B7EA;
    border: 1px solid #38B7EA;
    }
    Thanks.
  2. Andrew_G.

    Andrew_G. Staff Member

    Greetings ,

    Let me first thank you for your report.

    I've fixed these problems and reuploaded the template to the subrion.org & demos.subrion.com/templates
  3. Eleanna

    Eleanna Member

    Just looking at this template, nice, clean, simple. Where do I find the text: "
    Creative and unusual bikes especially for you.
    From workshop.Dead Creative."
    so that we can change this to something a little more appropriate for a particular user?
  4. Andrew_G.

    Andrew_G. Staff Member

    Greetings Eleanna,

    In order to change the value of the header block with the text above you need to log into your Subrion Admin Panel -> Content -> Blocks -> find the block with Title = Header block -> Edit -> change the value of the 'Contents' field to the needed value -> Save Changes.

    Thanks for your interest in our software products!
  5. Eleanna

    Eleanna Member

    Great, thanks.
  6. Andrew_G.

    Andrew_G. Staff Member

  7. ivanvieira

    ivanvieira New Member

    I am trying unsuccessfully for quite a few days to put custom icons for each link in a side block using "Font Awesome." I can not replace the icon ">" in front of the link. Placing the icon outside the tag "<a>" happens a line break (attached image).

    I wonder if there is a proper way to replace the ">" per "Font Awesome" icons in such cases.

    Attached Files:

  8. Andrew_G.

    Andrew_G. Staff Member

    Greetings @ivanvieira ,

    Angle-right icon of any Menu in the content part of Gentlix template has been implemented via :before pseudo class. That's why you can't modify it by placing the icon outside the tag "<a>.
    In order to edit / remove the angle-right icon in the Menu block you need to:
    1) connect to your server and download the Gentlix template folder (../templates/gentlix) to your PC
    2) open the ../templates/gentlix/less/ia-base.less file (on your PC) and change angle-right to the needed icon (full list of icons can be found here: http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ ) in the line of code:
    Code (CSS):
    &:before { content: @angle-right; }
    in this code:
    Code (CSS):
    .nav-pills li > a > i {
        .icon-FontAwesome();
        &:before { content: @angle-right; }
        margin-right: 6px;
    }
    3) recompile the ../templates/gentlix/css/iabootstrap.css file by using Prepros or any other LESS to CSS compiler. You can find detailed instruction on how to work with .less files of the Subrion templates here: http://www.subrion.org/forums/threads/styling-skeleton-template-with-less-css.1343/
    4) upload changed ../templates/gentlix folder to your server.
    That's it!
    olairmarcos likes this.
  9. ivanvieira

    ivanvieira New Member

    Andrew,

    Based on its guidance, I was able to locate CSS settings for the class "nav-pills" in the file "iabootstrap.css" originally compiled. Rather than rebuild the file, I preferred to add custom CSS code to "user-style;.css" file, which was as follows:

    Code (Text):
    /* USER STYLES */
    #print_preview:before,
    #meu-iptu:before,
    #meu-iss:before,
    #itbi:before,
    #protocolo:before,
    #nfse:before,
    #thanatus:before,
    #bombeiros:before {
       font-family: FontAwesome;
       margin-right:6px;
    }

    #print_preview:before {
       content: "\f02f";
    }

    #meu-iptu:before {
       content: "\f015";
    }

    #meu-iss:before {
       content: "\f044";
    }

    #itbi:before {
       content: "\f14d";
    }

    #protocolo:before {
       content: "\f0f6";
    }

    #nfse:before {
       content: "\f022";
    }

    #thanatus:before {
       content: "\f067";
    }

    #bombeiros:before {
       content: "\f134";
    }
    As a bonus, I also configure the printer icon in the "Actions" block.

    Tanks a lot for the orientation.

    Attached Files:

  10. Andrew_G.

    Andrew_G. Staff Member

    Hello @ivanvieira ,

    You've chosen a correct way too.

    Please don't hesitate to contact us if you have any questions or problems.
  11. dragon2015

    dragon2015 New Member

    Hi, I was just wondering, having installed the Gentile template, is there any way to change the header background colour please?.... I have trawled the css etc but don't seem to be able to find anything


    Many Thanks d
  12. Andrew_G.

    Andrew_G. Staff Member

    Hi @dragon2015 ,

    In order to change the header background color in the Gentlix template you need to add the following code to the ../templates/gentlix/css/user-style.css file:
    Code (CSS):
    header {
        background-color: #needed_color;
    }
    where needed_color should be replaced with HEX code of the needed to you color.

    Hope this will help you.
  13. ivanvieira

    ivanvieira New Member

    @Andrew_G. ,

    I'm trying to do a simple test to control downloads in a package I'm developing for a site with Gentlix template.

    In view.tpl file, I added the following jQuery code:

    Code (Javascript):
    <script type="text/javascript">
    $(document).ready(function(){
       $('#proposal_fieldzone').on('click', 'a', function(e){
          e.preventDefault();
          alert('Thanks for downloading!');
          // ajax code
           // change url to link when ajax is finished
           window.location = link;
          });
          // prevent following the link
          return false;
       });
    });
    </script>
    However, I can not in any way make the alert window open when the link is clicked, even confirming the source code generated by the file download field.

    I've tried many jQuery selector combinations without success. Would you help me?
  14. Andrew_G.

    Andrew_G. Staff Member

    Greetings @ivanvieira ,

    First of all please place your js code not to script tag but to {ia_add_js} smarty tag like this:
    Code (Javascript):
    {ia_add_js}
    $(function () {
        $('.sl').owlCarousel({
            items: 1,
            dots: false,
            nav: true
        })
    })
    {/ia_add_js}
    You can find more information about {ia_add_js} tag usage here: http://dev.subrion.org/projects/subrion-cms/wiki/Ia_add_js

    All our smarty functions description: http://dev.subrion.org/projects/subrion-cms/wiki/SmartyFunctions

    What about view.tpl file, it seems that you edited incorrect file.
    As you know we have override system in the Subrion CMS, more info here: http://www.subrion.org/forums/threa...-packages-tpl-files-in-certain-template.2253/

    So, it seems that you modified tpl file inside ../packages/package_name/templates/common/ folder instead of the ../templates/YOUR_TEMPLATE/packages/package_name/ folder.
  15. ivanvieira

    ivanvieira New Member

    @Andrew_G. ,

    Thanks a lot for the help. The addition of {ia_add_js} smarty tag did the trick.

    It was then possible to save the item ID and the member ID into a specific MySQL table. So shall I control which users downloaded the file.

    I actually modified the tpl file inside ../packages/package_name/templates/common/ because this check is part of the package, regardless of the template, this is wrong?
  16. Andrew_G.

    Andrew_G. Staff Member

    Hello @ivanvieira ,
    I'm always glad to help you.
    Sure, if you need to modify the .tpl file it should be copied to the ../templates/YOUR_TEMPLATE/ folder and then modified.
  17. ivanvieira

    ivanvieira New Member

    @Andrew_G. ,

    I am facing a new difficulty with the Gentlix template. In the pagination, the links "First" and "1" do not work properly, and the link "Previows" just does not work when I'm on page 2. In such cases, the browser tries to redirect to a folder with the package name in the server root local.

    The items are being shown correctly on their pages, respecting the limit settings of my package.

    This is an issue with a known solution?

    Regards,
  18. ivanvieira

    ivanvieira New Member

    @Andrew_G. ,

    After about 45 minutes I have asked the question above, I found a reference that made the paging function normally. I replaced the code below:

    Code (Text):
    {navigation aTotal=$pagination.total aTemplate=$pagination.url aItemsPerPage=$pagination.limit}
    by:

    Code (Text):
    {navigation aTotal=$pagination.total aTemplate=$pagination.url aItemsPerPage=$pagination.limit aIgnore=true}
    This apparently solved the problem and would like to confirm that this is the correct way.

    Happy Holidays!
  19. Andrew_G.

    Andrew_G. Staff Member

    Hi @ivanvieira ,

    You have found the correct way! I'm glad to see that you could find solution.

    Thanks for congratulations! We wish you Merry Christmas and Happy New Year!

Share This Page