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 4 – Using Thesis 2 Standardized CSS Options

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now, what we’re going to do is add Thesis 2 Standardized CSS Options to a package and we’re going to start that process off by looking at the Thesis CSS API file. The Thesis CSS API file is right here, it’s under lib, core, api, css_api and what it does is it simplifies the process of creating options and referencing options and it does for the majority the options that you might use. It doesn’t do it for all of them so you’re going to see that we’re going to create some of our own custom options.

Different Custom Options Available

For example, it’s got an option set up for font and if you use the option for font, it’s going to have font-family, font-size, line-height, font-weight, font-style, font-variant, all those things are all going to be automatically included and all of the correct options will be included with it. Then color is another one and background and if you use background, it’s going to get background-color, background-image, background-position, attachment and repeat automatically so it’s got width, box-sizing, float, margin.

If you do margin, it’s got all the other margins and padding and it’s got all the other paddings and border and it’s got a variety of border settings like width, style, color, links, links-hovered, links-visited, links-active, lists and typography. These are the options that Thesis has already predefined whose definitions you can just tap into and it makes writing a package with these options very simple because you don’t have to specify all kinds of additional stuff.

Package Font Settings

An example of that is in the Thesis basic package. In the single element styles package, it’s got that setting for font and all of the font settings are encompassed in this one little line here, ‘font’ equals $thesis->api->css->options; [‘font’]. You can tap into the API CSS Options with this expression so options or o for short, $o = $thesis->api->css->options; and then all you have to do is say, the font is equal to $o[‘font’], color is equal to $o [‘color’], background is equal to $o[‘background’] and you have lots and lots and lots of options without having to write lots and lots and lots of code because all the codes are already written for you.

We are going to take a crack at that here. We’re going to create a new package so we’ll take this options sample package and trbm_thesis_options_sample_package and we’re going to say ‘Sample Package with Thesis Options’. Now, instead of doing this, we’re going to go ahead and add a border and background so we’re going to just go ahead and get rid of that options array and come back over to our package and really, we’re just going to copy this from the single element styles package and paste it here.

Add Background and Border

Now, the only thing we’re going to do is background and border so we’re not going to do margin, padding, typography and any of the rest of that stuff. Our options are going to return a background and a border and now we have a new way of accessing this stuff in CSS, we’re accessing this via CSS. If we take a look at how Thesis does it in the same package, you can see that Thesis sets up an empty array called $e, I don’t have any idea why it used $e, it could be fishsticks here without adversely affecting this but it sets up an array that’s empty and then takes the options, sanitizes them and puts them into this $e array then once that $e array is done, it iterates to that $e array and creates the CSS by going through this $e array.

What we’re going to do here is just going to copy all of this CSS for a second and we’re going to come over to this and we’re not going to use any of our old code for this, we’re going to paste that. Now, the only thing we’re working on here though is background and border so we can come down here actually and delete everything that’s not associated with out background or our border which is essentially all of that.

Using Color in CSS

Now, what we have is this system where we’ve specified an empty array and to this array, we’ve tested background color. We’ve said that this array background color is going to $e be equal to then it’s checking if background color is empty and if background color is not empty, then it’s going to make $e [‘bg-color’] equal to “background-color: {$this->colors[‘background-color’]};”. Now, you may have noticed that there’s a difference between $this->colors and $this->options. These are all options and so why is there such a thing as $this->colors then?

Well, the thing is that Thesis has this helper for you which automatically sanitizes the color value that somebody enters so when they click on a color field, they get the little color picker and if they type a color in like white or if they enter a number without a hash mark or if they enter a color that doesn’t exist, it sanitizes all that stuff for you and then returns it to you in the correct format.

Essentially, $this->colors is a filter of this $this->options that applies specifically to a color setting. This actually makes choosing a color and using a color in CSS quite a bit easier because all of the data validation and sanitization is handled for you inside of Thesis. So we’re going to say, back to background color so if the variable of background color isn’t empty, then we’re going to say background-color equals that background color.

If it is empty, we’re going to say, ‘bg-color’=false then we’ll come down to the same thing for background image so we’re going to test if there is an entry in background image and if there is an entry in background image then we’re going to create a background image url. What Thesis does is it has this little api->esc which is its method of sanitizing the URL so it protects your webpage from being hacked by requiring a valid URL and by escaping anything that’s not a valid URL when it outputs this stuff.

Generating a Valid Position for the Background Image

Here we’ve got a background image URL and then this $thesis->api->esc is filtering the background-image URL that was entered and similar kind of thing is true for background position. Background position is also being sanitized so that a valid position is being generated and then background-attachment and background-repeat. Now, in the case that there is no background image, then what it ends up doing is returning false.

Here we’ve got one array element that could be returning false, another array element that could be returning false then we come down to border-width. Now, this border-width though does some sanitization on the number. It makes sure that we’re using a numeral in this case rather than say, something else so in the first place, malicious code couldn’t be inadvertently inserted in here as theoretically a number because this forces it into being a number.

Again, we’re sanitizing our data before we use it and if there is no border-width that’s specified, then false gets returned. The reason why I’m pointing this out is because now, we get down to our array and what our array does is it cycles through bg-color, bg-image, bg-position, bg-attachment, bg-repeat, width, style and color. It cycles through each one of those things and then it tests whether or not it’s false and if it’s false, it just skips on to the next one and if it’s not false, then what it does is take this information that’s stored in that array element and writes it as a piece of CSS.

Writing a CSS Rule for the Setting Value

What it does is it returns this selector and then implodes this array for each $e element and wraps them in opening and closing brackets. This is a nice, fast way of determining whether or not a setting has a value and if the setting has a value, then write a CSS rule but if the setting doesn’t have a value, then you’re not going to write a CSS rule. If we look up at our earlier one up here, in this case, if the border-width doesn’t a value, it says the border-width is equal to 0, so then what it does is it says border: 0px solid red.

Well, what you really want is if there’s no value up here, then you don’t even want this border definition, that should just not be there, period rather than saying, border: 0, it should have no border definition whatsoever and that’s what this array does. This array tests whether or not the option has a value and if the option doesn’t have a value, it doesn’t write any CSS for that option and if the option does have a value then it writes the whole CSS for that option.

Using Construct to Define an Array

We’re going to be using this construct where you define an array and then you test the value of options and then in the case of a value then, place some specific code in that array element and then cycle through the array elements and if they’ve got something then write something. We’re going to use that construct quite a bit. That’s what’s happening here right now, we’ve got our thing here, ‘Sample Package with Thesis Options’.

It’s going to have a background and a border so we’re checking for our background and we’re checking for our border and if either of those two things are there, then we write some relevant CSS. So let’s go ahead and save this one and let’s add this to our skin file then we’ll upload it, I also need to upload the skin file too then we’ll come over to the skin editor and refresh this, come over to CSS and we should have a new package.

Now, we’ve got ‘Sample Package with Thesis Options’, add the package, we’ll just call it Sample Thesis Options. Again, we’ll add this to the post box, come over to our options, we’ve got our background, we’ll go ahead and give it a background color of yellow and we’ll come down to our border and we’ll give it a border width of 2, a border style of dotted and a border color of green and hit save.

Instead of &sample_options, we’ll use &sample_thesis_options and there we have it. We’ve got our styles that have been applied to this option based on those options that we set. If we save the CSS and we refresh the regular page, it’s going to show up there too.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment