Add an image to the left of poll titles, replacing the question mark

Add an image to the left of poll titles, replacing the question mark 1.0

No permission to download

Paul B

XenForo moderator
Staff member
Brogan submitted a new resource:

Add an image to the left of poll titles, replacing the question mark (version 1.0) - Everyone likes images, right?

Another simple template edit, replacing the standard question mark to the left of poll titles with an image.

Before:
View attachment 26104

After:
View attachment 26103

Create a /images directory in your style directory; e.g. community/styles/cliptheapex/images

Upload a 40px x 40px image in whichever format you choose.

Attached are a few images.


Add this to EXTRA.css:
Code:
.pollBlock .questionMark {
background: url('@imagePath/images/poll.png') no-repeat !important;...

Read more about this resource...
 
Looks great at my forum,
smile.png
 
Thanks Shelley.

I think the icon could do with some work though ;)

I reached the limit of my design skills with it :D
 
Thanks Shelley.

I think the icon could do with some work though ;)

I reached the limit of my design skills with it :D

Sorry I took so long Paul to get to this I've only just got to this and (not sure the design is fitting) but I'll post it anyway.Preview and poll icon below (feel free to insert it into the first post pending you think it's even worth using.




poll_preview.webp
 

Attachments

  • poll.webp
    poll.webp
    1.1 KB · Views: 8
  • poll_a.webp
    poll_a.webp
    840 bytes · Views: 7
  • poll_b.webp
    poll_b.webp
    1.1 KB · Views: 8
  • poll_c.webp
    poll_c.webp
    1.1 KB · Views: 7
  • poll_d.webp
    poll_d.webp
    1.1 KB · Views: 6
Well, you know us woman we always like it bigger.
tongue.png
Anyway, the only way I could get a larger icon displaying without 1. being cut off 2. overlapping the poll options was to insert the following code in your EXTRA.css template if anyone wants this design of icon.

Code:
.pollBlock .questionMark {
background: url('@imagePath/xenforo/widgets/poll.png') no-repeat !important;
border-radius: 0 !important;
font-size: 0 !important;
width: 65px !important;
height: 61px !important;
}

.pollBlock .pollContent {
    margin: 0 auto !important;
    padding-left: 70px !important;
    position: relative !important;
    width: 580px !important;
}

Preview: >> poll_preview_altgraph.webp
 

Attachments

  • poll.webp
    poll.webp
    1.4 KB · Views: 9
Wow that's a really nice touch, thank-you to both of you :).

There's a few more changes I've made along with alternative polls I want to post (if it's okay with Brogan) or I can send him the code and archives this week which entails a little more code I think members would benefit from (some screenshots in this post and throughout that thread). I just need to gather up the icons (as each sizes and colour changes requires it's ow unique css if people are interest in alternatives.
 
Using @imagepath ensures it will use the directory set for each style.

Does your style directory have /community/stuff/images folders?
 
Top Bottom