Tagged: 

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • December 1, 2015 at 11:40 pm #545669
    clarissamansour

    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

    December 2, 2015 at 8:59 am #545777
    Rikard

    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

    December 2, 2015 at 4:07 pm #545927
    clarissamansour

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

    December 2, 2015 at 4:16 pm #545933
    Yigit

    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

    December 17, 2015 at 7:18 pm #554606
    clarissamansour

    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.

    December 17, 2015 at 7:50 pm #554621
    Yigit

    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

    January 4, 2016 at 10:15 pm #559529
    clarissamansour

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

    Best, C.

    January 6, 2016 at 4:31 pm #560601
    Andy

    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

    January 6, 2016 at 5:11 pm #560635
    clarissamansour

    Yes sure

    January 7, 2016 at 10:22 pm #561556
    Andy

    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

    July 6, 2018 at 1:16 pm #982034
    philthebass

    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

    July 7, 2018 at 1:32 pm #982443
    Victoria

    Hi Phil,

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

    Best regards,
    Victoria

    July 7, 2018 at 8:21 pm #982556
    Guenni007

    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

    July 7, 2018 at 9:05 pm #982574
    Guenni007

    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 );
    July 8, 2018 at 7:15 am #982648
    Rikard

    Hi,

    Thanks for sharing @guenni007, much appreciated :-)

    Best regards,
    Rikard

    July 9, 2018 at 9:50 am #982977
    philthebass

    Thanks @guenni007 – I”ll give that a try

    July 9, 2018 at 1:29 pm #983093
    Rikard

    Hi Phil,

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

    Best regards,
    Rikard

    July 9, 2018 at 2:21 pm #983109
    philthebass

    Hi Rikard,

    I found this plugin

    Add to home screen WP 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

    July 12, 2018 at 5:51 am #984493
    Ismael

    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

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.