Okay
  Public Ticket #2255730
Clearing doubts and Guides to customize the theme
Closed

Comments

  •   Safwan started the conversation
  •  1,823
    Support replied

    Hello,

    trying to respond to your questions inline (bolded)

    Q-1. How to change blog background color into black and same time blog font color into white?

    You need to set the blog page background color to black. Leave the Blog page blank in Settings -> Reading if you have a page with Blog Template

    Q-2. Is it possible to change scroll bar color and thickness? How to change that?

    Which scroll bar, the default browser scroll bar? I'm afraid not

    Q-3. How to change loading percentage numeric into a progress circle? How to code that (please find the attachment)

    the preloader is implemented in header.php lines 14 to 31 

    This div represents actually the percentage

    <div class="percentage" id="precent"></div>

    Q-4. It is possible to change present letter social icon of yours into image social icon? Then, how to do that, also currently i can add only 5 social links, want to add about 7,what to do for that? ans also want to remove popping 'follow us'and 'share icon', just need only the icons. 

    yes if you are using fontawesome icons files you need to change:

    /include/defines.php  (to change the social link IDs for example 'Fb' to 'facebook' so that the ID will be part of the social icon class, following the example 'fa fa-facebook' )

    then in /sections/footer_social_links_section.php you need to change line 15

    Q-5. Is it possible to set an image for error 404? How? 

    By modifying 404.php file

    Q-6. In full-screen slider need to change into loop the images,don't want end up on last one. what to do for that? and also is it possible to make automatic slider? how? 

    That's something you need to change in /js/scripts.js where the slider is initialized

    line 1423   var swiperOptions = { ...

    check the loop variable and autoplay

    whenever you change /js/scripts.js hard refresh the page (Ctrl+F5) to see the changes

    Q-7. Want to change the round cursor just want mouse default cursor only, how? 

    try adding

    #ball {
        display: none;

    }

    in customizer -> additional CSS

    Q-8. How to optimize full-screen slider image in mobile view? how to adjust the positions and scale of the image prefect for mobile view? and also how to adjust menu font size and header logo size in mobile view? 

    the fullscreen image is basically adjusting to the current viewport

    My fullscreen parallax image is not responsive and does not scale well

    you need to add different images for mobile but that involves custom work in showcase-page.php involving a function such as wp_is_mobile

    https://developer.wordpress.org/reference/functions/wp_is_mobile/

    for logo simpler, you can use media queries for mobile for example 

    @media only screen and (max-width: 479px) {

        #logo img {
            height: 40px;    
        }

    }

    in customizer -> additional CSS, change the height, the width is auto

    Q-9. how to change the names of 'view case' & 'click and hold' in full-screen slider 

    in showcase page options (see Showcase Template tab)

    Q-10. How to turn off image and video tilt in full-screen slider?

    look for this in /js/scripts.js

    // Tilt Showcase Wrapper
    var maxTilt = 1.5;
    var mouseX, mouseY;
    $(document).on("mousemove", function(event) {
    mouseX = event.pageX;
    mouseY = event.pageY;
    });
    $('#showcase-tilt').each(function() {
    var thisWidth = $(this).width();
    var thisHeight = $(this).height();
    var thisOffset = $(this).offset();
    $(document).mousemove(function() {
    var horTilt = ((mouseX / thisWidth) * (maxTilt * 2)) - maxTilt;
    var verTilt = (((mouseY - thisOffset.top) / thisHeight) * (maxTilt * 2)) - maxTilt;
    TweenMax.to('#showcase-tilt', 1,{rotationY: horTilt, rotationX: verTilt, scale: 1.05, ease:Power1.easeOut});
    });
    });

    and try to remove it

    Q-11. How to use the API token correctly? I've a valid API pin from google, but it is not working, I've checked for the error using inspect element and it shows like this (please find the attachment), and also I'm in maintenance mode, is that the problem? but i checked by adding API in live mode and yet not worked.How to handle this. 

    if looks like you need to authorize your contact page url in your Google Key API settings

    Q-12. How can edit your templates like story,blog,small-carousel,etc? where i can find it? (need to change story into a grid view) 

    you need to modify the corresponding page template files: blog-page.php, carousel-page.php, single.php

    Q-13. How can I create exact button like 'view case' in full-screen slider into about page or contact page as 'DOWNLOAD CV'and 'CONTACT ME' with Navigation Caption and Click-and-Hold Navigation Caption and how to turn off the button following the cursor hover effect in full-screen slider

    You can add a button block (or shortcode) outline and rounded:

    https://d.pr/free/i/1YgJKt

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Safwan replied privately
  •  1,823
    Support replied

    Hello,

    responding inline, bolded, as before

    Q-2. Default browser?! 🙄 No! Is this the default browser scroll bar or your themes'? (PFA)  If it is yours, how to change the thumb size, transparency and color

    Got it. The styles are added by the smooth scrollbar library they can be seen by inspecting the element in the browser

    https://d.pr/free/i/nCdrPr

    so you need to take the styles and change them and add them to customizer -> additional CSS

    Q-3. I wish to change the preloader like this (PFA). I have no great idea about coding and what to change in between lines 14 -30 in header.php. If you know what to do for get a preloader like in this GIF, then please explain the steps to create a preloader like that.

    I am not sure how to change the preloader to a gif, I've just showed where to change. Perhaps replacing the div id percentage with an <img> tag pointing to the gif

    That's a customization that you need to implement it yourself, plz review Envato support policy

    We can give you guidelines but you need to work out the details.

    Q-4. Thanks, it worked well for changing the icons and adding more icons, but when adding more icons (more than 5, I added up-to 7 by changing define ( 'SATELITE_MAX_SOCIAL_LINKS', 7 ); in '/include/defines.php' ) then now, the alignment of icons are showing in error order in desktop, tablet and mobile mode. I'am attaching an image to show the error. (PFA). (And what are you suggesting to change in 'line 15 in /sections/footer_social_links_section.php', I don't understand it, and like I said, I don't know much about coding.)

    You need to change line 15 so that instead of the acronym you will display the fontawesome icon

    Q-6. Thanks, I turned on loop and auto-play, it worked but a problem caused, the first and last portfolio's tittle and portfolio number overlapping while scrolling manually, I also tried by turn off auto-play,  hard refreshed the page many times, and also tried in vertical slider order, but unfortunately it shows the same error. This error is also showing in tablet and mobile mode as same as in desktop mode,  I'am attaching a video file in order to show the error (PFA).

    That's a customization that you need to implement it yourself, plz review Envato support policy

    We can give you guidelines but you need to work out the details.

    Q-8. Adjusting the size of logo in mobile mode worked well too, i also want to adjust the menu font size in mobile mode, what to do for that? Is there any way to adjust the position and size of a particular image in mobile mode by creating Additional CSS? If can please provide the code.

    @media only screen and (max-width: 767px){
    .flexnav li a {
        font-size: 7vw;
    }

    }

    for top menu items and

    @media only screen and (max-width: 1024px){

    .flexnav li ul li a {
        font-size: 12px; 
    }

    }

    for submenu items

    Q-12. Okay, What to do in those .php in-order to get the story template in to a grid view.

    I'm not sure exactly what you are trying to achieve that's where the page templates are implemented (Showcase, Carousel, Blog).

    Q-13. It worked well, thank you. 🙂 How to remove the following the cursor effect of the button in full-screen slider?

    in /sections/footer_section.php try removing parallax-element from line 17

    <div class="button-icon parallax-element">

    Q-14. It is shows that in copyright text 'This is the copyright text displayed in the footer if there is no background music.' Want to show the copyright and sound sound bar above the copyright at the same time. How to enable both same time?Also sound bar is not shown in mobile and tablet mode, how to enable it.

    plz understand that the kind of changes you are asking for cannot be done on the fly. It implies also CSS changes and others that are beyond the scope of support. Thank you for understanding.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Safwan replied privately
  •   Safwan replied privately
  • Safwan replied

    I had the same problem like here, and I changed the width for .social-wrap to 280px, but it worked only on both tablet and mobile mode, in desktop mode the icons are not yet showing but the icons are there and the space increased.

  • Safwan replied

    any update?

  •  1,823
    Support replied

    Hello,

    regarding social icons plz provide wp admin access in a private comment (wp admin url, admin username and password) so we can have a look and help you there.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Safwan replied privately
  •  1,823
    Support replied

    Hello,

    1. I'm sorry I suggested how to change the loop but it's obviously it requires more custom work, which we don't do at this time. We recommend keeping the original setting in order not to break the slider

    2. I added 

    .socials-wrap {
       width: 280px;
    }

    in customizer -> additional CSS

    3. what is the default scrollbar can you give us more details? I enabled Smooth Scrolling in customizer -> general settings


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Safwan replied

    1. Okay I understands.. :)

    2. But still a problem is here, only 5 icons are showing, I added 7 icons there, In Desktop view it shows only 5 icons, but in mobile and tablet view it shows all the 7 icons very well.

    3. The problem solved when you turned on smooth scrolling, Thank you.


  •   Safwan replied privately
  •  1,823
    Support replied

    Hello I fixed it with

    .socials-wrap {
       width: 360px;
    }

    .socials-wrap:hover .socials li:nth-child(6) {
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.05s;
    opacity:1;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
    }

    .socials-wrap:hover .socials li:nth-child(7) {
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.05s;
    opacity:1;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
    }

    in customizer -> additional CSS

    will ask our web designer but it's doubtful we have time for custom work at the present moment it's really busy herefrown.png


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Safwan replied

    There you are! Thanks for fixing it! 😊 you really saved me!

    • Is that really a lot of custom work to do that? 🙁 I think the last title is not going to left when scrolling forward and the  first title not going to right when scrolling backward. Come on. , I really need your help. Without a loop the Stand down of the post is really breaking the first impression of the website. 😔
    • I'm trying to create a progress circle and progress bar using Elementor and Jet Element plugin.  (I know WPB is the default page builder of this theme). Everything is going fine while editing the page, but once after published the page and take a look the progress bar animation is not working until right clicking and select inspect or zooming in or out the page. For you to clarify I attaching a video for showing the error., If anything you can suggest whit this problem It might be helpful.

    Thanks in advance. 🙂

  • Safwan replied

    As per yesterday's doubt about the progress bar and circle char, I tried to use different Gutenberg plugin called Qubely, there also the same problem occurring. This time everything showing well on the Gutenberg editor but at the preview nothing will happen, I Used different Gutenberg plugin blocks to do create this effect, but no customization occurring on our theme, I contacted those plugin supporters too, everyone saying that it's the problem of the theme, I changed the theme and tried other themes for testing, there were working on other themes well, even if it is a poor themes. But I really loves our theme, but no customization can do, is there any solution for this customization error? Hope a good replay from the supporter ASAP.

  •  1,823
    Support replied

    Hello Safwan

    Try disabling the ajax page transitions in customizer -> general settings

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Safwan replied

    It, was already disabled. I already figured it out this thing, there is also problem after disabling

  • Safwan replied

    Hello there, why you're not responding? I'am really stuck with the editing  section, I created a pie chart in Gutenberg editor If those charts only shows the percentage information when these chart place at the start of the page, If anything that create at the middle or bottom nothing is happening, no animation, no transition, no view or anything. I've tried many many 3rd party plugins to get rid of this error. This is happening only in our theme. Really I don't know whats happening, only you guys have know everything about this theme. I've google it for this errors, and did many things, nothing working, Everyone saying if it is the problem with the theme then contact the theme support, Help me with this problem. I'm really stuck, and you guys we're not helping. 😞

  •   Safwan replied privately
  • Safwan replied

    Hey guys, I found out a solution for this problem, Isn't scrolling the mouse wheel is a static motion? I've turned off the smooth scrolling in the general option. Now, the animations working but our themes default scroll bar gone, Now it's showing web bower's default one, that doesn't matches for the theme, Is there any solution to keep both of them?

    Thanks in advance.

  •  1,823
    Support replied

    hi there smooth scroll is implemented using smooth scrollbar

    https://github.com/idiotWu/smooth-scrollbar

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Safwan replied privately
  •   Support replied privately
  •   Safwan replied privately
  • Safwan replied

    Hi there,

    in 404 page the title is not showing correctly  in mobile view, I only changed Error Page Title and Error Page Info Text in Error page settings > Customize 

    2 screenshots are attaching to show you, before and after.


    used added this in additional css  

    @media (max-width: 500px){
        .error-title{
            margin-bottom: -100px;
    margin-right: -150px;
    margin-top: 50px;
         }
    }

    still not quite right, is there any way?  or need to use additional css and old one is correct?

    Thanks in advance

  •  1,823
    Support replied

    Hi,

    on your demo there is a pb accessing the 404 page I just the browser's page not found. Also I cannot find your styles in customizer -> additional CSS

    if I go to our demo site, the title and subtitle are well centered on mobile so it must be something specific to your site  i need to check

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Safwan replied

    Hello Clapat,

    sorry for the inconvenience faced on my website, my website is currently on maintenance mode, that's why you can't see anything, and I'm also customizing the theme right now on my local host, Those Additional CSS are done in local host. If the maintenance mode turns off right now website will go live, so once I moves my website from local host to live I will consult you for this help. You can close this ticket now. Later I'll take a new ticket for this.

    Thank you.

    Safwan Sadik

  •  1,823
    Support replied

    Ok, not a problem, closing this ticket - if you need you can open a new one.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    RIbamar replied

    How to change the names of 'view case' & 'click and hold' in full-screen slider on Portifolio?

  •  1,823
    Support replied

    The Navigation Caption field appears in page options (so when you edit the page) in Showcase Template tab

    So you need to change that for the page that has Showcase template

    https://i.imgur.com/L52e1Zp.png

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Safwan replied privately
  • Safwan replied

    How to add custom css only to specific POST/PAGE/PORTFOLIO?

    for example to change the 'main-title' in portfolio for that added CSS

    .main-title  {
            font-size: 5vw;
        }

    But the entire website portfolio pages main title changes, Is any way to do it for a specific portfolio?

  •  1,823
    Support replied

    Hello,

    the best way is to actually disable ajax in customizer -> general settings and use the unique class id generated by WordPress in the <body> element as prefix for yous css styles related only to that page:

    https://i.imgur.com/oI8igVh.png

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Safwan replied

    Okay thanks, Gotcha!

    I've Disabled ajax, But click and hold in full screen slider not working now. :(

  •  1,823
    Support replied

    Try disabling click and hold since you don't really need it when AJAX is disabled.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Safwan replied

    you mean click and hold no longer work, if ajax is disabled?

  •  1,823
    Support replied

    I don't know what's going on there I need wp admin access to see what's wrong

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Safwan replied privately
  •  1,823
    Support replied

    Hi there,

    so yes, the button does work (it navigates to the portfolio page) however, like I mentioned, the click and hold effect works only for ajax page transitions, for non-ajax it will go to directly to the target page.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Safwan replied

    how to enable 'Back To Top Button' in mobile and tab view

  •  1,823
    Support replied

    Hi ,

    try

    @media only screen and (max-width: 1024px){
         #backtotop {
             display: block!important;
             top: 0px!important;
         }

    }

    in customizer -> additional CSS


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Safwan replied

    Thank You ClaPat! :)

  • Safwan replied

    Hi,

    Is anyway to disable Middle Mouse Click?

  • Safwan replied

    Hi there,

    Is there any way to adjust the font size of '.title' in specific  post in full-screen slider?

    I used page id of full-screen slider but  it takes changes to whole post.

  •  1,823
    Support replied

    Hi, yes try

    .swiper-pagination-bullet:nth-of-type(n) .title {
        font-size: 85px !important;
    }

    in customizer -> additional CSS, where n is the slide number and replace the font size

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Safwan replied

    Thank You,

    I need a custom work would you guys can help me?

  •  1,823
    Support replied

    Depends on the time, what kind of custom work?

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Safwan replied

    I need a loop in full-screen slider

  •  1,823
    Support replied

    The loop is easy to add - changing the initialization options - it's actually the loop sync between different elements in the page that are more complex to change.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Safwan replied

    Hello there,

    Do you know why this page is appearing in google search ( https://safwansadik.com/?cat=-1 ) I cannot see such a page in dashboard. Can we remove or disable this page and not make them to appearing in google search?  Can you please help me with this problem?

  •  1,823