Embed a video with both autoplay, mute and other variables

Source: http://stackoverflow.com/questions/19241151/adding-additional-parameters-to-the-yt-player-object-from-youtube

https://developers.google.com/youtube/player_parameters?playerVersion=HTML5

https://productforums.google.com/forum/#!msg/youtube/XS5_P_9OXCo/-oNOf3d8x4sJ

http://jsfiddle.net/oLtcsh49/2/

<!– 1. The <iframe> (and video player) will replace this <div> tag. –>
<div id=”player”></div>

<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement(‘script’);

tag.src = “https://www.youtube.com/iframe_api“;
var firstScriptTag = document.getElementsByTagName(‘script’)[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(‘player’, {
height: ‘195’,
width: ‘260’,
videoId: ‘h3P1OR9gg2Y’,
playerVars: { ‘autoplay': 1, ‘controls': 1,’showinfo':0, rel:0},
events: {
‘onReady': onPlayerReady,
‘onStateChange': onPlayerStateChange
}
});
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.setVolume(0);
event.target.playVideo();
}

// 5. The API calls this function when the player’s state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//      setTimeout(stopVideo, 6000);
done = true;
}
event.target.setVolume(0);
}
</script>

Posted in Youtube | Tagged , , | Comments Off on Embed a video with both autoplay, mute and other variables

WordPress: Redirect after Login on WordPress

Source: http://stackoverflow.com/questions/8127453/redirect-after-login-on-wordpress

Add the following to child theme’s functions.php

function admin_default_page() {
return ‘/new-dashboard-url';
}

add_filter(‘login_redirect’, ‘admin_default_page’);

Posted in CMS | Tagged , | Comments Off on WordPress: Redirect after Login on WordPress

Easy Fancybox: Solution for Iframe no-scroll issue in mobile

Source: https://alucard-blog.blogspot.sg/2016/06/how-to-fix-fancy-boxeasy-fancybox.html

How to fix fancy box scroll not working in mobile. Using wordpress plugin https://wordpress.org/plugins/easy-fancybox/

In Easy Fancybox, you will see these 2 lines in the jquery.fancybox-1.3.7.js: (do a folder search for id=”fancybox-content” to get better idea of how it looks like)

<div id=”fancybox-content”……..>
<iframe id=”fancybox-frame” name……………

Apply to fancybox-content, not fancybox-frame

So in your custom/child theme CSS, it should be:

#fancybox-content{
overflow: scroll !important;
-webkit-overflow-scrolling: touch !important;
}

Posted in CMS, CSS, troubleshoot | Tagged , , , | Comments Off on Easy Fancybox: Solution for Iframe no-scroll issue in mobile

CSS: Media queries for mobile, tablet display devices

In practice, many designers convert pixels to ems, largely b/c ems better afford zooming. At standard zoom 1em === 16px. Multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

Suggested breakpoints

Source: http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480×320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800×480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Refined to work better with 960 grids:

@media (min-width:320px) { /* smartphones, iPhone, portrait 480×320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800×480 or 854×480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Managing multiple styles by linking to different stylesheets using media queries

Source: http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html

Adding all the styles in the same CSS file is acceptable for the above example, but for a full-fledged website, it will become a pain to manage the code. That is why I prefer to link a new stylesheet for specific screen sizes. The way to do that is to use the media attribute of the link tag.

<link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width: 480px)” href=”mobile-device.css” />

Now you can define all the mobile specific styles in the mobile-devices.css file.

Google Mobile SEO guideline

Source: https://developers.google.com/webmasters/mobile-sites/mobile-seo/

Mobile: In this document, “mobile” or mobile devices refers to smartphones, such as devices running Android, iPhone, or Windows Phone. Mobile browsers are similar to desktop browsers in that they can render a broad set of the HTML5 specification, although their screen size is smaller and in almost all cases their default orientation is vertical.

Tablets: We consider tablets as devices in their own class, so when we speak of mobile devices, we generally do not include tablets in the definition. Tablets tend to have larger screens, which means that, unless you offer tablet-optimized content, you can assume that users expect to see your site as it would look on a desktop browser rather than on a smartphone browser.

Based on the above, I would be inclined to set tablets to load the same CSS version as desktop since this should not penalize SEO rankings.

Posted in CSS, SEO, web design | Tagged , , | Comments Off on CSS: Media queries for mobile, tablet display devices

Visual Composer: Remove Visual Composer Tab from Dashboard Menu

Add this following code to your themes functions.php

function custom_menu_page_removing() {
    remove_menu_page('vc-general'); //vc
}
add_action( 'admin_menu', 'custom_menu_page_removing' );

This is how to find out for the next time:

The link for Visual-Composer main page is admin.php?page=vc-general if you want to hide a link from an plugin in the admin backend, simply use everything behind the ?page= in this case it’s vc-general

Source: http://wordpress.stackexchange.com/questions/227593/remove-visual-composer-tab-from-dashboard-menu

 

Posted in CMS, Visual Composer | Comments Off on Visual Composer: Remove Visual Composer Tab from Dashboard Menu

Visual Composer: edit google font list

https://wpbakery.atlassian.net/wiki/display/VC/How+to+Manage+List+of+Google+Fonts

Remove the list of fonts from
wp-content/plugins/js_composer_theme/include/params/google_fonts
google_fonts.php

Or To change this list use add_filters(‘vc_google_fonts_get_fonts_filter’,’your_custom_function’); and change array
vc_filter: vc_google_fonts_get_fonts_filter

Posted in CMS, Visual Composer | Comments Off on Visual Composer: edit google font list

WAMP: Troubleshooting tips

After fresh install wampserver, some configurations need to be changed, or you’ll get 403 Forbidden error for setting up virtual directories (url links for local machine)

C:\wamp64\bin\apache\apache2.4.17\conf\httpd.conf

<Directory />
AllowOverride none
Require all denied
</Directory>

change to:

<Directory />
# Added to allow .htaccess in individual site folders to override
AllowOverride ALL
#AllowOverride none
#Require all denied
</Directory>

Other minor changes, refer to the httpd.conf of the previous version and do a side-by-side comparison

Posted in servers, troubleshoot | Comments Off on WAMP: Troubleshooting tips

Prestashop: Editing orders from customers or after delivered status

Source: https://www.prestashop.com/forums/topic/328871-editing-orders-from-customers/

Back Office—->Orders—>Statuses—>Preparation in Progress(Or any status which is set as default), I unchecked “Show Delivery PDF.”

Status should not have “delivered” option.

In table ps_order_history remove this order’s “Delivered” state

https://www.prestashop.com/forums/topic/276384-solvedunable-to-modify-customer-order-from-backoffice/#entry1388383

(Not sure if necessary, should test)
In tables ps_orders/ps_order_invoice
delivery_number change to 0
delivery_date change to 0000-00-00 00:00:00

Posted in ecommerce, troubleshoot | Tagged | Comments Off on Prestashop: Editing orders from customers or after delivered status

phpmyadmin: mysql export Simplified Chinese utf csv gibberish text issue

The database collation is utf8_unicode_ci but can’t guarantee the Chinese text encoding was 100% correct during data entry (may have mixed with Traditional Chinese?)

When we use the usual route in phpmyadmin to export the data to .csv, the generated .csv file doesn’t show the Simplified Chinese text properly. Same issue when exporting to Microsoft .csv

Manual workaround: Export the data to .csv but select “View output as text”. This somehow generates the data with the Simplified Chinese text correctly.

Select all, copy and paste to your Microsoft Excel and… problem solved.

Posted in database, troubleshoot | Tagged , , , , | Comments Off on phpmyadmin: mysql export Simplified Chinese utf csv gibberish text issue

Prestashop 1.6: Add shop address to header in PDF invoice

When using the same code in the footer.tpl on header.tpl, the shop address doesn’t show up. This is because the header function that loads the header data doesn’t contain the code to retrieve the shop address. The following will add the code to do so.

1) Copy /classes/pdf/HTMLTemplate.php (and put the copy in /override/classes/pdf)

go to public function assignCommonHeaderData()

Under $shop_name = Configuration::get(‘PS_SHOP_NAME’, null, null, $id_shop);

Add

$shop_address = $this->getShopAddress();

Next, under ‘shop_name’ => $shop_name,

Add

‘shop_address’ => $shop_address,

2) Open /pdf/header.tpl

Remove {$shop_name|escape:’html':’UTF-8′}

Add {$shop_address|escape:’html':’UTF-8′}

Adjust css styles as required.

Posted in ecommerce | Tagged , , | Comments Off on Prestashop 1.6: Add shop address to header in PDF invoice