There exists a question at SO about how to add css to Vaadin project. The tip there was to add css at /WEB-INF/VAADIN/themes/ location.
My problem is that Vaadin projects normally have WEB-INF folder under WebContent and now on Maven the similar folder is under webapp. This seems to be causing that my css changes do not take effect.
Also, is it necessary to have the custom css in same sub-structure as the original css? I want to modify table css and don't know if the css needs to be in a specific path.
So how to add the css for table so that also the table is changed, not just that the code builds correctly? :)
Update 1: I could get the following tempalate out with Firebug, but this is closest thing what I get to browser.
< link rel="stylesheet" type="text/css" href="/html/VAADIN/themes/mytheme/styles.css" >
< html >
< head >
< title > < /title >
< /head >
< body onload="javascript:location.replace('/c')" >
< !--The numbers below are used to fill up space so that this works properly in IE.
See http://support.microsoft.com/default.aspx?scid=kb;en-us;Q294807 for more
information on why this is necessary.
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
-- >
< /body >
< /html >
< /link >
You will probably put your styles.css file in the src/main/webapp/VAADIN/themes/[yourtheme]/ folder and configure Maven to copy everything in src/main/webapp into your WEB-INF. This way your .css file will end up in WEB-INF/VAADIN/themes/[yourtheme]/.
It is strongly recommended to inherit from a theme rather than trying to override the behavior of a default theme.
Then you need to specify your theme name in the application
public void init()
{
setTheme("simplegae");
...
and make your .css file inherit from a theme's css (runo, reindeer, ...).
#import "../reindeer/styles.css";
I have recently put up a sample Vaadin application using Maven which is accessible at this address. It is aimed to work on GAE, but you can check it out from SVN and have a look at what I have done:
svn co http://code.google.com/p/tinywebgears-samples/source/browse/trunk/simplegae/ simplegae
You will probably put your styles.css file in the src/main/webapp/VAADIN/themes/[yourtheme]/ folder and configure Maven to copy everything in src/main/webapp into your WEB-INF. This way your .css file will end up in WEB-INF/VAADIN/themes/[yourtheme]/.
Just a little change :
put your folder in src/main/resources/VAADIN/themes/ instead of src/main/webapp/VAADIN/themes/
I hope it will work for you as it worked for us
Regards Éric
edit : Here an useful link : Deploying a Maven web project on Jetty
Related
I have created the angular project in VS Code using the following command.
ng new my-app --style=scss
by following this github link
Now every style sheet that is being created using angular-cli is with extension of .scss instead of .css
Now there is a requirement to check that how Sass is being converted to css because I am new to Sass. I am facing some issues in designing thus it would be nice for me to look at css file.
I have searched in those folder where scss file exists but there I couldn't find css file. Please help
Update
Look at this picture, when I created the component using cli, it created .scss instead of css so I need to look for css file.
I've been able to find a way to view my compiled .scss files as a .css file.
Before I only saw the raw .scss files when inspecting from Chrome.
The trick was setting some flags in the angular.json file so it will tell webpack (what angular-cli uses to build the app) that I want the .scss files served as .css along with a sourcemap of the file:
./angular.json
{
...
"projects": {
"my-prject": { <-- or whatever your project is named
"architect": {
"configurations": {
"production": { // <-- production is default, you might be working w/ custom configurations [development, test, w/e]
...
"sourceMap": true, <-- will serve source maps w/ the file so you can view it in the browser easily
"extractCss": true, <-- actually serve the .css files and not the .scss files
...
}
}
}
}
}
}
Once that is updated, restart the dev server or rebuild your application
then you can go into chrome dev tools and look at find the styles.css file (or whatever you have the file name set to) and view it:
If you are working on local then:
local {
"sourceMap": true,
...
}
Sass in Angular 2 are always converted into Css in run time when you compile and build the project. However if you are using any other environment like Gulp tasks and watches, you can run 'sass --watch input.scss output.css'
As folks have already mentioned, the css is built at runtime. You can still set the result using inspect in chrome or firefox.
It's definitely a requirement to check the generated CSS when you find something wrong and Chrome Inspector can't help! So this is definitely a good question, which is why I'm here.
To summarize, #y_vyshnevska is right that "you may find your css inlined in script tags at the end of head", and he also gave an in-depth link: https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975 on the topic. I put it here in case you neglect it.
It looks not possible to view compiled css files at a runtime.
However, you can do the following trick: angular applies components' styles using <style> attribute. Find the one you need in elements inspector (you can search there using ctrl (or cmd) + f.
After you've found the stylesheet you need, you'll see it's truncated. To see the entire content, click on the style element and select "Store as global variable". After that in console run
copy(Object.values(temp1.sheet.cssRules).map(r => r.cssText).join('\n'))
This will copy all css to your buffer
I just inherited a CSS/SCSS project that doesn't use any CSS reset or normalize.
My project structure is something like this:
- config/
- utils/
- blog/
- style.scss (imports everything)
Basically I want to add a reset.scss files somewhere and create new pages by using that reset.
My problem is how can I add a reset to my CSS without interfering with the older .scss files?
Thanks!
You can do it only by IF statement somewhere in <head> and <link> on server side or create two different index.html (for example) files with own <link>s to stylesheets. Solve this problem only by CSS is impossible, you can't use global styles like normalize.scss for local needs.
I'm on Debian Jessie, 32bit, editing with gEdit and trying to get BootStrap to work without an internet connexion. I went to getbootstrap.com/getting-started, downloaded the files from the left-most button, extracted the various folders (js, css, fonts) into a folder named bootstrap.
I also created custom.css in the css folder and threw in a line
#qlksjhdf { color:#FF0000;}
Within this folder, I created an HTML file. Then I copied some code from a working example. When I use the CDN links, all works fine, as expected, but when I replace the CDN with local linking such as "css/bootstrap.css", the styling disappears, although the H1 styling in "css/custom.css" works.
Do I need to "install" something or wouldn't just downloading and linking the files suffice ? And yes, I've also downloaded jQuery and linked it locally...
Are you sure that you're using the right file path for the Bootstrap resources. If you put everything in a folder called bootstrap, you should be able to link the css file like this from your index.html:
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
Double check the path you are using to reference the bootstrap files. That is most likely the issue. If everything looks fine, can you add some code to the example or create a JS fiddle with the code you are working with?
I'm creating a site based on AdminLTE (v 2.3.0), a open source control panel template that uses bootstrap (v 3.3.5).
When I load my page in Google Chrome (v 48.0.2564.97 m) and use the developer tool (F12) in sources I notice that my content folder has a subfolder called less.
It is like:
Content/
├──less/
| ├──...
| ├──table.less
| └──...
The "..." means other files.
But here's the deal: I don't have any those files in my server and this table.less is generating problem to me.
So I did a test. One by one I remove the js and css files that I had referenced.
I discovered that when I add the bootstrap.css file this folder with all files appears.
Now my questions are:
Why this is happened?
How can I avoid it?
And if I can't how can I make my css file has priority above the less files?
PS:
I asked the 3rd question because normally the last css file to be add has priority when some property is overloaded. But in my case my last file is site.css, this file has definitions for tables, but when I open the page the properties of table.less has priority above my file and this is causing me problems.
You probably have a file called bootstrap.min.css.map or bootstrap.css.map next to the bootstrap css file. It's function is to reference the original source files and line numbers in your browser's developer tool section for each directive coming from your css file. If it were not there, you would always see bootstrap.css line 1 next to each css directive, which would not be very informative, this way you see the actual source structure that generated the css. It's all virtual, the less files are not there.
i'm stuck for hours now to figure out how the heck i can get my Stylesheets into my Webpart. Now i've found several resources claiming on how it works
http://www.c-sharpcorner.com/uploadfile/manni_prince/embedding-css-file-in-custom-webpart-in-sharepoint/
Using custom css within a Sharepoint webpart as a Embedded Resource is not working, why?
some others, too, basically doing the same
Now the first one works. But it shouldn't really be needed to manually place a single CSS File in a specific folder on each System (Dev, Test, Live). There has to be a way to embedd the Webpart into the deployment file for the project.
Searching for this i came up with the second link i've posted. This pretty much LOOKS like something i wanna do, but i simply can not get it to work.
My Structure is the following:
./SOLUTION
> Properties
> References
> ...
> Webpart1
> ...
> Webpart2
> Webpart2.css
> ...
> Styles (A Folder of VS Style 'Module')
> wp2.css
Would someone be so kind to tell me how i can include the wp2.css into the sharepoint page only if the webpart is visible on the page. Without the need of me manually needing to place the css file as pointed out in link 1.
Thanks a lot in advance!
Add the Layouts mapped folder to the solution (How to: Add and Remove Mapped Folders).
Create appropriate folder structure inside (e.g. /1033/styles) and copy the CSS file there.
Build the WSP package - the CSS file will be placed inside and copied to the [14 hive]\TEMPLATE\LAYOUTS\1033\styles folder once the package is deployed.