Change Instagram header Icon and the order

Home Forums Jevelin Theme Change Instagram header Icon and the order

Home Forums Jevelin Theme Change Instagram header Icon and the order

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • Devuser34
    Participant

    Hello,

    very nice job, well done.

     

    I would like to change the header Instagram icon with the new one (minimal rounded) and i would like to put the search icon after all social icons, to the right.

     

    Can you please guide me?

     

    Thank you.

    Hi @Devuser34,

     

    I hope you are well today and thank you for your question.

     

    Could you please share me your site URL where the header Instagram icon is displaying and also share me the new one (minimal rounded)  image URL so that i can help you to achieve it?

     

    Best regards,
    Shufflehound team

    Devuser34
    Participant

    Hello,

    thank you for your quick response. In the private section i give you credentials for the site, because it is in developing phase.

     

    Here is a link for the desire Instagram Icon, and please do not forget the order of the search icon, that i need to be changed.

     

    Thank you a lot.

    Solution for this topic

    You can try achieving it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .sh-nav li.menu-item.sh-nav-search.sh-nav-special {
        float: right;
    }
    
    a.social-media-instagram i {
        display: none;
    }
    
    a.social-media-instagram {
        background: url("http://www.uleth.ca/lib/images/icons/instagram.png") no-repeat center bottom;
        height: 32px;
        width: 25px;
        display: block;
        background-size: 100%;
        margin: 0 10px;
    }

    It seems you missed to attach new instagram icon so i have used placeholder icon in the above code which you can change by replacing icon image URL.

    Devuser34
    Participant

    Hello,

     

    the solution for the Search icon is correct, thank you a lot.

     

    About the instagram icon although i have some problems. The solution you send me is partial working because needs padding customization for the sticker and non sticker menu. Can we find a better solution for this? I mean at default you take a Simple line icon for the instagram icon, the simple line icons collection has the new instagram icon, the rounded, i believe it is more easier to replace the old with the new icon code. This solution also must be in your theme. I am waiting for this question.

     

    Something last, can i add and how a colored line under the menu items when i hover over one and on the selected? I mean a line above the item text ::after and ::before.

     

    Thank you for your answers.

    About the instagram icon although i have some problems. The solution you send me is partial working because needs padding customization for the sticker and non sticker menu. Can we find a better solution for this? I mean at default you take a Simple line icon for the instagram icon, the simple line icons collection has the new instagram icon, the rounded, i believe it is more easier to replace the old with the new icon code. This solution also must be in your theme. I am waiting for this question.

    Could you please share the screenshot of what you are referring so that i can better understand it and help you?

     

    Something last, can i add and how a colored line under the menu items when i hover over one and on the selected? I mean a line above the item text ::after and ::before.

    Use the below custom CSS code to achieve this.

     

    .sh-header .sh-nav > .current_page_item > a,
    .sh-header .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a {
        text-decoration: underline;
    }

    Devuser34
    Participant

    Hello sorry for my delay, but i was working to finish some sites and now the time for this site is come too.

    1. About the unresolved instagram icon thing. Now the instagram icon is taken from the styles.lib.css with content .icon-social-instagram::before {
      content: “\e609”;
      } I would like to take the new instagram icon from the font awesome collection, the content details are the following  Font awesome (content: “\f16d”;) . If this is not possible please give me another solution. Your previously did not work well.
    2. I would like also the Wpml Language switcher to go after the search icon, you will see it when you visit the new site, i give you after the site url.
    3. Is it possible in the default template of the blog articles, under the viewed article to show for example the 3 most popular or newest articles minified? I mean that imagine that you read an article, right down this article will be a a row with three other articles, small pictures or the titles.
    4. And last, if you see at the home page of the side, there is a large slider, can we do that in parallex style? I tried many things but i did not manage to do it, for example to be like https://www.google.com/drive/ main slider image?

    Sorry for this big message but these are all my final needs for the site, i will be gratefull if you can help me, thank you again.

    1. About the unresolved instagram icon thing. Now the instagram icon is taken from the styles.lib.css with content .icon-social-instagram::before {
      content: “\e609”;
      } I would like to take the new instagram icon from the font awesome collection, the content details are the following  Font awesome (content: “\f16d”;) . If this is not possible please give me another solution. Your previously did not work well.

    In this case you can use Custom Social Media icon in the theme social media settings as shown in the attached screenshots.

     

    1. I would like also the Wpml Language switcher to go after the search icon, you will see it when you visit the new site, i give you after the site url.
    2. Is it possible in the default template of the blog articles, under the viewed article to show for example the 3 most popular or newest articles minified? I mean that imagine that you read an article, right down this article will be a a row with three other articles, small pictures or the titles.
    3. And last, if you see at the home page of the side, there is a large slider, can we do that in parallex style? I tried many things but i did not manage to do it, for example to be like https://www.google.com/drive/ main slider image?

    You have to develop custom code to achieve this.

     

    Developing custom code for custom functionality is beyond the scope of support that we provide here. See https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support

     

    If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5

    Attachments:
    You must be logged in to view attached files.

    Devuser34
    Participant

    Hello,

     

    thanks for your help. I declare the hole 3 above questions as resolved from you.

     

    I have two last short questions, if you can help me.

     

    1. If you look at the home page, down at the point of the testimonials you will see that in the background of the element, where is the photo and the name is located, there is a soft shadow. I look to find from where i can remove it but i can not find the specific part in the css files. Can you tell me please how i can remove it?
    2. I would like to have the “Back to top button” in the desktop’s versions but not in the mobile. Is it possible to not to show only for the mobile devices? If not i will use another third party plugin.

    Thank you a lot, after these two questions we can close this big ticket.

    You are most welcome 🙂

     

    To help us keep support thread separates could you please create new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.

     

    If you want to you can also add reference of this thread in your newly created thread.

     

    We would be more than happy to help you on your new thread.

Viewing 10 posts - 1 through 10 (of 10 total)