What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Star Style - Ears

    Asked by markashton on February 09, 2011 at 08:06 AM

    Hi,

    Exceptionally important this ;)

    I would like a star style of ears (the things on the side of your head). They would be good for the question:

    How well did we listen to your needs?

    I expect it to be implemented in 2 hours at the most. Otherwise a hitman will be despatched.

    Actually is it possible to change the image via your CSS

    Regards Mark

  • Profile Image

    Answered by EMAP2 on February 09, 2011 at 09:02 AM

    Actually is it possible to change the image via your CSS

    -Yes :)

  • Profile Image

    Answered by EMAP2 on February 09, 2011 at 09:26 AM

    Actaully.. it looks like each star is hardcoded and not set as class..

     

    <div style="margin: 0.5px; height: 16px; width: 16px; float: left; background-image: url(http://www.jotform.com/images/stars.png); background-position: 0px 0px;" class=""></div>

     

    So if its not in a class i cant see how else you can override the image : http://www.jotform.com/images/stars.png

  • Profile Image

    Answered by markashton on February 17, 2011 at 06:37 AM

    Can you advise me on whether you will expand your star styles as per the question left here unanswered? I'd be grateful to know.

  • Profile Image

    Answered by serkan on February 17, 2011 at 08:11 AM

     

    If you are using full source code changing the star images is very easy.

    When you look at the form source you'll see the javascript code which initiates the star rating tool:

    $('input_3').rating({
        stars: '5',
        inputClassName: 'form-textbox',
        imagePath: 'http://www.jotform.com/images/bulps.png',
        cleanFirst: true,
        value: ''
    });

    You can change the imagePath option and star rating will use that. You can find an ear icon on the internet and convert it to a stripe image. Take other images as a referance.

     

    Just a suggestion :)

  • Profile Image

    Answered by markashton on March 01, 2011 at 08:48 AM

    Hi

    Would you be kind enough to advise me on what CSS inject code would be used. I've got the new image working but the stars are still there and it looks daft.

    Code used in inject CSS:

    #input_30 {

    background-image: url(http://www.workflows.co.uk/wf-content/images/cupcakes.png);

    }

    Are there multiple images?

     

    Regards Mark

  • Profile Image

    Answered by serkan on March 01, 2011 at 09:05 AM

    #input_30 div {
        background-image: url('http://www.workflows.co.uk/wf-content/images/cupcakes.png') !important;
    }

    Try this. It should work.

  • Profile Image

    Answered by markashton on March 01, 2011 at 09:18 AM

    It did - and your my favourite person of the day :)

     

    One thing - the "cancel your rating" cross that sits at the end of the strip has a cupcake over the top of it. Know why? 

  • Profile Image

    Answered by DanielGriffin on March 02, 2011 at 09:10 AM

    Hi Mark,

    The final Div in your rating scale (the one that includes the X) is inside the input_30 Div, so when the user clicks a cupcake the background of that final Div is also updated.  Try putting the final div outside the input_30 Div.

    Thanks,

    Daniel

  • Profile Image

    Answered by markashton on March 02, 2011 at 09:28 AM

    Hi Daniel,

    I didn't amend any divs so why would the behaviour change?

    I am only changing things via the inject CSS method.

    Is it possible to rectify this here?

    I'd be most grateful for any help

    Thanks, Mark

  • Profile Image

    Answered by DanielGriffin on March 02, 2011 at 09:47 AM

    In that case it's due to the CSS you've injected.  ie The injected CSS is telling the page to set a cupcake background on everything inside input_30, so the div inside that (with the X) is inheriting that rule.  You could try to explicitly set a blank background for that internal div.  The best way to do that is to just set it to a blank image.

    Thanks,

    Daniel

     

  • Profile Image

    Answered by serkan on March 02, 2011 at 10:06 AM

    #input_30 div:last-child

    Should do the trick bu apparently it's not supported by many browsers what you can do is to get last element with :nth-child pseudo class.

    Such as:

    #input_30 div:nth-child(9){
          background:none !important;
    }

    If you have 10 stars N should be 9 because N starts from zero. Please try this and let me know.


  • Profile Image

    Answered by markashton on March 02, 2011 at 11:05 AM

    You genius :)

    99% there. This is what worked - not 9 but 11:

    #input_30 div:nth-child(11){
          background:none !important;
    }