Okay
  Public Ticket #293162
Change icon on flyout widget area
Closed

Comments

  • Calin started the conversation

    Hi,

    I like the new update there is a major design/UI problem... the icons for both the menu and the flyout widget area on mobile devices are the same. How can I change the icon for the widget area?

    Thanks.

  •  8,851
    Tahir replied

    Hey Calin!

    Can you please add the sidebar widget so i can write up some custom css to change its icon in mobile. 

    Thanks


    ThemeNectar Support Team 

  • Calin replied

    Hi,

    I`'ve added the side bar. I see that after the update, all rows that had a full width background no long stretch the image for the entire width. Please see this page > http://creartiv3.eu/despre-noi/ There are some images bellow that are smaller than the size of the screen. Should i replace the images or is it a css problem?

    Thanks.

  •  1,076
    ThemeNectar replied

    Hey Calin! The row image issue will be sorted in 4.8.1 which will be submitted in a few hours :)

  • Alex replied

    BTW, how did you activated flyout widget area (see "Ascend theme", a button right after a shopping car)? Couldn't find this solution in Theme Options, and here :(

    My ticket

  •  8,851
    Tahir replied

    Hey Alex!

    Have replied to your ticket. 

    Thanks


    ThemeNectar Support Team 

  • Calin replied

    Hi Tahir,

    Any luck with writing that custom css? Can you post it?

    I am posting a screen shot from my phone. There's an X in the top right corner. It's the close button from the flyout widget area but it's always visible on screen. Also, when i scroll to the top of the page, as you can see, the secondary menu at the top (the one with the social links) is streched and distorted

    Do you still need me to keep the widget area activated?

    Thanks.

  •  8,851
    Tahir replied

    Hey!

    Add this into the Custom CSS box located in your Salient Options panel :
    header#top .span_9 > .slide-out-widget-area-toggle i.icon-reorder:before {
        content: "\f079";
    }
    
    Thanks


    ThemeNectar Support Team 

  • Calin replied

    Hi Tahir,

    Thanks, the icon is changed but it's really not suggestive.. Could you please change it to this one > http://www.flaticon.com/free-icon/more-button-of-t... ? Or something similar.

    Thanks.

  • Calin replied

    Also, the top-right X that closes the slideout widget area is still always visible on my mobile. I refreshed
    the page and it's still there.

  •  1,076
    ThemeNectar replied

    Hey again,

    I can't seem to see any issues with the x or the menu as you've shown in your screenshot on my iPhone 5 or Gs5 - what mobile device are you using? Also do you experieince similar behavior on the live demo?

  • Calin replied

    Yes, I have the same problem on the demo. I`m using a Allview X1 Soul phone (http://www.gsmarena.com/allview_x1_soul-5996.php)

    Thanks.

  •  8,851
    Tahir replied

    Hey Calin!

    I just tested on an Gs4 and it seems to be alright. Can you try on other mobile phones. It could be that the android browser is outdated. 

    Thanks 


    ThemeNectar Support Team 

  • Etienne replied

    This seems to be the most appropriate thread for this comment so here it goes:

    Are you guys working on this feature?

    > add ability to change slideout panel toggle icon (via salient backoffice)

    I'm modding header.php for now, but a proper integration would be neat!

  •  1,076
    ThemeNectar replied

    Hey Etienne,

    The idea is on the wishlist :)

    Cheers

  • Alex replied

    Can someone let me know what the code for header.pho is to change this icon

  •  8,851
    Tahir replied

    Hey ,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .slide-out-widget-area-toggle span i.lines-button.x2:before {
        content: \'\\f0e0\';
        font-family: \'FontAwesome\';
        top: 6px !important;
        position: relative;
        color:#fff !important;
        font-size: 22px !important;
    }
    
    
    
    
    .slide-out-widget-area-toggle span i.lines {
        display: none !important;
    }

    Thanks


    ThemeNectar Support Team 

  • Alex replied

    Hi, Thats fine. I understand i can change the \'\\f0e0\'; unicode to change the icon by referencing the fontawsome toolkit, however i have a problem;

    The icons appear distorted/cropped/skewed to the right - see attached picture.

    When using the transparent menu, how do you specify a colour for transparent/white menu so that the colour changes along with other menu items.

    How do i make it spin to another icon?


  •  8,851
    Tahir replied

    Hey Alex,

    You will have to change the width of the icon to remove the cropping. Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    header#top nav ul .slide-out-widget-area-toggle a {
        width: 42px !important;
    }

    Thanks


    ThemeNectar Support Team 

  • Alex replied

    Hi Tahir,

    All that additional code did was make the icon rotate on a offset axis rather than a central one. The icon still looks skewed or perhaps italic typeset.

    I managed to fix the skew / italic by using this code from another ticket however when the icon rotates it is then cropped. it is not cropped before it rotates. lowering the font size changes the pivot axis and still crops.

    <span class=\"hljs-class\">.slide-out-widget-area-toggle</span> <span class=\"hljs-rule\"><span class=\"hljs-attribute\">i</span>:<span class=\"hljs-value\">before {
        font-style: normal</span></span>;
    }
    <span class=\"hljs-tag\">header</span><span class=\"hljs-id\">#top</span> <span class=\"hljs-class\">.span_9</span> > <span class=\"hljs-class\">.slide-out-widget-area-toggle</span> <span class=\"hljs-tag\">i</span> <span class=\"hljs-rules\">{
        <span class=\"hljs-rule\"><span class=\"hljs-attribute\">line-height</span>: <span class=\"hljs-number\">25px</span></span></span>;
    }
  •  8,851
    Tahir replied

    Hey Alex,

    Can you provide the page url so i can live edit the browser and give you 100% working css . Without a live url its just guess work.

    Thanks


    ThemeNectar Support Team 

  • Alex replied

    www.yawnaments.com

  •  8,851
    Tahir replied

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    .slide-out-widget-area-toggle i:before {
        content: \'\\f0fe\';
        font-family: \'FontAwesome\';
        top: 8px !important;
        position: relative;
        color: #78cd6e !important;
        font-size: 22px !important;
    }
    
    
    
    
    header#top .span_9 > .slide-out-widget-area-toggle i {
        line-height: 15px !important;
    }
    
    
    .slide-out-widget-area-toggle span i.lines {
        display: none !important;
    }



    Thanks


    ThemeNectar Support Team 

  • Alex replied

    No!

    Makes it worse. Image looks italic and rotates on a pivot axis. check url www.yawnaments.com

  •  8,851
    Tahir replied

    Hey Again,

    Use this instead:

    #header-outer[data-full-width=\"true\"] .slide-out-widget-area-toggle .open > span {
        width: 19px !important;
    }
    .slide-out-widget-area-toggle i:before {
        content: \'\\f0fe\';
        font-family: \'FontAwesome\';
        top: 4px !important;
        position: relative;
        color: #78cd6e !important;
        font-size: 22px !important;
        font-style: normal;
    }
    header#top .span_9 > .slide-out-widget-area-toggle i {
        line-height: 15px !important;
    }
    
    
    .slide-out-widget-area-toggle span i.lines {
        display: none !important;
    }

    Thanks


    ThemeNectar Support Team 

  • Alex replied

    much better thank you. Its still not aligned 100% with the search icon but will do i guess. is this going to be made easier to change in the later version?