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 2 – Introduction to Thesis Package Class

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to take a look at is just an introduction to the Thesis package class. Now, you probably remember our introduction to the Thesis Box class back in Lesson 5 and the packages have some pretty significant similarities to boxes and so we’re going to start off just like we did with that last time. We’re going to open up the Thesis’ package.php file which can be found under css.

Specify a Selector for the Single Element Styles Package

We’re just going to scroll down here to the very first package, thesis basic package which is that single element styles package that you’re familiar with and use it as an example. In fact, when we create our first package we will be copying this. Now, at an absolute minimum, when you are creating a package, obviously you’re going to be extending the Thesis package and you’ll have a public selector.

Now, if you don’t need to specify a selector you can put in body or you can make it blank but nevertheless, we’re still going to declare a public variable called selector. We’re going to need to have the translate function because this is what gives us the name of our package and then options isn’t absolutely necessary for the package but the CSS method is.

What is a CSS Method?

The CSS method is where the CSS is captured by Thesis and then written into the css.css file. So you’re absolute minimum elements of a Thesis package are the public selector definition, a translate method and a CSS method. We’re going to just create our very first one following that model.

We’ll start down here inside of our lesson_9_responsive_blue_masters root and we’re going to create a new php file and we’re going to call it package. It has to be named package, the name box and package for these files is critical. If you name it packages or mypackages or something like that, it’s going to fail so the name package is critical. Then what we’re going to do is come back over to this package and we’re just going to copy this single element style package or the Thesis package basic and use it as the basis for doing this and we’ll paste that here.

Using a Unique Identifier to Name a Package

Now, we’re going to change the name so we’re going to use our unique identifier which in this case, is trbm, Thesis Responsive Blue Masters and then sample_package extends thesis_package. Now, in this example, we’re not going to use any options so we’ll delete all of those options but we will use CSS however, I think we’re going to delete almost everything here. What we’ll do here is we’re going to add a border radius and a drop shadow here and we’re going to just start off by hard coding that.

Our public $selector, we’ll just go ahead and leave it as ‘body’, our title is going to be different now. Our title, we’re just going to call this one ‘Sample Package’ and the text domain is our unique identifier so ‘trbm’. Now, this is going to return some CSS so we’re going to return this selector which is whatever somebody puts in as the selector. We’ll return $this->selector and we’re just going to hard code this stuff.

Customize Options for the Package

We’ll say, {border:2px solid red; and then border-radius:5px; and then finally, we’re going to create a drop shadow and in this case, we’ll use a box-shadow: and we’ll say 5px for the horizontal, 5px for the vertical, 5px for the spread and #c8c8c8 for our color. So we’ve got a border, a border-radius and our box-shadow set up here. Somebody who is paying attention to this and knows how the stuff works realizes that we also need the Mozilla box shadow.

In that case, we will say moz-box-shadow and regular box-shadow. I think border radius is already, let’s just double check that actually. I’m not sure border radius is supported entirely by everything or not, let’s just go to w3schools, see what they say about the border radius. So border radius is supported by everybody, well actually, this is showing moz-border-radius. I guess that’s just for older versions of Firefox though so we won’t use moz-border-radius or webkit or opera because it does look like everything use border radius so maybe everything uses box-shadow too.

Anyway, come back over to our code, we’ve hardcoded this. What’s happening here is that Thesis grabs whatever selector the user places in the package and then grabs the CSS and writes the CSS to the css.css file. So we’re just going to save this, site manager and make sure we are in the right one here, Lesson 9 and come down to our lesson_9_responsive_blue_masters and actually, we’re going to delete this because we don’t need it anymore and then we’re going to take package, skin, box and scripts and we’ll upload that and then come back over to our site.

Using Function Boxes

Let’s go to the front page edit, come over to CSS and we should have a brand new package here. We don’t currently and that’s because we haven’t used the valet method in the skin.php file to add this yet. I also want to get rid of this for just a second though, boxes, select boxes and turn off this stuff. In fact, for the time being I think I’m going to delete these boxes, back to the skin editor.

So if we open up our skin.php file just like we have these function boxes, we need the function packages and it’s name packages, just like that. Then we need to place our package class in that so trbm_sample_package. It needs to go in our in skin file so function packages return array( ‘trbm_sample_package’); we’ll upload our skin file and now that should be there. Let’s just refresh this real quickly, come over to CSS.

I’m not quite sure why this Flex Nav Responsive Menu Style is still here but be that as it may, we’ve got our sample package now, it’s available and if we hit add package you can see there are no options here but we can give it a name so we’ll give it a name of Test and we can give it a reference. For the time being,let’s just call it sample box, sample_box and I’m going to make it just for grins, I’m going to put it on post box as the CSS Selector, save that, we’ll come down here and we’ll add it to our CSS.

Now, if we take a look at our canvass, here we assign it to the post box and so now, we’ve got the red border with a 5 pixel border radius and this drop shadow color automatically added to this and that’s what our sample box does. So we create our sample box, it automatically adds that specific code, we added it to this selector and now it does what we want it to do. So that’s it on its easiest level.

We have done the absolute minimum sort of the Hello World of packages here. We have declared the public selector, we’ve given it a title and we’ve given it a little bit of code to write and it automatically happens. So now, the next thing we’re going to do is refine this.

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