I am trying to use some custom jpgs for the next and prev button icons. The docs say to use icon strings but I am not familiar with these, a google search left me just as baffled. Can anyone explain to me what I need to do to get my jpgs to display on the next and prev buttons of the calendar?
Thanks!
As you can see in the doc,
ButtonIcons are based on classes from fullCalendar.css.
These icon string are transformed into classNames which are styled by
FullCalendar's CSS.
So if you want to add your own jpgs, you should create first the .css class, and then modify the buttonIcons object:
{
prev: 'your-prev-class',
next: 'your-next-class'
}
Related
I have couple .png files and I need to create icons for the button.
Initially it will be a first image and when button is clicked and action is successful, the image shall be replaced with the second one.
What I can see, you can create only predetermined Vaadin icons. Documentation does not even provide images of these icons, only names, therefore I can't even decide if any of those icon will be suitable for me.
If anyone knows how to do it, I will appreciate the tip.
The setIcon method of the Button component actually accepts any component as a parameter. Thus if you want to use png-file as a icon, you can just create Image component using png as a resource for it.
Image image = new Image(png);
Button button = new Button("Button");
button.setIcon(image);
The font-icons from Vaadin Icons collection are naturally more light weight, and you can find visual map of the icons here if you use them instead: https://vaadin.com/docs/latest/components/icons
I am working on a project for my Bootcamp. Design isn't the focus, but I want to go for the whole kaboodle: have both a working product and a good-looking front end to display it. I am using a .SVG as the displayed background set via CSS, and thus far I've succeeded in changing the displayed SVG based on CSS media queries. However, I'm interested in the possibility of having it change based on a value held in state/props.
The point of the project is an image viewer and user vote/ranking system. I was thinking to have backgrounds change based on the photo's category, which will be a value held in the state inside of the array holding the photo/user data. Let's say the category is "Dog" and I want to display a corresponding background. But when the user changes to another photo and its category is "Cat", I would like to have a different background displayed. I am working with animated SVGs for the backgrounds.
What's the best way for me to do this? I figure I can add the code into my functions that are being used to change the displayed photos.
Thank you!
You can apply styles based on state value directly.
Also you can youse ReactSvg package. It allows you to access nodes inside svg.
<ReactSVG beforeInjection={(svg) => {
const myStyleClass = this.state.myStyle == 'x' ? 'y' : 'z';
svg.classList.add('');
}} src={myImportedImage} />
I need to add a particular wallpaper in the background page of my app to make the app look more colorful and beautiful. Is there any way?
The problem is that once you add an image to a page then it does not allow you to place another widget over it or cover it. It always aligns it horizontally or vertically.
This is pretty much basic css. I'd recommend you to look over this to learn more. So, in appmaker, if you want to apply the background image to a page do this:
The CSS
1.) First, select the root widget of the page you are interested.
2.) Now, that you have the page selected, let's move to the style editor. Once there, on the Page Style section just type a "."(period, dot) and wait for the suggestions to appear. The first suggestion is what you need, so just press enter or select it with your cursor.
3.) Now that you have selected the element with a css selector, you can apply styling. For the background, you need to do this:
.app-myTestingPage-myPage {
background: url("url-to-picture");
}
In the above example, url-to-picture represents that, a url to a an image, preferably if it is served over https.
The URL
I know two ways in which you can get the background image url. The first one is to use any image url you find on the internet or a url hosted in your own server or cdn. The second way is to upload the image to appmaker resources and use that url. If you choose the latter, then do the following:
1.) Go to the app settings.
2.) Click on Resources
3.) Drop your image file in the respected area or click the button to browse
Once the resource finishes uploading, you can click the copy icon to copy the url to the resource and you can use that in your page css as the background url.
You should be able to accomplish this using CSS in your style editor. Either in your 'Page style' or 'Global style' depending on if you only want the background image to a specific page or be available throughout your application. You will want to declare a custom class or reference the specific elements that you want to render the background image in.
For a specific element:
.app-YourPage1-YourPanel, .app-YourPage2-YourPanel {
background-image: url(YourImageURL);
}
For a global style, create a class and for each element you want the background image applied you would add that class to the 'Styles' section of that element(widget):
.YourPanelClass {
background-image: url(YourImageURL);
}
Either way I highly suggest you do a search on 'html background image' so you can read up on additional options such as repeating the image to fill space and such.
I'm looking to create a content type which includes a field for an image file - simple enough. However, I want this image file to be displayed as a background-image. Do I have to create a custom node.tpl and include the image source in an inline style="background: url(sites/all/themes/theme/images/image.png);", or is there a more elegant way to do this, possibly including writing to a stylesheet from the field using JavaScript?
You can use drupal_add_css in a hook_node_view function, node preprocess script, or node template to add a style directly:
$css = "#bg-img {
background: url(/sites/all/themes/theme/images/image.png) left top no-repeat;
};"
drupal_add_css($css, 'inline');
Or, you can use a drupal setting and then reference it in a jquery script; look up drupal_add_js usage & examples with the 'setting' option:
drupal_add_js(array("moduleName" => array('bgImg' => $absolute_url)), 'setting');
Reference in jQuery using Drupal.settings.moduleName['bgImg']
IMO adjusting the node.tpl.php as you describe is perfectly sensible. Using drupal_add_css will let you set a background image on an element outside the node, eg the entire page. I've used jquery when I've needed more advanced positioning/resizing options.
Instead of reading documentations and digging into codes, just use Field Formatter CSS module (https://drupal.org/project/field_formatter_class) and get it done in minutes. It's a gem that you will find yourself using it over and over. It lets you add css classes and other options to each field in the "Manage display" of your custom content type. As for this particular case of serving a user-uploaded image as background, here is a screen capture. Add a class into the Field Formatter Class field, and then you should be able to reposition and resize further with css and jquery.
I have a page with many links. and Have a button to print, clicking on that will be print.css included. In print preview version of the page remain all the links intact.
Is there a way to disable all the link in print preview? i.e. they are no more clickable.
I know this isn't disabling the links, but this is along the lines of print preview and links. Here's an option that you can add to your css so links will print much nicer: http://davidwalsh.name/optimize-your-links-for-print-using-css-show-url
I wouldn't disable the links as much as style them the same way as regular text, since the intent of clicking on Print Preview is to prepare to print the page, where the links won't work anyway.
If you're still set on disabling links, you can try this query code. Assume that your body has a class called print on it:
$("body.print a").each(function(a) { $(a).html(a.innertext); });
The above is pseduocode and was off the top of my head at 8:30 AM. I would just save yourself the trouble and make links look like surrounding text.