Basic set-up questions/issues

[IncreaseoBot]

Hi,

how do we customise the following:

• use a specific WP Page (not Page List, but one specific Page) as the homepage?

We can use:

# MENU
"menu":
    "defaultState":
        "state": "public.pages"
        "params": {}

which shows the Page List but how to modify that into showing one specific Page?

• how to use app wide custom fonts from google fonts?
• how to show only font size on parameters page and hide the language selection? Eg English is the only language so we don't need that setting.
• does the app work with contact form or do we need to either hide it with css or use app specific contact page without form (in this particular case gravity forms)?

Thanks!

[shprink]

"menu":
    "defaultState":
        "state": "public.pages.id"
        "params": {id: 2592}

https://github.com/shprink/wordpress-hybrid-client/blob/develop/dist/menu.json#L31

• For font I do not know, I guess you just need to add the font script in index.html
• Using custom template you could overwrite this one https://github.com/shprink/wordpress-hybrid-client/blob/develop/lib/templates/module/params.html docs => https://github.com/shprink/wordpress-hybrid-client/blob/develop/CONFIGURATION.md#overwriting-existing-templates
• There is no contact form implemented so far sorry.

[IncreaseoBot]

Thanks for your reply! Got the homepage and parameters page done. Only thing not working is the font. I've edited /wordpress-hybrid-client/lib/index.html and added the following code to /wordpress-hybrid-client/config/config.scss

$font-family-sans-serif: "Raleway", "Roboto", "Helvetica Neue", "Segoe UI", sans-serif !default;

but it's not picking up the font. Also tried with html, body {...} but not working. What template code or css rule to use for the custom font?

[shprink]

if you load the font:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Raleway::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

and apply the css:

html{
  font-family: 'Raleway', sans-serif !important;
}

I do not see how it could not work

[IncreaseoBot]

Still not working. I had loaded the script via but changing it to javascript it's still not working.

Can you confirm the two files are correct, eg adding the font js code to /wordpress-hybrid-client/lib/index.html (not copying the file anywhere) and the css rule /wordpress-hybrid-client/config/config.scss

Also, if I add another font after Raleway, for example:

html{
  font-family: 'Raleway', Impact, sans-serif !important;
}

it does show Impact so clearly skips over Raleway.

[shprink]

Make sure the font is loaded in the app by checking the network tab on devtools

[IncreaseoBot]

It's not being loaded, it shows as blocked: csp. How to fix?

[shprink]

Content security policy:

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' data:; img-src * 'self' 'unsafe-inline' 'unsafe-eval' data: blob: filesystem:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

=> http://stackoverflow.com/questions/33984908/google-fonts-violates-content-security-policy

[IncreaseoBot]

Thanks a bunch, working now!

[shprink]

easy :P

[rosgoo]

I have the following code in my lib/index.html
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' data:; img-src * 'self' 'unsafe-inline' 'unsafe-eval' data: blob: filesystem:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' ">

and then :

<script type="text/javascript">
      WebFontConfig = {
       google: { families: [ 'Crimson Text' ] }
       };
       (function() {
       var wf = document.createElement('script');
       wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
       wf.type = 'text/javascript';
       wf.async = 'true';
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(wf, s);
     })(); 
   </script>

and yet when I load the devserver, I get the following error:
Refused to load the script 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' ".

any idea why?
Thank you!

[shprink]

I guess this will help http://stackoverflow.com/questions/33984908/google-fonts-violates-content-security-policy