Download & Extend

Alternative UIs/themes

Project:Feedback
Version:7.x-2.x-dev
Component:User interface
Category:feature request
Priority:normal
Assigned:rsvelko
Status:postponed

Issue Summary

Good day! I am willing to submit a patch that would add a second option for the floating collapsible feedback icon.

Against which branch should that go? 6.x-2.x.-dev ?

Marking it critical cause I would like a fast answer. And since it is not a bug thus I do not harm the module's reputation.

Comments

#1

Yes. You want to patch against dev. See http://drupal.org/patch/submit for more info on submitting patches.

#2

Title:Lets add a UI alternative - a floating nice Icon ala Get Satisfaction» Alternative UIs/themes
Priority:critical» normal

#3

rsvelko , have you worked on this at all?

#4

The attached patch does two things.
First it provides rounded corners via CSS, to all browsers that currently implement that option.
Second it provides some whitespace to make our designer happy. :-)

However, it currently applies to the main (only) theme.

Code moved here from #478802: Rounded Corners and Some Spacing as requested by sun

AttachmentSize
feedback.css_.patch 585 bytes

#5

Hi AntGiant

However, it currently applies to the main (only) theme.

Can you please clarify this statement? I ask because maybe I am misunderstanding. The patch shows feedback.css being changed. I inserted this patch as suggested and dont see a difference. Do you have a screenshot of what I should expect to see?

c

#6

Attached are two screenshots showing the difference. The original patch may have needed some slight tweaking. I have attached a tweaked version. Hope that helps.

P.S. Rounded corners don't work in IE (yet).

AttachmentSize
Original.PNG 5.17 KB
Modified.PNG 5.46 KB
feedback.css__0.patch 632 bytes

#7

thanks antgiant, we will explore this more

#8

Status:active» closed (won't fix)

I don't think this belongs as a patch, it's simply a site-specific theming approach.

#9

Status:closed (won't fix)» postponed

Let's leave this as postponed for now. Providing a clear infrastructure and code/API path for alternate UIs (including alternative behaviors) is one of the key challenges for Feedback module.

To state some kind of direction upfront, I'm envisioning an integration with Skinr.

#10

Following

#11

This is on hold right now waiting stability of skinr.

#12

Version:6.x-2.x-dev» 7.x-2.x-dev

#13

I used the feedback module - it is great. I was struggling with having the feedback button show up on the right (or left) as a button with vertical letters as is done by 3rd party feedback providers.

I managed to get it done just using css. I am posting the css I used here - hopefully it may help someone trying to do same thing:

Add the following css to your local.css of your theme.

#block-feedback-form {top:250px; right:40px; left:inherit;bottom:inherit;height:auto;}
#block-feedback-form.block .inner {margin:0px; padding:0px;}
#block-feedback-form .feedback-link {
        color:white;
        background:red;
        border:0px solid red;
        writing-mode:tb-rl;
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform: rotate(90deg);
        white-space:nowrap;
        display:block;
        font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
        font-size:20px;
        font-weight:normal;
        text-shadow: 0px 0px 1px #333;
        padding:5px;
        padding-right:15px;
        position:fixed;
        bottom:inherit;
        right: -50px;
}

#block-feedback-form form { padding:20px; max-width:none;}

If you want the tab on the left, change first line to have "left:40px; right:inherit" instead and also change the "right:-50px" to "left:-50px".

#14

Thanks __rajeev, exactly what I was looking for. It doesn't work in IE, unfortunately, so I added this in my ie_fixes.css file in addition to your CSS. The overrides are embarrassing, but anyway, if it helps somebody :)

#block-feedback-form {
background-position: 2px 50% !important;
position: fixed !important;
top: 45% !important;
display: block !important;
margin: -45px 0 0 0 !important;
padding: 0 !important;
z-index: 100001 !important;
background-position: 2px 50% !important;
background-repeat: no-repeat !important;
right: auto !important;
left: auto !important;
}
#block-feedback-form .feedback-link {
padding: 10px 10px 10px 15px;
}
#block-feedback-form h2 span {
background-color: black !important;
border: outset 2px black !important;
border-left: none !important;
width: 65px !important;
height: 110px !important;
}

Initial code stolen from the UserVoice feedback button code.

#15

Helped me heaps

nobody click here