Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Joomla! comes built-in with a great poll functionality that's very easy to configure and put on your website. I am going to show you how to set up your own poll and then we are going to style this to make it look a little bit better. So let's go to the back-end of the Joomla! website and we are going to go into Components > Polls. When you are setting up a poll, there are actually two pieces to this. The first part is in the component. That is where you set up the poll itself. And the second part is in the module, which is where the poll will appear on the webpage.
So to create a new poll, you go into New and there is a very simple form to fill out. You simply type in for the Title, you have your poll question, How often do you eat chocolate? Then you can have up to 12 possible answers. I would recommend you stay away from no more then 5 or 6 and preferably, more like 3 or 4. Once a week, Once a month, Everyday, Even more often than that and that's all there is to it. Click the Save button.
Now that we have created our poll, we will need to publish it. All we have to do is click from the red x, click on it and it will turn into a green checkmark. This poll is now published for the website and available to you to put on your webpage. Now we are going to go to the module and determine where exactly this poll will appear on the website. Under Extensions, go to the Module Manager and you will see that we have a module set up for the poll. If you click on that, once again, all of the standard module items show up on the left side of this page including a title, whether you are showing the title, whether this module is published and the position that it's published in and what pages that poll will appear on.
On the right side of the page, are the items that are specific to the poll. There is a question of which poll would you like to display. Change it to 'how often do you eat chocolate?' and say Save. Now when we go back to the front-end of the website, instead of 'What is your favorite Bliss No.5 chocolate?' when you hit the Refresh button, you will be able to see 'How often do you eat chocolate?' The poll that we just created. I can vote in this poll simply by selecting one of the options and clicking Vote. This will take me to the Results page. Since the poll was just created, we have only had one person voting it, that would be me.
Note also on the Results page that you can switch to see the result of past polls, such as 'What is your favorite Bliss No.5 chocolate?' That's because that poll is still published. If you don't want that old poll to show up in this list, you will need to un- publish it in the Component. Now let's go back to the previous pages. So as you see here, this poll is not very well styled. It's very functional and it's easy to use but it isn't very pretty. I would like to set this poll off from the rest of the page. Give it a box, maybe with a different color background. I would also like to change some of the alignment so that the radio buttons will line up with things a little bit better than they do and the buttons on the bottom, I would like to make them chocolate brown to match the rest of my website.
Let's go into CSS and default.css and let's go ahead and add this to our style sheet. So we start off with a div.moduletablepoll. This is the surrounding box around the poll. And as I said, I wanted to give this a background color. a5bfc2, that's a nice color. It just sets things off just slightly from the rest of the webpage.
But as you see, the width goes all the way across that whole left column. So I would like the width to be a little bit narrower and then I would like to float this more in the center of the column, so that things line up a little bit more nicely. So let's give it a width of 210px and then let's give it a little bit of a margin to match everything else in this column. The same margin or padding settings we have been using for our other items in the left hand column.
Once again, that gives us a little bit of space in the top to separate our poll from the secondary navigation and it lines it nicely with the edge of the secondary navigation. Keeping these lines on your website really add a professional polish to the overall look. Now as you will see that the text in the poll itself is running up right against that colored box, so I will need to give this a little bit of padding as well, that's better. Let's change the way that that big title of poll looks. That's in an h3 as many of our module titles are. So once again, let's take away the margin on this.
That will tighten up the spacing a little bit between the word Poll and the actual question. But now the word Poll and the actual question don't quite line up. So I am going to add back in a little bit of padding on the left, that will make sure that they do line up a little bit better. I am going to make this white. I think I am also going to make this all uppercase and I am going to take off the bold that comes by default with an h3.
I am also going to change the font- family to a slightly narrower font called Tahoma. The reason we have several font names here is just in case people don't have Tahoma necessarily installed on their computers. It's fairly common on a PC but it's less common an a Mac. So we are providing some alternatives. Arial is on most computers at this point in time while Geneva is specific to Macintoshes and it's much easier to read than the more common Helvetica alternative.
Finally, let's change the size, just to make it a little bit smaller because we actually want our poll question to be slightly larger than the title. Now the word Poll is looking just a little bit cramped, so I am going to put in a little bit of spacing between the letters. Once again, we want to do this in em's so that if people increase or decrease the overall size of the text on this web page, the letters won't overlap each other. So this is looking much better already. Now let's go on to some of the other components that make up this poll.
Unfortunately, the code is pretty sick, where polls are concerned, they have a lot of tables in them. I will show you in the Outline view. Under Outline, I am going to outline just the tables first. There is a larger outside table that encompassess the whole poll including the question and a smaller nested table, that is where the radio buttons and the questions. Again, this is somewhat of a bunch legacy code in Joomla! and there are many better ways of playing this out. But this is what we have to work with for the moment.
What we would like to do now is take a look at the html so that we can decide how we are going to add a little bit more padding overall. Right now, things look very squashed together, all the questions sort of run into each other and I would like a little bit more spacing between those radio buttons, a little bit more space between the bottom buttons and the set of questions and a little bit more space between the question and the radio buttons. Plus, I would also like to make those buttons chocolate brown. So let's take a look at the HTML and we are going to find the poll here on the webpage, so you can see how thick the code is. So it starts here, div class of moduletablepoll. Here is the h3 for Poll, which we have already styled, then we have a form tag. That's how the results of this poll are going to get submitted to the server. It's because of the form tag.
We then have a table that has some attributes already assigned to it such as some cellpadding and a width, with an alignment of center with the class of pollpoll. We have an inline style for 'How often do you eat chocolate?' These things get a little bit hard to override in a style sheet and then in here is our second table, the pollstableborderpoll, that has all of our radio buttons and the questions. What we need to do is write a style like this, left div.moduletablepoll table.pollstableborderpoll and we are going to give that just a little bit of spacing and we are going to make it a 100% wide. That stretches out that nested table where the radio buttons are and pushes it to the full width so that it's not indented anymore.
Next, we are going to work on the individual cells within that particular table. left div.moduletablepoll table. pollstableborderpoll and of course, you do want to watch your spelling on all these really long class names. Then we are going to add a little bit of padding, just to the top and the bottom, not to the left and the right. I am also going to make sure that my text is aligned left.
While it looks great here in Firefox, when I looked at this site earlier in Internet Explorer 6, I noticed that some of the text was aligned in the center and that's why we have added that particular line, just for Internet Explorer 6. So now the alignment here is looking much better already. Finally, I want to add that chocolate color to those buttons on the bottom. So these have -- these of course are inputs from html with a class of button. I am going to make the text color to be white, whereas the background color is going to be that brown, 46311c, and then I have to get rid of those borders. There, that's much better.
Finally, there's just not enough space there between those last few questions and those buttons. So I am going to add one more style, div.moduletablepoll table.pollpoll td div. Within the table of the class of pollpoll, within those cells, there is a div that we can add a little bit of extra padding to and once again I am going to align the text left, again to get around an Internet Explorer problem. There, that's much better and now our buttons are aligned in the left ad well.
Now what we have to do is copy and paste this CSS, Ctrl+A to select all and Ctrl+C to copy or Command+A and Command+ C on the Macintosh and we are going to go back into the back-end of Joomla!, under Extensions > Template Manager, under inside, Edit, Edit CSS, default.css, Edit and once again Command+A or Ctrl+A, Command+V or Ctrl+V to paste and save.
Go back to the web page and let's refresh and remember that these red outlines will go away, those are just put in by the Firefox web developer toolbar. So when I hit Refresh, those will go away. There, that poll looks so much better. The edge of the poll is nicely aligned with the edge of the secondary navigation, which is aligned with the left edge of the logo, giving a very polished look. The edge of the buttons here for voting are aligned with the edge of the radio buttons and that's all, just slightly indented from the question. Again, a very polished look and the box sets it off nicely from the rest of the website.
You can try these same techniques yourself when styling your own polls on your website.
Get unlimited access to all courses for just $25/month.Become a member