I am developing a web application which will be hosted on multiple domains with different look and feel(UI).So I am planing the structure for static content(CSS,Image,JS) so that If I want to host same application on more than one domain I need to do less changes in CSS. so I have planed following sturucture
Resources
CSS
rootstyle.css (here I will place positioned related styles)
CSS for Site1
CustomTheme.css
CSS for Site2
CustomTheme.css
so here I will create a separate folder for each site and will write a customtheme css for the site.Am I doing right or there is any other better way to achieve this.
Thanks
You should use App_Themes folder for this purpose.
You can create different folder inside it.
Example:-
RedTheme
GreenTheme
YellowTheme
and you can put your individual style sheet of theme file inside this.
Here is a good example
http://www.devproconnections.com/article/aspnet2/dynamic-themes-123058
Related
I have 2 different pages sign-in and signup both are in separate folders with their own index.css(1 index.css for 1 page) but they are somehow using each other's CSS. if I make changes in one CSS file it also reflects on another page. I have imported them into their respective pages. I am kinda new to development.. please help.
you should add a specific classname for each tag in your project same classes take same styles
add class names in different files, not make them unique the best practice right now is to use CSS Modules. Check here for more info :
CSS Modules React document
with them, you can have the same name in different files, which react make them unique automatically
I want to edit the style of multiple applications inside my workspace with the less amout of effort. What I mean by "edit the style" is font size, background color, position, etc.
My idea was creating a CSS file at "Static Workspace Files" with the classes I want and applying them to the apex items needed. Applying this in a region for instance:
*.font16{
font-size: 16px;
}
The problem is: modal pages can't find the file, which is not a problem in nomral pages. I'm using the path '#WORKSPACE_IMAGES#styles.css' in the page "CSS > File URLs" setting.
I'm not sure if this is the right approach, maybe I should edit Themes or Templates, but since I'm pretty new to Apex I chose CSS for familiarity.
Application Express v20.1
That's what Static Workspace Files are meant for, files that can be used by multiple applications in the same workspace.
The easiest approach for this is to create a CSS, like what you've done.
You don't need to inlcude the file in every single page, which would become a maintenance nightmare eventually.
You can simply include the file at the application level:
In Share Components, go in the User Interface Attributes and include the file under Cascading Style Sheets.
I usually have one global.css file (as a static workspace file) for anything common to all my apps and one app.css per application (as a static application file) for things specific to the current application.
Note that application exports will contain the static application files, but they will not contain the static workspace files. You will need to export/import them yourself.
Did you try Theme Roller? Run the page, it is down in developer's toolbar.
I have been reading about leveraging cdn to boost the speed of web application. I am developing a react application and I am using stylus for css. My current structure of project is something like this: Each component or page has it's own seperate local stylus file. So this way I am trying to keep the syles isolated for each component so that it is easy to maintain. But mostly all the stylus files has around 1000 lines of code which is common for all the stylus files. This brings down the speed of my application while it loads. I am thinking of putting the css on cdn. This way it will be faster I am assuming. How can I do it with my present project structure?
Right now I include stylus like this in each component
import c from "./reviews.styl"
render() {
return (
<div className={c.container}>
If I create a seperate css file as sugegsted in answer to include all the common css, how will I say to each component to use that common.css file. Each component is already using the imported stylus file like I shown above
You have a few ways here...
In the constructor you can append a link tag to the head
In componentWillMount you can append a link tag to the head
e.g.
document.getElementsByTagName('head')[0].appendChild('<link rel=stylesheet href=mycdn.com/mystylesheet.css />');
I'm not saying moving your CSS to a CDN is a good solution, but this is how you'd accomplish it.
The benefit of a CDN is that your static web assets are deployed across the world on multiple servers and your users can easily retrieve quick copies of these assets. In the case where you are using a file like jquery-x.js, users may already have retrieved the file from the CDN for another website and even on the first page load, they can use a cached copy.
Your biggest issue is the duplication of CSS code throughout each component's style page and that can be overcome by just creating a generic style sheet with the common styles (say "common.css") and then including it in each component. You don't have to use a CDN to achieve this and you can investigate CDNs after you first get rid of the duplicate CSS as another way to speed up your page load.
I have a custom skin that I designed. It is used on more than one portal that I manage. I want to add the ability change a header image based on the page that is being displayed. This image is a background and I don't want to use a content pane to achieve this. Also, I would prefer to not use Java script either (but I have a feeling this will be necessary)
I know how to reference the skin path for resources, but this would put the same image on every portal and page. I want to have a default image like header_bg.jpg in an /images folder in each portal that uses the skin.
So I want to know if there is a way to get the relative root of the portal from the skin css file that is being used by that portal?
Thanks in advance
You could put the CSS into Portal.css for each of the portals, that gets loaded on every page of a DNN site, depending on which portal it is.
Portal.css loads after container and module CSS files.
We have a ASP.NET solution using images, css and .skin files with in the App_Theme/{selected theme}. The themes today contains many, many files and images and for a customer theme we add a new folder to the App_Themes and copy all files to the new folder and make the 10-200 changes on images, skin and css's.
The issue here is that the default theme, the one we normally have when we develop, evolve's and grows making theme customer theme out of date. So when an upgrade comes we have to go through all files looking for changes and hopefully finding them all. Sometimes we miss things that are really important.
The perfect solution would be to have a base theme that contains the base css, skin and images. And when we add a new customer theme we only tell the system what has been changed, what css-selectors to override and what images to use instead of the images from the base theme. In my understanding, if using the normal ASP.NET theme functionality in App_Themes folder, you can only have ONE theme and not a BASE theme and then say a DeliveryCustomer-theme that has a different background and some other images that the solution shall use instead of the ones in the BASE-theme.
Does anyone have some guidelines to solve this in a maintainable way for the future. I seen that people override the App_Theme path to make it work with custom skins.
thanks!
Use the concept of a base theme like you described. Pull out all common CSS rules into another file, let's call it base.css.
Take base.css and all the images that are common, and put them in a folder outside of App_Themes, and just include the CSS file like you normally would any other on your master page.
<link rel="stylesheet" type="text/css" href="/styles/base.css" /> <!-- Note this isn't in app_themes -->
Then, make sure your CSS files in various themes only specify the delta for your styles.
Ok, so here is how I'v done it know.
I have created a Default theme that is the original theme with all the css-files, skin-files and images that is needed, and that is alot. This theme is in the App_Themes folder. Them I'v created a new folder called ThemeSkins next to the App_Themes folder. In this folder I have all the new skins in different folders. The folders name is the name of the new theme that one want's to have. In each of the skin folders there are css-files that contains only the selectors that I want to overload. There is also images that I want to replace.
I have created a ThemeCreator tool that does three things:
Remove all themes except the Default theme in the App_Themes folder. This is to only have one main theme to work on for the developers. There will still be work that needs to be done in the ThemeSkins, but the overall work load will be minimal.
Next the tool looks at the folders that is in ThemeSkins and creates a folder under App_Themes for each skin with its name. Then it copies the Default theme into all the new skin folders that it just created.
The last thing is that it will merge the skin specific files into the newly created skin under App_Themes and let the user know what files were added just for information. The tool adds a prefix, "z_", on all css-files so that these are loaded last of all css-files and there for will overload the default selectors.
The thing that remains is to update the skin-files, so far, no customer has needed changes in these files. But when they do, I guess I just add a skin files and have to update the default in a automatic way since the skin-markers can't be overloaded as css-selectors can.
This works really smooth and gives us a nice and lean way to work with skins on our themes.
Any one got a better idea how to get the same result? the major issue using ASP.NET themes are that you can't use a default theme and then just apply skins to it without using the shape and color attribute in the skin-files. This is not recommended as the skin files will copy out all attribute to all the places that they are needed in the markup and not just reference them as css-classes do.