How can I change the heading sort icon in a APEX 5 classic report?
The customer just wants to have his own sort icons for desc and for asc. He does not like the new APEX sort icons.
ORACLE says:
Desupported Report Heading Sort Icons The following attributes used to
define the report heading sort icons have been de-supported for
interactive reports and classic reports: Ascending Image, Descending
Image, Asc Image Attributes, and Desc Image Attributes. Instead of
referencing images directly, Oracle Application Express now uses CSS
to render sort icons. For interactive reports uses the following
classes: .a-Icon.icon-irr-sort-asc and .a-Icon.icon-irr-sort-desc For
classic reports use the following classes: .a-Icon.icon-rpt-sort-asc
and .a-Icon.icon-rpt-sort-desc
I have no clear idea how that task can be made. I just know that APEX now uses CSS to render sort icons (a-Icon.icon-rpt-sort-asc and .a-Icon.icon-rpt-sort-desc).
It could be "Static Application Files" > #APP_IMAGES#sort_asc.png / #APP_IMAGES#sort_desc.png.
I am new with APEX, my colleagues say changing a sort icon in classic report was an easy task in APEX 4.2 but this easy way is no longer available in APEX 5.
Does someone has a piece of code and some hints?
You need to define your own CSS classes .icon-rpt-sort-asc and .icon-rpt-sort-desc. They have to look like this:
span.icon-rpt-sort-asc {
background-image: url("/i/custom_asc_sort_image.png");
}
span.icon-rpt-sort-desc {
background-image: url("/i/custom_desc_sort_image.png");
}
Here you set names of images, which will be shown in a report column header. After that you need to use this CSS. Here you have two ways to do this:
Open page properties, go to CSS tab, place CSS code there. This isn't a good way, because you have to add this code to every page, where you need custom images.
Recommended way - create a css file with code above, put it in /i/ folder, and change page template (Shared Components->User Interface->Templates-> desired page template -> Definition tab). In Header section add a <link> tag:
<head>
...
#PAGE_CSS#
#FAVICONS#
#HEAD#
<link rel="stylesheet" href="#APP_IMAGES#mycss.css" type="text/css"></link>
...
</head>
where mycss.css - name of your CSS file. And, of course, you have to put your custom sorting icons to apex images folder.
Related
I've a problem with the javafx html editor. I customised the shown elements and now i need to change the font family & size drop down list.
I got it working, that I can insert my custom font sizes, BUT then nothing happens after choosing between sizes. So I think there is probably any change listener working not with my inserted values?
Status Update 11.08.16:
The actual case is, that I added the HTMLEditor, HTMLEditorBehavior and HTMLEditorSkin java files to my project. I recognized then, that the editor
is reading in 7 fixed sizes from a property file and updates the webkit.WebPage with those values if the dropdown changes its value.
The problem: This values are html values from 1 to 7. The generated html tag is which only takes values from 1 to 7. For my application I need to have values like 16pt -> so i'm looking for any way to access the part where the html tag is added and instead of I want to use tags.
Any ideas ? If it helps you, I can upload a short test-project, where I added the htmleditor files for debugging - just let me know pls.
I tried to create a grid using UI grid (Recent version of ngGrid) which is unstable version and integrated in my current project.
It is Not correctly displaying the (icon angle down and row selected icon) as needed While including the CSS file in project (by downloading the file and uploading) its giving me display errors as shown below.
But, if i directly give the web url for CSS file in my project...it is displaying correctly.
//web url:
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
//my url
<link href="~/Scripts/ui-grid-unstable.css" rel="stylesheet" />
I don't want to depend on web URL to display...is there any solution that I can implement on my side.
Please refer the image for before and after using web link.
link for Images: http://postimg.org/image/omhlfs8nd/
The top one is how it's supposed to and the bottom one explains my display error.
ThankQ for your time.
This is a simple error. Make sure you have the ttf,woff and svg files from the ui-grid download in your css folder. From you code, you should have it under ~/Scripts/ folder.
Adding to previous comments to download tff, svg and woff files:
You need to download ui-grid.eot as well to get it perfect.
We have followed the guide provided by WSO2 to get access to the CSS / JSP pages.
Our aim is to re-theme / rebrand / restyle the login page. We have found that the login page is part of the jar: WSO2\repository\components\plugins\org.wso2.carbon.identity.sso.saml.ui_4.0.3.jar
The login page is called login_ajaxprocessor.jsp
The guide mentioned above states the following about JSP's ending with _ajaxprocessor.
By default when create a jsp file ( say “foo.jsp”) in a Carbon UI
component, it will inherit header, left menu and footer from the
Carbon core UI. But if the file name is “foo_ajaxprocessor.jsp”, there
will be no inheritance.
For an example let's consider, “login_ajaxprocessor.jsp” in
“org.wso2.carbon.identity.saml.sso.ui” component. It simply omit the
header, left menu and footer and display only the content from this
file. So we are able to customize this page in to a different look and
feel.
Were were successful in modifying the language (buttons, etc) in the JSP files. This Jar also contains a CSS file in: \web\sso-saml\css\main.css
We have modified this CSS file to my own style. However, when the page gets loaded, it seems the default WSO2 main.css file is read.
When looking at the default way in which the JSP page refers to the CSS, it says:
<link media="all" type="text/css" rel="stylesheet" href="carbon/sso-saml/css/main.css"/>
We would expect that the /sso-saml/ part wordt select our own modified CSS file.
Is it possible to configure that for this page only, our modified CSS file will be used? We want to prevent to have to change the default main.css. Also, it is because we want to use specific images, that we want to store in jar\web\sso-saml\images
Yes you can use your custom style pages and apply them. Please refer [1] [2] for more info. This will guide you on your task.
Hope this will help you.
[1] http://wso2.com/library/knowledge-base/2010/11/customize-ui-theming-wso2-carbon-based-products
[2] http://wso2.com/library/knowledge-base/2011/11/playing-around-carbon-product-themes
The login.jsp can be found in following jar.
/repository/components/plugins/org.wso2.carbon.ui_4.0.5.jar => /repository/components/plugins/login.jsp
and css => /repository/components/plugins
I searched google and SO, but did not find a solution.
I have an asp.net web app that allows users to customize some GUI aspects (such as font color, add a custom logo etc). This information is stored in the user profile database.
I have a css file that populates font colors etc. The main page, loads the users profile from the database, and customizes the page accordingly.
Aside from having each label with its own "font-color=", how can I display the CSS elements, based on the user profile information returned from the database? Thx
You can include an extra CSS file that points to an ASPX page:
<link rel="stylesheet" type="text/css" href="/CustomStyles.aspx" />
Then in CustomStyles.aspx change the default content-type:
Response.Clear()
Response.ContentType = "text/css"
Then just start outputting your styles:
Response.Write("#awesome-button{color:" & ColorFromDatabase & ";}"
Make sure that this file is included after the other styles so that it takes precedence. You might want to also throw an !IMPORTANT in there, too.
Response.Write("#awesome-button{color:" & ColorFromDatabase & " !IMPORTANT;}"
It depends on how you have the information stored, but you can add styling to elements through code like this:
Button1.Style["font-weight"] = "bold";
Or you can just apply a CSS class to the control:
Button1.CssClass = "buttonStyle";
You could have a page that just returns a CSS file based on the preferences stored in the database. So you would have:
<link rel="stylesheet" href="somepage.aspx?userid=<%=userID%>">
You could probably even do that easily enough with a classic ASP page, a web service, etc.
The point is that that page would generate the same basic stylesheet, filling in the right colors etc. that the user has chosen. This way you don't have to perform a bunch of style changes in server-side or client-side code after the page has loaded, or mix your user preference code in with your HTML, or change much about the base pages if you want to change the way the stylesheet works. It also makes it easy to test your stylesheet outside of testing the site itself.
Hey, anyone have any idea what the best way to allow users to save custom css would be? Specifically, there are about 4 color values that I would like to allow a user to choose and these colors would be used to create a custom theme for the user. I'm thinking save values in the database and then using dom:loaded with prototype to set the custom style values but I'm wondering if theres a faster way? Like dynamically creating css files or something?
and then using dom:loaded with prototype
Awww, don't do that! That won't work when JavaScript is turned off.
Approach 1: Static stylesheet, dynamic values in document head
For the sake of not having to work with a dynamically created style sheet, have a separate, static CSS file with all the definitions that won't change.
<link rel="stylesheet" href="styles/static.css" type="text/css">
<!-- Or whatever you name it -->
All the definitions that will change, you could put into the head of the HTML document, fetching the user-changeable values from a database.
<style type="text/css">
.classname { font-size: (fontsize); } <-- Insert dynamic value here
.classname { color: (color); } <-- Insert dynamic value here
....
<style>
that way, the majority of the CSS stays in static, cacheable files, while the dynamic part won't cause another HTTP request.
Approach 2: Dynamic stylesheet
If you have a lot of dynamically changing values, put the entire style sheet into a script file and output it, replacing placeholders with the values from the database.
The downside to this is that to force the browser to reload the style sheet on changes, you'll have to work with a version approach stylesheet.css?version=400 which is pretty complex to do, but can sometimes be more desirable than littering the head section with CSS.
You decide which approach suits your situation better. I find myself choosing the first one most often.
I would save the 4 values in the database and then create a css file from those values. You would want to make sure and cache the created css file for each user so you don't have to dynamically create it each page view.
Creating a custom css file adds another request the browser has to make so you would need to make sure your setting up the headers correctly to cache it. If the user does change their settings you would need do something to ensure the browser immediately stops cashing the old css file and loads the new file. One way to do this is to change the url of the css file.
Example:
/usercustom.css?version=(last saved date hash)
Instead I would use your first approach and create a JSON array that you inject into the page and then you use your javascript framework to load and use the array to style the page.
You could also store the color values in the cookie from the server and use and or write to them on the client.
I think that best way is to save it to Db, because you don't want to allow user to mess with your website. At least if some pages are public.
And I personally think that answers like "do it without JavaScript" is nothing but old school BS... Did they tried to turn of JavaScript today? I don't think so... And by this paragraph I don't mean that you have to do it using JavaScript. Do it in a way that suits your needs 🤔
Wish you nice Day