• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
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
Everyone likes images, right?

Brogan

XenForo moderator
Staff member
#1
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...
 

Brogan

XenForo moderator
Staff member
#5
Thanks Shelley.

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

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

Shelley

Well-known member
#7
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.png
 

Attachments

Shelley

Well-known member
#10
Well, you know us woman we always like it bigger.
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.png
 

Attachments

Shelley

Well-known member
#12
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.
 

Brogan

XenForo moderator
Staff member
#19
Using @imagepath ensures it will use the directory set for each style.

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