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.
Related
I have an application that loads some CSS from a url. The css is loaded from the HTML page using a link tag:
<link rel="stylesheet" type="text/css" data-ng-href="{{dynamicCss}}">
The dynamicCss variable is set in angular and it is a link of the type 'serverUrl/file.css?v=timeStamp'. The timestamp is generated by using timeStamp = new Date() * 1;
I am adding the timestamp to stop the css from being cached, as we allow css customisation and the css file needs to be recompiled by the server when the user customises the style.
There are other pages in the same application that load different css files, some of them without the timestamp, so they are cached. If I come from one of those pages, I can see the css that belongs to those pages in the source tab of my new page, even if those also have a timestamp to avoid caching.
My problem is: every time I deploy the code, if I look on the sources tab of Chrome and look for the css file, there is missing css when I compare it with the css file that the url 'serverUrl/file.css?v=timeStamp' loads. If I clear the cache the css in the sources tab of the browser matches the css in the link.
Any ideas of what is happening? Is there any problem with telling the browser to cache some css files and not others?
The problem was on the server side, some caching had been added.
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.
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
the font of the content of my facebook app keeps getting italicized even when i've removed the italics from the css file. if i make minor changes in the css file and upload it to the server, the firebug shows the unedited previous css file and hence, the app keeps showing unformatted content. what exactly is going wrong here?
i made a new css file and copied the contents of the previous css exactly as it was, and i linked it in all the files which require css. but when i upload these files to the server, facebook canvas doesn't show any css at all. i replaced the css filename with the previous one, and it works. why is this?
Actually it looks like facebook is currently experiencing some weird problems with styling. It doesn't cache any new styles, only displays what was previously cached (from yesterday). If you provide a new stylesheet url it will not be able to pull it up (like that url doesn't exist).
During normal conditions what others already suggested should work.
Facebook does like to cache things. Persistently. I don't know why the new file wouldn't have worked, by I can recommend 'spoofing' your css filename with a spurious querystring variable, and incrementing it each time you make an update.
eg
href="my_css_file.css?x=1"
Sounds like the browser is caching your CSS file, which is why even Firebug sees the older version.
There are numerous ways you can prevent the browser from caching your CSS file during development (once in production mode, you probably want it to remain in the cache). The most common technique used by web frameworks like Ruby on Rails is to append a random query string to the URL, like so:
<link rel="stylesheet" type="text/css" href="style.css?96234987" />
...but the trick is that it should be different every time, so the browser thinks it's a different file.
Here are links to a simple trick for PHP, a JSP example, and other possible methods.
According to Include files on facebook developer wiki:
Stylesheet includes are cached automatically by Facebook. Just include a tag like:
<link rel="stylesheet" type="text/css" media="screen"
href="http://yourapp.com/stylesheets/style.css?v=1.0" />
Increment the version number upon each change to your style sheet, as specified above.
So I'm trying to figure out how to store a CSS in a client side cache and set the alternating stylesheet from the data in the cache.
I'm developing a site that allows a user to customize the site. And I think the best route might be to save their changes in a css. But before it's saved I would like to allow them to preview it throughout the site.
Is it possible to set an alternating Stylesheet to an object and not a file?
Are their any concerns?
Has anyone saved CSS data in a DB then applied it a site?
Thanks
Brad
Appication["Styles"] = css
<style>
<% =Application["Styles"}.ToString() %>
</style>