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 7 – Combine the Sample Package with the Single Element Style Package

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now, really what you want to do is add some padding and margin and other things to this as well. By the time you get to this point, what is really easy to do is to just you know, I went to this process of showing you how to gradually add stuff into it because I thought it would be instructive to see how this stuff gets gradually added into it but really, the way you would do this would be to take this set up package already. Go back up to our main big package and then just add stuff to it rather than sort of piece mealing it like we’ve been doing.

If we come back up to this, this thesis_basic_package, we’ll copy that, come back over to package and we’ll call this trbm_extended_single_element_style and then ‘Single Element Styles Extended’ then we’ll let this stuff sit just like that except we’re going to add to it border radius, box shadow, height, width and float and we already got width in here once so we’ll take it out so our font-color, background, box-sizing, border, margin, padding.

Actually, I think I’m going to take box-sizing out here too and move it down to height, width, box-sizing and float. We just kind of reorganize it so let’s add this one to our skin list, we’ll upload them both, come over to our Skin Editor and refresh it for a second, go to CSS and we should now have a ‘Single Element Styles Extended’. Now, I’m going to delete this Attention Box and create a new one and we’ll give it .attention.

Customize Package Options

Now, under Options we’ve got all kinds of stuff going on here, we’ve got all the different fonts we can set up. We know that we set our width to 300 pixels wide, we’ll set our typography at 300 pixels wide, we’ll set a border radius at 20, we’ll give a drop shadow at 7 and 5 and 8 and very light gray. We’ll do a background color of an even lighter gray, let’s change our font to Verdana and let’s make that font color deep blue and let’s float it to the right, hit save, save our CSS.

This should not do anything because we’re missing some of the pieces, I mean it does something but it doesn’t automatically make it float yet, we also need padding and margin in there too. But if we come over to our package, php, now we can come back up to here and grab the, isn’t that crazy? I inadvertently put width, height and float inside of the if the options has a horizontal value, I shouldn’t have done that but we’ll grab border-radius on down, come back down to this then we’re going to take width, height and float out.

We don’t need width anymore because width is already governed above but we do need float. I think that is everything we need there so we’ll save that and upload the package, save our CSS, refresh it, there we go. So now it does jump over there, we could give ourselves a bit of padding and margin so if we come back over to our Attention Box, we could give ourselves padding of 10 pixels all the way around and we could give ourself some left margin of 20 pixels, maybe some bottom margin of 20 pixels and hit save, save our CSS again and we’ve got something that we can use for styling.

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