Jump to content

Repeater and Colorpicker: different colour for each repeater


Alex
 Share

Recommended Posts

I have a repeater which will contain an image and text, I want to apply a custom colour to an element in each repeater using the color picker. I'm not sure the best way to specify an individual css name for each repeater, can it be automated in some way?

 In my code below i'm using the colour picker and some inline css, but in this example each repeater item would have the same colour.

I want to make each one different.

<?php
		foreach($page->repeater as $p) {
		echo "<style>.repeatColor {background-color: #{$p->colour_picker};}</style>";
		echo "<div class='repeatColor'></div>";	
		}  
		?>
Link to comment
Share on other sites

Hi alex,

<style> tags are normally inside the <head>, as far as I know.

You can set the chosen color inline:

foreach($page->repeater as $p) {
  echo "<div style='background-color: #{$p->colour_picker};'></div>";	
} 
  • Like 2
Link to comment
Share on other sites

of course... not sure what i was thinking there!

I was going to work out how to move the <style> into a separate style sheet but its not necessary.

cheers

Link to comment
Share on other sites

  • 5 months later...

In a related topic, but not quite the same thing. I installed the color picker used it in in a tab and it is not working. When I checked the source I get a 404 not found on the color picker CSS file. it is installed in /site/modules/module_name/. I actually installed it with the module manager.  Installed without a problem and the files are seem to be there.

I think the issue is the default .htaccess file from process wire is not letting the file be served up because of a mod rewrite. The CSS 404 has a my site header so I know processwire is in control of that url when it should not be...right?

<link type='text/css' href='/site/modules/FieldtypeColorPicker/colorpicker/css/colorpicker.css?v=107' rel='stylesheet' />

...

<script type='text/javascript' src='/site/modules/FieldtypeColorPicker/InputfieldColorPicker.js?v=107'></script>

Both throw 404 errors when I try to visit URL in browser, even though files do exist (as far as I can tell)

I read the htaccess file several times, but i'm not entirely sure where I put the exception so proccess wire does not try  take control of modules or color picker url.  

Proccesseswire 2.2.9 

Any tips would be greatly appreciated. 

if it's better to post these things as a new topic, rather then finding the most similarly related topic let me know.

Link to comment
Share on other sites

The htaccess surely isn't the problem here. How is it only when you use it in a tab or also when used in normal content area? Strange, And do you have site installed in a subfolder from the root?

Link to comment
Share on other sites

Ok, I figured it out. it was a permission issue. I set my /site/modules folder to chmod 766 to work with the module manager. So I changed it to chmod 777 and it works great. Is an ok setting to have that as a setting for the site/modules folder working with "module manager"?

Link to comment
Share on other sites

OK, so I got the color picker to work perfectly as it should, but it broke all my tabs, weather it was in the first tab or not, it also broke some of my page selects. must be an conflict in the JS some where.  When I uninstall the field all my pages look normal again. I'll give the color picker another try when I upgrade to 2.3 maybe there is an issue there, or maybe my theme. Oh well, hex typing for now. 

Link to comment
Share on other sites

Ok, I figured it out. it was a permission issue. I set my /site/modules folder to chmod 766 to work with the module manager. So I changed it to chmod 777 and it works great. Is an ok setting to have that as a setting for the site/modules folder working with "module manager"? 

Whether it's okay or not largely depends on your hosting situation and whether it's completely isolated from other accounts or not. This would be a question for your web host. Chances are your web host hasn't heard of ProcessWire, so a quick way to get an answer to the question is to ask them what permissions they recommend for your /wp-content/uploads/ directory. :) 

OK, so I got the color picker to work perfectly as it should, but it broke all my tabs, weather it was in the first tab or not, it also broke some of my page selects. must be an conflict in the JS some where.  When I uninstall the field all my pages look normal again. I'll give the color picker another try when I upgrade to 2.3 maybe there is an issue there, or maybe my theme. Oh well, hex typing for now. 

While I don't know what the issue might be there, it does sound like you need to check your Javascript console. In Chrome this is in View > Developer > Javascript console. Look for error messages, as it sounds like there probably will be one there waiting for you. Paste it here. Also, another possibility is that the color picker module requires 2.3 or newer (?). I know that a few of my modules require at least 2.3.

Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...