Tagged: 

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #545669

    Hello,
    I’m having trouble with the responsiveness for big cellphone screens such as iPhone 6s plus… It is not adapting correctly.. How can I fix it?

    Also, I need to create an icon image when the website is added to Home Screen on Iphones, so it looks like an app on IOS. Like the two last icons of the image I sent, they are not apps, they are websites added to home screen.

    https://www.dropbox.com/s/xt4sm5k6p5l9uh9/IMG_7860.png?dl=0

    #545777

    Hi clarissamansour,

    Your site looks fine on my end using iphone4/Chrome, could you post screenshots of the problem you are having please? Also specify what browser you are using.

    Regards,
    Rikard

    #545927

    Hello, you didn’t answer my second request. Thank you

    #545933

    Hi!

    Please add following code to Google Analytics field in Enfold theme options

    <link rel="apple-touch-icon" href="/your-custom-icon.png"/>

    Best regards,
    Yigit

    #554606

    Hello, unfortunately it didn’t work. How can I solve this issue??

    I put the code: <link rel=”apple-touch-icon” href=”uluwatu_logo_apple.png”/>
    Inside the Google Analytics field.

    When I add the website to Home Screen on my mobile, I doesn’t show correctly.

    #554621

    Hi!

    Please add following code to Functions.php file in Appearance > Editor

    function add_custom_code(){
    ?>
    <link rel="apple-touch-icon" href="/your-custom-icon.png"/>
    <?php
    }
    add_action('wp_head', 'add_custom_code');

    Best regards,
    Yigit

    #559529

    Hello, I pasted the code here (look at image/link) but it didn’t work either.

    Best, C.

    #560601

    Hi!

    can you provide us admin access please? so we can take a closer look into it and check it.
    Post login details here as private reply.

    Cheers!
    Andy

    #560635

    Yes sure

    #561556

    Hi!

    I can’t find the code Yigit provided you from here when checking your functions.php. Can you use it again please? cause we need to check it. Let us know when you are ready.

    Best regards,
    Andy

    #982034

    Hi,

    With regards to adding a home screen icon on mobile devices, is the above code still valid?

    If so, do we need to add both the function and the GA code?

    Thanks

    Phil

    #982443

    Hi Phil,

    Yes, you can try using the code. Please let us know if it does not work for you.

    Best regards,
    Victoria

    #982556

    you always can add those icons like this (but i think this is yigits code – with more options):

    add_action('wp_head', 'ava_add_icons');
    function ava_add_icons() {
        ?>
    <link rel="shortcut icon" type="image/x-icon" href="/wp-content/uploads/icons/favicon.ico">
    <link rel="icon" type="image/x-icon" href="/wp-content/uploads/icons/favicon.ico">
    <link rel="icon" type="image/gif" href="/wp-content/uploads/icons/favicon.gif">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon.png">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon.png">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-57x57.png" sizes="57x57">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-60x60.png" sizes="60x60">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-72x72.png" sizes="72x72">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-76x76.png" sizes="76x76">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-114x114.png" sizes="114x114">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-120x120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-128x128.png" sizes="128x128">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-144x144.png" sizes="144x144">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-152x152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-180x180.png" sizes="180x180">
    <link rel="apple-touch-icon" href="/wp-content/uploads/icons/apple-touch-icon-precomposed.png">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-160x160.png" sizes="160x160">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="/wp-content/uploads/icons/favicon-196x196.png" sizes="196x196">
    <meta name="msapplication-TileImage" content="/wp-content/uploads/icons/win8-tile-144x144.png"> 
    <meta name="msapplication-TileColor" content="#ffffff"> 
    <meta name="msapplication-navbutton-color" content="#ffffff"> 
    <meta name="application-name" content="homeurl.de"/> 
    <meta name="msapplication-tooltip" content="homeurl.de"/> 
    <meta name="apple-mobile-web-app-title" content="homeurl.de"/> 
    <meta name="msapplication-square70x70logo" content="/wp-content/uploads/icons/win8-tile-70x70.png"> 
    <meta name="msapplication-square144x144logo" content="/wp-content/uploads/icons/win8-tile-144x144.png"> 
    <meta name="msapplication-square150x150logo" content="/wp-content/uploads/icons/win8-tile-150x150.png"> 
    <meta name="msapplication-wide310x150logo" content="/wp-content/uploads/icons/win8-tile-310x150.png"> 
    <meta name="msapplication-square310x310logo" content="/wp-content/uploads/icons/win8-tile-310x310.png"> 
        <?php
    }

    a nice but german page to create those different sizes is: web-stuebchen.de

    #982574

    and a bit more elegant but not as mighty as the code above is to have on enfold options dialog under the favicon input field an apple touch icon input field ! : put this to your functions.php of your child-theme (all credits goes to the other Günter)

    function my_avf_option_page_data_add_elements( array $avia_elements = array() )
    {
      $slug = "avia";
      $id = 'favicon';
      
      $new_element =  array(
              "slug"  => "avia",
              "name"  => __( "Apple Icon", 'avia_framework' ),
              "desc"  => __("Specify an Apple Touch Icon for your site.", 'avia_framework')." <br/>".__("Accepted formats: .png", 'avia_framework')."<br/>".__("best format will be 158px in square", 'avia_framework'),
              "id"    => "avia_appleicon",
              "type"  => "upload",
              "label" => __( "Use Image as Apple Icon", 'avia_framework' ) );
      
      $found = false;
      $index = 0;
      
    
      foreach( $avia_elements as $key => $element )
    	{ $index++;
    	    if( isset( $element['id'] ) &&  ( $element['id'] == $id ) && isset( $element['slug'] ) && ( $element['slug'] == $slug ) ) { 
    	      $found = true;
    	      break;
    	   	}
      	} 
    	if( ! $found ) { 
    		$avia_elements[] = $new_element;
    	}
    	else {
    	$avia_elements = array_merge( array_slice( $avia_elements, 0, $index ), array( $new_element ), array_slice( $avia_elements, $index  ) );
    	}
    	return $avia_elements;
    	}
    add_filter( 'avf_option_page_data_init', 'my_avf_option_page_data_add_elements', 10, 1 );
    #982648

    Hi,

    Thanks for sharing @guenni007, much appreciated :-)

    Best regards,
    Rikard

    #982977

    Thanks @guenni007 – I”ll give that a try

    #983093

    Hi Phil,

    Great, let us know if you have any luck with it.

    Best regards,
    Rikard

    #983109

    Hi Rikard,

    I found this plugin

    A bit out of date but seems to work for iOS and it means we don’t have to code anything into functions.

    Now I’m looking to find a way to do something similar with Android.

    Cheers

    Phil

    #984493

    Hi,

    Thanks for the update.

    According to a stackoverflow thread, the iOS home screen icon markup should also work for android devices. If the plugin is generating the following markup then it should work for android devices, too.

     	<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
    

    // https://stackoverflow.com/questions/43467789/customize-icon-for-add-to-home-screen

    Or you can just add the markup manually as @Guennie007 suggested.

    Best regards,
    Ismael

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

You must be logged in to reply to this topic.