The Mana World Forums

Posted: **10 Feb 2014, 19:28**

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

Posted: **10 Feb 2014, 19:58**

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.

Posted: **12 Feb 2014, 21:50**

I need the second image as well, when the mouse is over the button.

Posted: **13 Feb 2014, 04:29**

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.

Posted: **13 Feb 2014, 21:48**

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.

Posted: **14 Feb 2014, 04:58**

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...

Posted: **14 Feb 2014, 20:38**

I agree with Alige, that border needs to go.

Posted: **15 Feb 2014, 00:59**

Ok let's remove it then, but we will do it from the png, I can't tweak the css very easily.

Posted: **15 Feb 2014, 19:12**

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".

Posted: **16 Feb 2014, 01:36**

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?

Posted: **16 Feb 2014, 13:02**

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?

Posted: **24 Feb 2014, 23:45**

Finally we finished new button

Posted: **25 Feb 2014, 04:01**

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.

Posted: **25 Feb 2014, 08:06**

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

(read: some links may not have the underline anymore)

Posted: **25 Feb 2014, 12:06**

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 (read: some links may not have the underline anymore)

Maybe we can place the button over this line?

The Mana World Forums

[FND] New Button

[FND] New Button

Re: [WIP] New Button

Re: [WIP] New Button

Re: [WIP] New Button

Re: [WIP] New Button

Re: [WIP] New Button

Re: [WIP] New Button

Re: [WIP] New Button

Re: [WIP] New Button

Re: [WIP] New Button

Re: [WIP] New Button

[FND] New Button

Re: [FND] New Button

Re: [FND] New Button

Re: [FND] New Button