[FND] New Button
[FND] New Button
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 "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 (66.48 KiB) Viewed 6650 times
Re: [WIP] 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)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
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
-- Ford Prefect
Re: [WIP] New Button
I need the second image as well, when the mouse is over the button.
"Time is an illusion. Lunchtime doubly so."
-- Ford Prefect
-- Ford Prefect
Re: [WIP] New Button
Check the .xcf file. A layer called "Text Glow" can be disabled for when the mouse is not over the button.Reid wrote:I need the second image as well, when the mouse is over the button.
Re: [WIP] New Button
OK, everything is updated now.Alige wrote:Check the .xcf file. A layer called "Text Glow" can be disabled for when the mouse is not over the button.Reid wrote:I need the second image as well, when the mouse is over the button.
"Time is an illusion. Lunchtime doubly so."
-- Ford Prefect
-- Ford Prefect
Re: [WIP] New Button
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...
Don't make me do stuff I don't like...
Re: [WIP] New Button
I agree with Alige, that border needs to go.
Developer: Source of Mana, TMW Classic
SPI Liaison (Donate to The Mana World)
Forum Admin
TMW Team member
Re: [WIP] New Button
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
-- Ford Prefect
Re: [WIP] New Button
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:
Of course you can use "a.downloadclient" instead of ".downloadclient".
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");
}
Re: [WIP] New Button
Which part of our code should I change? I can remove the a.downloadclient and simply put your lines?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:Of course you can use "a.downloadclient" instead of ".downloadclient".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"); }
"Time is an illusion. Lunchtime doubly so."
-- Ford Prefect
-- Ford Prefect
Re: [WIP] New Button
This code example for modifying your existing css.Reid wrote: Which part of our code should I change? I can remove the a.downloadclient and simply put your lines?
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>
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;
}
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?
[FND] New Button
Finally we finished new button
Re: [FND] New Button
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 (11.25 KiB) Viewed 8069 times
Re: [FND] New Button
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)
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)
Re: [FND] New Button
Maybe we can place the button over this line?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)
"Time is an illusion. Lunchtime doubly so."
-- Ford Prefect
-- Ford Prefect