Subscribe 5

Ticket #370 (open enhancement)

Big download button on home page

  • Created: 2011-03-22 17:52:22
  • Reported by: Franz
  • Assigned to: Studio384
  • Milestone: 2.3
  • Component: styling
  • Priority: highest

Paul once mentioned this and I fully agree.

We need some kind of big shiny (ok, that's exaggerated) download button that just makes people want to download (or something like that).

Since we only display one download link since the release of the v1.4 branch, that should be easily doable.

I envision something with a background in that green color that's currently the font. But then, I couldn't do this, either.

History

davidlougheed 2011-09-07 00:24:26

Also, you should do something wordpress.org-style where you sort of highlight the downloads tab at the top.

Button-wise, how about http://davidlougheed.com/fluxbutton.html ?

Franz 2011-09-13 01:36:56

That looks pretty good. If you can adapt it to our front-page markup, I am sold! smile

Insert Name Here 2012-01-15 21:44:55

how about this css for the button on the home page (note: it probably needs some improvements):

.site ul li.current-down {
    margin-top: 10px;
}
.site ul li.current-down a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: -moz-linear-gradient(center top , #3F7C32 0%, #2A6629 100%);
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    color: #FFFFFF !important;
    font-family: helvetica,arial,sans-serif !important;
    font-size: 1.8em;
    font-weight: 900 !important;
    line-height: 1;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    text-shadow: 0 0 2px #111111;
    -moz-transition: all 1sec;
}
.site ul li.current-down a:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: -moz-linear-gradient(center top , #2A6629 0%, #3F7C32 100%);
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    box-shadow: 0 0 5px #333333 inset;
}
Comment edited 1 times (Diff)

davidlougheed 2012-01-16 00:46:16

you only include -moz-linear you also need -webkit- and -o- and without any -x-

Insert Name Here 2012-01-17 01:45:51

updated:

.site ul li.current-down {
    margin-top: 10px;
}
.site ul li.current-down a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: -moz-linear-gradient(center top , #3F7C32 0%, #2A6629 100%);
    background-image: -o-linear-gradient(center top , #3F7C32 0%, #2A6629 100%);
    background-image: -o-linear-gradient(center top , #3F7C32 0%, #2A6629 100%);
    background-image: -webkit-linear-gradient(center top , #3F7C32 0%, #2A6629 100%);
    background-image: linear-gradient(center top , #3F7C32 0%, #2A6629 100%);
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    color: #FFFFFF !important;
    font-family: helvetica,arial,sans-serif !important;
    font-size: 1.8em;
    font-weight: 900 !important;
    line-height: 1;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    text-shadow: 0 0 2px #111111;
}
.site ul li.current-down a:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    box-shadow: 0 0 20px #000 inset;
}

note: you will need to replace the current

.site ul li.current-down {

with the new one (located above)

davidlougheed 2012-01-17 01:47:55

you have two -o- but other than that looks good. can u post example on pastehtml?

Franz 2012-01-17 08:22:00

Yeah, that'd be awesome.

Insert Name Here 2012-01-17 21:43:24

Sorry about the extra -o-, it wasn't supposed to be there. Here's the pastebin: http://pastehtml.com/view/bl2nvlzyz.html

And here is the final code:

.site ul li.current-down {
    margin-top: 10px;
}
.site ul li.current-down a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #3F7C32;
    background-image: -moz-linear-gradient(center top , #3F7C32 0%, #2A6629 100%);
    background-image: -o-linear-gradient(center top , #3F7C32 0%, #2A6629 100%);
    background-image: -webkit-linear-gradient(center top , #3F7C32 0%, #2A6629 100%);
    background-image: linear-gradient(center top , #3F7C32 0%, #2A6629 100%);
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    color: #FFFFFF !important;
    font-family: helvetica,arial,sans-serif !important;
    font-size: 1.8em;
    font-weight: 900 !important;
    line-height: 1;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    text-shadow: 0 0 2px #111111;
    display: block;
    width: 100%
}
.site ul li.current-down a:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    box-shadow: 0 0 20px #000 inset;
}
Comment edited 2 times (Diff, Diff 2)

Franz 2012-01-17 21:59:58

Uhm, would you mind posting a screenshot? It looks a little strange both when I click on that pastehtml link and when I test it using Chrome developer tools.

Insert Name Here 2012-01-17 22:24:48

Try this newer version: it should work a lot better: http://pastehtml.com/view/bl2rui15n.html

here is the updated code:

.site ul li.current-down {
    margin-top: 10px;
}
.site ul li.current-down a {
background: #3f7c32; /* Old browsers */
background: -moz-linear-gradient(top, #3f7c32 0%, #2a6629 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f7c32), color-stop(100%,#2a6629)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3f7c32 0%,#2a6629 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3f7c32 0%,#2a6629 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3f7c32 0%,#2a6629 100%); /* IE10+ */
background: linear-gradient(top, #3f7c32 0%,#2a6629 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f7c32', endColorstr='#2a6629',GradientType=0 ); /* IE6-9 */
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    color: #FFFFFF !important;
    font-family: helvetica,arial,sans-serif !important;
    font-size: 1.8em;
    font-weight: 900 !important;
    line-height: 1;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    text-shadow: 0 0 2px #111111;
/*    display: block;
    width: 100%*/
}
.site ul li.current-down a:hover {
    box-shadow: 0 0 20px #000 inset;
}

davidlougheed 2012-01-18 01:33:18

Couple comments:

do list-style: none on the ul and li so no bullets.
do an :active for the link so when you click it it goes darker or something.

other than that looks nice!

kadrach 2012-01-20 01:47:34

Things I noticed:
* Front page currently shows version numbers 6 times. That's not really necessary.
* Tour needs to be promoted more (actually, the feature box on the front page should promote the items listed in the tour, those are the ones that matter more to end users).

Back to the button: How about this?
http://pastehtml.com/view/blb989op1.html
(The arrow should probably be plain-text and white)

Comment edited 1 times (Diff)

Franz 2012-01-20 09:11:56

I very much like that suggestion, actually.
Yes, the arrow should be white.

Any suggestions for text in the feature box? Which things are more important to you, for example, than the ones listed there?

@Insert Name Here:
I find that a little bit too glossy for FluxBB (light and simple etc.).

EDIT: Actually, how about a version with two buttons - one for the download, one for the converter (which is about to be ready, at least beta)? The way I see it they should be next to each other and have two different colors (one green, one orange, just look on the site for the other colors).

Comment edited 1 times (Diff)

kadrach 2012-01-20 09:25:07

Regarding the feature box: The features being advertised are very technical, and with the databases/php versions, very generic.
Showcasing blazing speed, the lightweight core that can easily be extended (...), etc, will help FluxBB stand out from the mass of mediocre forum software.

My solution is not very elegant at the moment, I'll fix it up and submit a patch if needed.

Franz 2012-01-20 09:42:21

I wrote:

EDIT: Actually, how about a version with two buttons - one for the download, one for the converter (which is about to be ready, at least beta)? The way I see it they should be next to each other and have two different colors (one green, one orange, just look on the site for the other colors).

Insert Name Here 2012-01-21 16:02:29

I like it. Just three suggestions:
1. Set the border css property to none. That way the curved borders wont look like this
2. Make the entire button clickable: right now it looks like the entire button is a link, and it might confuse users if they are trying to click, say, the arrow.
3. Give the button a different state when a user hovers over it: that way the user knows it's a link.

Franz 2012-01-21 19:35:46

Yeah, 2 and 3 are very important.

daris 2012-01-22 19:06:30

What do you think about setting some shadows for site page?
Screen 1 Screen 2

It's done via border-radius, box-shadow and linear-gradient.

Franz 2012-01-22 19:39:20

Very nice, I especially like the second one (and was thinking about that once). Not sure about the homepage yet, although it would probably make sense, I guess...

kadrach 2012-01-22 23:28:52

The first one looks disconnected. The second one is good, but also disconnects the heading from navigation/content.

daris 2012-01-23 07:45:43

What about this one? index, community

edit: another version of subheader

Comment edited 1 times (Diff)

kadrach 2012-01-23 23:58:54

Hm, I'm not sure. The first one looks a bit strange due to the 1px white border, otherwise that might be a good choice.

I do like the second one a lot, but it poses the same problem: It looks out of place.

It boils down to prominence. In terms of visual impact, Section > Subsection > Subsubsection ...

The third one is very nice.

Franz 2012-01-24 00:04:37

I actually like this one very much.

Can you try putting the shadow across the whole thing? And - another idea - make it a little stronger?

Franz 2012-01-24 01:59:41

Cool.

A couple things:
- You can find the proper orange on this page: https://fluxbb.org/downloads/archive/
- Is there any way to put the "Download ..." lines on one line? I guess making the fonts too small would look stupid. Maybe, maybe have two slim buttons in two rows instead? Not sure what that would look like...

kadrach 2012-01-24 04:41:54

Just for demonstration purposes, fixing color, link, etc I can do at a later stage.

Putting it in one line reduces the text size too much. Padding is also given by overall page layout and should not be modified. Thursday is a public holiday here, so I'll create some mock ups then.

I'm happy to do this, but my personal opinion is that the converter should, in the future, be fully integrated into the installation routine rather than being a separate entity.

By the way, is the website codebase publicly available, e.g. on github?

Franz 2012-01-24 09:13:46

Thanks for your efforts!

kadrach wrote:

I'm happy to do this, but my personal opinion is that the converter should, in the future, be fully integrated into the installation routine rather than being a separate entity.

Yup, we were actually discussing that for 2.0 and, if I remember correctly, liked the idea (especially as the whole installation package will be deleted again anyway).

kadrach wrote:

By the way, is the website codebase publicly available, e.g. on github?

No, not at the moment, sorry.

Franz 2012-09-12 16:11:01

I like the second idea. Very much.

Some notes, though:

  • The screenshot is tilted a little too much in my eyes. Also, maybe we can take a section of the page that says a little more about the forum itself!?

  • The spacing between the headline and the teaser paragraph can be a little more ... generous.

  • I like the two links above the download buttons.

  • Not 100% sure about the Metro-style download links. (I know you like that.) Comments, anybody?

Studio384 2012-09-12 16:35:16

The first one: Agree with that, but were you can put the content then, and wich part did you think of?

The second one: I think you want more space between the title and the tekst?

The third one: I'm sorry, I can't fix that. smile

For the last point: that's because I don't know the font used at this site (Helvetica, but that's not working on my PC). And Arial is just ugly. Also, I actually didn't think about Metro, it was just based at http://pastehtml.com/view/blqyonbz9.html. And actually more a place to put a more FluxBB-ish button.

Comment edited 2 times (Diff, Diff 2)

Franz 2012-09-14 22:20:51

Maybe this theme can inspire you a bit:
https://wrapbootstrap.com/theme/reboot- … -WB000C138

Not sure whether the text could still be above the screenshot (and only the links and download buttons on the left side), but it's worth an attempt.

And we can definitely use more space for the top section.

The rest of the template is also pretty nice, with features, testimonials, screenshots etc.

And yes, you were right about spacing.

I like your button style. smile

Studio384 2012-09-14 22:58:10

New concepts:
http://www.imgdumper.nl/uploads6/5053b6 … -flux2.png
http://www.imgdumper.nl/uploads6/5053b6 … -flux2.png
The difference is in the buttons

Franz wrote:

The rest of the template is also pretty nice, with features, testimonials, screenshots etc.

Do you mean you wan't to revamp the whole home page?

Comment edited 2 times (Diff, Diff 2)

123 2013-01-14 21:26:31

.button {
  -moz-border-radius: 3px;
  -moz-box-shadow: #a2fd7c 0px 0px 10px;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-border-radius: 3px;
  -webkit-box-shadow: #6E7849 0 0 10px;
  -webkit-transition: all 0.5s ease;
  background-color: #510099;
  background-image: -moz-linear-gradient(179deg, #7bb0f4, #510099);
  background-image: -ms-linear-gradient(179deg, #7bb0f4, #510099);
  background-image: -o-linear-gradient(179deg, #7bb0f4, #510099);
  background-image: -webkit-linear-gradient(179deg, #7bb0f4, #510099);
  background-image: linear-gradient(179deg, #7bb0f4, #510099);
  border-radius: 3px;
  border: 1px solid #008df0;
  box-shadow: #a2fd7c 0px 0px 10px;
  color: #ffffff;
  display: inline-block;
  font-family: Verdana;
  font-size: 1.8em;
  margin: auto;
  padding: 15px;
  text-decoration: none;
  text-shadow: #ddd 0px -2px 19px;
  transition: all 0.5s ease;
}

.button:hover {
  padding: 15px;
}

c1126c8791998.png

Studio384 2013-01-14 21:35:12

Uhm, I'm sorry to say it, but that just doesn't fit FluxBB...

123 2013-01-14 21:47:35

It does not have to be flat, it is to pay attention. It has a banging on the eyes.

Studio384 2013-01-14 22:04:16

  • Owner set to Studio384.

I don't say it needs to be flat, but this is just not something that match the FluxBB style.

Franz 2013-01-14 22:35:39

I agree, it's too glossy.
It doesn't really have to be all flat, but a little more subtle. Buttons can have strong colors and be eye-catching without that many effects.

Comment edited 1 times (Diff)

123 2013-01-18 16:01:20

    .myButton {
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f9fc), color-stop(1, #f5f5f5));
        background:-moz-linear-gradient(top, #f6f9fc 5%, #f5f5f5 100%);
        background:-webkit-linear-gradient(top, #f6f9fc 5%, #f5f5f5 100%);
        background:-o-linear-gradient(top, #f6f9fc 5%, #f5f5f5 100%);
        background:-ms-linear-gradient(top, #f6f9fc 5%, #f5f5f5 100%);
        background:linear-gradient(to bottom, #f6f9fc 5%, #f5f5f5 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f9fc', endColorstr='#f5f5f5',GradientType=0);
        
        background-color:#f6f9fc;
        
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        
        border:1px solid #c9d7e1;
        
        display:inline-block;
        color:#566579;
        font-family:Trebuchet MS;
        font-size:17px;
        font-weight:bold;
        padding:7px 11px;
        text-decoration:none;
        
    }
    .myButton:hover {
        
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f5f5f5), color-stop(1, #f6f9fc));
        background:-moz-linear-gradient(top, #f5f5f5 5%, #f6f9fc 100%);
        background:-webkit-linear-gradient(top, #f5f5f5 5%, #f6f9fc 100%);
        background:-o-linear-gradient(top, #f5f5f5 5%, #f6f9fc 100%);
        background:-ms-linear-gradient(top, #f5f5f5 5%, #f6f9fc 100%);
        background:linear-gradient(to bottom, #f5f5f5 5%, #f6f9fc 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f6f9fc',GradientType=0);
        
        background-color:#f5f5f5;
    }
    .myButton:active {
        position:relative;
        top:1px;
    }

screen:
0fc4f8b6c0ca3.png

http://www.webarti.com/best-CSS3-button-maker/ more

Studio384 2013-01-18 18:09:33

Yeah, that's a pretty good example for a nice plugin, maybe with an Arrow next to it and a version number in it (and some extra padding).

123 2013-01-18 20:19:35

Arrow FluxBB color logos should do the trick.