Designing custom theme in APEX

APEX Version - 4.1
Theme currently using: 7.Modern Blue
Trying to modify existing theme in APEX, modifed Reports and changed colors, it worked fine.
One of the template, One Level Tabs - Right Sidebar (optional / table-based) has the following code enclosed within it:
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_7/css/theme_4_0_ie.css" type="text/css" />Please let me know where the file, theme_4_0_ie.css can be found, so that I can see the code and make modifications according to my requirements.
If there are any other ways to modify the theme, please let me know.

Hi Emy,
You will need to either store the CSS file elsewhere on your own server and reference it or probably an easier way is to upload the file into shared components as you did.
You then need to reference the file in your template like below and the same as you did:
<link rel="stylesheet" href="#WORKSPACE_IMAGES#paul.css"
 type="text/css" />You need to make sure that this file is loaded after the default APEX CSS. You also need to make sure you do a full page refresh for the changes to take effect (Hold Shift key and click refresh).
My suggestion would be not to remove the default CSS unless you are planning on changing the whole file. My approach is to just overwrite the sections I need to change.
.report-standard th.header, .report-borderless th.header {
 background: red;
 padding: 0 10px 4px;
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}This is taken from one of my stylesheets and overwrites the css just for the classes shown.
If you don't already I would recommend using either firebug with firefox or using the chrome built in tools to inspect elements. That way you can see the css for that element, change it on the fly to see what it looks like. Then you can finally copy and paste the css you have changed straight into your file.
Let me know if you have any more questions
Thanks
Paul

Similar Messages

Uploaded custom, theme not showing in repository

I have copied a existed theme_4 from images/themes/theme_4 to them_200.
when i am trying to export the same from repository, that is not showing in the list..
I have followed the below steps to create new custom theme
1) in images/themes/theme_4 copied the theme_4 directory to theme_200 direcotory
2) changed the CSS files, as per our requirements.
3) should export the them_200, changed one (not showing in repository list) currently stuck
4) after exporting the theme_200.sql , need to replace t4 and etc.... with t200 etc
5) importing the changed one into repository.
currently i am stuck with step 3, can you please help me on this...

1) I copied from theme_4 to Theme_200.
2) I have followed the steps from the below link.
http://rianne.andama.nl/blog/index.php?option=com_content&view=article&id=101:custom-themes-oracle-apex&catid=20:oracle&Item
Now I am trying to export the theme_200, but theme_200 is not visible in the list of themes to export.

Custom Theme Apex 3.2

Hi All,
Am blank about creating a customized theme in Oracle Apex 3.2. Is it possible to do the same? If so, kindly help me to proceed further to give good look and feel for my applications.
Thanks in advance.
Regards,
Sakthi.

Yes, it's possible..
good luck!
Regards,
Richard
blog: http://blog.warp11.nl
twitter: @rhjmartens
If this question is answered, please mark the thread as closed and assign points where earned..

Two logos in Custom theme using theme designer

Hi Experts,
I have issue with Custom Theme, when we create a custom theme using Theme Designer as we are getting Two logos and "Can't read property r of null" error in console as attached.
Any solution provided for this will be appreciated.
Thanks in Advance.
Regards,
Bhaskar.

Hi Masayuki,
As per this link only we have updated the latest UI5 version to 1.22.5.
Still facing the same issue, Please advice me to clear the issue.
Thanks in advance,
Bhaskar

Changing Theme in Apex

I would like to create a new custom that needs to be developed in my application. As a developer i dont have access to either download or upload files from themes folder. Can anyone guide me how that could be implemented in my application.

>
Welcome to the forum: please read the FAQ and forum sticky threads (if you haven't done so already)), and update your forum profile with a real handle instead of "986931".
When you have a problem you'll get a faster, more effective response by including as much relevant information as possible upfront. This should include:
<li>Full APEX version
<li>Full DB/version/edition/host OS
<li>Web server architecture (EPG, OHS or APEX listener/host OS)
<li>Browser(s) and version(s) used
<li>Theme
<li>Template(s)
<li>Region/item type(s) (making particular distinction as to whether a "report" is a standard report, an interactive report, or in fact an "updateable report" (i.e. a tabular form)
With APEX we're also fortunate to have a great resource in apex.oracle.com where we can reproduce and share problems. Reproducing things there is the best way to troubleshoot most issues, especially those relating to layout and visual formatting. If you expect a detailed answer then it's appropriate for you to take on a significant part of the effort by getting as far as possible with an example of the problem on apex.oracle.com before asking for assistance with specific issues, which we can then see at first hand.
I would like to create a new custom that needs to be developed in my application.Can we be clear on what you are asking for? A complete custom theme is a major undertaking. Customizing or overriding aspects of theme look and feel is relatively straightforward. Creating or customizing component templates within a theme is also pretty simple.
As a developer i dont have access to either download or upload files from themes folder.Why not?
You can always download theme resources through the browser. When running an application, view the page source in the browser. The page <tt>head</tt> element will contain a link to the theme style sheet like this:
<link rel="stylesheet" href="/i/themes/theme_25/css/4_2.css?v=4.2.1.00.08" type="text/css" />Add the server to the URL in the style sheet URL and type it into the browser address bar:
http://apex.oracle.com/i/themes/theme_25/css/4_2.css?v=4.2.1.00.08The browser will download the theme CSS.
To identify and access other resources like images referenced in CSS, use the web inspector in decent web browsers with real developer tools like Firefox+Firebug, Safari or Chrome.
Can anyone guide me how that could be implemented in my application.Developing a complete theme requires a good knowledge of HTML and CSS (and increasingly of JavaScript and a JS framework like jQuery). It's beyond the scope of this forum to provide information on the basics of HTML and CSS, and/or web and UI design in general.
The documentation contains information on managing and customizing themes and templates. Also see this Cloning your Corporate UI with HTML DB blog post (HTML DB was the former name of APEX).
The web server file system is the best location for theme files. If you really can't get proper access to this (as on hosted environments like apex.oracle.com for example), then the APEX repository can be used as the location for the required theme CSS, image (ignore the #IMAGE_PREFIX# stuff there—it's in the wrong place; repository images are accessed using #WORKSPACE_IMAGES#) and script resources.

Make custom theme available for the "Create new app" wizard

Hi all,
I have a general problem. Imagine you have created a theme for ApEx. The theme makes applications look as demanded by the design principles of a company. The company now wants everyone developing ApEx applications to use the developed theme.
But It seems to me that there is no easy way of doing this. When I create a new application, I can only see the standard themes defined in the repository. If I want a new application to use the developed theme, I have to exort the theme once, and import it for any application I create (after creating the application, of course :-( ). This is cumbersome. And maybe a point of discussion in many companies.
Is there a way to exchange a predefined theme in the repository through a custom theme? Or even better: Add a predefined theme to the repository? The important thing is to make the theme available for all applications in an instance without importing the theme again and again.
If there is no possibility to do this, this is an enhancement request. How about a possibility to import new themes globally for all applications (maybe from the INTERNAL workspace). Or how about putting a "Import Theme" Upload field on the "Select Theme" page in the application creation wizard?
Regards.
Stephan

Hello,
I'll put an enhancement request for that, there might even already be one. The way you are doing it right now is pretty much the easiest way.
One way I do it is I have a stub application that has just a couple blank pages and the proper themes and templates. Then all someone has to do is install the blank application and start working on that, it just takes a couple steps out of the theme switching issue.
Carl

NW2004s: Assigning a custom theme to a web dynpro running in the portal

The situation is as follows:
Some web-dynpros (for java) have a custom theme, a theme which is not the default theme of the portal or the default theme for web-dynpros in general.
In NW2004 this worked as follows:
When starting a web-dynpro in the portal it checked if it was started with the right theme. If not the exit plug of the WD interface view was called with an Url of the WD application plus a parameter for the right theme.
This is the famous parameter sap-cssurl.
For that parameter there are some values possible:
1) sap-cssurl=http://<host>:<port>/irj/portalapps/com.sap.portal.design.urdesigndata/themes/portal/mytheme
2) sap-cssurl=http://<host>:<port>/irj/portalapps/com.sap.portal.design.portaldesigndata/themes/portal/mytheme
3) sap-cssurl=http://<portal>:<host>/webdynpro/resources/sap.com/tcwddispwda/global/SSR/themes/mytheme
The first 2 are locations of the portal environment, the last one is a location of the WD runtime environment.
As I noticed this must be a full qualified absolute Url including host and port.
This works in NW2004 for web dynpro's running standalone AND in the portal.
Now for NW2004s:
The 3 variants of the parameter sap-cssurl work for web dynpro's running standalone.
But now for web dynpro's which are integrated in the portal:
The exit-plug with an Url is not possible anymore, this leads to the runtime error:
com.sap.tc.webdynpro.services.exceptions.WDRuntimeException: Exit-Plug must no be triggered with an URL when running in portal. Use portal navigation instead to navigate to another application!
Okay, as a first workaround I tried the portal navigation,
but somehow the supplied parameter sap-cssurl has no effect.
The code for that in the on-startup plug of the WD component:
WDPortalNavigation.navigateAbsolute(
PCD_ID,
WDPortalNavigationMode.SHOW_INPLACE,
null,
null,
WDPortalNavigationHistoryMode.NO_HISTORY,
null,
null,
"theme_set=X&" + theme,
 theme,
 false,
 true
I used there absolute portal navigation and the parameter (sap-cssurl=...) is part of the launcher parameter and the business parameter in the call to WDPortalNavigation.navigateAbsolute.
But as I wrote above, this has no effect on the theme.
In the I-View the parameter "Supply portal theme" is set to NO, otherwise the parameter "sap-cssurl" is supplied twice (this can be seen in the poroperties of the web-page in Internet Explorer).
What I tried afterwards was setting the parameter sap-cssurl hardcoded in the "Application parameters" of the I-View. This doesn't work either.
My question is: Should this be anyway possible for a NW2004s portal?
Did anyone successfully implement this?
Kind regards,
 Erich Lind

Hi Erich,
I am facing the same problem. I am on 04 s and couldnot implement the custom theme to a web dynpro running in the portal. When I run the web dynpro app as stand alone, the custom theme applies fine. But when in portal, it takes the standard theme.
Was wondering if you figured this out.
Thanks

Can you change the button color on a custom theme?

I recently installed a nice theme called Fractal-01 Song of a morning breeze. I had to installan add-on to change the menus that were white and thus invisible, but I have not figured out how to get the grey buttons for like Home and Back and Reload black, and they are very hard to see with this theme.
I tried changing them in Custom Theme Restorer, but nothing seems to change them to black. I can't imagine that the person who designed this theme would have made these washed out colors that blend into the theme the default, but maybe he or she did. It is a shame to give up on such a nice theme if I don't have to, but it helps if you can see your buttons.

Hi sherylz,
It is also possible to edit the theme, but it may be wise to make a copy of it:
*[https://support.mozilla.org/en-US/questions/940165]
*[https://developer.mozilla.org/en-US/Add-ons/Themes/Background MDN Reference]
*Add on to make own skin: [https://addons.mozilla.org/en-Us/firefox/addon/bt-canvas/]

How do I change the theme of a custom theme presentation in Keynote?

How do I change the theme of a custom theme presentation in Keynote?
I have a beautiful preso that my designer created. I want to use the copy in those slides with a different theme more conducive to my audience. And use only some of the slides (I know how to do that part).
Thanks!

merv,
A rather simple way, regardless of version, may be to:
1) Select everything and scale down;
2) In the Select dropdown click Object, then Text Objects, then Object>Transform>Transform Each and scale up to the original size or to a(nother) suitable one.

Custom theme with Fiori launchpad

Hi
I have created a custom theme using the theme designer as per detailed in Colorful Fiori - Part 3 - Sea Blue
I can see some changes taking effect in the preview but not all. For e.g. the tile title color, icon color did not change.
When I use the custom theme with the fiori launchpad url, I do not see any of the tiles. Only button I see is the logout button.
I checked in debug, it did show me few 404 errors. wondering why the custom theme works for my ui5 application but not with launchpad url.
Appreciate your help, in identifying what I might be doing wrong.
Thanks
Kalpana
Tags edited by: Michael Appleby

Hi Masa,
Thanks for replying !
We found that our exact issue was resolved in Version 1.1.7 of UI Theme designer (OSS note 1941092) .
So we upgraded our SAP_UI component to SP08 and now we are on version 1.2.2 of UI theme.
I am now able to see the tiles on my Fiori launchpad and the logo I defined in the custom theme. But the custom theme I applied did not get applied to the tiles and the background.
I still see the whole page (Except our company logo) with sap standard sap_bluecrystal theme.
I did the Inspect element, and see that it is still using the standard CSS. Cleared the browser histroy just to make sure that it is not picking the old theme from cache - but with no help.
If I go back to the theme designer and open the custom theme, I can see the csutom theme changes in the preview.
Any help is appreciated.
Thanks
Kalpana

Location of custom themes in Portal 7.4

Hi,
Our Portal is upgraded from 7.01 to 7.4 recently.We are using the good old portal theme editor.(UI Theme Designer from portal is not activated). I Created a theme based on a standard theme. In the earlier versions of the portal,all the theme related files(images,CSS etc) are stored in the following location in the file system of the portal server
<harddrive>\usr\sap\<instance>\JC00\j2ee\cluster\server0\apps\sap.com\irj\servlet_jsp\irj\root\portalapps\com.sap.portal.design.urdesigndata\themes\portal\
There used to be folder for each theme in the above location.But in the 7.4 portal, I did not see the custom theme folder under the above mentioned location, However, it shows some standard SAP themes and the custom themes that were existent before upgrade, But not the new custom theme that I created post upgrade, Does anyone know where new custom themes are stored in portal 7.4,when they are created by using the theme editor.
Regards
Veera

Hi Veera,
You can find newly created custom theme under WRR(Web Resource Repository), which is newly introduced in new release like 7.4 you are using. It provides a single storage location for all portal application resources and branding resources and enables NW Portal administrators to upload, download, view, and modify these resources, without the need to redeploy applications to see the results of the modifications.
You can find custom themes under:
Portal -> Content Administration -> Web Resource Repository -> Portal Content -> Web Resources -> theming -> Portal -> "Your custome theme"
All custom theme resouces are saved here. But please remember only custom themes are saved in WRR.And you can easily download these theme files like .css file. You can refer to below link for more information:
http://help.sap.com/saphelp_nw73/helpdata/en/51/1fcc73dba141888489f3f316b1026f/content.htm
Regards,
Herman

How to edit #TEMPLATE_CSS# of a theme in APEX 4.2?

Dear Experts,
How to edit #TEMPLATE_CSS# of a theme in APEX 4.2?
Best Regards
Mahmoud

Mahmoud_Rabie wrote:
Dear Paul,
To be more specific, I have the following
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_22/css/theme_4_0.css" type="text/css" />in my page template.
As I know, #TEMPLATE_CSS# is substituted by content of the above file.No, it is not.
As described above, <tt>#TEMPLATE_CSS#</tt> is replaced by the contents of the template's File URLs and Inline CSS properties. This feature enables template-level customization of the CSS included in the page. Try it: change <tt>#TEMPLATE_CSS#</tt> in the template to:

#TEMPLATE_CSS#
Now add a style to the Inline CSS property:
body { background: black !important; }Run the page. View the page source in the browser and see what's happened to <tt>#TEMPLATE_CSS#</tt>...
The question is, can I (through APEX 4.2) update this content directly to do tasks like adding or updating classes of the CSS?
Not in the way you mean.
File URLs and Inline are empty (by default) and ready to be used to totally replace the content of #TEMPLATE_CSS#Yes, <tt>#TEMPLATE_CSS#</tt> is replaced by the contents of the File URLs and Inline template properties. This does not affect the inclusion of any other CSS information, whether using new CSS substitution strings, <tt><link rel="stylesheet" ...></tt> elements, or embedded <tt><style></tt> declarations.
Is the only solution to update/edit the CSS of a theme, to download the CSS then paste it in Inline field (under CSS section of the template)?No. If you want a custom theme the best way is:
1. Copy the theme CSS to an accessible location in the file system (the best way) or APEX repository (if you don't have file system access).
2. Create a new theme as a copy in APEX.
3. Change the <tt><link rel="stylesheet" ...></tt> theme references in the new theme page templates to point to the new CSS location.
4. Customize the CSS (tools like Coda that allow local and remote files to be modified are very helpful).

Creating Custom Theme for Power View Clustered columns chart

Helllo...
Is it possible to create custom theme for displaying clustered columns chart on Power View?
Basically I am looking to create chart with specific colors for the bars? For e.g. for High - RED, Medium - Orange and Low - Yellow color. When I look at themes available in Excel 2013 I don't see this combination as such, so I was looking to create one
myself.
I tried to create a theme using video on youtube, but the theme which I created is not showing up in Power View mode in excel 2013.
www.youtube.com/watch?v=xs2F1n2-YR8

Hi Sagar,
In Power View, it has several default theme colors for us to apply to our workbook. Also, we can change the Font, Text Size and Background of the chart. However, it is not support to design a custom theme color.
You can refer to the following steps to change the theme colors:
1. On the POWER VIEW tab, in the Themes group, click Themes.
2. Under Built-in, click the theme that you want to use.
Please refer to the following screenshot below:
Regards,
Alisa Tang
If you have any feedback on our support, please click
here.
Alisa Tang
TechNet Community Support

Apply custom themes to WebDynpro ABAP application in Portal

Hi,
We have just upgraded the E-Recruitment to EHP4. We have two instances of ECC in which one acts as HR instance and the other one for E-Recruitmet. We have created custom themes for portal and need to apply the same for the WebDynpro ABAP applications for E-REcruitment. I have downloaded the theme and from portal and uploaded the same in MIME folder using SE80 transaction. I have also added the parameter sap-cssurl=/sap/public/themes/<my custom theme folder name>.
Also tried giving the url in application parameter as
SAP-EP-THEMEROOT=http://<hostname>/irj/portalapps/com.sap.portal.design.portaldesigndata/themes/portal/customer/<custom theme>
Is there any other way to apply themes for WD ABAP applications. I dont want to customize the standard applications and just want to apply the themes.
Any suggession on this is highly appreciated.
Kind Regards,
Vivek.

Hi,
to create theme for webdynpro abap application, use Eclipse Plugin. Please remeber to check the version of theme file before using theme.
http://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/10d5ef40-465e-2c10-9ca9-f548bfc3f236
setup custom theme for webdynpro abap application.
FEATURED EVENTS
Regards
Baby

Apply custom themes to WebDynpro application in Portal

Hi,
We have just upgraded the E-Recruitment to EHP4. We have two instances of ECC in which one acts as HR instance and the other one for E-Recruitmet. We have created custom themes for portal and need to apply the same for the WebDynpro ABAP applications for E-REcruitment. I have downloaded the theme and from portal and uploaded the same in MIME folder using SE80 transaction. I have also added the parameter sap-cssurl=/sap/public/themes/<my custom theme folder name>.
Also tried giving the url in application parameter as
SAP-EP-THEMEROOT=http://<hostname>/irj/portalapps/com.sap.portal.design.portaldesigndata/themes/portal/customer/<custom theme>
Is there any other way to apply themes for WD ABAP applications. I dont want to customize the standard applications and just want to apply the themes.
Any suggession on this is highly appreciated.
Kind Regards,
Vivek.

you can try these links for adding Themes to a Web Dynpro Application ... You can create your own theme with your company logo ... Optionally there are a few sample themes available ..
1) http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/d2b1d790-0201-0010-25b7-d1fb059a8ad9?overridelayout=true&quicklink=index
You can check this link below in which they have discussed about adding themes to the WD application ..
2)Re: Want Colorful WebDynpro Theme to download
For portal themes you have already applied it but still
http://help.sap.com/saphelp_ep60sp2/helpdata/en/1a/d7c1617dd29e4d85064b467636fada/frameset.htm
this link might help .

Designing custom theme in APEX

Similar Messages

Maybe you are looking for