Archive for the ‘Overrides’ 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.

Customizing Reverb Skins – Getting Social

Posted on: August 27th, 2013

Instead of trying to tackle all the skins at once, I am going to do a lesson by lesson  instruction of the different skin that I have customized and different lessons learned from customization. For a review, you can refer to the last blog post by opening up ePublisher and viewing the first customization post. Even though I faithfully stayed to the color-wheel last week. I am going to shake it up a bit and use the four following colors for simplicity: fuchsia, black, white, and hot hot pink, aka rgb(230,57,155)

Most of the items can be customized with the skin. As an aside, I just wanted to let you know that I took a long time in getting everything figured out because there are many items to consider. I played it fast and loose with the customizing, so as a lesson, it is always good to have the idea of what your colors are already going into the design, so you aren’t doing a bunch of changes later. If you want to keep your color scheme limited to a few colors, you have to consider things like hover and the icons. For instance, we have a grey folder that is located on the side bar, well I wanted to change this to black, unfortunately, with the black hover that I had specified. I had to change the folder icon on the TOC to reflect the fuchsia so that you could see it when you hover over the TOC entry. You can easily do this in a program like Fireworks* by double-clicking the skin.fireworks.png and using the paintbucket or paint tool to color in the toc expand and collapse icons to whatever color you want. You will want to save this file as skin.png and then you can view the Skin.html file from the interface:

TOC_folder

I couldn’t quite get the bubble effect of the social skin to look right without it being white, so I simply kept the index, TOC, and search fields preserving this white color. Mostly this is just a matter of changing the CSS. One thing that I have found helpful if I forget what CSS style to use is to do an “Inspect Element” using Firefox or Chrome (Sorry IE and Safari users!). You can right-click on any item in the Skin.html, click “Inspect Element”, and it will show you what CSS class to use, and then you would just do a Ctrl+F to find this in the skin.css. You will do most of your work in skin.css. The exceptions are the links in the search panel and the styling for the mini-TOC and the related topics.

Fortunately, the social skin is pretty easy to configure just basically divide and conquer everything in the Skin.html file. There are no gradients, just matching the hovers and the toolbar skins. I am updating the source I used for the project as well as this Skin zipped up. For practice, you will want to integrate this into your own Targets directory.  Click here for the Wiki page that will have the sample and the skins that I will be demonstrating this week!

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…)