I was hoping to make my Tumblr blog more mobile friendly and I would like to use a mobile theme alongside my desktop theme.
I see that I can use the default mobile theme for mobile devices, but is there a way for me to customize the mobile theme, but still keep my regular theme for desktops?
Just answering for people who find this while searching. I do not want them to be mislead by the comments on the question. Not happy about it.
Until now, it is possible to have separate theme for mobile devices. You have to put the codes for that in a new Custom page with url "/iphone-theme" as #Ally also mentioned.
And yes it works for all mobile devices (not just iPhones), to be more specific for phones, even for a lot of big tablets Tumblr switches the layout to your base theme (here I am talking based on my tests a while ago; less than few months. You should test yourself, always.), which I think is good.
The mobile theme has most features like the base theme, it also responds to the meta tags (like meta-if, meta-colors, etc. That also means you can use "Global Appearance" options) in the base theme. So for example you change the option titled "Color" in your "theme customization page", which should look something like;
<meta name="color:Color" content="#FFA500"/> in your base theme's HTML.
Then you will also affect the color in the mobile theme if the colors there are also set to something like; body { color: {color:Color}} or body { background-color: {color:Color}}. Even if the same meta tag is not present in the mobile theme.
Please note that you can not create options in the "theme customization page" with meta tags only in the mobile theme's HTML.
I use it. Why I use it;
I have high resolution images (for "Photo" posts) on the desktop version, and JavaScript image slider for them, and some time, some browsers in mobiles devices crash for that reason (at least for my audience). Using {PhotoURL-500} instead of {PhotoURL-HighRes} solves the issue, and saves bandwidth. There is no way you can do that with CSS #media.
To everyone (except #Ally); do some research before replying, it's not even a new thing.
Also do not believe everything you see on the internet (at least without trusted sources).
Update:
The mobile theme overrides the "default mobile theme" so you will not have to disable the option "Use default mobile theme" in "Advanced options" to see the mobile theme on mobile devices. If you disable the option, you will see your base theme.
Related
I've seen this post and know how to override tumblr's default mobile theme with a custom theme. But I like it in general, and would just like to do a small adjustment (adding google analytics code to be precise). If I could just get the code of tumblr's default theme, I could paste it to /iphone-theme and make the little adjustment I want to make.
Do you know where I can find the code of tumblrs default mobile theme? I just found a very old one, but I'd like to start off with their current mobile theme.
Are there friendly URLs in Ionic Framework? I tried to use ion-nav and ion-tabs components and my URL does not change if I navigate to pages
this.nav.push(Page1);
// or
this.nav.setRoot(Page1);
URL is always http://localhost/ (I need http://localhost/page1, http://localhost/page2 etc)
Unfortunately, the short answer is no. There is probably some scripting work-around that might be able to mimic this kind of behavior, but it is not something that is native to the framework.
The Ionic Navcontroller uses html5 to transition between pages like a phone app instead of a desktop web browser.
What I would suggest is this:
Build a debug-only page that has launch buttons to all of the pages that you want to go to directly. Set this as the root page when you enter the app, and add to it as you bring in more pages. (In fact, these debug pages morph into my "secret pages" during development where I hide useful information for future debugging)
This is what my current one looks like:
That's probably the closest to what you want using the native tools. Good Luck!
I’m trying to develop my first SAP Fiori App. Now I have some question about themes and background. In my index.html sap_belize_plus is the selected theme. In the SAP Fiori Launchpad you can chose between different SAP themes.
Does the chosen theme in the Launchpad affect my app or will it be displayed exactly as
implemented (only belize theme)?
Should I do custom CSS?
I saw apps with the standard #EBEBEB background and others with the picture background. On what does this depend?
Thanks for your help!
Does the chosen theme in the Launchpad affect my app or will it be displayed exactly as implemented (only belize theme)?
Yes. Chosen theme from the Launchpad will be the one that will be used. (Not the one in your index.html)
Should I do custom CSS?
Ideally No. You should create a custom theme (start by copying the standard) and try to achieve your desired result with the theme. CSS should be your last resort.
I saw apps with the standard #EBEBEB background and others with the
picture background. On what does this depend?
This can be either due to custom CSS to due to the custom theme. You have to look into the 'Developer tools' to determine.
If you use the Fiori Launchpad (FLP) you have 2 options.
[Most common & recommended] Configure your tile to open the app calling the Component.js file
Configuring the tile to open the index.html file (UI5 standalone configutarion)
In option 1, the index.html file of your app is not used. It's the FLP the one who plays the role of index.html file, and the app is loaded into the ComponentContainer of the FLP using JS-based navigation (hash navigation). So, in a default app config, the theme you use in your FLP will be the one used in your app.
Besides you can configure which are the supported themes for your app in the descriptor file, setting the property
"supportedThemes": [
"sap_bluecrystal"
]
More info in this link
In option 2, the app will be opened in a new tab, calling the index.html file, so it will use the theme you configure in the index.html file.
In the most common & easy way, you apply your custom themes in the whole FLP and you configure your apps to use it.
I think you should start reading about Theme Designer before you start coding CSS
Furthermore if you want to add just a few CSS classes, read this
Is it possible to get a larger version of the favicon from the Google's api or from somewhere else?
This is the url.
http://www.google.com/s2/favicons?domain=google.com
I searched for an alternative api on ProgrammableWeb and Google but many of them don't exist anymore and the one I found that actually seems to work isn't free. (http://grabicon.com/)
I need the icon for a VB.NET project that has a list of websites with icons. But 16x16 icons are too small for that.
looks like there is size parameter in google now.
https://www.google.com/s2/favicons?sz=64&domain_url=yahoo.com
Editted:
The below answer is no longer valid, but the code is freely available on github:
Github -> Favicons for all!
Original answer
You can also try Statvoo's Favicon API, e.g.
https://api.statvoo.com/favicon/?url=google.com
https://api.statvoo.com/favicon/?url=stackoverflow.com
etc..
They also have quite a few other API's you can use if you look around. Most of which are free and have been around for years.
Looks like Google has an size attribute too.
https://www.google.com/s2/favicons?sz=64&domain_url=https://stackoverflow.com/
Here's some Favicon Fetchers I have found
Free Favicon-Service by AllesEDV.at - https://f1.allesedv.com/stackoverflow.com
Google Favicon Snatcher - https://www.google.com/s2/favicons?domain=stackoverflow.com
Favicon Grabber - http://favicongrabber.com/api/grab/stackoverflow.com
For Favicon Grabber it will return as JSON list of icon URLs.
Alternatively you can load the main page of the site and figure it out from there: https://stackoverflow.com/a/1990487/
According to https://news.ycombinator.com/item?id=17190599:
Unless that endpoint can also return other resolutions, Favicon Kit
offers more: https://api.faviconkit.com/twitter.com/144
https://api.faviconkit.com/twitter.com/16
(Though, I will say, the URIs returned for Twitter and the image sizes
don't actually align in those cases. The first is actually 192ˣ192
pixels, and the second is 32ˣ32 pixels. That seems odd. Maybe they
should have endpoints like domain/large, domain/medium, domain/small?)
Favicons are specified either as part of the HTML page, the HTTP response to a request for a page, or simply by being hosted at a default location.
That's true for all sites. There's plenty of browser extensions that can help you figure out the favicons a page send, if you don't manage by hand. For example, right clicking in firefox, "Page Info", "Media", "sort by type"->"Icon" should show all icons that a browser can find. It's not usual to have Icons larger than 32x32, and google might not be an exception.
Also be aware that the .ico format can contain multiple Icon sizes that not all tools show. So saving that .ico on your computer and inspecting it with a tool known to deal with all sizes contained in a single file might help.
Last word of advice: You're dealing with the logo, the very core of their brand, of a multi-billion dollar company. You might want to check with their policy of using that logo in your project. Probably it's OK (for example, browser don't seem to get in trouble for having a google logo for their google search box), but I'd still take care not to raise the impression that you're association a product of your own making with their logo.
I'm building an HTML5/JavaScript app that runs on the iPhone in offline mode.
I know I can selectively run JavaScript by inspecting the window.navigator.standalone property - is there some equivalent switch/selector for CSS? The extra screen space that's available when running locally means I'd like to use different CSS for running as a web page vs. running as an offline app.
There's no declarative, CSS-only way that I'm aware of (such as using a media-query).
One shortcut option might be to use the trick that people use on Android, which does not have an installable HTML5 option at all: scroll the URL bar out of view. See http://www.html5rocks.com/mobile/mobifying.html#toc-optimizations-scrolling
At least that way users get a "full-screen" appearance. You may want to couple that with a min-height on the body or containing element to make sure it actually stretches far enough to scroll the URL bar out of the way.
You can use a cache manifest and provide a completely different CSS when viewing offline (under FALLBACK): http://dev.opera.com/articles/view/offline-applications-html5-appcache/