Overriding mobile theme CSS

I would like to customize the CSS of a mobile theme generated by a Wordpress plugin which converts a non-responsive design to a mobile version of the site. But it's a pain because I have to go through the entire stylesheet in order to find out what CSS controls what. Is there anything like Firebug for mobile devices?

I don't know of anything useful as far as a mobile app would be concerned.
You could temporarily change any media query that uses "device-width" to just plain old "width". That would allow you to change the viewport size of your desktop browser for debugging css for phones.
If you're using .js to see what the user-agent is to send your css, you could enable Safari's dev tools and change the user agent to one of the iphone settings.

Similar Messages

Air sdk 16.0 and mobile theme css

Hi,
I use AIR SDK 16.0 in order to build an ARM 64bits for IOS. However the default css mobile theme (mobile.swc) is not taken in consideration while with SDK 15.0 it was ok. How do I can use default.css of mobile.swc with SDK 16.0?
Thanksin advance,
Best ragards,
Cédric.

Hello Adobe developer,
The crash happens when app included ANE file. The description of issue is same with comment "Vivid75 Feb 3, 2015 3:26 PM" (The crash happens on 64 bit devices running ios 7.x that have ANE files attached to them. It crashes even if the ANE is 64 bit compatible).
When do you offer the next public release of AIR SDK which fixed the crash issue?

New jquery mobile theme not rendering properly

So I'm finalizing some things on a mobile website that is looking great! m.whitewatertours.com...but we wanted to make a few changes to the theming and used ThemeRoller from jQuery to do so. But after downloading my new theme and applying it to a test page our fabulous looking site now looks like something a 5 yr old created!
I replaced the original <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> code in the Head tag with the new ones mentioned below their respective pages...(generated with the "add new css" button from DW6)
Here's the orginal page looking great: http://m.whitewatertours.com/rafting-hot-deals.html
than the test page with ThemeRoller Theme: http://m.whitewatertours.com/rafting-hot-deals-css-test.html
new code = <link href="jquery-mobile/twt-mobile-theme.css" rel="stylesheet" type="text/css">
Than I tested with a theme created from Fireworks CS6, still looking terrible...
test page with FWCS6 theme: http://m.whitewatertours.com/rafting-hot-deals-css-test-fw.html
I feel like I must've have done something wrong ... but have triple checked everything I can think of!
Jenny

Thanks Sudarshan!
So that did solve part of the problem at first, but was overriding my custom css.
Found there was an extra </script> in the head tag that was screwing up things...
So the css. from Fireworks works!
The css from jQuery ThemeRoller did take a little extra tweaking, did get 2 codes from them one from the file download "index":
the first code worked with the .min extension so thats what im using
<link rel="stylesheet" href="themes/twt-mobile-theme.min.css" />
and another from the download screen:
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
the first code worked with the .min extension so thats what im using
I also ended up creating the "themes" folder within my jquery-mobile folder with all their stuff in there.
Thanks for the help again and getting me pointed in the right direction!!
Jenny

JQuery Mobile Theme - works Dreamweaver but not online

I created a new JQuery Mobile Theme in Fireworks CS6: Commands - JQuery Mobile Theme - Create New Theme. Then exported the theme to a folder where I am designing a new mobile app (Commands - JQuery Mobile Theme - Export Theme).
I opened index.html in Dreamweaver CS6 and changed <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/> to the new *.css file. I used Find / Replace to change all instances of data-theme="e" to data-theme="y". I saved index.html and clicked on Live View where it looked perfect. I used FileZilla to move all of the files to the server hosting my website. But when I view it either in Firefox or on my Samsung phone, index.html doesn't include any of the CSS formatting. (It had worked online with the CSS formatting when I had just manually edited the color codes in a few places in jquery-mobile/jquery.mobile.theme-1.0.min.css)
If I view index.html as a file on my computer in Firefox, the css works perfectly. But when I upload the contents of the folder to the server hosting my website, it doesn't.
I'd appreciate any input on what I'm doing wrong.
Thanks

Fixed it myself. I realized that I needed to leave <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/> in index.html and to add a new line <link href="jquery-mobile/y_theme.css" rel="stylesheet" type="text/css"/>

Mobile first CSS display: none

With mobile first in mind, I am trying to hide an area of a page that is unnecessary for mobile, but I want it to display on tablets and desktops. So mobile fist CSS dictates that I would set a CSS rule to display:none, but that propogates through to the tablet and desktop versions too.
What setting do I use to override none? Is block the right setting?
Thanks.

Matthew, you need to write this rule within media-queries.
/*For Mobiles*/
@media and (max-width:360px){
.hidden-mobile{
display:none;
And apply (or add to existing) a class .hidden-mobile to the div that you want to hide on mobiles. This rule will kick in only when the user is browsing from a mobile device less than 360px viewport width. In that case, the div with this class wont show up on a mobile phone.

Create mobile Theme in APEX 4.0

I'm using APEX 4.0 (4.0.2.00.06) and I have to create a Mobile application. I know there are mobile theme's available in APEX 4.1, but we won't switch to APEX 4.1 jet...
So, I've created a Page Template, List Template and Report Templete, using this tutorial: http://www.oracle-and-apex.com/create-a-mobile-theme-for-oracle-apex/
I've created this at first in the Builder Blue theme, but now I want to create a Theme which only suits for mobile devices.
I created a theme from scrach and created the templates mentioned above in this theme. I've copied the button and label templates and the From Region Template from the Builder Blue theme. But in a Form Page the buttons are not visible.
Can someone point out to me how to make button and label templates for a mobile device, and make it work properly?

I found out it's an issue in IE (7). I've tested it on a mobile device and it works fine and in Chrome it also works fine...

Edge Animate code into Dreamweaver jquery mobile theme?

I am having trouble getting my Edge Animate file to work on my Dreamweaver jquery mobile theme web site. I was told to get the code from my animate file and put it in my dreamweaver web site. Kind of like this.....copy the Edge runtime code, paste in web site under <head>. Then copy div stage code, and paste it in my website under the content div. I just cant seem to get it to work. It shows up blank.

Ok, i got it. I was making this a lot harder then it needed to be. If anyone else has this problem, you just publish your project when in Adobe Edge Animate, then save in the folder you are using for your website. Then in Dreamweaver you can go to insert media, find the file and insert it. All is well.

Mobile themes and templates

It seems apex 4.1 supports developement of mobile apps and hence includes themes and HTML templates suitable for smart phones and mobile devices.
I have not found any themes specific to mobile apps. I could be wrong. Can anyone please help me locating themes and templates.
Thanks in advance
cmovva

Chandra,
Peter Reganitsch has blogged on this topic; it' a great introduction and provides a steps on how to build a demo mobile theme and app.
[url http://www.oracle-and-apex.com/create-a-mobile-theme-for-oracle-apex/]Create a mobile Theme for Oracle APEX
Jeff

Location of Apex 4.0 themes.css file

Hi,
I want to change/manipulate the size of the fonts, text wrap for the Interactive reports in APEX 4.0. I have read that it is possible by editing the themes .CSS file. Please advice me how can I do it.What is the location of themes.CSS file , how can I edit it. I am not an Apex expert, just a beginner. Your help is highly appreciated.
Thanks in Advance.!!

Hi James
Can you please post the entire contents of your 'Header' in the 'Definition' section of the page template so that I can see where you are going wrong?
When posting code on the forum, put {noformat}{noformat} (with the curly brackets and the word code in lowercase) above and below your code like this...
{noformat}{noformat}
SELECT *
FROM emp
{noformat}{noformat}
It will then appear like this, preserving formatting...SELECT *
FROM emp
Cheers
Ben

How to use Fireworks JQuery Mobile Theme with Custom Icons in Dreamweaver CS6?

I understand how to create the custom theme in FW, I created one extra icon using the icon placeholder option. I then export the theme. FW spits out 5 css files and the png sprites. What do I do with the css files for the different png dimensions?? I don't understand how to get what I created in FW to work properly in DW. I can get the theme working but DW creates the jquery folder with the default icons, I need to get my custom png sprite in there. When I do this, it seems that it shifts everything since the dimensions are wrong. The theme css that FW spits out has a @import url for the css files styling the diff sprites but it still doesn't work. I'm at a loss as to how to get it all to work together.

Sorry, no knowledge of FW themes, but it would seem easier to adjust the positioning code
than to try redo your sprite image.

Login issues with Mobile Theme 50

Hi All,
I have an APEX 4.2 application (Mobile Theme 50) which is running on Oracle 10g and is being accessed via iPads. Whenever you exit out of the application by clicking on the iPad button and go into any other App, Mail, Calendar etc, you are forced back to the login page, rather than allowing the user to continue from where they were . We have other APEX applications using a desktop theme that will happily let you check your mail and when you swap back to Safari your session is still there and you can continue on from the page you were on when you left.
Authentication is a requirement, but I was hoping that once they login and the session hasn't timed out, that they would be free to move about the iPad without having to login again.
Are there any setting or changes that can be made to change this behaviour?
Cheers
Mike

Hello,
Hi Mahmoud, sorry I haven't had time to build a sample app, I might be able to knock up a sample this evening.
This appears to be an iPad specif problem. Tested it on a Samsung and it is fine. There is also one other subtle difference on the iPad itself, that is when you save the URL as a bookmark it always opens within Safari so you can open other apps, then go back into the apex app within Safari and your session is happily running. If you save the URL to the Home screen it opens in a full screen mode (with no minimise options) and you cannot jump out of it unless you are ready to login again.
After a bit more Googling I found that in the default Page Template for Theme 50 it has the following Meta Tag in the Header.
<meta name="apple-mobile-web-app-capable" content="yes" />
From what I can gather this will default the application to run in full screen mode.
I made a copy of the page template and removed this tag and it now always runs within Safari. (After removing the link from the iPad home screen and creating a new one....Some odd cache problems seem to happen)
It would be good to have the full screen mode running as it looks neater and obviouly gives you a bit more screen real estate, but removing the meta tags appears to solve the constant login issues....Our users can decide which they prefer.
Cheers
Mike

Need help aligning form elements in APEX 4.2 mobile theme

Hi,
In the APEX 4.2 mobile theme, whenever I create a form, it will lose alignment when I have mixed text inputs and textarea inputs as my iPhone 4s is turned horizontally. The label of the textarea inputs jammed and the field doesn't align with other text inputs.
Is there any solution for that?
Thanks.

I found that the following tag had caused the issue. Is there any way to remove this tag?
Thanks.
<pre>
<fieldset id="P3_CONTACT_MSG_fieldset" class="textarea" tabindex="-1"></fieldset>
</pre>

Unable to download Mobile themes of .nth format fo...

I've the GPRS connectivity from the operator.But still i'm unable to download mobile themes of .NTH format for my Nokia 6080.Pls help & guide.

Go to Control Panel > Add or Remove Programs (Win XP) or Programs and Features (later)
Remove all of these items in the following order:
iTunes
Apple Software Update
Apple Mobile Device Support (if this won't uninstall move on to the next item)
Bonjour
Apple Application Support
Reboot, download iTunes, then reinstall, either using an account with administrative rights, or right-clicking the downloaded installer and selecting Run as Administrator.
The uninstall and reinstall process will preserve your iTunes library and settings, but ideally you would back up the library and your other important personal documents and data on a regular basis. See this user tip for a suggested technique.
Please note:
Some users may need to follow all the steps in whichever of the following support documents applies to their system. These include some additional manual file and folder deletions not mentioned above.
HT1925: Removing and Reinstalling iTunes for Windows XP
HT1923: Removing and reinstalling iTunes for Windows Vista, Windows 7, or Windows 8
tt2

IPhone / iPad login issues with Mobile Theme

I'm wondering if this is a bug or just a part of design of the mobile theme. I'm developing a mobile site using the new mobile theme in 4.2.1. I open it up on Safari on either an iPhone or iPad and then want to add it to the home screen. No issues there.
I'm able to sign in fine with the shortcut on the home screen, but if I switch to another app or go back to the home screen and return to the APEX app, I always have to log in again. Pretty inconvenient to keep having to do this. Anyone aware of a work around or fix?
Here's a sample app where it can be seen:
http://apex.oracle.com/pls/apex/f?p=14837:1:115417454230874:::::
guest / test123

Hi,
When you made a shortcut on our device, then it technically stores the url. then the session value is also captured. so when you return from another app to the home screen and click the icon on url device it resets the session everytime you go through that url as it no more esists or active. So its asking you to log back in

Overriding IR Reports CSS

I am trying to adjust the font/color of my Headings and Data on Interactive Reports. I am on apex_4.2.
I went into my page template (shared componenets - templates) and in the Definition section after the #HEAD# I added my CSS override info (see below). it doesn't seem to be reading this on my IR Reports. Am I missing something?
<!DOCTYPE html>




 <html lang="&BROWSER_LANGUAGE."> 
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>#TITLE#</title>
<link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
#APEX_CSS#
#TEMPLATE_CSS#
#THEME_CSS#
#PAGE_CSS#
#APEX_JAVASCRIPT#
#TEMPLATE_JAVASCRIPT#
#APPLICATION_JAVASCRIPT#
#PAGE_JAVASCRIPT#
#HEAD#
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_24/css/4_1.css">
<script src="#IMAGE_PREFIX#themes/theme_24/js/4_1.js"></script>
<STYLE TYPE="text/css">
     ********** Interactive Reports Override ************
     .apexir_WORKSHEET_DATA {
     border:1px solid #b8b8b8;
     border-collapse:separate;
     empty-cells:show;
     font-size:8pt;
     table.apexir_WORKSHEET_DATA th {
     background:#4e4e4e;
     font-weight:bold;
     color:#fff;
     border-top:1px #ccc solid;
     border-bottom:1px #aaa solid;
     font-size:21px !important;
     white-space:nowrap;
     vertical-align:center;
     letter-spacing:1;
     height:25px;
     background-image:url(report/report-header-red.gif);
     background-repeat:repeat-x;
     padding-right: 5px;
     table.apexir_WORKSHEET_DATA td {
     background: #e2e2e2;
     font:normal 8pt Tahoma;
     padding:2px 5px;
     empty-cells:show!important;
     border-bottom:1px solid #b8b8b8;
     border-top:1px solid #fff;
</style>
</head>
<body #ONLOAD#>

#FORM_OPEN#
<div id="uBodyContainer">

I requested a space on otn, but haven't received credentials yet.
I just created a simple Interactive Report on a page and want to change the IR report table headers and table data fonts/font sizes. Do you have an example on your workspace I could look at?

Overriding mobile theme CSS

Similar Messages

Maybe you are looking for