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
Related
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} />
Is there any sort of easy way or helper that would enable to functionality to set custom variable flags. For example I could set a color variable to "blue" in the editor and I could use handlebars to add the "blue" class an element in that post.
EDIT: I ended up having to use a different CMS. Ghost was made intentionally to be simple and my needs require more customization features.
This is something I have been trying to figure out, but (being new to ghost), I haven't found a clean way to do this. Unlike Wordpress, there is no field for this in the editor (I have checked the documentation, nothing similar), so you have to apply some custom solution. Here are two options:
If the styling you want to apply depends on a tag, e.g. if 'movie'-tagged posts need some special styling, you can just add CSS because the {{body_class}} helper adds all the tags to the <body> element as tag-classname, e.g. tag-movie.
If tags are not your option, you could use client side JavaScript, check some condition in the content and apply the styling. I use this to change color of an svg logo when it is placed on a hero image that happens to have the same color as the logo. This requires the hero image of the post to follow some url convention, like post-heroimg3663-blue.jpg. Then you can add some inline Javascript to the <head> to change the color of the logo. Not so good, but it should work.
UPDATE:
If the second option works for you, you could even consider creating a Handlebars custom helper and running any styling (via adding a class) on the server side.
I'd like to add to my course materials, some additional modules which will be marked as optional.
By optional, I mean that they have content (mostly static, e.g., readings) and are probably not going to be covered directly during the course lectures.
However, I'd like them still to appear below the main modules, but somehow separated and marked differently as, well, optional.
I guess I could index them last and also add "(Optiona)" text, but just wondering if there is a better solution for presenting them, e.g. a separating line, a tag like the "coming soon" option, etc.
Thanks
The simple approach is to list these modules last (by using a high value for morea_sort_order) and then add an Optional label (by using morea_labels). Here's an example:
If you want to get fancier, then you could edit the master/src/modules/index.md file to customize the way the modules page is rendered. If you go this way, you could put a dividing line between the required and optional modules, add some CSS to change the border color or background of the optional modules, or anything else you want to do.
I am building a site using Openlayers module in drupal 7. In my map page I have prepared my layers using views (OpenLayers Data Overlay) and added a field for the fill color of the polygons (it's a hex value). In my custom style for the layer I added the corresponding value (${field_color_style}) in the fill color text box but I cannot get it work.I keep getting the default black fill color.Is there any other way to achieve this? How can I debug such problem? Anyone else having implemented such fuctionality using drupal 7 and openlayers module?
Make sure the # symbol is included in your value, either by storing the hex value with the # prefix or by using #${field_color_style} in your style configuration
It happened to me and the problem is that, since OpenLayers beta 9, the rendering of the fields has changed, it's not using the raw value of the field, but the full row rendering. You must disable all the HTML element by selecting None in the Style setting fieldset of the field in Views or you might get a mix of HTML with the raw value of the field that than doesn't work in the map.
A web designer has created a design for our Drupal web site which requires a different color scheme for various sections of the site. Drupal does not support this design requirement by default.
Currently I am using JavaScript to change the color scheme based on the page title. After adding some content pages I now realize that this is a terrible way of doing things. I need some ideas for a better way of changing the color scheme depending upon the content.
Is there a way to apply a different theme to a page based on its node value? I could create a slight variation of my theme for each color scheme, although that makes theme maintenance more difficult.
I've also thought about using CCK to add a field to my page content type and then changing the color scheme based on that custom field. This would eliminate the need to add code to my JavaScript for every new page.
Or is there a module for changing color schemes per page?
You might want to take a look at the ThemeKey module, which allows you to determine which theme is used based on conditions like node type or path.
You could add some css in hook_preprocess_page function based on node or other criteria and add the css in the page template as embedded styles.
The idea will be the same as doing it in JavaScript, but you will have php, drupal etc available to do what you need. It should be a lot easier since you can test the node type, or a value you set on the node object.
The CSS module does node-specific CSS, so you could use that to adjust colors.
I would suggest implementing hook_preprocess_page in your theme, and applying a body class based on the node type (or types) being displayed. Or, potentially, put these classes in the node's preprocess for display. So, for instance, if you're viewing a 'project' node, put:
<body class="... node-type-project">...
Then the designer can target styles based on which classes the body has. This is fairly easy to automate, just do a "node-type-". strreplace("_", "-", $node->type) to change any future node type into a class, which you then feed into either the body or the node.