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} />
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 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 am creating a colour swatch selection for my products in Shopify.
The swatch only shows if the variant name is equal to 'Colour'.
This is fine and working as should.
I am just wondering if there is a better way of assigning the swatch colour rather than manually typing in the hex codes for each colour name.
At the moment I have the following code in my product-template.liquid file.
<label for="ProductSelect-option-{{ option.name }}-{{ value | escape }}" id="swatch-{{ value }}"{% unless variant_label_state %} class="disabled"{% endunless %}/>
So if the colour value is set to Red then the output of the id would be swatch-Red. Now my question is, in CSS the only way I thought of currently is manually typing in:
#swatch-Red { background-color: red; }
but I would have to do this for ALOT of colours. Can anyone think of a more efficient way of doing this?
The other thing to keep in mind aswell is I have colours called 'Gunmetal' and 'Pewter'. These are dark and light grey's and obviously those colours are not recognised within CSS.
Any suggestions are appreciated!
There a few options here.
1) The bad one that many premium themes use
Use images for the colors that are equal to the name of the variant. So for example red and you will have an image called red.jpg in your asset folder.
I don't like this solution very much since you require the client to upload an image for each color and you fill your asset folder with a lot of images.
Pros:
you can add multiply colors
Cons:
you require the admin to enter the code editor to upload an image
you must create an image for each color
you clutter your asset folder with images
admin must call the images in a specific way
2) Not a great solution, but better than 1)
Create a navigation that where you can set the name of the color as the link title and the hex value as the link url.
This way with a little liquid you will be able to set the color to the swatch.
Pros:
you can add multiply colors
you keep your asset folder clean
you don't create new images for each color
the admin doesn't need to modify the theme editor
Cons:
you required the admin to enter the hex value by hand
3) Best approach
Create a section with blocks.
Each block will have a color field and text field. The text field will be the placeholder for the color name.
So when you loop your variants you take the color field value and apply it to the swatch.
Pros:
nice and dynamic way to create additional colors
nice way to choose a specific color
you don't create new images
you don't clutter your asset folder
you don't require the admin to enter the editor
Cons:
when there are too many colors it's hard to find the correct one
I've a problem with the javafx html editor. I customised the shown elements and now i need to change the font family & size drop down list.
I got it working, that I can insert my custom font sizes, BUT then nothing happens after choosing between sizes. So I think there is probably any change listener working not with my inserted values?
Status Update 11.08.16:
The actual case is, that I added the HTMLEditor, HTMLEditorBehavior and HTMLEditorSkin java files to my project. I recognized then, that the editor
is reading in 7 fixed sizes from a property file and updates the webkit.WebPage with those values if the dropdown changes its value.
The problem: This values are html values from 1 to 7. The generated html tag is which only takes values from 1 to 7. For my application I need to have values like 16pt -> so i'm looking for any way to access the part where the html tag is added and instead of I want to use tags.
Any ideas ? If it helps you, I can upload a short test-project, where I added the htmleditor files for debugging - just let me know pls.
I'm trying to put these pictures in a single row using semantic view in drupal7. I just created this view named try and put 2 pictures in it.
After that, I'm editing this view->format-format->setting->row (this is asking for class attribute, not mandatory) and I don't know what to write in this class attribute.
How do I put these pictures in a single row?
Make custom template for that view. Open "Advanced settings" on right side of view editing page and at bottom find "Theming information". There you can see template file suggestions. There if you can see the code of default templates (and copy it to clip board) but you can also see naming suggestions for overriding default templates. So copy code from default template, make from it file with some suggested name, save file in your theme...and clear the cache.
Then change the file as you wish, depending on your needs....
The CSS 'display:inline-block' is a good way to make rows. CSS Flexbox is more difficult to understand, but very powerful. Occasionally, the CSS 'float:left' will do what you need, but it has a tendency to 'log jamb' on differing element heights.
I have used Semantic Views to create continuous, wrap-around content from multiple View rows. I removed the View row element by deleting the default 'div' in the 'Format settings'. That way only a continuous stream of fields appears within the '.view-content' tag.
A custom template is also good.