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.
Related
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.
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'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.
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.