Archive for the ‘Customizations’ Category

Customizing Reverb Skins – Gradients and the corporate skin

Posted on: August 28th, 2013

One of the neat things you can do with CSS3 is apply gradients. We use this heavily in our corporate skin, but they can be a bit confusing. We use this website in our skin.css for the Classic new to applying gradients, but it really doesn’t get it to the demonstration aspect of the gradients. Using a gradient generator, I was able to find a way to specifically tweak in real time what the gradient would look like as I put the hex values in to the swatch, and it also gives you the opportunity to add colors using the green plus button to the right of the “Color Swatches” and show by the following screenshot:

color_gradient_switcher

I am sure this isn’t the only one of these types of tools out there, and if you are a seasoned CSS veteran, then you may not need this tool at all. Regardless, here is the CSS that it generated:

background-image: linear-gradient(bottom, #CD0074 0%, #E6399B 25%, #85004B 50%, #CD0074 100%);
background-image: -o-linear-gradient(bottom, #CD0074 0%, #E6399B 25%, #85004B 50%, #CD0074 100%);
background-image: -moz-linear-gradient(bottom, #CD0074 0%, #E6399B 25%, #85004B 50%, #CD0074 100%);
background-image: -webkit-linear-gradient(bottom, #CD0074 0%, #E6399B 25%, #85004B 50%, #CD0074 100%);
background-image: -ms-linear-gradient(bottom, #CD0074 0%, #E6399B 25%, #85004B 50%, #CD0074 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, #CD0074),
	color-stop(0.25, #E6399B),
	color-stop(0.5, #85004B),
	color-stop(1, #CD0074)
);

You can do some pretty crazy things with CSS and patterns, and since they are technically gradients, you could even skin Reverb with these. Practically, they might not really work, but conceptually, they are interesting. You can put a gradient on just about any of the elements we have on our page, but the trick is making it work with the text/icons that you are using, so proceed with caution when using gradients. At any rate, CSS can be intimidating but with the use of Skin.html and the right tools to help you along the way, it actually be somewhat fun!

I have updated my wiki page, so you can download the pink corporate skin if you would like to practice customizing gradients.

Wrangling the 3-way merge

Posted on: October 20th, 2010

Even after nearly 3 years with WebWorks, I often find it difficult to tackle issues such as override migration.  People have different styles in doing this, but universally the preferred method is using some sort of diffing utility to bring over the customizations. Normally Standard Support does not cover this, but if the project looks like something that can be handled with a relative amount of ease, I will try to assist as much as possible. Recently, I had a case of someone using FTI modifications in the Page Styles options panel for language codes. In this example, I am using Araxis Merge, just because it is the one I am familiar with, but you can play with Kdiff or Beyond Compare, if you like. (more…)