JQuery Themes

I am testing Apex 4.1 on oracle workspace.
I have created a region for tabs and they are working fine.
I would like to change the jquery theme used for the tabs.
In my region template I have
<link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" type="text/css" />
Which give the tabs a grey colour.
I would like to give then a blue colour, so I tried changing to
<link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/redmond/jquery.ui.tabs.css" type="text/css" />
This did not effect my tabs.
Is there anything else I need to do, to change the theme
Gus

I logged into my Apex 4.1 box and looked at the two jquery.ui.tabs.css files you named. They are identical from from what I can tell. I believe that jquery.ui uses a single css file to control color and effects over all jquery.ui modules that way you get matching colors over your entire site/app. The file you are looking for is "#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/redmond/jquery.ui.theme.css". Just keep in mind this will make all jquery.ui elements on the page use this color scheme.

Similar Messages

Custom Theme (jquery)

I've created a custom jquery-ui theme using ThemeRoller( http://jqueryui.com/themeroller/ ).
Normally, in a html file a download the full archive(with the js , css and the images) and reference the CSS file.(jquery-ui-1.8.7.custom.css).
How could i done this in APEX 4.0 ? I've managed so far referencing a standard theme by putting this in the #HEAD# section:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" />
If i upload my custom theme and reference it:
<link rel="stylesheet" type="text/css" href="#APP_IMAGES#jquery-ui-1.8.7.custom.css" />
If i start Firebug i see that it cannot find a couple of images(of the widgets backgrounds).
How could i install a custom jquery theme made in ThemeRoller ?
Thanks!
BgUrsea

I've uploaded the theme(with all subfolders) and added it just afther the <head>:
<link rel="stylesheet" href="/i/libraries/jquery-ui/1.8/themes/MyTheme/jquery-ui-1.8.custom.css" type="text/css" />
The problem is that i get an error saying that:(translated from my Firefox language)
Error: CSS http://127.0.0.1:8080/i/libraries/jquery-ui/1.8/themes/MyTheme/jquery-ui-1.8.custom.css didn't load because it's MIME type „application/octet-stream”, it's not „text/css”.
Source File: http://127.0.0.1:8080/apex/f?p=123:1:1997070434399924:::::
Line 0I've google for this error(thinking it wasn't about APEX and it seems to be a problem with the web server).
I'm using APEX 4.0 with 10g XE running on W7. I've installed it using the Embedded PL/SQL Gateway.
Thanks!
BgUrsea

Automatic Page Refresh Not Working Correctly

This is Apex 3.2 with no jquery (Theme 15)
I have a background job which is started from an apex page.
Once the job is started the user can view this job via an interactive report.
This report has highlighting and one updateable column.
APEX_ITEM.SELECT_LIST_FROM_LOV(4,a.status,'JOB_STATUS',null,'YES',null,'-Select-') status
I have an application item that the user can set via a select list.
This application item is used to set the page refresh (html page header)
<meta http-equiv="refresh" content="&F270_REFRESH_INTERVAL.">
Once they have set this item, the the page is supposed to be refreshed after so many seconds.
The page seems to be refreshing, as the report highlighting changes and report values change,
but the updateable column value (select list) does not change.
Any ideas much appreciated
Gus

If I use a button to refresh the page, ie submit and branch back to itself, then the report
reflects the changes.
If I put <meta http-equiv="refresh" content="&F270_REFRESH_INTERVAL."> into the page header (to automatically refresh),
then the page refreshes, but the updateable column does not update.
If I look at the page source it says
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
and not
<meta http-equiv="refresh" content="5">
Gus

BUG: Proto and creative cloud generates a corrupted zip project file

I have uploaded a proto project to creative cloud, and later I have downloaded it as a zip file, but the ZIP is corrupted and can't be opened. I have tried cloning the project and downloading several times, and it is alway corrupted.
After tring to fix the zip, I got this:
$ unzip Project1Fixed.zip
Archive: Project1Fixed.zip
inflating: Project 1/Index.html
inflating: Project 1/Proyecto.html
inflating: Project 1/Navegaci??????n.htm
error: invalid compressed data to inflate
inflating: Project 1/Proyecto 2.html
inflating: Project 1/Navegaci??????n 2.htm
error: invalid compressed data to inflate
inflating: Project 1/Proyecto 3.html
inflating: Project 1/Index.css
inflating: Project 1/Proyecto.css
inflating: Project 1/Navegaci??????n.cs
error: invalid compressed data to inflate
inflating: Project 1/Proyecto 2.css
inflating: Project 1/Navegaci??????n 2.cs   bad CRC cb3cd105 (should be 3565a7d2)
inflating: Project 1/Proyecto 3.css
inflating: Project 1/jQuery/jquery-1.4.4.js
inflating: Project 1/jQuery/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png
inflating: Project 1/jQuery/themes/base/images/ui-bg_flat_75_ffffff_40x100.png
inflating: Project 1/jQuery/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png
inflating: Project 1/jQuery/themes/base/images/ui-bg_glass_65_ffffff_1x400.png
inflating: Project 1/jQuery/themes/base/images/ui-bg_glass_75_dadada_1x400.png
inflating: Project 1/jQuery/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png
inflating: Project 1/jQuery/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png
inflating: Project 1/jQuery/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png
inflating: Project 1/jQuery/themes/base/images/ui-icons_222222_256x240.png
inflating: Project 1/jQuery/themes/base/images/ui-icons_2e83ff_256x240.png
inflating: Project 1/jQuery/themes/base/images/ui-icons_454545_256x240.png
inflating: Project 1/jQuery/themes/base/images/ui-icons_888888_256x240.png
inflating: Project 1/jQuery/themes/base/images/ui-icons_cd0a0a_256x240.png
inflating: Project 1/jQuery/themes/base/jquery.ui.accordion.css
inflating: Project 1/jQuery/themes/base/jquery.ui.all.css
inflating: Project 1/jQuery/themes/base/jquery.ui.autocomplete.css
inflating: Project 1/jQuery/themes/base/jquery.ui.base.css
inflating: Project 1/jQuery/themes/base/jquery.ui.core.css
inflating: Project 1/jQuery/themes/base/jquery.ui.tabs.css
inflating: Project 1/jQuery/themes/base/jquery.ui.theme.css
inflating: Project 1/jQuery/ui/jquery.effects.slide.js
inflating: Project 1/jQuery/ui/jquery.ui.accordion.js
inflating: Project 1/jQuery/ui/jquery.ui.core.js
inflating: Project 1/jQuery/ui/jquery.ui.tabs.js
inflating: Project 1/jQuery/ui/jquery.ui.widget.js
I think that this is related to some of my project pages having accented characters in their name, as all the ????? in the filenames corresponds to just those files, and they are the corrupted ones.

Hi,
It happened only to that project, and I actually fixed it by hex editing the project. The problem was related to then enconding and size of the filenames in the zip file, I used accented filenames with (If I remember correctly) UTF8 encoding. Some of the characters used 2 bytes to represent the filename, but only 1 was accountedd in the zip headers. I just added one to those size fields of the zip headers, and the it opened just fine.

Center web page on browser screen in Dreamweaver?

All web sites I have created and published in Dreamweaver have the pages come up on the browser screen on the left side. Is there a way to set up a site so the pages come up centered on all browser pages?

Good day, I have read the above posts, and other posts/videos online, tried many, but none seem to work. I'm wondering if it's because the page elements have absolute positioning, but maybe someone can help. Below is the html code, then below that i've included the css coding, i realize it's not clean, but just want to address the centering issue at this time.
Any help is appreciated, remember I'm not a coder
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.SectionTEXT {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-style: normal;
    line-height: 45px;
    color: #666666;
    background-color: #FFFFFF;
    letter-spacing: normal;
    text-align: left;
    word-spacing: normal;
    position: relative;
    width: 542px;
    left: 400px;
    bottom: 20px;
    text-decoration: none;
.FooterTEXT {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: normal;
    font-weight: light;
    font-variant: normal;
    text-transform: none;
    color: #FFFFFF;
    height: 35px;
    width: 904px;
    position: relative;
    left: 10px;
    top: 10px;
#div_18 .SectionTEXT p a {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-style: normal;
    line-height: 45px;
    font-weight: normal;
    font-variant: normal;
    color: #666666;
a:hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-style: normal;
    line-height: 45px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #FF0000;
    text-decoration: none;
.nameplate {
    font-family: Blue;
    color: #666;
    font-style: normal;
    font-weight: inherit;
.forwardSlash {
    font-family: Verdana, Geneva, sans-serif;
    font-style: normal;
    font-weight: inherit;
.verticalSlash {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: lighter;
    color: #03AAF3;
.namePlateNOW {
    font-family: "Briem Akademi Std Semibold";
    font-style: inherit;
    font-weight: inherit;
    color: #F00;
.efitnesslogo {
    color: #FFF;
    visibility: hidden;
#div_18 .SectionTEXT p a {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    visibility: visible;
    color: #666666;
#HD1 {
    position: absolute;
    height: 352px;
    width: 230px;
    left: 10px;
    top: 0px;
#HD2 {
    position: absolute;
    height: 352px;
    width: 230px;
    left: 240px;
    top: 0px;
#HD3 {
    position: absolute;
    height: 352px;
    width: 230px;
    left: 470px;
    top: 0px;
#HD4 {
    position: absolute;
    height: 352px;
    width: 230px;
    left: 700px;
    top: 0px;
.GhostedBar {
    position: absolute;
    height: 105px;
    width: 570px;
    left: -10px;
    top: 190px;
    background-image: url(IMAGES/WhiteBar.png);
.WHTGRYBAR{
    position: absolute;
    height: 70px;
    width: 955px;
    top: 369px;
    left: 0px;
    background-repeat: no-repeat;
    background-image: url(IMAGES/WHT_GRAY_BOX_WRAP.svg);
.WHTGRYSHADOW{
    position: absolute;
    height: 75px;
    width: 924px;
    top: 370px;
    left: 4px;
    background-repeat: no-repeat;
    background-image: url(IMAGES/WHT_GRAY_SHADOW.png);
.BkgrndNAV {
    background-color: #C3D3F2;
    height: 1200px;
    width: 897px;
    position: absolute;
    left: 31.5px;
    top: 362.5px;
    opacity:
#MembersFtrContainer {
    position: absolute;
    height: 65px;
    width: 944px;
    left: 8px;
    top: 1630px;
    border-top: solid;
    border-top-color: #FF0A00;
    border-top-width: 1px;
    border-bottom: solid;
    border-bottom-color: #FFFFFF;
    border-bottom-width: 1px;
    border-left: solid;
    border-left-color: #FFFFFF;
    border-left-width: 1px;
    border-right: solid;
    border-right-color: #FFFFFF;
    border-right-width: 1px;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 11%, #bfd3fc 55%, #3e78fd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(11%,#ffffff), color-stop(55%,#bfd3fc), color-stop(100%,#3e78fd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 11%,#bfd3fc 55%,#3e78fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#3e78fd',GradientType=0 ); /* IE6-9 */
</style>
<link href="Index.css" rel="stylesheet" type="text/css">
<script id="form_init_script" data-name="" src="common/js/form_init.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="common/css/jquery-ui-1.8.5.custom.css"></link><link rel="stylesheet" type="text/css" href="common/css/normalize.css"></link><script type="text/javascript" src="common/libs_js/jquery-1.4.4.min.js"></script><link id="theme" href="theme/default/css/default.css" type="text/css" rel="stylesheet"></link><title>e-fitness NOW Origin</title><script type="text/javascript" src="common/libs_js/jquery-ui-1.8.9.custom.min.js"></script><script type="text/javascript" src="common/libs_js/jquery.ui.datepicker.js"></script><script type="text/javascript" src="common/libs_js/easyXDM/easyXDM.min.js"></script><script type="text/javascript" src="common/js/jquery.validate.js"></script><script type="text/javascript" src="common/libs_js/jquery.metadata.js"></script><script type="text/javascript" src="common/libs_js/jquery.placeholder.min.js"></script><script type="text/javascript" src="validation_data.js?249"></script><script type="text/javascript" src="common/js/validation.js"></script><script type="text/javascript" src="common/js/conditionals.js"></script><script type="text/javascript" src="common/js/lang/messages_validation.js"></script><script type="text/javascript" src="common/js/lang/messages_datepicker.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=960, user-scalable=yes"/><title>Index</title>
<link rel="stylesheet" href="jQuery/themes/base/jquery.ui.all.css?version=11">
<style type="text/css">
a:link {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-style: normal;
    line-height: 45px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #666666;
    text-decoration: none;
a:visited {
    text-decoration: none;
    color: #666666;
a:active {
    text-decoration: none;
    color: #666666;
body,td,th {
    color:#666666;
.hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-style: normal;
    line-height: 45px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #FF0000;
body {
    margin-top: 0px;
.NEWnav {
    position: absolute;
    height: 45px;
    width: 920px;
    left: 20px;
    top: 380px;
</style>
<script src="jQuery/jquery-1.4.4.js"></script>
<script src="jQuery/ui/jquery.ui.core.js"></script>
<script src="jQuery/ui/jquery.ui.widget.js"></script>
<script src ="jQuery/ui/jquery.ui.tabs.js"></script>
<script>
$(function(){
        $("#Tab_5").tabs({});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body bgcolor="#3E78FD" text="#666666" onLoad="MM_preloadImages('IMAGES/FitnessProgHvrClkBttn.png','IMAGES/What_HowHvrClkBttn.pn g','IMAGES/EnrollTodayHvrClkBttn.png','IMAGES/MemberLoginHvrClkBttn.png','IMAGES/GrnButton HvrClk.png','IMAGES/FitnessProgHvrClkBttn.svg','IMAGES/What_HowHvrClkBttn.svg','IMAGES/Enr ollTodayHvrClkBttn.svg','IMAGES/MemberLoginHvrClkBttn.svg','IMAGES/OriginHvrClkBttn1.svg', 'IMAGES/FitnessProgHvrClkBttn1.svg','IMAGES/What_HowHvrClkBttn1.svg','IMAGES/EnrollTodayHv rClkBttn1.svg','IMAGES/MemberLoginHvrClkBttn1.svg')">
<div id="div_1">
<div align="center">
<div id="HD1"><img src="IMAGES/DBS_FOTOSEARCH_u14758523.png" width="230" height="352" alt="Women Competitive Swimmer" /></div>
<div id="HD2"><img src="IMAGES/DBS_FOTOSEARCH_u18569747.png" width="230" height="350" alt="Hurdler" /></div>
<div id="HD3"><img src="IMAGES/DBS_FOTOSEARCH_u24747386.png" width="230" height="350" alt="Golfer" /></div>
<div id="HD4"><img src="IMAGES/DBS_FOTOSEARCH_u21161806.png" width="230" height="351" alt="Marathon Runners" /></div>
<div class="GhostedBar"></div>
</div>
<div class="overlayLOGO">
<img src="IMAGES/efitnessLOGO_copy1.svg" alt="e fitness now" width="508">
</div>

</div>


</div>
<div class="BkgrndNAV"></div>
<div class="WHTGRYSHADOW"></div>
<div class="WHTGRYBAR"></div>
<div class="NEWnav">
<a href="Index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Origin','','IMAGES/OriginHvrClkBttn1.svg',1)"><img src="IMAGES/OriginNormBttn1.svg" alt="Origin Page" width="180" height="45" id="Origin"></a>
     <a href="FitnessPrograms.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('FitnessPrograms','','IMAGES/FitnessProgHvrClkBttn1.svg',1)"><i mg src="IMAGES/FitnessProgNormBttn1.svg" alt="Fitness Programs Page" width="180" height="45" id="FitnessPrograms"></a>
       <a href="Learn.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Learn','','IMAGES/What_HowHvrClkBttn1.svg',1)"><img src="IMAGES/What_HowNormBttn1.svg" alt="Learn What & How" width="180" height="45" id="Learn"></a>
       <a href="Enroll.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Enroll','','IMAGES/EnrollTodayHvrClkBttn1.svg',1)"><img src="IMAGES/EnrollTodayNormBttn1.svg" alt="Enroll Today Page" width="180" height="45" id="Enroll"></a>
       <a href="Members.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Members','','IMAGES/MemberLoginHvrClkBttn1.svg',1)"><img src="IMAGES/MemberLoginNormBttn1.svg" alt="Members Page" width="180" height="45" id="Members"></a>
</div>
<div id="div_18">
    <img src="IMAGES/FOTOSEARCH_x19148847.png" name="Image_14" id="Image_14" />
<div class="INTROtext">
    <p>"WELCOME…Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."</p>
</div>
</div>
<div id="div_19">
    <img id="Image_15" src="IMAGES/stock-photo-12488366-man-playing-golf.png" />
<div class="SectionTEXT">
    <p>Sports Conditioning & <br>
      Personal Fitness Programs: <br>
      <a href="http://www.youtube.com/watch?v=4a0Q-IAqO8U" target="_blank" class="hover">Triathlons</a> | Running | Cycling<br>
      Swimming | Climbing | Surfing…</p>
</div>
</div>
<div id="div_20">
    <img id="Image_16" src="IMAGES/000014338250_HDFlashVideo copy.png" />
<div class="SectionTEXT">
    <p>Full Course Videos: <br>
      What We Do & <br>
    How e|fitnessNOW Programs Work for You … </p>
</div>
</div>
<div class="SectionTEXT" id="div_21">
    <img id="Image_17" src="IMAGES/stock-photo-17198908-success-flow-chart-on-a-blackboard.png" />
    <div class="SectionTEXT">
    <p><br>
      Learn About Advanced Conditioning Programs…    </p>
</div>
</div>
<div id="div_23">
    <img src="IMAGES/Bigstock_28225811.png" alt="Enroll Today Image of Track & Field Hurdlers" id="Image_24" />
<div class="SectionTEXT"> <br>
      Fly Over Hurdles…<br>
      Sign-Up with an e|fitnessNOW Trainer Today!
</div>
</div>
<div id="MembersFtrContainer">
<div id="MemberFtrInsideContainer">
    <div class="FooterTEXT">© 2012–2017 e|fitnessNOW and e|fitnessTRAINER. All rights reserved. web design: grafacha.com | web development: Content for class</div>
</div>
</div>
</body>
</html>
CSS
@import url("webfonts/DroidSans/stylesheet.css");
#div_1
    height : 349px;
    left : 8px;
    overflow : hidden;
    position : absolute;
    top : 11px;
    width : 944px;
    border-top: solid;
    border-top-color: #FF0A00;
    border-top-width: 1px;
    border-bottom: solid;
    border-bottom-color: #FF0A00;
    border-bottom-width: 1px;
.headerImage {
    position: absolute;
    width: 923px;
    height: 350px;
    margin-left: 10px;
.overlayLOGO {
    position: absolute;
    top: 205px;
    background-repeat: no-repeat;
    width: 590px;
    height: 150px;
    left: 20px;
    visibility: visible;
#efitnessLOGO
    width: 5.823in;
    height: 1.938in;
    position: absolute;
    top: 25px;
    left: 45px;
    visibility: visible;
#textheader_3
    height : 104px;
    left : 46px;
    overflow : hidden;
    position : absolute;
    top : 11px;
    width : 451px;
    color : #575756;
    font-family : Arial,sans-serif;
    font-size : 78px;
    line-height : 104px;
    margin-top : 0;
    width : 100%;
#textheader_3 a
    color : #575756;
    text-decoration : none;
#Tab_5
    left: 0px;
    top: 369px;
    width : 960px;
    position: absolute;
    height: 55px;
#div_18
    height : 220px;
    left : 8px;
    position : absolute;
    top : 440px;
    width : 944px;
    border-top: solid;
    border-bottom: solid;
    border-bottom-color: #FF0A00;
    border-top-color: #FF0A00;
    border-bottom-width: 1px;
    border-top-width: 1px;
    background-color: #FFF;
#Image_14
    height : 220px;
    left : 0px;
    overflow : hidden;
    position : absolute;
    top : 0px;
    width : 380px;
#div_19
    height : 220px;
    left : 8px;
    overflow : hidden;
    position : absolute;
    top : 680px;
    width : 944px;
    background-color : #ffffff;
    border-bottom: solid;
    border-bottom-color: #FF0A00;
    border-bottom-width: 1px;
    border-top: solid;
    border-top-color: #FF0A00;
    border-top-width: 1px;
#Image_15
    height : 220px;
    left : 0px;
    overflow : hidden;
    position : absolute;
    top : 0px;
    width : 380px;
#div_20
    height : 220px;
    left : 8px;
    overflow : hidden;
    position : absolute;
    top : 920px;
    width : 944px;
    background-color : #ffffff;
    border-top: solid;
    border-top-color: #FF0A00;
    border-top-width: 1px;
    border-bottom: solid;
    border-bottom-color: #FF0A00;
    border-bottom-width: 1px;
#Image_16
    height : 220px;
    left : 0px;
    overflow : hidden;
    position : absolute;
    top : 0px;
    width : 380px;
#div_21
    height : 220px;
    left : 9px;
    overflow : hidden;
    position : absolute;
    top : 1160px;
    width : 943px;
    background-color : #ffffff;
    border-top: solid;
    border-top-color: #FF0A00;
    border-top-width: 1px;
    border-bottom: solid;
    border-bottom-color: #FF0A00;
    border-bottom-width: 1px;
#Image_17
    height : 220px;
    left : 0px;
    overflow : hidden;
    position : absolute;
    top : 0px;
    width : 380px;
#div_23
    height : 220px;
    left : 9px;
    overflow : hidden;
    position : absolute;
    top : 1400px;
    width : 943px;
    background-color : #ffffff;
    border-top: solid;
    border-top-color: #FF0A00;
    border-top-width: 1px;
    border-bottom: solid;
    border-bottom-color: #FF0A00;
    border-bottom-width: 1px;
#Image_24
    height : 220px;
    left : 0px;
    overflow : hidden;
    position : absolute;
    top : 0px;
    width : 380px;
#div_22
    height : 300px;
    left : 8px;
    overflow : hidden;
    position : absolute;
    top : 1632px;
    width : 944px;
    border-top: solid;
    border-top-color: #FF0A00;
    border-top-width: 1px;
    border-bottom: solid;
    border-bottom-color: #FFFFFF;
    border-bottom-width: 1px;
    border-left: solid;
    border-left-color: #FFFFFF;
    border-left-width: 1px;
    border-right: solid;
    border-right-color: #FFFFFF;
    border-right-width: 1px;
    background: #ffffff; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d 3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc 2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiB ncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogI CAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3R vcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iI2JmZDNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZ mZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iIzhjYjBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ 9IjEwMCUiIHN0b3AtY29sb3I9IiMzZTc4ZmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+C iAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJ hdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #ffffff 0%, #bfd3ff 66%, #8cb0ff 84%, #3e78fd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(66%,#bfd3ff), color-stop(84%,#8cb0ff), color-stop(100%,#3e78fd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%,#bfd3ff 66%,#8cb0ff 84%,#3e78fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#3e78fd',GradientType=0 ); /* IE6-8 */
<style>
      #docContainer .fb_cond_applied{ display:none;     visibility: visible;
    </style><noscript>
      <style>
      #docContainer
      .fb_cond_applied{ display:inline-block; }
</style>
#div_24 {
    height: 290px;
    width: 220px;
    background-color: #3e78fd;
    top: 11px;
    left: 246px;
    position: absolute;
    visibility: visible;
    border-left: solid;
    border-left-color: #FFFFFF;
    border-left-width: 1px;
    border-right: solid;
    border-right-color: #FFFFFF;
    border-right-width: 1px;
#div_25 {
    height: 290px;
    width: 220px;
    background-color: #3e78fd;
    top: 11px;
    left: 479px;
    position: absolute;
    visibility: visible;
    border-left: solid;
    border-left-color: #FFFFFF;
    border-left-width: 1px;
    border-right: solid;
    border-right-color: #FFFFFF;
    border-right-width: 1px;
#div_26 {
    height: 290px;
    width: 220px;
    background-color: #3e78fd;
    top: 11px;
    left: 710px;
    position: absolute;
    visibility: visible;
    border-left: solid;
    border-left-color: #FFFFFF;
    border-left-width: 1px;
    border-right: solid;
    border-right-color: #FFFFFF;
    border-right-width: 1px;
a:hover {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 36px;
    font-style: normal;
    line-height: 45px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #FF0000;
    text-decoration: none;
.INTROtext {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-style: inherit;
    line-height: normal;
    font-weight: inherit;
    font-variant: normal;
    color: #666666;
    background-color: #FFFFFF;
    letter-spacing: normal;
    text-align: left;
    word-spacing: normal;
    position: absolute;
    width: 525px;
    left: 400px;
    bottom: 20px;
    text-decoration: none;
    top: 10px;
    text-align: justify;
#MemberFtrInsideContainer {
    background-color: #3e78fd;
    position: absolute;
    visibility: visible;
    height: 55px;
    width: 924px;
    left: 10px;
    top: 10px;
    border-left: solid;
    border-left-color: #FFFFFF;
    border-left-width: 1px;
    border-right: solid;
    border-right-color: #FFFFFF;
    border-right-width: 1px;

Jquery menu plugin integrated in Tab's (using a custom theme )

Hi,
I'm trying to use the jquery menu plugin and use it combined with tab's. I would like to get the effect which is also in the APEX IDE ( TAB's with submenu's expanding below the TAB ).
So far I have my tab's and also my menu's which are show as a button on the page which expand when you click on them. But I would like to have the menu attached to the tab.
I found somewhere (http://www.theapexfreelancer.com/apex/f?p=APEXFREELANCER:JQUERY_MENU_PLUGIN:0) that I should name the TAB and the LIST's on which the menu's are build exactly the same to achieve this, but so far no luck.
Does anyone know of a cookbook describing how to achieve this or has any ideas what to check ?
Regards,
Bas
b.t.w. Have a great 2012!

The steps can be detailed as follows (I will make it specific to my theme -Application Builder- and you can replace what you want)
0) a) My Page template name is WithNicolettePlugin.
b) Put the Nicolette (Thanks alot for him) plugin on #REGION_POSITION_08# in Page Zero (Global page)
c) the settings of the plugin as follows:
- Template : WithNicolettePlugin
- Before HTML : <ul class="dhtmlMenuLG2"> - After HTML : </ul> - jQuery selector submenu : .dhtmlSubMenu2
- Tab set : main
- Include single subtab : yes
- Class first parent : ui-corner-left
- Class last parent : ui-corner-right
- File Prefix : #IMAGE_PREFIX#
the others are empty
1) link the following CSS's into the Header section of the Page Template of (Bluejay-22)
<link rel="stylesheet" href="/i/css/apex_builder.min.css?v=4.2.0.00.27" type="text/css" />
<link rel="stylesheet" href="/i/css/apex_ui.min.css?v=4.2.0.00.27" type="text/css" />
<link rel="stylesheet" href="/i/css/apex_ui_builder_home.css" type="text/css" />2) link the following Scripts into the Header section of the Page Template
<script type="text/javascript">
var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
</script>
<script src="/i/libraries/apex/minified/desktop_all.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<script src="/i/libraries/apex/minified/legacy.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<style> html {visibility:hidden;} </style>
<script type="text/javascript">
apex.security.framebreaker("D");
</script>
<script src="/i/libraries/apex/minified/widget.textarea.min.js?v=4.2.0.00.27" type="text/javascript"></script>
<script src="/i/libraries/apex/minified/builder.min.js?v=4.2.0.00.27" type="text/javascript"></script>3) Re-write the Body section to be as the following
<div id="page-header">
.... LOGO AND WELCOME HERE ......
   <div class="apex-top-bar-end">
       <div class="apex-top-bar">
            <div id="tabs" class="dhtmlMenuLG">
              #REGION_POSITION_08#   
            </div>
       </div>
   </div>
</div>
<div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
<div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
<div id="body">
    <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
    <tbody>
      <tr>
        <td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td>
        <td class="tbl-sidebar">#REGION_POSITION_03#</td>
      </tr>
    </tbody>
    </table>
</div>4- Update the section of Standard Tab Attributes to have Current Tab as the following *(PLEASE, REMOVE THE MINUS BEFORE onmouseover)*
<li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
<a href="#TAB_LINK#" class="dhtmlSubMenuN"
     title="#TAB_LABEL#">
     "#TAB_LABEL#
</a>
</li>
{code}
and Non Current Standard Tab as the following
{code}
<li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
<a href="#TAB_LINK#" class="dhtmlSubMenuN"
      title="#TAB_LABEL#">
      "#TAB_LABEL#
</a>
</li>5- Update the section of Parent Tab Attributes to have Current Parent Tab as the following
<div id="#TAB_ID#" class="current">
    <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
    <a href="#" class="link_icon">
      <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"
           class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
   </a>
   <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
       #TABS#
       <li class="last" dir="RTL"><span></span></li>
    </ul>
</div>and Non Current Parent Tab as the following
<div id="#TAB_ID#" class="non-current">
    <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
    <a href="#" class="link_icon">
      <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"
           class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
   </a>
   <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
       #TABS#
       <li class="last" dir="RTL"><span></span></li>
    </ul>
</div>6- You will find a sample here in
Workspace : ralab
User : nicolette
Password : abc123
Application 33791 - TestDropDownAppBuilderTabs
If the post completes your solution mark it as correct and the question as answered, otherwise, mark it as helpful.
Best Regards
Mahmoud

List View Report (theme 50 - jQuery Mobile Smartphone).

Hi,
I am creating a List View Report (theme 50 - jQuery Mobile Smartphone).
I have say the following settings..
Text Column - PRODUCT_DESC
Link Target - f?p=111:22:......
my PRODUCT_DESC is too long say 150 to 200 characters.
When I run my application on mobile...
1. when I am using the Link target, then I am not getting the complete Product Desc values displayed.. it's displaying just initial 15.. 20 characters of Prodcut Desc column and then arrow sign for link..
2. If I am not using the Link target, then it's displays complete values of Product Desc (all the 150 .. 200 characters) and no link arrown sign.
My question is I want to use the link target as well as want to display complete value of product desc.. any idea how can I do that..
Thanks,
Deepak

Hi,
I am creating a List View Report (theme 50 - jQuery Mobile Smartphone).
I have say the following settings..
Text Column - PRODUCT_DESC
Link Target - f?p=111:22:......
my PRODUCT_DESC is too long say 150 to 200 characters.
When I run my application on mobile...
1. when I am using the Link target, then I am not getting the complete Product Desc values displayed.. it's displaying just initial 15.. 20 characters of Prodcut Desc column and then arrow sign for link..
2. If I am not using the Link target, then it's displays complete values of Product Desc (all the 150 .. 200 characters) and no link arrown sign.
My question is I want to use the link target as well as want to display complete value of product desc.. any idea how can I do that..
Thanks,
Deepak

TypeError: s.text(...).addClass is not a function on a Select list item jquery mobile theme

Hi.
i got a page with jquery mobile template, i got an select list item based on customers , when i touch the field, it display correcty all my customers, but when i try to pick some records i just get the error (i am using firefox firebug to see the error):
TypeError: s.text(...).addClass is not a function
...ollapsiblebound",!0).bind("expand collapse",function(t){var n=t.type==="collapse...
here is my query :
select
nombre_cliente || ' ' || apellidos_cliente a, codigo_cliente b
from sti_cliente
where
codigo_compania in (select distinct codigo_compania from STI_COMPANIA_SUCURSAL_USUARIO where upper(codigo_usuario) = upper(:APP_USER))
and estado_cliente = 'A'
and (MANEJA_INVENTARIO_CONSIGNACION = 'S'
and (codigo_compania, codigo_vendedor) in (select codigo_compania, codigo_vendedor from VTA_MAESTRO_VENDEDORES where codigo_usuario = upper(:APP_USER)) or cliente_contado = 'S')
order by nombre_cliente, apellidos_cliente
i have supress a dynamic action based on the field, but seems the problem is something within the query.
i am running on :
Application Express 4.2.4.00.08
Application Express Listener version : 2.0.5.287.04.27
Application Express Listener server info: Grizzly/1.9.49
thanks for any tip.

PLEASE DO NOT post to long since expired threads. The poster is probably NOT following this thread and your response doesn't really help them with their issue...
Elephants wear tu-tus so they can hide in pine trees. Did you ever see an elephant in a pine tree? No? Well then, you know it works.
Thank you,
Tony Miller
LuvMuffin Software
Ruckersville, VA

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.

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 modal region template in theme 24

Please provide details how to use the JQuery modal region template in theme 24.
I want to create a modal page but I am no expert in jquery or script.
I am sure this template should make life easy but unable to find how to use it.
Any help greatly appreciated.
Thanks,
DS

Dan has created a great plugin. http://www.skillbuilders.com/oracle-apex/Application-Express-APEX-Consulting-Training.cfm?tab=free-plugin-downloads
It is the Modal page plugin. There is a video tutorial on the site to instruct you how to integrate it into your app.
Edited by: svk1965 on Aug 3, 2012 3:29 PM

Jquery in old themes

hi,
one of my apps is using the theme "southwest". this is an older one i think.
now i implemented a jquery calender plugin (skillbuilder).
in all the apex 4 themes the calender shows up, but in the southwest theme it is not displayed.
i could not find an error in firebug
regards volker

Volker,
have you asked the guys at skillbuilder?
I know from experience that they have chosen their name correctly. They do know what they're talking about.
I'm sure they can help you further.
Regards,
Richard

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.

Jquery tabs and missing images in theme 22

Hi,
I've successfully used the jQuery tabs template that Patrick so kindly shared in this thread [ https://forums.oracle.com/forums/thread.jspa?messageID=4423187] .
However I noticed something ithe following in the error console within firebug when I go over a tab page
"NetworkError: 404 Not Found - http://apex.oracle.com/i/themes/theme_22/css/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png.
We're on Apex 4.1.
Is it simply a matter of tossing the missing image into the /i/libraries/jquery-ui/1.8/base/images folder or is there more to do in terms of loading javascript libraries etc?
I've reproduced it on apex.oracle.com(using Firefox at least obviously).
workspace: Apex59
user: test
Password: LoremIpsum
Application :Test 22
The jQuery tabs are on page 1.
Any advice would be appreciated.
Cheers
Kofi

Thanks for the tip Richard.
In theme_4_0.css for theme 22 there is a line for this (on my system);
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #cdd5da; background: #f6f6f6 url(images/ui-bg_highlight-hard_100_f6f6f6_1x100.png) 50% 50% repeat-x; font-weight: bold; color: #111111; }So in that case I guess it's a fixable bug(?).
I'll leave this open just for a little bit to see if the Oracle folks would care to comment.
Thanks a lot Richard
Cheers
Kofi

Page from Sample - Mobile Starters - jQuery Mobile with theme not working on mobile

I created a new webpage - New - Page from Sample - Mobile Starters - Jquery Mobile with Theme and did not modify it.
That does not work on an iPhone or Android.
What am I missing? Is there an update to make the jquery mobilesite work?
This is how it looks in dreamweaver
http://ricston.com/push/test/screenshot_dreamweaver.png
This is how it looks on my phone:
http://ricston.com/push/test/screenshot_galaxy.png
The page for the template is here http://ricston.com/push/test/test.html - As you can see, nothing has been changed.

Thank you. I was having the exact same problem. I even upoaded the unmodified starter page, just in case it was something I did. Inserting the viewport line fixed it. (Now I need to go back and insert that line into each of the pages I was working on.)
The question remains, however, as to why the mobile starter pages don't include that line in the first place.
[edit] FYI - On Dreamweaver CC, it's under the "common" group within "insert". (I would have expected it under "JQuery Mobile", but it's not there.)

JQuery Themes

Similar Messages

Maybe you are looking for