- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi,
we need help with InAppBrowerser plugin, please.
After many days of testing various solutions, we haven't find a way to change color of back button and show spinner while loading external page. (we know spinner is white, so it can not be seen on white background).
We have tried inserting CSS
and also tried editing local CDVInAppBrowser.m file (located in .../plugins/org.apache.cordova.inappbrowser/src/ios)
Button:
self.closeButton.tintColor = [UIColor colorWithRed:60.0 / 255.0 green:136.0 / 255.0 blue:230.0 / 255.0 alpha:1];
and changed it to:
self.closeButton.tintColor = [UIColor whiteColor];
Spinner:
self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
and changed it to:
self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
but without any success.
Is there any way to change color of back button and spinner in InAppBrowerser plugin using Intel XDK?
Thanks.
- Tags:
- HTML5
- Intel® XDK
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@Nino, you would not be able to change the style of the buttons at javascript/css level. These properties are changed in the native part of the plugins. Your approach to change that in the .m file is correct, however, it depends where you are changing. If you are changing in the local copy of the plugin that change will not reflect into the build as the build system fetches the plugins directly from the web. For your purpose, I suggest you pull that plugin from git and make a local copy and modify as per your need and then add into XDK as local third party plugin.
Build Settings > Third-party plugins > Import local plugin
Hope this helps.
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello,
If you prefer to target specific buttons instead of changing the color for all of them as a group, you'll need to apply some custom CSS to your theme. Paste in the piece of code and replace the hex color value (like #000000) with the color of your choice!
.sg-back-button {
color: #000000;
background: #993399;
}
For spinner below is the example.
<section class="spinner-1"> <div class="spinner"></div> </section>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@Nino, you would not be able to change the style of the buttons at javascript/css level. These properties are changed in the native part of the plugins. Your approach to change that in the .m file is correct, however, it depends where you are changing. If you are changing in the local copy of the plugin that change will not reflect into the build as the build system fetches the plugins directly from the web. For your purpose, I suggest you pull that plugin from git and make a local copy and modify as per your need and then add into XDK as local third party plugin.
Build Settings > Third-party plugins > Import local plugin
Hope this helps.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@SWATI S. (Intel)
tnx for your help. We have tried that as well (in our desperation) but that didn't work either.
We'll try again.
Just to clarify - we should:
1. download cordova-plugin-inappbrowser-master.zip from https://github.com/apache/cordova-plugin-inappbrowser
2. extract and paste in folder within app (e.g.) .../www/cordova-plugin-inappbrowser-custom/
3. edit CDVInAppBrowser.m file (my settings)
Toolbar:
self.toolbar.barStyle = UIBarStyleBlackOpaque;
change it to:
self.toolbar.barStyle = UIBarStyleBlack;
Button:
self.closeButton.tintColor = [UIColor colorWithRed:60.0 / 255.0 green:136.0 / 255.0 blue:230.0 / 255.0 alpha:1];
change it to:
self.closeButton.tintColor = [UIColor whiteColor];
add:
self.forwardButton.tintColor = [UIColor whiteColor];
self.backButton.tintColor = [UIColor whiteColor];
Spinner:
self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
change it to:
self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
self.spinner.frame = CGRectMake(454.0, 231.0, 20.0, 20.0);
change it to:
self.spinner.frame = CGRectMake(self.view.frame.size.width / 2 - 10, self.view.frame.size.height/ 2 - 10, 20, 20);
4. import as local plugin
name: cordova-plugin-inappbrowser
plugin ID: cordova-plugin-inappbrowser
import from: /cordova-plugin-inappbrowser-custom/
5. uncheck @ standard plugins: InAppBrowser
6. build app (fingers crossed)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
... and it works. Finnaly.
Thank you SWATI S. (Intel)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@Nino, The steps you mentioned seem correct, though you may want to change the name of the plugin and pluginID to avoid confusion between the standard plugin and your custom plugin.
details of step 3 is outside the scope of XDK, but I looked at the code anyways, it seems that the closebutton style is derived from the UIBarButtonSystemItemDone, so not sure if changing the tint will work
For forward and back arrows you can change the Unicode in this line. Again I'm not an expert in that so don't know for sure.
NSString* backArrowString = NSLocalizedString(@"◄", nil); // create arrow from Unicode char
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Oh good to know, it worked for you!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@SWATI S. (Intel)
It works. :) Your direction was all we needed. Tnx.
I haven't change plugin name/id from original, because they should be the same as name/ID in plugin.xml (that I didn't want to edit). The less is changed - better.
![](/skins/images/45C6C2D737ED71F4C51F0145C8CB1E9C/responsive_peak/images/icon_anonymous_message.png)
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page