[FND] New Button

Web discussions, including project website, forums, wiki, and others.


User avatar
Alige
TMW Adviser
TMW Adviser
Posts: 1398
Joined: 09 Jan 2010, 19:22

[FND] New Button

Post by Alige »

I saw that the current "Download" button, and maybe the future "Follow Us" button we use on the site is pretty messy and badly made. That's why I kept its good, green part, and remade the rest by hand so that it's a bit more clean and pretty to the eye.
The "Download" line can be replaced by "Follow Us" and the "Client" can also be replaced with the different icons we have in the "Follow Us" button currently. One thing is missing though : these icons I'm talking about. So either someone sends some versions that I can improve and add to that button so that it gets finish; or someone does that himself.

If you have any fixes you want to do or to see on this, feel free to reply.
Left: Current Button
Right: New Button
Attachments
Comparison.png
Comparison.png (66.48 KiB) Viewed 6594 times
Image
User avatar
Reid
Lead Developer (SoM)
Lead Developer (SoM)
Posts: 1549
Joined: 15 May 2010, 21:39
Location: Artis
Contact:

Re: [WIP] New Button

Post by Reid »

Alige wrote:I saw that the current "Download" button, and maybe the future "Follow Us" button we use on the site is pretty messy and badly made. That's why I kept its good, green part, and remade the rest by hand so that it's a bit more clean and pretty to the eye.
The "Download" line can be replaced by "Follow Us" and the "Client" can also be replaced with the different icons we have in the "Follow Us" button currently. One thing is missing though : these icons I'm talking about. So either someone sends some versions that I can improve and add to that button so that it gets finish; or someone does that himself.

If you have any fixes you want to do or to see on this, feel free to reply.
Left: Current Button
Right: New Button
The "Follow Us" part is managed through a widget from Joomla, that's why it doesn't have the exact same theme than the download button. So all of these icons are inside this widget and I wonder how hard it would be to change them. (maybe not hard, maybe hard... alt25)
I will add your new Download button tonight, thanks!

Pre-answer of what you will ask for: no, we can't add a self-made widget/CSS Follow Us link as our template is a bit messed up right now with non-dynamical position of some elements, but once we will fix that we will reconsider to make this box ourself.
"Time is an illusion. Lunchtime doubly so."
-- Ford Prefect
User avatar
Reid
Lead Developer (SoM)
Lead Developer (SoM)
Posts: 1549
Joined: 15 May 2010, 21:39
Location: Artis
Contact:

Re: [WIP] New Button

Post by Reid »

I need the second image as well, when the mouse is over the button.
"Time is an illusion. Lunchtime doubly so."
-- Ford Prefect
User avatar
Alige
TMW Adviser
TMW Adviser
Posts: 1398
Joined: 09 Jan 2010, 19:22

Re: [WIP] New Button

Post by Alige »

Reid wrote:I need the second image as well, when the mouse is over the button.
Check the .xcf file. A layer called "Text Glow" can be disabled for when the mouse is not over the button.
Image
User avatar
Reid
Lead Developer (SoM)
Lead Developer (SoM)
Posts: 1549
Joined: 15 May 2010, 21:39
Location: Artis
Contact:

Re: [WIP] New Button

Post by Reid »

Alige wrote:
Reid wrote:I need the second image as well, when the mouse is over the button.
Check the .xcf file. A layer called "Text Glow" can be disabled for when the mouse is not over the button.
OK, everything is updated now.
"Time is an illusion. Lunchtime doubly so."
-- Ford Prefect
User avatar
Alige
TMW Adviser
TMW Adviser
Posts: 1398
Joined: 09 Jan 2010, 19:22

Re: [WIP] New Button

Post by Alige »

I saw that you added the new button, thanks... but no thanks. You kept the ugly part (the borders) of the old button, which makes it even worse. So either you remove the border for my new button to look good, or you keep the old button.

Don't make me do stuff I don't like...
Image
User avatar
WildX
Source of Mana
Source of Mana
Posts: 2084
Joined: 07 Aug 2010, 14:13
Location: United Kingdom
Contact:

Re: [WIP] New Button

Post by WildX »

I agree with Alige, that border needs to go.

TMW Team member

User avatar
Reid
Lead Developer (SoM)
Lead Developer (SoM)
Posts: 1549
Joined: 15 May 2010, 21:39
Location: Artis
Contact:

Re: [WIP] New Button

Post by Reid »

Ok let's remove it then, but we will do it from the png, I can't tweak the css very easily.
"Time is an illusion. Lunchtime doubly so."
-- Ford Prefect
Salius
Novice
Novice
Posts: 129
Joined: 11 Aug 2013, 10:25

Re: [WIP] New Button

Post by Salius »

Reid, I see on the site image http://evolonline.org/images/buttons/download.png in the <img> tag. And your new button, implemented with css, positioned under this old button, as background image. Because of this new button looks worse. I think you make this button wrong on this page. If you want to make it with css, then you need to remove unneeded <img> tag from web page. Then you can see only new button, as you need.

Example:

Code: Select all

.downloadclient
{
	background-image: url("../images/download.png");
	display: block;
	width: 177px;
	height: 135px;
}

.downloadclient:hover
{
	background-image: url("../images/download_rollover.png");
}
Of course you can use "a.downloadclient" instead of ".downloadclient".
User avatar
Reid
Lead Developer (SoM)
Lead Developer (SoM)
Posts: 1549
Joined: 15 May 2010, 21:39
Location: Artis
Contact:

Re: [WIP] New Button

Post by Reid »

Salius wrote:Reid, I see on the site image http://evolonline.org/images/buttons/download.png in the <img> tag. And your new button, implemented with css, positioned under this old button, as background image. Because of this new button looks worse. I think you make this button wrong on this page. If you want to make it with css, then you need to remove unneeded <img> tag from web page. Then you can see only new button, as you need.

Example:

Code: Select all

.downloadclient
{
	background-image: url("../images/download.png");
	display: block;
	width: 177px;
	height: 135px;
}

.downloadclient:hover
{
	background-image: url("../images/download_rollover.png");
}
Of course you can use "a.downloadclient" instead of ".downloadclient".
Which part of our code should I change? I can remove the a.downloadclient and simply put your lines?
"Time is an illusion. Lunchtime doubly so."
-- Ford Prefect
Salius
Novice
Novice
Posts: 129
Joined: 11 Aug 2013, 10:25

Re: [WIP] New Button

Post by Salius »

Reid wrote: Which part of our code should I change? I can remove the a.downloadclient and simply put your lines?
This code example for modifying your existing css.
On the web page i see (in html) code:

Code: Select all

<a class="downloadclient" href="/manaplus" ><img src="/images/buttons/download.png" alt="ManaPlus" /></a>
You need to remove "<img src="/images/buttons/download.png" alt="ManaPlus" />" part. Only "<a class="downloadclient" href="/manaplus" ></a>" part stay in this place.
This <a> tag in your html code have its own class - downloadclient. You can refer directly to this class in your css. My previous code example refer directly to this class instead your old (long) css reference.
Old css looks something like:

Code: Select all

.right-container .well .nav a {
  background-color: transparent;
  background-image: url(../images/download.png);
  background-repeat: no-repeat;
}
.right-container .well .nav a:hover {
  background-color: transparent;
  background-image: url(../images/download_rollover.png);
  background-repeat: no-repeat;
}
You can modify your old css or use my example. You need to add "display", "width" and "height" properties to correctly display your block with background image. To use my example you need to replace this old code with my. And you don't need to double same properties in ":hover" section.
Sorry, I don't know how you can edit your html and css code. I write this examples on base of that html and css code, which I can see in my browser. Can you directly edit html and css? Or you use some administration interface?
Salius
Novice
Novice
Posts: 129
Joined: 11 Aug 2013, 10:25

[FND] New Button

Post by Salius »

Finally we finished new button ;)
User avatar
Alige
TMW Adviser
TMW Adviser
Posts: 1398
Joined: 09 Jan 2010, 19:22

Re: [FND] New Button

Post by Alige »

Nice work! Though, I spotted a small issue on it. There are 4-5 brown pixels on the border of the button that have nothing to do with anything here. However, when we place our mouse cursor on the download button, these buggy pixels disappear. Here's a small image to illustrate the problem.
Attachments
bug.png
bug.png (11.25 KiB) Viewed 8013 times
Image
User avatar
EJlol
TMW Furniture
TMW Furniture
Posts: 1224
Joined: 06 Sep 2005, 08:42

Re: [FND] New Button

Post by EJlol »

According to my FF there is:

body.site a {
color: #473529;
text-decoration: underline;
}

at template.css, around line 6130 which makes that line.

please note that if you remove that, it might have unwanted side effects :P (read: some links may not have the underline anymore)
User avatar
Reid
Lead Developer (SoM)
Lead Developer (SoM)
Posts: 1549
Joined: 15 May 2010, 21:39
Location: Artis
Contact:

Re: [FND] New Button

Post by Reid »

EJlol wrote:According to my FF there is:

body.site a {
color: #473529;
text-decoration: underline;
}

at template.css, around line 6130 which makes that line.

please note that if you remove that, it might have unwanted side effects :P (read: some links may not have the underline anymore)
Maybe we can place the button over this line?
"Time is an illusion. Lunchtime doubly so."
-- Ford Prefect
Post Reply