FUDforum
Fast Uncompromising Discussions. FUDforum will get your users talking.

Home » FUDforum Development » Icons & buttons » Switching out graphics for CSS3 goodness
Show: Today's Messages :: Polls :: Message Navigator
Switch to threaded view of this topic Create a new topic Submit Reply
Switching out graphics for CSS3 goodness [message #164588] Fri, 18 February 2011 13:25 Go to next message
Bradley is currently offline  Bradley
Messages: 41
Registered: February 2011
Karma: 0
Member
In a theme I'm working on, I've replaced the background graphics for the forum table headers with css3 gradients. Most (if not all) modern browsers support them - even mobile browsers), and if they don't, a solid block of colour will be shown instead, so it's backwards compatible. the code? simple!

from www,css3please.com where the gradient is red at the top, and white at the bottom:
background-color: #ff0000;
  background-image: -moz-linear-gradient(top, #ff0000, #ffffff); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(1, #ffffff)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(#ff0000, #ffffff); /* Chrome 10+, Saf6 */
  background-image: linear-gradient(top, #ff0000, #ffffff);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff0000', EndColorStr='#ffffff'); /* IE6IE9 */


if you want to be really fancy, you could use rgba to define an alpha of the gradient!

using css3 gradients is a lot faster, and doesn't need to pull the images!
Re: Switching out graphics for CSS3 goodness [message #164596 is a reply to message #164588] Fri, 18 February 2011 14:27 Go to previous messageGo to next message
The Witcher is currently offline  The Witcher   United States
Messages: 675
Registered: May 2009
Location: USA
Karma: 3
Senior Member
It would help if you dumbed down your posts so people like me could understand them better?

If I understand correctly you are referring to replacing the current background in the forums CSS with the code above...Is that correct?




"I'm a Witcher, I solve human problems; not always using a sword!"
Re: Switching out graphics for CSS3 goodness [message #164599 is a reply to message #164596] Fri, 18 February 2011 15:23 Go to previous messageGo to next message
Bradley is currently offline  Bradley
Messages: 41
Registered: February 2011
Karma: 0
Member
yeah, like the .CatDesc class for example. instead of background ... url ('some image') ... declaration.

instead, dropping that, and replacing with the code above, obviously not red - white though!

it'd make the forum a lot easier to theme - you wouldn't need to touch a graphics program to edit the colours of the forum for example.
Re: Switching out graphics for CSS3 goodness [message #164603 is a reply to message #164599] Fri, 18 February 2011 16:04 Go to previous messageGo to next message
The Witcher is currently offline  The Witcher   United States
Messages: 675
Registered: May 2009
Location: USA
Karma: 3
Senior Member
Ok so basically all some one would need is the color codes of the color to start with and the code of the color you want it to fade towards so there would be no need to use gimp to create the gradient image (or learn another skill).

This is another area where some plain English descriptions would help FUDforums popularity, such as defining "rgba", explaining what the various sections of the CSS modify or apply to etc.




"I'm a Witcher, I solve human problems; not always using a sword!"
Re: Switching out graphics for CSS3 goodness [message #164604 is a reply to message #164603] Fri, 18 February 2011 16:15 Go to previous messageGo to next message
Bradley is currently offline  Bradley
Messages: 41
Registered: February 2011
Karma: 0
Member
i'll answer:
Quote:
Ok so basically all some one would need is the color codes of the color to start with and the code of the color you want it to fade towards so there would be no need to use gimp to create the gradient image (or learn another skill).

correct.

Quote:
This is another area where some plain English descriptions would help FUDforums popularity, such as defining "rgba", explaining what the various sections of the CSS modify or apply to etc.

actually, this is plain english, just perhaps not grammatically correct. setting up fudforum is not for your everyday folk, so i think using basic terminology is not needed.
css3 rgba is awesome! and allows you to define an alpha / opacity / transparency level for your colour. googling css3 will help you loads here. it's a very powerful thing to know. use the website i posted in the op to see css3 goodiness in action.

[Updated on: Fri, 18 February 2011 16:20]

Report message to a moderator

Re: Switching out graphics for CSS3 goodness [message #164606 is a reply to message #164604] Fri, 18 February 2011 16:49 Go to previous messageGo to next message
The Witcher is currently offline  The Witcher   United States
Messages: 675
Registered: May 2009
Location: USA
Karma: 3
Senior Member
I understand, unfortunately what you, naudefj, Ernesto or I consider plain English is way over the head of many potential FUDforum users/Admins. (much of what you all post is over my head).

I agree that FUDforum is not for your average everyday folks.... Which is part of the problem, if we can make it more understandable to everyday computer users we will have accomplished a lot. I'm sure its impossible to make it idiot proof but the more we try the more we will succeed.


Quote:
use the website i posted in the op to see css3 goodiness in action.


I see no link in the "OP' (original Post):
Bradley wrote on Fri, 18 February 2011 07:25
In a theme I'm working on, I've replaced the background graphics for the forum table headers with css3 gradients. Most (if not all) modern browsers support them - even mobile browsers), and if they don't, a solid block of colour will be shown instead, so it's backwards compatible. the code? simple!

from www,css3please.com where the gradient is red at the top, and white at the bottom:
background-color: #ff0000;
  background-image: -moz-linear-gradient(top, #ff0000, #ffffff); /* FF3.6 */
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff0000),color-stop(1, #ffffff)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(#ff0000, #ffffff); /* Chrome 10+, Saf6 */
  background-image: linear-gradient(top, #ff0000, #ffffff);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff0000', EndColorStr='#ffffff'); /* IE6IE9 */


if you want to be really fancy, you could use rgba to define an alpha of the gradient!

using css3 gradients is a lot faster, and doesn't need to pull the images!



"I'm a Witcher, I solve human problems; not always using a sword!"
Re: Switching out graphics for CSS3 goodness [message #164608 is a reply to message #164606] Fri, 18 February 2011 16:56 Go to previous messageGo to next message
Bradley is currently offline  Bradley
Messages: 41
Registered: February 2011
Karma: 0
Member
don't forget:

Quote:
from www,css3please.com where the gradient is red at the top, and white at the bottom:

ok, so i can't type a fullstop properly, but hey!
Re: Switching out graphics for CSS3 goodness [message #164609 is a reply to message #164608] Fri, 18 February 2011 18:04 Go to previous messageGo to next message
The Witcher is currently offline  The Witcher   United States
Messages: 675
Registered: May 2009
Location: USA
Karma: 3
Senior Member
Ooops guess I was thinking literally and expecting a "link" not a partial url.... Me bad.

But then I never heard of a link being referred to as a 'fullstop either.



"I'm a Witcher, I solve human problems; not always using a sword!"
Re: Switching out graphics for CSS3 goodness [message #164703 is a reply to message #164609] Wed, 02 March 2011 10:17 Go to previous messageGo to next message
naudefj is currently offline  naudefj   South Africa
Messages: 3771
Registered: December 2004
Karma: 28
Senior Member
Administrator
Core Developer
Great idea! It would be really helpful if you guys can work out the CSS gradients required to replace the images in FUDforum's themes.
Re: Switching out graphics for CSS3 goodness [message #165954 is a reply to message #164588] Fri, 02 September 2011 07:18 Go to previous message
peterscott is currently offline  peterscott   India
Messages: 2
Registered: September 2011
Location: chicago
Karma: 0
Junior Member
Thanks for all the information. It is indeed very useful.
  Switch to threaded view of this topic Create a new topic Submit Reply
Previous Topic: Lost Icons to Collapse Categories & Messages
Next Topic: The wee white arrow
Goto Forum:
  

-=] Back to Top [=-
[ Syndicate this forum (XML) ] [ RSS ]

Current Time: Tue Apr 16 15:16:20 GMT 2024

Total time taken to generate the page: 0.02559 seconds