I am developing GWT application in Eclipse in Hosted mode.
When I change something in CSS I cant see it in browser. I am trying full reload in browser using CTRL+F5, restarting my App in Eclipse and no change.
Only thing which helps is rebuild my app using maven clean install, restart App in Eclipse and then i can see changes. This takes a lot of time.
Any idea what I am doing wrong? I think there must be better way.
regards,Lukas
The problem is that in dev mode the src webapp folder copied to target only at startup, and DevMode does not refresh it. As a workaround you can use copy-resources, that take care of applying changes on the fly.
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.1</version>
<executions>
<execution>
<id>copy-resources</id>
<phase>validate</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>${project.build.directory}/gwt-webapp</outputDirectory>
<resources>
<resource>
<directory>src/main/webapp</directory>
<filtering>true</filtering>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
I use an external CSS file for my app, and I immediately see all changes in my browser upon simple refresh (no emptying cache, server restart, etc.) in both Chrome and Firefox.
The problem may be related to the location of your file. My file is in the /war directory, and I edit it directly. Another possibility is how you reference your file in your host page. Make sure you have a relative path like "/myCss.css".
There are 3 ways to solve this problem. I don't use eclipse though (I code with IntelliJ and use hosted mode from my command line Gradle script), but hopefully they should all work anyway.
The first is to figure out where your hosted mode is serving the files from, ideally an exploded war directory. In there, you can find the CSS file, which will be an exact replica of your CSS file that you're trying to change. Make your modifications there, reload, modify, etc, and then when you're done don't forget to copy that file and paste it back into your source directory. I use VIM and switch back and forth. I'm sure you could write a script that copied the file back over when hosted mode ended, if you were a keener.
The second method (and a much better method), as user1570921 points out, is to embed the CSS in your UIBinder code. For example, you might have:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.outsidePanel {
background: #00F;
}
</ui:style>
<g:HTMLPanel styleName="{style.outsidePanel}">
Hello, World!
</g:HTMLPanel>
In the example above, you could edit the CSS inside the ui:style section, hit F5 and see the changes, then make more changes, etc. No need to copy files over.
Here's a good link for more info: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Hello_Stylish_World
The third way is to use Google Chrome's Dev Tools (CTRL-Shift-I) or F12 in Firefox. In there you can edit the CSS inline without modifying your file at all. Fiugure out all of the right values, add new ones, remove old ones, and then make those same changes to your CSS file. Then you don't have to keep redeploying to see changes.
I personally use a combination of #2 and #3.
Try to put a line <stylesheet src="sheet.css" /> or <stylesheet src="/sheet.css" /> into your project.gwt.xml file.
Regards,
Eddy
From your project/application web page, view page source. Normally an option when we right click the page.
Click the .css file link, which appear something like this:
<link type="text/css" rel="stylesheet" href="Foo.css"
in this case click on Foo.css
The contents of the .css file will be displayed but probably not include your changes. In that case refresh the .css text by pressing F5 or the browser refresh button.
If your .css changes now appear, go back to your GWT project web page and refresh once more.
Alternatively using a different browser could temporarily show your new changes but if it too fails to refresh the .css file, then the procedure above will be necessary.
Related
I add a style sheet file to my project for customized style sheets. this file is in this path: ~/Content/MyStyle.css
When I run my project this file exists in the browser but there isn't any code in it.
Even I append my codes to Site.css file, those codes are wrote by mvc as default are exist, but those codes I added is not exist.
I'm confused. I wrote some code but not appear in browser.
Can you help me?
thanks
This is most likely a caching issue. You have to hard-refresh your browser. Try pressing ctrl+shift+R or ctrl+F5.
This will make sure that your modified files are requested from the server.
You can also change caching settings for your local development environment. Refer to MSDN on how to make a web.debug.config config transformation and what settings to change.
I am using the css property:
background-image: url(/Content/Images/background.jpg);
However when deployed to Windows Azure, it comes up with the file not found error because it is trying to retrieve the image from:
...azurewebsites.net/bundles/Content/Images/background.jpg
I have tried:
'~/', '../', 'Content/', '/Content' & even the full path.
when I simply go to the url of the image in the web browser, it loads the image so I know it is there.
What is the best way to remove or account for this problem?
Thanks.
Why is Windows Azure adding '/bundles/' into all of my css image file paths?
Your CSS file is getting bundled. ASP.NET is putting your CSS file into a new file and storing it at mydomain.net/bundles/somefile.css. The web browser is looking for your image relative to the CSS files location.
This is only happening on Azure because bundling only runs in release configuration not in debug configuration. So, you can test bundling locally by setting <compilation debug="false" /> in your web.config file.
What is the best way to remove ... this problem?
Take a look at this: MVC4 StyleBundle not resolving images and this MVC cannot display image using background-url in css - uses bundling, or just do not use bundling. :)
Our sitecore developer quit suddenly and I need to make a small change. I'm a front end developer and have no real experience with the sitecore backend. I just need to add some CSS styles to the main style.css file or I need to add my own file. I've got full access to the CMS, but no access to the hosting account. I'm trying to find the main CSS file through the CMS browser, but I'm not having any luck.
Can you help me either:
A) Locate the main CSS file so I can add some classes (preferred)
B) Add my own link in the tag to my own CSS file hosted on another domain
C) Use the home page link to CSS file where I can add some classes
A note about OPTION C... I'm in the CMS and I see there is a system folder and in that a CSS folder where I can add a custom.css file. Then I go to the home page and I can actually call that CSS file from a field in the home page BUT, when the site loads, even though it's calling this file, it comes over as .aspx and it's blank so no styles I set are applied.
you can find the location of file as suggested by Maciej or use firebug or any other developer tools to find the location of main style.css. Once you get the location you can browser the physical file on server by going to Sitecore start menu -> All Application ->File explorer . Download file using File explorer make your changes and upload it back, make sure you check override existing file when you upload. Also make sure you upload file to delivery server once you test your changes, typically you will be accessing Sitecore using Authoring Server so instance you are accessing might not be same as CD server.
You could right-click in your browser to figure out where your css is coming from relative to the server root. Although not completely fool-proof, this method may give you a quick answer.
According to documentation for sitecore 6.2, style sheet location is determined by the developer so it could be anywhere that the developer has chosen.
Take a look at this answer for more details.
You should also be wary of how code gets built and deployed. Most Sitecore developers have very specific methodologies for how they include code (including front end) in their solutions.
Make sure you're aware of any deployment methodologies your developer used, so that your work doesn't get overwritten in a future deployment.
Did they use a source control management solution (like Git or TFS)? Did they use an automated tool to do deployments (like Octopus Deploy)?
If you can find main CSS file in physical location, you can update the file with new CSS styles.
If you want to add your own CSS as an additional CSS style, you might need to create a new template for css link and use that template when you create new page with your own CSS.
Just for future reference, by default the location of the used css files is described in Sitecore.config like this:
<!-- WEB SITE STYLESHEET
CSS file for HTML content of Sitecore database.
The file pointed to by WebStylesheet setting is automatically included in Html and Rich Text fields.
By using it, you can make the content of HTML fields look the same as the actual Web Site
-->
<setting name="WebStylesheet" value="/default.css"/>
Paths are relative to the root of your sitecore installation, you can find default.css in the root of the sitecore application on the webserver.
In Chrome Browser, Inspect element and select source tab
and open required css file and make changes.
I have created MVC application. When I publish the application on Azure with release option, all css and js file load in a single bundle in page. (Open view source of page then displays a single link for css).
When I publish a site with Debug option in publish profile then all CSS load individual.
My problem is when publish site with release option theme not load correctly, but with debug option theme loads correctly. I want to publish my application with Release option only. If anyone face this issue before and get any solution then please help me.
I have experienced this before when using bundling.
Say for instance your css file is located at: /Content/css/css.css
This css file then makes a reference to another file, or for example an image at /Content/images/image1.png via url('../images/image1.png').
You then set up your css bundle # /bundles/css.
All appears great in debug mode. However, when you set <compilation debug="false" .... in your web.config, suddenly the references made in the css file breaks. If you open your console in Firebug/Chrome dev tools and check the network tabs, you'll see resources failing to load, from an incorrect URL.
This happens because when debug mode is off, all the files are bundled and minified like they would be in production. In this case, the CSS file would be bundled and served from the URL /bundles/css. This results in the relative URL reference breaking. Where it once referenced /Content/images/image1.png, it now references /images/image1.png.
You have a few options to solve this:
Serve your bundled css files from the same folder as the actual css files. eg. /Content/css/cssbundle. This can become very tedious quickly.
Change all relative references in your css files to absolute references. eg. ../images/image1.png would become /Content/images/image1.png. This does mean you can't use a lot third party CSS bundled out of the box, you would have to check/change relative references if you wanted to bundle them.
Use the BundleTransformer nuget package. It automatically transforms relative urls to absolute ones during the bundling process.
The main differences of StyleTransformer and ScriptTransformer classes from a standard implementations: ability to exclude unnecessary assets when adding assets from a directory, does not produce the re-minification of pre-minified assets, support automatic transformation of relative paths to absolute in CSS-code (by using UrlRewritingCssPostProcessor), etc.
I personally recommend 3 as it is the easiest to maintain long term.
While building large applications with meteor, we do face the regular problem of editing the stylesheets files. Once a file is edited, the whole application reloads which takes time each time a little change is made. A large project implicitly implies complex css files. For this reason I chosen to use the sass in order to structure them and be more efficient in the development processing. What I'm looking for is a workflow where I can change the .scss files in an editor and watch the result in real time in my meteor app.
Here is what you need (it looks fastidious but do not be afraid, it worth it):
Setup your project to externalise .css files
Meteor compiles all the .css files into one monolithic one, most of the css editors are not expecting this behaviour. For the development phase, I do recommend to use the traditional approach of including the stylesheet to the html page itself. to do so:
Create a public folder in the root of your meteor project: meteorProject/public
Add a css file into this folder: meteorProject/public/style.css
Import the stylesheet in your main html code <link rel="stylesheet" type="text/css" href="/style.css" />
What you did ? You created a public repository accessible through the path localhost:3000/ then you added the stylesheet style.css to this repository, that one became available through the relative path /style.css. By using this technique, meteor will not compile neither include by itself the stylesheet to your project, you just load it manually in the regular way using the link tag. Now it is time to configure an editor.
Now that the styles are imported the way they were 10 year ago, you can use compatible tools which will override the style to allow live editing. A simple one but only for css is the well known Espresso (formerly CSSEdit), open the page and override the styles… but that one is currently not supporting .scss files.
Editing .scss files in realtime with meteor:
To achieve this, you will need to use Sublime Text 2 or 3 as the editor, you can get it here: http://www.sublimetext.com/3 it is not free but there is no feature nor time restriction. So if you continue using it, just buy it to support the developers team.
You will need the awesome tool to allow the live edition which is takana, get it here: https://github.com/mechio/takana
That takana is freaking awesome! the concept is the following: Once installed and ran it will create a server interacting with the sublimetext editor, then you are requested to add a js snippet to your code so that the browser will get connected with the takana server and reload the .css or .scss files in realtime without having to reboot meteor.
To setup the meteor project with takana just do the following:
open the terminal
sudo npm install -g takana (enter your password if requested)
start takana in another terminal by providing it the absolute path of the meteorProject/public folder created above is might look something like: takana /Users/aUser/meteorProject/public
Add to your main html page the js snippet <script type="text/javascript" src="http://localhost:48626/takana.js"></script>
You are all set, now to use it
Start your meteor project in a second terminal. command meteor from the right path…
Open any browser to your meteor page i.e. probably http://localhost:3000
Open sublimetext, try editing your style.css file, the css changes are automatically displayed on the browser page without saving anything.
This is also working with .scss file. Just rename the style.css to style.css.scss and edit it within sublime text. Here the magic happen, you are editing a scss file with live result on a meteor application without having to reload anything.
Once you are satisfied with the result you can either compile the .scss to a .css file and add it the regular way to the project, or use the meteor .scss package which will do this for you at each restart. Note: Don't forget to remove the js and style snippet one to your code once in production.
Last but not least: you can open the project in several browsers and see them be refreshed in live while you edit the file in SublimeText, also it worked fine with Safari, FF but for some reasons I had to use "Google Chrome Canary" instead of "Chrome". Please comment if you made it work on other browsers such as IE, Opera or even if it worked with the regular "Chrome" on your computer.