Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 9 – Part 5 – Add Custom CSS Options to the Package

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Adding Attention Box Styles

The next thing we’re going to do is start creating a package. We’re going to start off by copying this package and just like the last one, it’s going for refinement but now we’re going to call this one trbm_attention_box_package and we’ll just call this ‘Attention Box Styles’ and then we’re going to take the background and the border and we’re going to add to that border radius and box shadow.

We’re going to start off with border radius. I think we’ll just actually come up here and copy this thing because we’ve got our background and our border, now, we’re going to add one more option. It’s not border-width, it’s border-radius and we’re not going to call it border-radius, we’ll call corner-radius here, ‘Enter the desired radius for the corners of the container. Numerals only’. So we’ve got the Thesis options background, the Thesis options border then our own custom border-radius then what we’re going to do is come down here and add the border-radius to this array.

Add Border Radius Using Border Width

Now, the easiest way for us to add that border radius to the array is since it’s a number, we should use border-width as an example and we’re just going to come along and copy border-width and put it at the bottom but instead of border-width, it’s border-radius and instead of bw, let’s make that br. So $thesis->api->css->number($this->options[‘border-radius’] $this->options[‘border-radius’] and then it’s going to be border-radius and then br.

What will happen is, this number is going to come back with a px added to it and it should all be properly formatted here so I think that’s really all we have to do, is we just add this and then create another element inside the array where we test for it and sanitize it so let’s save that. We do need to add this to our skin as well, trbm_attention_box_package to the skin file and then upload both of those, come back over here and refresh this.

Now we have our attention box styles so we’re going to grab that, add the package, we’ll call it Attention Box and now in the selector, I’m going to actually give it a class of .attention. So we’re going to make this only apply to something that’s wrapped with a class of attention. Then we come over to our options and we’ll say that our background color should be this light gray, our border width will be 3 pixels, the border style will be solid, the border color will be a yellow, let’s make it 4 pixels so we can see and a corner radius of 20 pixels. Let’s go ahead and save that and save our CSS.

Adding a Box Shadow

Now, I have I think, is it Finish Products? Where did I put this? Actually, the first thing we’re going to do is get rid of, oh, we haven’t added it to our thing, that’s right. So instead of $sample_thesis_options, we’re just going to say &attention_box. I’m amazed at how often I forget that. Let’s just add

okay. Now if we view the page, we not currently have an attention box wrapped around it so let’s look and see what happened to CSS.

I did it wrong, attention_box. Now, that’s right and so now, we’ve given it a yellow border around the outside of it and a gray background so we’ve come up with that style there. Once we have this fairly simple custom option, now we’re going to add a bit more complex custom option to this and what we’re going to do is add the box shadow. If we come down here to this and say ‘box-shadow’, you’ll probably remember that our box shadow had a horizontal position of vertical position, a blur and a color so we need to add those things to this.

What we’re going to do is we’re going to create this as a group so rather than having them each individually in a row, we’re going to have a group for box-shadow and we’ll use fields to add fields to it. So the box-shadow type is going to be equal to group and the label is going to be Drop Shadow then the next thing we do is add fields and ‘fields’=> array and now we put our fields in just like we did options before.

I want to show an example of this in package.php and it is in the input package so nav menu, package, columns, comments, input. So here’s an example of the way this thing lays out. So you’ve got your in our case, this is drop shadow. You’ve got the name of the option and the ‘type’ => ‘group’ and the ‘label’ and then you’ve got ‘fields’. The ‘fields’ end up having the same set of settings that you would have if the type wasn’t group.

Shadow Horizontal and Vertical Offset

For example, in this case, we’re going to have our horizontal, vertical, blur and color. In this case then, ‘fields’ will be equal to ‘horizontal’ => array and then for a moment, we’ll just come down to ‘vertical’ => array then ‘blur’ => array and then finally, ‘color’. For color, what we’re going to do is use the Thesis default so we’re going to say, $o[‘color’]. Now, horizontal, the type will be ‘type’ => ‘text’, and the ‘label’ will be equal to ‘Shadow Horizontal Offset’, ‘trbm’ and then we should give people a tooltip here so they understand what that means, ‘tooltip’ and this is ‘Negative values offset to left, positive values offset to right’.

We need a width too so ‘width’ => ‘short’. Now, I’m going to take this block of stuff, copy it and paste it here for vertical as well and it’s going to be ‘Shadow Vertical Offset’ and ‘Negative values offset upward, positive values offset downward’. Then blur, we’ll copy it again and there’s no such thing as negative blur, we’re actually just going to go ahead and remove that ‘tooltip’, we don’t need a tooltip there and we don’t need to put anything in color because color is going to automatically add its stuff.

We now I think have our options completed, let’s take a look at them for a second. Let’s go over and look at the options, look at our CSS and our Attention Box. Options, we’ve got background, border but we do not have our border radius so what did I do wrong here? We’ve got background and border and we should have border-radius and box-shadow. Maybe I just failed to upload this, let’s refresh it again and then come over to CSS, come down to our Attention Box and look at it.

Nope, what am I doing wrong? I’m doing something wrong here. I spelled group with a capital G, that’s what it was. It doesn’t recognize it if you misspell its name. There it is, so now you’ve got this drop-shadow group. This is what the group does, is it creates this drop down here so now you’ve got the horizontal offset, the vertical offset. I need to change the name of this though to blur. That’s not right either, text color, I don’t want the name text color there so let’s just go in and futz around with this for just a second, look at the CSS API for just a moment. It’s not text color, right? No, it does come out and say text color so I guess we’re not going to use color here, we’re just going to do this ourselves.

Adding a Shadow Blur

First, blur is going to be ‘Shadow Blur’ and color is going to be array, first element of the array is ‘type’ => ‘color’, ‘label’ => (‘Shadow Color’,) internationalize it. So we’ve got our color, our blur, our vertical, our horizontal, we can save that, upload it, come back over and refresh our editor, go to CSS, come back down to Attention Box, open it up and now, under drop shadow, we’ve got shadow horizontal offset, shadow vertical offset, shadow blur and shadow color.

Now, when you click on the shadow color, that color comes up here. Let’s say we do that and our shadow blur, let’s call it 5, 5, 5, just for grins and hit save. Now, we’ll come on over and take this stuff and use it because currently, we aren’t using this information. Currently, we’re capturing it but down here, we’re not using it. The way we use this is first off, we want to make sure that the horizontal offset is not empty because if the horizontal is empty then we’re not going to do anything.

So what we’re going to do is take this so if not empty, horizontal then we’re going to do this stuff and so if horizontal is not empty then we’re going to say, e and now, we’re just going to call this shadow or am I using shadow someplace else? No, okay e[‘shadow’] equals and remember that horizontal and vertical are numbers so we’re going to use this number method or this number function or whatever you want to call it, statement here.

The horizontal offset, $ho = $thesis->api number and we’re going to copy horizontal here so it’s going to check for horizontal. Actually, what we’re going to do here first is do something above it. We’re going to initialize the value of this array element by saying ‘border-radius: that so e[‘shadow’] = ‘border-radius: and then the e[‘shadow’] plus equals then and it’s going to be horizontal offset, this horizontal and all you really need here is this, the value of the variable horizontal offset and otherwise, it’s going to be false.

So why am I getting something funny about this? What am I missing here? Okay, e[ ‘shadow’] = “border-radius:{“; it’s the dollar sign, that’s what’s missing. It’s not e, it’s $e okay so we’ve got our border-radius then we’re going to do exactly the same thing, copy for vertical offset and blur and that’ll be $vo and $blur and take vertical, $vo and grab the $blur. So what we’ve done now is we’ve just made sure we put numbers in here and added the px to those numbers with this stuff. We essentially conditioned our numbers and now we just need to add our color.

We’re going to add our color essentially the same way we did here, we’re going to take that color. Actually, what we’ll do is we’ll take this first and $e[‘shadow’] plus equals and then we’re going to grab the color so if not empty, color so if not empty $this->colors. I think I’m going to change this to ‘shadow-color’ just to make sure I don’t have any option naming problems so ‘shadow-color’ and ‘shadow-color’ ‘shadow-color’, ($this->colors[‘shadow-color’]) and let’s see, I don’t really need that there nor this.

So if the color is not empty then we’re going to put the color in and after we put the color in, we want to close out this up here so we will open that semi colon and closing bracket and if the color is empty, then rather than saying false here, what we’re going to say is space hash mark and I’m just going to make it 888, semi colon. So, if somebody specifies a horizontal width but nothing else, then it’ll get a horizontal and a vertical offset of 5 pixels, it’ll get a blur of 5 pixels because that stuff happens automatically and then we’re going to write the shadow color as 888.

It’s not border-radius though is it, it is “box-shadow”. If they don’t put a horizontal value in, then nothing happens for box-shadow no matter what else they put in but if they put a horizontal value in and nothing else in, then the horizontal value and this gray color get used otherwise, nothing gets used. Let’s go ahead and save this and let’s upload it and let’s save the CSS and let’s see what happens.

I think I failed, let’s just come over here for a second again, options, drop shadow, 5, 5, shadow color, let’s make it red, save, save. I think we have a syntax error so let’s see what that looks like, let’s refresh the CSS file and see where I made the mistake, attention background-color, border-width, border-style, border-color, border-radius, box-shadow, it’s the semicolons here, I need to get rid of those semicolons because I only need the final semicolon but I need a space there.

Let me just look at this for a second. I did, look at that, I left that semicolon in place. Take out that semicolon, take out this semicolon. That should be fine there like that though. No, it’s not fine, we can delete this one but we better put a space after that blur. That’s not going to do it either though really so what we really want to do is come over to this then, we’ll put a space in before the thing and then the color and that.

Did I fail to upload this, I guess I did. Well, I still have an error obviously so box shadow 5px, 5px, 5px. Oh no, I don’t want to wrap this thing in those, that’s it. I’ve got these brackets I don’t want in there as well. So we come back over to here and that was the mistake, get rid of that and that and that. Got to have an eye for syntax errors sometimes. Okay, there we go. So now we have created the ability to specify a border, a border radius, a drop shadow. Let’s just double check that the negative box shadow works so minus 5, minus 5. Yes, it does.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment