+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Changing Background Color for Poll Results

Changing Background Color for Poll Results

8 posts, 0 answered
  1. Armysniper
    Armysniper avatar
    126 posts
    Registered:
    03 Mar 2005
    04 Sep 2009
    Link to this post
    Is there a way to change the background color for the Poll Results (not PollBox)? Ideally we would like to change the results polls to display our background color and not the whiteish color it does when there are no votes for a specific answer.
  2. Armysniper
    Armysniper avatar
    126 posts
    Registered:
    03 Mar 2005
    08 Sep 2009
    Link to this post
    Anyone? ;)
  3. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    13 Sep 2009
    Link to this post
    Hello Armysniper,

    The background color you are referring is actually an image generated from dynamically created RadChart control under ResultsBox class. The image is under RadChart embedded resource, so the only way you could change it is overriding RadChart css class.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  4. Diogo Pinheiro
    Diogo Pinheiro avatar
    8 posts
    Registered:
    29 Mar 2010
    13 Apr 2010
    Link to this post
    Can you explain further about overriding RadChart css class?
    Thanks
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    13 Apr 2010
    Link to this post
    Hi Diogo Pinheiro,

    You could try the following

    1. Open the "ResultsBoxNoLegend.ascx" template.
    2. Wrap the "asp:Repeater" in "div" tags so it will be easy to find:

    <div id="Results">
                <asp:Repeater runat="server" ID="answersList" EnableViewState="true">
                    <ItemTemplate>
                        <li>
                            <asp:Literal ID="answerText" runat="server" Text='<%# Eval("Text") %>'></asp:Literal>
                            /
                            <asp:Literal runat="server" ID="percentage" />
                            <asp:Literal runat="server" ID="perentItem" Text="%"></asp:Literal>
                            <asp:Panel ID="chartPanel" runat="server"></asp:Panel>
                        </li>
                    </ItemTemplate>
                </asp:Repeater>
                </div>

    3. At the bottom of the control add the following script block:

    <script type="text/javascript">  
        var divObj = document.getElementById('Results');
        divObj.setAttribute('style', 'background-image:url("PATH TO YOUR IMAGE");"width="449px"height="21px"');   
        for (i = 0; i < divObj.childNodes.length; i++) {
            if (divObj.childNodes[i].tagName == "LI") {
                var liItem = divObj.childNodes[i];
                var itemInnerDiv = liItem.childNodes[1].childNodes[1];
                var image;
                if (itemInnerDiv.childNodes[1].tagName == "IMG") {
                    image = itemInnerDiv.childNodes[1];
                }
                else {
                    image = itemInnerDiv.childNodes[2];
                }
                image.setAttribute('style', 'border-width: 3px;');
                image.setAttribute('height', '25');
                image.setAttribute('width', '10');
            }
        }
    </script>


    To change the style of the bars - edit the "style" value for  "image.setAttribute('style', 'border-width: 3px;');"

    Another option is creating a custom control that derives from PollBox and generating a custom ResultsBox.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Diogo Pinheiro
    Diogo Pinheiro avatar
    8 posts
    Registered:
    29 Mar 2010
    13 Apr 2010
    Link to this post
    What do you mean by background-image:url("PATH TO YOUR IMAGE");wich image are you talking about ? The background color img ? Dont know the path ..

    divObj.setAttribute(
    'style', 'background-image:url("PATH TO YOUR IMAGE");"width="449px"height="21px"');   
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    13 Apr 2010
    Link to this post
    Hi Diogo Pinheiro,

    The background color you are referring is actually an image generated from dynamically created RadChart control under ResultsBox class. As you can see you have to replace the image, otherwise override the control as suggested. I also suggest that you should take a look at RadChart API to gather more information how the control works - it generates images

    Regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. Diogo Pinheiro
    Diogo Pinheiro avatar
    8 posts
    Registered:
    29 Mar 2010
    13 Apr 2010
    Link to this post
    I understand it generates an image, but i dind't understand i needed to have another image to replace the generated one.
Register for webinar
8 posts, 0 answered