Can anyone shed some clarity on how to use CSS3 #font-face styling in a Grails web application. How do I get the application to include the font in the war, and how do I reference it.
I'm fairly new to Grails, and I'm not sure where exactly to put the fonts so that they can be referenced in the CSS.
Thanks!
UPDATE
Seems that putting it in the web-app directory does not work. Example, let's say the font filename is myfont.ttf. I place it in the web-app directory and then in my css do:
#font-face {
font-family: myfont;
src: url('myfont.ttf');
}
As far as I know that is correct, but it does not seem to work when I launch it from STS.
You can put it into web-app dir, it's a place for all your static resources.
You can create directory like web-app/fonts and reference it as /fonts/<you font> (works only if you run your app in root context) or as ${resource(dir: 'fonts', file: '<your font>'}
If you're using a font embedding service like Google's free web fonts api (http://www.google.com/webfonts) then you don't need to put fonts in your app. You just grab the generated JS includes and the generated CSS, plonk it in and use it. Easy.
Related
I'm trying to implement microfrontend with Vaadin 14. I've managed to accomplish a working version thanks to the Vaadin official documentation and various examples on github, using WebComponentExporter. However I cannot find any information about using css in these exported webcomponents. I've tried putting #CssImport everywhere, with no success.
I'm pretty much in the same situation as Stuart in this unanswered Vaadin forum question: https://vaadin.com/forum/thread/18466808/cssimport-when-using-component-exporter
Since that forum is now read only, I'm hoping to find a solution here.
Try follow this tutorial https://vaadin.com/docs/v14/flow/integrations/embedding/tutorial-webcomponent-theming:
Add #Theme annotation on top of your exporter class:
#Theme(themeFolder = "my-theme")
public class MyComponentExporter extends WebComponentExporter<MyComponent> {
// ...
}
Add styles.css to your ${project.root}/frontend/themes/my-theme/ and put there your styles which will apply to your component shadow DOM (to target the document DOM, place your styles in document.css), like this:
:host {
// MyComponent's background color to blue
background-color: blue;
}
I tested it with V14 + Vaadin Portlet + Liferay 7.3 and it works in both production and dev modes. Vaadin Portlets are based on embedded components, so it should work also for regular servlet-based Vaadin applications.
Try to compile with the production profile. The microfrontends examples do not comment on it but if you are not with the production profile they do not work, at least in my case.
Check that the webpack.config.js file is not filtering the css files.
Check that the css files are in the correct frontend folder.
I am using CSS3Pie in my my website to allow rounded corners in older versions of IE. In my CSS class I need to add the behavior propery to my CSS class
#myclass
{
border-radius: 10px;
behavior: url(pie.htc)
}
It works great for any page that is on the root level of the web site. When I browse to any sub directory in my site that uses that class, it does not apply the rounded corners cause the pie.htc is in the root of the side. The behavior URL is relative to the HTML page, not the CSS stylesheet.
How can I build an URL for the behavior that makes it accessible to all levels in my web site?
Referencing it from an absolute path should work? http://www.domain.com/youknowwhat
Still strange it is relative to the HTML though, you'd think it'd be relative to the CSS file.
I've got a Grails 2.2.1 application that makes use of the Twitter-Bootstrap plugin, which supplies the basic CSS and javascript elements of Bootstrap to Grails applications, along with a tag lib and some other features.
The thing is, I want to use a custom CSS file that offers our company colors, and right now I can only do that by pulling in our own CSS from the app that overrides the elements in the plugin's own bootstrap.css file, meaning that the plugin loads its CSS file first and the app loads its own secondly. And these files are very big and heavy.
My users, especially those on mobile devices, don't need the burden of an extra 125k of CSS along with the extra processing that comes with doing each rule twice.
Short of building my own custom version of the plugin, is there anything I can do that will prevent the plugin's bootstrap.css file from getting into the web page with my own boostrap.css file?
The plugin uses resources to declare the twitter bootstrap files. Luckily resources have a option of overriding definitions of declared modules.
So in your ApplicationResources.groovy, add:
modules = {
overrides {
'bootstrap-css' {
resource id: 'bootstrap-css', url:'/css/mycustombootstrap.css'
}
}
}
I have created a custom theme using Jquerymobile.com themeroller.
A mobile website which i have created using default theme values like .js and .css folders.
Now i want to change that theme of my website to my new custom theme,created using themeroller.
How to include those files to my coding?
When you download the themerolloer that you create, there is a sample index.html file that uses the theme that is enclosed. Look at that to see what files need to be included in your page, but more importantly, look at that code to see what CSS classes are being used - no point in including them in your page if you aren't using using the Themeroller classes
You can see all the steps, and a full tutorial on the Getting Started page
I am developing a small rails app to serve fonts to other sites
say a request http://url/fonts/fontname will return woff,eot or ttf font based on the browser type.
This app is working fine in my localhost but not in other ip... I know the problem is something to do with Cross-Origin Resource Sharing restriction but don't know how to solve this....
I am using Mongrel...
You said you have access to the other sites' files.
Well then you just need to add Header set Access-Control-Allow-Origin * to your .htaccess file on the targeted websites.
source