How to setup your Showcase widget group

The original Corporate theme had this same header group of widgets but the problem was that it needed a lot of manual html coding. Things have now changed quite a bit, but you may need to do “some” html or css coding depending on what you decide to put into the three widget positions. This is a very unusal layout because there is no plugin slideshow or content slider that can do this concept yet as it gives a bit more flexibility for the end-user which is why it’s not 100% automated. If you decide to use a slideshow, content slider, or perhaps some other media plugin, you can use that within the Showcase 2 position.

Let me explain what the Showcase 1 is and how to use it should you decide to activate it from the theme settings control panel. First, this is how it looks when it has all parts of it active:


As I mentioned, I have not found any plugin that can do what this is created to do, so this is why parts of it will still depend on what you put into it. Yes – you will need some basic knowledget of html, or at least some css because if you need to modify anything that is not provided within the theme settings, you need to do this yourself direct from the source files. However, if you take your time to get familiar with it, you will later see that it has a lot of potential of giving your front page a very powerful and visal impact to visitors.

The Showcase was created to give a person the flexibility of adding media like images, slideshows, or other forms of active imagery. In addition to this, I provided the means of adding 1, 2, or 3 widgets along side which can have any kind of  content you want. This is the part that is the most flexible because most theme developers pre-code something specific to go in these kind of spots like: Popular posts, Recent Posts, etc. But the problem I seen is that not everyone may want that so it becomes wasted space or features. I decided to let the individual decide what they want to put into these three widget positions.

NOTE: This theme offers two Showcase headers, the first is the Showcase 1 and the other Showcase 2. Showcase 1 is the original group of widgets and image that you see at the online demo web site or when you enable the Showcase from the settings.

This version is a lot easier to hopefully my tutorial here will give you enough information to take advantage of this group.

Enabling the Showcase 1 Header

When you first install this theme, you go to the theme’s settings control panel where you will see a variety of settings, one group which is separated for the Showcase group. Current configuration for the Showcase looks like this:


The first thing you will want to do is to make sure it’s enabled, so select the drop down to become “YES” and then click SAVE. The other settings are in reference to colour backgrounds, should you decide to have a different palette. For more information on changing colours and about HEX colour settings, you can visit the Theme Tutorial for Customizing Your Theme Colour Settings.

The only other setting here is to determine your Showcase height because by default, it’s set to 315px (pixels). If you decide to change it, you simply change the height value (keep the px in place) and click SAVE.

If all is well, you should now see a default setup of the Showcase 1 on your front page because it’s coded to only show there as it’s more of a front page display than inner pages.

The Tricky Part: Changing the Widget Heights

It’s time to go back to school for some basic arithmetic because if you want to maintain a quality Showcase layout, you want dimensions to line up and make sense visually. You should also take a look at the Showcase styles as well so you also get to play with some css here. The default styles for this Showcase group looks like this:

/* Showcase one style */
#scleft {width:610px; height:315px; float:left;}
#scright {width:350px; height:315px; float:left; background:#fff;}
.sc1, .sc2, .sc3 {height:83px; margin-top:3px; padding:10px; font-size:1em; line-height:1.2em; color:#4A4947;}
.sc1 {margin-top:0;}
.sc2 {}
.sc3 {}
#scright .scimage {float:left; margin:2px 15px 0 2px; padding:1px; border:1px solid #000; background:#fff; width:75px; height:50px;}

To some people the above code will look familiar, however, for others who never seen css code, it will look like a strange foreign language; in a sense, they will be right. So for those who are not familiar with it, here is a quick rundown of what each part does:

  • #scleft is the first half of the showcase…the part with the big image and makes a container that is 610 pixels wide and 315 pixels in height;
  • #scright is the second half where the container has the three widget positions showing in the demo…the width is 350 pixels, etc.
  • .sc1, sc2, sc3 is each widget container where each will go full width of that container it sits in (the #scright) so no width is needed, but it does give a height of 83 pixels. This is where it gets a bit more confusing…if the wrapper container (lets call it a box for now) has a padding (kind of like a space around the inside of the box), you have to subtract the padding dimension from the width, height, or both. In this case, we only have the height attribute. So to start, the original height is 105 pixels, but because the container has a padding of 10 pixels, this means inside the box, the top, right, bottom, and left will have a 10 pixels space where the contenent will go. This is so if you added text content, it won’t be touching right up on the edges of all sides, so I want some space there. So the original height was 105 pixels so I have to subtract 20 pixels off the height (105 – 10 for the top – 10 for the bottom = 85 pixels). The margin part means the “outside” of the box needs a space so it shows the background and separates the boxes…giving it a nice individual spacing of 3 pixels. If you look at the demo, it shows white space between the boxes, this is the margin space outside each box of 3 pixels.
  • .sc1 has a special margin so that the top of the box doesn’t have a white space like the others do and I wanted it nice and flush right up under the navigation bar.
  • .sc2 {} and .sc3 {} are blank incase anyone adds more styles to these other two boxes, like different heights.
  • #scright .scimage is the styling for any image thumbnail you put into your widget. All you do is put the thumbnail (which you have to make yourself) and it will automatically align the image to the left (hence float: left;) and adds some spacing around it with a border affect which has a white background and a black border (hence the colour: #000 (short version of #000000).

Hopefully all of the above made sense but if not, just take it one step at a time. The idea with this part of the tutorial is that if you decide to change the dimensions of the widget positions in the right side of the Showcase header group, you will have to edit the css code above.

Some More about Arithmetic

Remember, if you change the widget containers in height or other dimensions, you want to maintain a uniform dimension for the complete group, including the left side where the image is (or slideshow). With the default sizing of the Showcase group, it’s set to 315 pixels in height. Remember in the css details of the widget containers above where I said that each widget container (box) is styled to be 85 pixels in height? This is where the math comes in…

  • Height = 315 pixels
  • 3 equal height widget containers = 85 pixels each (remember it’s originally 105 pixels – 10 pixels – 10 pixels = 85 pixels
  • Widget margins (the space outside the box) = 3 pixels on the top of each widget container.

So if my height is 315 pixels and I have three widgets at 105 pixels (total) each without taking into account the padding and margin dimensions, it would look like this:

105 + 105 + 105 = 315 in height

But, if I want the padding space like I have in the default design setup, then I have to account for those dimensions if I want to maintain 315 pixels height:

  • 1st Widget height: 105 – 10 (top padding) – 10 (bottom padding) = 85 pixels
  • 2nd Widget height: 105 – 10 (top padding) – 10 (bottom padding)= 85 pixels
  • 3rd Widget height: 105 – 10 (top padding) – 10 (bottom padding)= 85 pixels

Basically whatever your height is, you want to ensure your three widgets (if you use all three) all total the height together.

TIP: When planning out your Showcase widgets, I find it best to do it on paper first and then edit the css and any other code.
TIP: When you have a specified height or width of a container element and you have padding inside, your css style should subtract that padding from the width and or height, otherwise you will end up with a bigger container element. This is also related to margins too.
TIP: When working with height and width, if you want spacing inside an element like a div container or table cell, this is called Padding. If you want spacing outside the element, this is called Margins.
IMPORTANT: Before you make any core file changes, ALWAYS keep a full backup of your theme just incase something doesn’t go right you can always revert back to the original.

Creating your Thumbnails for the Widgets

This theme does not have an auto thumbnail script for this Showcase group so you will need to create your own thumbnails. When you make them, upload them to your Media Library and copy the image path as you will need to paste that into your text widget as an html src …however, one of the special features of this new theme is that I added a custom Text and Image widget where you simply paste the image path into the image field (no html needed)….more on this in a moment.

The default image samples shown are 75 x 50 pixels.

Changing the Main Image Header

This is the larger image on the left side of the Showcase group and to change this for another image is very easy because there is an available HEADER function on the APPEARANCE admin panel.


The header manager will display the image as you see above and to change it, you use the Browse button to find your new photo on your computer and click Upload…once done, click SAVE and you should now see the new photo on the front page within the Showcase header group. Likewise, you can also remove the image by clicking on the “Remove Header Image” button.

By | 2010-09-25T01:58:02+00:00 September 25th, 2010|Blog|0 Comments

About the Author:

Leave a Reply