Home
Videos uploaded by user “thesistoolbox”
How to Add Rounded Corners, Background Colors and Drop Shadow to a Widget in the Thesis Theme
 
07:00
http://www.thesistoolbox.com This is the introductory video to our totally cool Thesis Widget Styles plugin. This plugin will allow you to do something simple or very complex with your widget styles. Essentially, anything you want to do with a widget in terms of the styling can be done using our Widget Styles plugin. Review the Elements of a Thesis Widget To begin with you need to understand that there are conceptually 3 parts of a widget. Part one is the overall widget which is the container for the widget itself. Part two is the widget heading. This is represented in the widget by the title that you type in when you create the widget. Part three is the widget body. The body contains text or whatever you place in there such as links or a video. How the Thesis Widget Styles Plugins Works You've got those 3 parts, the overall widget, the heading, and the body. And this Thesis Widget Styles plugin divides up the functionality that way. Let's open up the plugin and the very first thing you do is select the number of styles that you want to use or create. You can begin with just one or two and then add more over time as is necessary. Currently, you can create up to 10 different styles with this plugin. Create Your First Widget Styles with the Thesis Widget Styles Plugins We'll begin by creating 2 widget styles. Once you've selected the number you want, then you hit the save button and two styles settings will appear. The default Thesis widget looks like this and in this case it's a text widget. It's got a title in the heading and some text in the body. When you are deciding what kind of changes you want to make you are deciding what of this default styling you want to change. What You Can Style in the Widget Again, the styling you will apply is divided up into those 3 broad categories -- the overall widget, the widget heading, and the widget body. You can essentially style the same things for each of those 3 elements. That is for each of those three elements, you can customize their backgrounds with a color, an image or a gradient. You can customize their borders. You can add drop shadows and add rounded corners. You can add padding for inside the element and margin for the outside. Creating a First Style in the Widget Let's begin by making changes to Style 1 by adding styling to the Overall Widget. Go back to the Thesis Widgets Styling plugin if you aren't already there. Place a check mark in each of the areas you are going to customize. Right now, let's select the widget background and background color. Then select drop shadow and rounded corners. Let's hold the changes to that for the moment. After you select the things you want to customize you hit save. So, hit save. Once you've done that, you'll be given all the options available for those settings. Before, there weren't any other options below this. But now the option boxes for everything we checked show up here. Let's review what's available now. For the background color, you can pick a background color in the color picker or if you know the color you want you can add its number here. Let's pick a really light yellow here. In the drop shadow, we can specify the width, the blur, and the color of that shadow. Let's make the shadow 5 pixels wide, with 5 pixels of blur, and choose a very light grey color. Finally, for rounded corners we'll add a 10-pixel radius. Review our First Style in the Widget We'll hit save now and then go back to our page with the widgets and refresh it. Look, nothing happened. And the reason is that you have one thing left to do before the style is applied. First, you decided on changes then you applied those changes but you have yet to decide to apply those changes to a specific widget. Open up your Widgets under Appearance. If you already had them open, you'll need to refresh in order to see the new styles. Let's go to widget block 2, widget column 1 which we have been looking at throughout the video. If you expand the widget, you can see that the Thesis Widget Styles plugin creates this drop down at the bottom saying "Select a Style". Unless you set it to a specific style, it automatically takes the Thesis default styling. Let's apply style 1 to this widget. We'll hit save and return to the page with the widget and look at it again. You can see that style 1 is now applied to this widget. It has a light yellow color, you can see the rounded corners from the 10-pixel radius and the drop shadow. There are still changes that we want to make to the styling, particularly with padding and margin, and we'll be picking that up in the next video.
Views: 1894 thesistoolbox
Add Rounded Corners and Drop Shadow to the Menu using Thesis Nav Plugin
 
05:23
http://thesistoolbox.com Video Transcript And what we're going to do now is work on adding rounded corners and looking at other ways in which the menu can be styled. So we're going to start that off by talking about the 2 different ways rounded corners can be added. The one way and this is probably the preferred way, I mean, this is the way that I'm going to show you that I would use in this situation where you've got a menu bar that you want to spend essentially the entire width of the page and where you want the round corners over here and round corners over there. What I would do is apply the rounded corners to the menu, overall menu element itself and not to the individual menu items. Now what that means is that we need to move these menu items away from the ends of the menu then. This one already is because the menu's a little bit longer than the menu items are. But this one is butted right up against the edge and so rounded corners would be hidden by this. So what we're going to do is we're going to reduce the width of these menu items a little bit and then we're going to add padding on the left hand side here. That'll give us a chance to add rounded corners. So that's the first thing we're going to do. So we come over to our navigation menu form here and the first thing to do is look at our typical menu item height and width. Right now, we have a typical menu item width of 110 pixels and we have 1,2,3,4,5,6,7 menu elements. So we need probably at least 5 pixels over here and we've got probably, we've got more than 5 there. I suppose we could probably just reduce this by 1. Well, we'll reduce it by 2 and we'll see how that works. So instead of 110, we'll make it 108 and then come up to our overall menu styles and we're going to give ourselves a little bit of left padding. So looking at our overall menu padding, we'll select that option and hit save. And because of this progressive refinement that we use in this plugin, because we've selected overall menu padding, we're going to have the opportunity to adjust that padding here in a second. Save. And then in our overall menu padding, we're just going to add some left padding. So let's give ourselves 10 pixels to the left and hit save again. And come over here and refresh this. Now when you hover, you can see those 10 pixels sitting there, right there on that edge. We come over here, we've got a little bit more than 10 you know, maybe that's 15 so if we just add say, another couple of pixels over here to that padding, we're probably going to be good. We'll go from 10 to 12. And then while we're at it, we're also going to go ahead and add corners. So we go to our overall item styles and we say configure rounded corners and hit save. And then in terms of our rounded corners, we now have that options dialogue that shows here and I think that we'll do is we'll give it a 10-pixel radius on those corners. Let's see that that looks like. Come over here and refresh this. Okay, there we go. So now we've got... yeah, actually that looks pretty good. So each one of these things is the same width that is, each of these menu items is the same width and then the end has the rounded corner that never changes as a hover. One of the nice things about this is that we don't end up with a border transition that happens when you've got a rounded corner and then a border only on the bottom. It transitions into no border kind of funny right in there. So you don't have that issue with this. Okay so there we go. There are rounded corners there. Now we could also add a drop shadow to this. So we come back over to our overall menu styles and again, we're adding a drop shadow to the overall menu, not the individual menu items. So we configure the drop shadow, we hit save and then overall drop shadow width, let's call it 5 pixels. We'll give the blue 5 pixels and let's say our drop shadow color is... well, let's just pick a color there and hit save again and refresh this. Okay and there we go. Now we've got our little drop shadow here. Maybe that's a little too light actually, now that I see that. So let's try that one there and refresh it. There we go. Now we've got a nice drop shadow with this thing hover over the top of it. That's one way of doing this.
Views: 960 thesistoolbox
Float a Widget Area in a Page using Thesis Shortcode Content Widgets Plugin
 
04:48
http://www.thesistoolbox.com/ Video Transcript: And so what we're going to do here is right now, the sidebar or the widget area comes up here at the top, right? But what I really want to do is I want to sit right over here on the side. And so the way you make that work is in widget block 2 settings, under block dimensions, I'm going to give it a height of 300 pixels and I'm going to give it a width of 200 pixels. And then because I've given it a width, I want to tell it whether or not I want it to float to the left hand side or to the right hand side of content area. I'm going to float it off to the right here. If we go ahead and hit save now and come back over and take a look at it, okay so there we go. We've got this thing sitting here off on the right hand side. Now we'll come over to widgets and we're going to go ahead and place the pages in that one as well, just so that we can... let's see, let's close this up and close that up. Open that one and let's just drag pages into that. Okay so now it shows up here on the side. Although, things are getting pretty close, right? And so what we really want to do is give ourselves a little bit of room here. And now that we've given it a dimension, a height and a width, and we've given it a float, a left and a right, now we can come along and set some margins. And so let's say we want a 20 pixel margin on the bottom... let's make it 40 pixels on the bottom. And let's say on the left hand side, we want 20 pixels. We'll go ahead and hit save and refresh. And now you can see stuff is set off. I think maybe 20 pixels isn't quite enough so we're going to come over here and add more to block margins. Oh okay, let's see... I must have... did I change the block margins for one? That's what I did and of course, we don't want those there. Yeah, save that. You don't want to set those... if you don't set a width, if you leave the block width blank, what it does is it fills up all the available space which is probably what you want to use an awful lot. However, when you set a width then you can start using these margins. You wouldn't want to use a left or a right margin generally, if you haven't specified a width because you want it to take up the whole space. So anyway, we're going to put 40 pixels on the bottom and 20 pixels on the left and hit save. Refresh this... yeah okay, we still need more of that. Let's see, block margins... okay so we don't have it in block 1 settings now. We come down here to block 2 settings and we go to block margins and we'll hit the bottom margin as 40 and the left margin as 49. Hit save. Now, if I've screwed up my code... oh look at that. You're probably right. What the heck! Gosh, oh that is comedy. Okay so I didn't have an error in my code. I just had an error with my execution. Okay, well thank you for pointing that out. I appreciate that because I would have worked to try and figure it out and then I would have said, "Well shoot! Now I can't repeat the problem..." And so, thank you Cindy. Cindy: You're welcome. Okay let's see, so Jared...
Views: 396 thesistoolbox
Adding tiled Background Images to the Header and Footer
 
05:34
http://thesistoolbox.com Video TranscriptNow the next thing I'm going to do is change it up for the header area. So if we come back over here and grab this background image again and then come over to the header area background image and paste that image here... but instead of project paper, let's go ahead and use the darker one which was inflicted. And we need to make sure that it repeats in the x and y direction. We hit save. So now we've got you know, these 2 different things. If you want to make a finer line between the two, we can add that shadow to the bottom. So we come down to the top border drop shadow and bottom border shadow is the one so if we say... pick 4 pixels as our drop shadow. Refresh that and refresh that. Now, we have a nice, little drop shadow happening there. And interestingly, oh that's right because I wanted to get rid of the white here. I forgot what I was doing there for just a second. And so if we want to get rid of that page color and make it... essentially make it transparent, we can go ahead and select that, making it transparent and refresh this. And now, we end up with you know, this strong header across here. Let's make this a light grey, switching to blue. So come over to our design options and under our header, instead of the black, we click the light grey and hit save. Now, we have a nice, crisp look. And we can do the same thing with this footer widgets plugin. We can take that dark color and we could fill blue with that dark color. And we can also swap out this nav menu so it doesn't have to clash with it. Let's take a quick swipe at that. Go back to our full width backgrounds and let's take this header area background image again and just copy it. And go down to our footer area background image and paste it or repeat it next in the y direction. Hit save and we'll come over here and take a look like what looks like grey quick before we get too far down the road. First thing I want to do is get rid of this white and then I want to get rid of the blue and then I wanted the rest of this stuff to stay there. So I'm going to get rid of the white by turning off the page background. So footer area page, we're just going to make that background transparent and hit save. We come over here and refresh this. And now, that footer goes all the way across and then I want to get rid of this blue. And in fact, I think what I'm going to do, instead of this blue, I'm going to put a very light white, a semi-transparent image over this. But first, we'll get rid of the blue and see what it look like and that's inside the footer widgets itself. And under our row background style background color... oh actually, if I uncheck that, I bet you that solves the problem because then it take the background color out of it. Yeah so that does solve the problem. In fact, it allows me to have a cool, little thing down there if that's what I want. So that's basically what I wanted to show you. I just wanted to show you an example of using these you know, cool patterns and there are lots and lots and lots of different patterns in here and just about anything you may want to do, I'm guessing, you can find. Rubber grip, that's a little intense. And so you flip through these things and just select download, you get the image and then you can come to the plugin and insert that image and you can end up with some you know, fairly cool effects.
Views: 1554 thesistoolbox
Using a single non-repeating background image
 
05:36
http://thesistoolbox.com Video TranscriptLet's see, the first thing we're going to do then is we're going to layer background images using the BYOB Thesis Full Width Backgrounds plugin. And what's going to happen is we're going to have a great, big background image that will cover the whole background and then we're going to have a background image for the header area and a background image for the page area and then a background image for the footer area. So we have background images either laying on top of each other or stacked top to bottom. And we're going to start that here, right? So here's my big background image and then this is the background that will be in the header and the footer. And this is the background image that will be in the content area so the content area is going to end up with a nice, white background to it. This concept can easily be used to, for example, put a colored background and a sidebar and make sure that colored background goes from the top of the page to the bottom of the page. Most typical CSS solutions to adding a colored sidebar end up having that sidebar not have its color extend all the way to the bottom of the page because pages can be longer than the sidebars. But you can also use this concept to do that and I might even... probably won't do that today but I'll also show you how to just add a background color to a sidebar using the same system. But these are the 3 images that we're going to use and now what we're going to do is we'll come back over to the dashboard on this site. And I've got my full width backgrounds plugin already installed and now, what we're going to do is we're going to customize the body, the header area, the content area, and the footer area. So we're going to do all of those. And the first thing we're going to do is put the body background styling. Now, what we need is the location of that so we will grab... start with this and then we'll go back to Filezilla and we'll copy the WP Content. Okay, come on, just let me copy part of it. WP content, themes, Thesis 182, custom and images. And then slash and then the name of that image was sean-bg.jpg. Okay so now we've got the image there. I'm going to actually just going to stop right there, hit save and we'll take a look at the result. It's not going to be exactly what we want but I wanted you to see what we have to adjust in order to make it work the way we want it to work. Well, it certainly is not exactly what we want. Background image, I must not have my themes, thesis_182, custom images, sean-bg.jpg. Copy...well no, that's the right URL. Okay let's save that again. Maybe I didn't save it properly. Okay, there we go. So now that image shows up here and if we... oh, it's nicely centered actually. But you can see it's cut off because there's a background color that has been set for the rest of the site. So what we need to do here then is come back over to background image. What we want to do is we don't want it to repeat in either direction and we may as well just specify that we want it to be centered in the monitor and we want it to start at the top. And then we can just say save to that. That gets it in its right position. Oh actually, there's one other thing. Since the image is black, we want the black color to be black so I'm going to enter black there which is all zeros and hit save to that. And then we have to make other things transparent. So we're going to start off with the header area background styles and we'll start with the background image. If we just hit "make it transparent" and then content area background styles, background image, make it transparent and then footer area background styles, make it transparent, now the image is going to show up all the way through right? And you can see where the image ends. It goes down to black down here at the bottom.
Views: 3384 thesistoolbox
Customize the Widget Headings - BYOB hesis Shortcode Content Widgets Plugin - Part 5
 
06:51
http://www.thesistoolbox.com/ Video Transcript: Okay we're going to go ahead and customize the heading style. So we'll hit save there and once we customize the heading style, let's use Arial Black as our heading style. Let's make the headings... let's make them 22 pixels tall. No, let's make it 18 pixels tall. We can... yeah, let's let the color of them be white but let's change the background color up to a really dark gray or a darker gray. And then let's give ourselves 10 pixels of padding around the heading. I want to go down to 1 pixel of the letter spacing rather than 2 pixels. I'm going to get rid of all caps. I'm going to center the headline text and I'm going to... I'm not going to make it bold. That's already Arial Black. So if we hit save to that, we come back over here and refresh it. Okay, now we have a nice, little centered heading with a different color. And you know, instead of this color, we could easily put this as the background for those. So for example, let's go get the... from our Full Width Backgrounds, let's get that image address and then we say header area background image. Copy that and go back to our content widgets. And then under the heading, block heading style...oh, I can't do that because I don't provide a method for swapping out the heading background. I do provide a method for swapping out the text background and I also provide a method for... actually, this will work. Widget block background style, this is where we can do it or... no, we can't do it there. I'm sorry. That's not true. We can't do it there because that would be the entire block. So that's something I'm going to have to add into the plugin because I would like to be able to take this thing and put it here rather than just using a color. And although you know, I could take that and put it in the background of this... yes Dennis, I could add gradients to the background. Can I add gradients to the background? I believe I can. You know, I get lost sometimes and when I have widget column background style, I say yes to that. No, I haven't added gradients to this yet. I will add gradients to it, block background styles. Let's just check that real quick. No, gradients for those yet but that is absolutely something that we should do because I like those gradients. I think they're cool. So that'll be something that we add here in the not very distant future. Dennis, yes, version 1.0 is the current one that you upload but once you install it, tomorrow morning or later in the day, you'll have a message on it that says it's been upgraded to 1.2. And you can press the button to upgrade automatically and it'll run off and grab the 1.2. I just got that done before I pressed record. So I haven't had a chance to get that stuff fixed. I mean, I haven't had a chance to swap that out yet. But this is what I wanted to show you you know, the ability to... without having to write the CSS yourself, to be able to create things like this using these plugins. You know, just in case you were wondering how much CSS this writes, each of these plugins writes their CSS to the same file. And so if we come over and look at... and it's stored in the Thesis custom folder so that when you upgrade, it will stay there. And if we go over to Thesis and custom file editor and we select the BYOB custom CSS file, here's all the CSS that has been written by that plugin in order to style this stuff the way it's styles it. So essentially, what it does is it has a very light load on the load of a page because it does not rely on option settings and thing like that for the page load. And what it does is it places all the styling in that CSS file and then hooks these things to the specific functions just as if you were doing it in your custom CSS file... I mean, your custom functions PHP file for these which means that if these plugins are... should have very little impact on the loading on your site and there's no JQuery or javascript in them or anything like that. So there's no possibility of conflicts between these plugins and any other plugins. I mean, I suppose there may be some possibility of conflict between these plugins and a plugin that also relies on Thesis hooks like...what is it? That Thesis hooks plugin, whatever that one is. So there may be some things like that but otherwise, it's intended to be fast and to do all the heavy lifting while you're in your Admin screens, not when the page is loading.
Views: 295 thesistoolbox
How to Use Padding and Margin in a Widget Style with the Thesis Widget Styles Plugin
 
07:27
http://www.thesistoolbox.com When styling widgets with the Thesis Widget Styles Plugin, it is useful to understand how padding and margin work. We begin here with an explanation of how they work and then go on to show how to use them in styling widgets (refer to video 1 of this series for the introduction on using this plugin). Understanding How Padding and Margin Work The best way to understand padding and margin is to think of 2 containers and some contents. You've got a parent container, a child container and contents. In this case, the parent container is represented by the outside line you see here. The Child container is the second line with the purple and Contents is this rose colored section. By default, the way the web works is that if there are no instructions to do otherwise, contents automatically expand to fill their container and those containers automatically expand to fill their containers. So in our example here, without any instructions at all rather than seeing 3 different layers, all you see here is the size of the contents because, as we just said, the contents automatically expand to fill the container which in this case is the child container. The child container is automatically expanded to fill the parent container and so the only thing that's really visible is the contents. Now we add in padding and margin. Margins move the child container away from its parent container. So if this is the child container and we add a margin, the child container moves away from the edges of its parent container. Conversely, padding moves the contents away from the edges of its container. So again, if you apply padding to the child container, it moves the contents inward or away from its edges. So in order to get this effect where the parent container is larger than the child container and the child container is larger than its contents, you add padding and margin to the child container. Child container moves its container away from its parent and padding moves its content away from its edge. If it helps you can think of margin as pressing outward and padding as pressing inward. Use Padding and Margin in a Thesis Widget So if we were to add margin to the overall widget, it would move the widget away from its container which, in this case, is the sidebar. If we add padding to the overall widget, it moves the contents of that overall widget away from its edges. And that's what we need to do in this case because right now the edge of our container is here and here and there and there. And we want to move the container's contents away from its edges. Let's return to the Thesis Widget Styles plugin and go to our Customization Options for style 1 which is applied to this widget. Select Customize Widget Padding and hit save. Now we've got options for adding overall padding. We can do this one of two ways. We can either style all of the sides the same or we can style them all differently or we can do a combination. For example, let's add 20 pixels here in the Widget Typical Heading Padding and then hit save. Go back to our page with the widget style and refresh it. You can see that the padding has pushed everything away from the edge. The reason the heading is pushed further away than 20 pixels is that the default heading settings have some margin at the top and the bottom. Let's review that in Firefox so you can see exactly what that looks like. This is our heading here. We'll inspect that element and we can see that the heading has this bright yellow above and below, which is where the padding is. So if you want the padding to be even on all sides, you would get rid of the top padding. It's actually not going to work exactly as described for another reason but I'm still going to show you it so you understand how it works. Go back to the Thesis Widget Styles plugin and to the Overall Padding. Put a zero in for the top padding. Now, the only thing left on top is the margin. Hit save and then return to our page and refresh this. You would have expected that margin to still show on top of the heading text but the problem is that when 2 margins meet each other vertically they collapse. And right now, the margin for the overall widget is specified as 0. The margin at the top of the column heading, about 20 pixels, and the margin at the top of the container, which is 0, meet and collapse down to 0. So the margin no longer pushes the container up. However, if we add 1 pixel of padding then the margin for the heading and the margin for the container are no longer touching each other and thus will not collapse.
Views: 1429 thesistoolbox
Style the Menu With Background Gradients using Thesis Nav Plugin
 
04:39
http://thesistoolbox.com Video Transcript So then the next thing we can do with this is rather than having a background color, we can use a background gradient. And so we'll come back over to our nav menu settings and scroll down here to our typical menu item styles. What we want to do is we want to customize our typical item background and we select that and hit save. And now we've got a link background style, a hover background style, a current background style, and a current parent background style. So in our link background style, we're going to select use background gradient. And our hover background style, we'll do the same and our current background style, we're going to use a background color and our current background style, we're going to use a background color. Let's see how that shakes out. That may be kind of interesting. Okay now that we've selected that, now we can pick our background gradient. Now we go to ColorZilla Gradient Editor. I'm just going to cut that URL here out of my note and paste it. Okay and I want to start off with... I'm going to do a gradient in a single direction and I'm going to start with that dark gray which was 333333. And I'm going to come back to this side and I'm going to do 888888. And I'm not using a radial, I'm going to do a vertical gradient. And so this will be our background color and we're going to keep IE9 support set. So now what we do is copy that and then come over here to our settings and we paste that gradient there. Okay now the other thing we want to do is set a hover background gradient and in the hover background gradient, we're going to make it a little bit lighter. So rather than being that dark, we're going to take it to there. Oh okay, I guess we're going to have to lighten this one up a little bit too. So now our hover is lighter and we'll go ahead and copy that. Paste that one in there. And then our current background style, we said we're going to use a color, a background color. And I'm just going to pick... I'm going to do the 888 color and I'm going to do the same thing with the current parent and hit save and refresh this. Okay so even though this is a solid color, it looks like it's got a gradient to it, doesn't it? But it is just a solid color and you can see if we hover over this you know, we get that gradient changed and otherwise, we don't. Now let's say that we wanted to create a little... actually, that's totally deceptive because that is actually a solid color all the way through there and it's just because of its relationship to what it's next to, it changes. So anyway, pretty cool.
Views: 837 thesistoolbox
How to Customize the the Footer Widget Text in Thesis
 
04:09
http://thesistoolbox.com But I am going to talk about styling this text. So here we are in footer row 1 settings again and we can also set the heading style. So if we want to set the heading style, check that button and hit save and now you'll have a whole bunch of choices that show up down here. The first choice is the font size. Now, I think I'm going to leave the font heading alone but I definitely want to customize the font color so I'm going to pick a really dark blue color. And I want to customize the row heading background color which is going to be white. Yeah, let's just see what that looks like. We'll customize that heading background color there and we're also going to make the text bold. We'll center the heading text. We'll remove the all caps and I think we'll just go down to 1 pixel. So let's say save and refresh it. Okay there we go. So now we have a white background and we've change the way the heading looks. I can see now that the other thing I need to do is add some padding. So I could say 5 pixels of padding and that would give me a little bit more space here. So I've got a little bit more room there, okay. So you can change the color and you can change the font style. If you want to change the font family or the font size, you can do that from the Thesis Design Options menu. So the next thing I want to do is I want to change up this text here. If we come back over to our footer row background style... not footer row background style, footer row text style and select customize the font style and refresh it, then we can come down and change the colors. So let's say I want my font link color to be white and... I mean, my font color to be white and let's say the link color is a light blue gray and the hover color is the efefef gray color. So now if I save this and I refresh it, okay that has changed this to white. It's a bad color choice actually but nevertheless, it's changed my link color and my hover color here from the default. Now if you want to go back to the default, you can easily come back to the default and say you don't want to customize it. And then hit save, refresh it. And what this default is this is what you've set in Thesis Design Options. So you can make this change in Thesis Design Options so long as you want it to apply to every row. Now the thing is though that you might want this to be different on the one row than it is on another which is why I have that setting there.
Views: 631 thesistoolbox
Add a Search Bar to the Thesis Header
 
04:38
http://thesistoolbox.com Okay so the way we do this search bar, let's come back over to the right header area in Thesis defaults and say let's add a search bar in this header area. Once we do that, we get a search bar settings and this gives us a choice whether it should be placed at the top of the header or at the bottom. We're going to leave it at the top and I already know we want a little bit of margin so let's give ourselves a 20 pixel margin from the top. But otherwise, let's leave it alone. We'll hit save, you can see what happens here. Okay so it's given us a 20 pixel margin and it has placed it on the far left hand side. It's also moved the menu down you can see and the reason why it moved the menu down was because we both have the width of the top margin here plus the width of the search bar that's used to be just pressing up against the top. But now that we've added this to it, it's no longer just pressing up against the top. It looks like we needed to take about 40 pixels out of the margin for this. So if we come back over to our menu settings and instead of 80, we say 40. And then instead of text alignment left, we take text alignment right and refresh this. Now the search bar has gone off to the right hand side and this has popped back up. And actually, it looks like it's still a little low. Maybe, we want to bring it up to 35 pixels. Let's just see what happens if I pull this all the way up to yeah... see so it might even be... yeah, this might even be closer to 10 pixels. So under menu settings, now we make it just 30 pixels of top margin. Hit save, refresh it. Yeah okay, that was a little too much but...34. Yeah, there we go. And if we want to... actually, I kind of like the way that lines up like that. So we can just leave it like this. However, there are a few additional styles that you can add to the search bar. Now, you can move it around by using these margins so obviously, we gave it 20 pixels of top margin to move it off the top. You can also change the font size if you want the font to be larger, say let's make it 14 pixels. And you can change the padding and the width so at 14 pixels, actually I just... with just a little bit taller than it was originally. If you made the text larger, it can be the case that you know, this gets cut off by the size of the search bar which is why I gave you the ability to specify a specific width. It also gives you a chance to make it smaller if you want or whatever. But anyway, you can specify margin around it. You can specify the style of the font. You can specify the padding that is inside of the search bar that goes around the text and you can specify the width of this. If you don't specify anything, it just defaults to the standard. Okay so now we've got a search bar, a logo and our navigation menu all showing up in the header.
Views: 795 thesistoolbox
Position the Sprite to Display Various Icon States using Thesis Nav Plugin
 
08:45
http://thesistoolbox.com Video Transcript Okay there we go. So now what we're going to do is we're going to add padding to the typical menu item here. We're going to add 50 pixels of padding to push that off. We want this padding to apply to all of them equally so we can use the typical menu padding here rather than having to set it specifically. And our typical menu item left padding, if we just say 50 pixels there, that moves the text 50 pixels over. There we go. So now you've got... and maybe 50 pixels is too far. Maybe we should move this over a little bit or something but in any case, we've got the image sitting beside each one of these menu items. And if we click away you know, nothing changes because all the menu items aren't exactly the same spot. So now what we need to do is we need to change that up. And the way we're going to do that is by coming down to our tab 1 styles. Remember, from this image that tab 1 is going to be a light bulb and actually, this is the one we want to show. And so we're really starting our image 400 pixels down from the top which is what we have to tell this now is that we're going to move it 400 pixels down and then the next one will be done 450 and the next one will be down 500 and the last one will be down 550. And that will show the link stat for each one of those. So if we come back over to our site and tab 1 link background style, instead of top left, we are going to say - 400 pixels. Pardon me, it's vertically - 400 pixels and the horizontal position is going to be 0. Okay and so tab 2 link state will be 0 and - 450. And tab 3 link state will be 0 and - 500. And the 4th one will be 0 and - 550. If we come back over here and hit save, most of these should look differently now. There you go. Now what we have is our link state is... well obviously, I've got a little bit of work to do on this. So hover state currently displays at the current state which is what we want. But you can see how it's changing color automatically now, not just changing color but also changing position, right? We still got our light bulb thing going on here once we hover. So now we need to take the next step in changing and we're going to set our hover state and the hover state is going to be that paler state? So the first hover state is - 200 and then - 250, - 300, - 350. So then we come back over to our site and again, our link state, our hover state now... oh look at that. This one is also missing an image, no repeat. Horizontal position will be 0 but it's -- 200. And I think I must have forgotten the image on all of these. I did. And then the hover position here is 0 - 250 and then this one is 0 - 300. I think I messed that up. Hover here is... this one is 0 -- 300. Better keep that stuff straight. This one here is - 350 and we hit save. Come back over and refresh this. I obviously have a number not properly set over here yet. If we come over to our category columns, okay. You can see that hover is working properly. Now we just have to get current get working properly and current parent. So we come back over here and well actually, first, let's look at our image. Our current starts at 0 and 0 and then 0 -- 50, 0 -- 100, 0 -- 150. Those are going to be the current and the current parent. So current is going to be 0 and 0. Oh, that says repeat in both directions. No repeat. That's how you solve that silly thing. And then this one is going to be 0 and 0 and no repeat. And tab 2 styles, this one will be 0 and -- 50 and then 0 and -- 50 and then 0 and -- 100 and 0 and -- 100. Well, it's 150 actually. This is 0 and -- 150. And number 4 is... no, that is 100 and this is -- 150, 0 and -- 150, 0 and -- 150. Okay so we come back up here at the top and we should actually be 100% completed with this now. That is... let's see, where are we? Okay so this is our current condition. This is our hover condition and our gray is our link condition. If we switch over to this one, I can see those are all gray but the hover conditions work. And so what we have now is a menu that has a little background image that shows up and different states depending upon what the condition is which is exactly what we are trying to do. And we accomplished that using the progressive refinement available in this plugin whereby we have separate styles for tab 1, tab 2, tab 3, and tab 4.
Views: 90 thesistoolbox
Style the Thesis Feature Box
 
12:18
http://www.thesistoolbox.com/ So the next thing we'll do is I'm going to end up removing the title from here. I'm going to put that title inside of this so I may as well do that right now. First, we'll go the widgets. I want to have a little bit more control over the location of the title so what I'm going to do here instead of this is take that and then inside of this here, I'm going to do an h3 and paste that and then another h3. So I've got essentially the same thing going on here. I've got an h3 tag with our "Get our free report now." But now it sits inside of that one side, hit save and then refresh that. Okay, there we go. So now I think we actually need 20 pixels above this too but that does look better. So we come back over here and add 20 pixels of padding. Okay so we have a decent little box arranged here. Now, I want to show you some of the other features of this. Let's say for example that we can round the corners of this if we wish so for example, we could come over here and give ourselves a 10-pixels corner radius and hit save, refresh that and now we've got nice, little corners there. And in fact, it could become you know, quite a bit bigger if we wished it to. It almost looks like maybe because of the width here, maybe we should shove that over another 20 or 30 pixels as well. I almost wonder if what we should do is measure that, see how much space I have there. Let's see, use this measuring tool. Okay so I've got 60 some odd pixels there so... and I've got 20 there so let's just add 60 pixels and see what happens. So in terms of padding, the left padding instead of 20 pixels, we'll make 60. Let's see if we get that to line up nicely. Well, it offset it a little bit so maybe take it down to 45. You won't fiddle with this too much but the thing is that this web form is automatically centered in the space that's available to it and so as we reduce the amount of space available to it, it moves. But actually, that looks pretty good now, doesn't it? Okay so we've got some rounded corners. Now if we wanted to, we can also add a border to this and if we made our... say we make our border width 3 pixels and we take the border background color and make it a darker color there and then make it solid and hit save. You know, now our little form has a border around it and we can also add a drop shadow to this. So drop shadow contains 2 elements. It's got... well, it's actually (3.59). It's got a width, a blur, and a color so we'll say... we'll give it a width of... let's give it a width of 3 pixels, a blur of 3 pixels and let's give it that as its color and hit save. We come over and refresh it. Now we should get a nice little drop shadow around there. We do so I know that stands out a little bit more. And then if we wanted to, we could use a CSS 3 gradients to change out this button to make a nice looking button for this. So I'm going to just do that real quickly as well just for grins. It's not exactly the topic here but nevertheless, I still want to show you how to create a button using that CSS 3 Gradient Generator. So if we, for a moment, grab our color here. It's a dark red color. Grab that color and come over to this site that is csstricks.com examples Button Maker and then for the top gradient color, let's make that the top gradient color. For the bottom gradient color, we're going to pick the same color and then we're going to pick a lighter version of the top gradient. So here we are right here. That's that top gradient color. We're just going to push it up in there for the top gradient and hit select so you can see what it looks like now. Then the top border color, I'm going to do that but instead of being that dark color, I'm just going to put it up quite a bit lighter so you get a little lighting effect and then hit that. Now the hover background color right now goes back to the blue so I'm going to go back to that hover background color and paste this dark color there. And you know, I guess that gray looks just fine this way so now all I want to do is change sizes of stuff. So this is going to make the text bigger. This is going to make the edges a little bit rounder. This one makes the padding around it bigger. I think we're good right there. We could change the text like that as well but I think I'm just going to leave it just like this.
Views: 765 thesistoolbox
Adjust Positions Using Padding and Margin Using Thesis Header Layout Plugin
 
05:02
http://thesistoolbox.com Video Transcript But we do need to move this stuff down a little bit like about what, 5 pixels. And then we do need to move it over so that it's out of the way of this. So we'll go ahead and do that next and that we will do with the header layout. And we start that by looking our row 2 settings and what we're going to do is we're going to give it 35 pixels of height but 5 pixels of top margin. So we've just moved that stuff down 5 pixels. Let's see if that was enough. That was enough. Although maybe this one's a tiny bit more. And then we want to move this over, I would say about 300 pixels. Well, this is 350 right there and so maybe 280 pixels. What we're going to do is we're going to give this some margin on this side and shove it over. And we'll do that with the nav menu and the left side margin will say 280 pixels, hit save, refresh it. Okay, there we go. So the menu is moved over and we can just put that down a little bit more and then we can push the search down a little bit more, looking for a search form in the header and giving it a top margin of 2 pixels. That's probably all it takes to move the search down except that we want it to be all the way over here on the right hand side. So the way we can accomplish that... let's see, first... I guess the search bar width is probably fine as it is. I probably don't need to change anything here on the search bar so we're going to give it a right alignment and see if that moves it over. It does. So it moved it over and if we don't want it quite against the edge, we could give it say, 20 pixels of right margin. So if we look at our search form and we come down to left side margin... actually, that's not going to work. So what we'll do here instead is give ourselves... we're going to customize the padding and margin for this widget column 2 of widget row 2 or header row 2. And then once we've done that, we get a whole bunch of choices here and we're just going to save the right margin. We're going to give it margin 20 pixels which should move that search bar over 20 pixels. No, it did not. What it made it do is disappear. Wait, did I type it wrong? Okay so I need to reduce this the width of... I forgot to say that margin and width are cumulative so now it made the column width 320 pixels. So when I made that 20 pixels wide, I needed to make this 280 pixels wide so I stuck with... I kept my 300 pixels. So we'll say save to that and now, it'll work and you could continue to make that tradeoff between the absolute width of the space and the padding or the margin that's on this side.
Views: 1259 thesistoolbox
Make the Thesis Nav Menu Stretch the Full Width of the Page
 
08:02
http://www.thesistoolbox.com/ So now, we're at our plugin. The first thing we're going to do is learn how to stretch that menu bar across the full width of the page. So the first thing is simply to take care of our general settings so in terms of our location, we're going to make it above the header. In terms of the menu style, we'll make a single sidebar. In terms of the nav menu alignment, we'll leave it left and we are going to go ahead and turn on our layout guides. We'll just hit save, come over and take a look at the result. Okay so there is the layout guide, this little image here. Each group, each large line is 100 pixels. Each small line is 20 pixels so you can see, looking at this menu right here, this is just a little over 400 pixels wide. And I've got 1, 2, 3, 4, 5 menu items and I need to take it out to about 1000 pixels so we are looking at adding 600 pixels worth of width to this menu in order to make it stretch all the way across. So one thing we could do in order to do that is simply to give our menu a background color. So what has background color now is our various tabs but there's no background color for the rest of the menu. If we wanted to, we could come over and just add background color. And so we would do that here with our menu bar background setting. Let's see, obviously, it's not red but you know, if we picked red or pink for a moment, you'll see what the result would be. It fills it all the way across. Now, it also goes above because of the way this layout guide is in place. If we turn that layout guide off, you won't see that space above the menu any longer and it would be as if it was the same color all the way across. So if we wanted to make it the same color as the rest of our menu, we could come over to Design Options, down to our menu and grab this link background color. And then go back over to our nav menu and then instead of that pink, we put in this color here and refresh it. And now the menu looks like it's that whole width, right? So that's one way of pursuing it. However, if you want to really stretch it all the way across, what you do instead of that is to essentially widen each one of these things. Then you widen them by adding padding to either side. And so, the way that works is under this category here called menu item width. Now in menu item width, you'd set your typical menu left and right padding and so let's say our typical left and right padding is 50 pixels. And then what you do is you keep on adjusting this until you're very close and then you could use the first menu item to finish that adjustment. So if we hit save here and come back over look at that, we just added 50 pixels of padding to both the left and the right side of each one of these menu items. And obviously, it didn't get us all the way there and if we are to... if we put our layout guide back in here again, we can use that to help us figure out how much more we needed to go because we need... we're at about 780 pixels and we need to go to 1000. So we need about 200 and a few pixels and so if you divide that up between 1, 2, 3, 4, 5, we need about 40 pixels per element or 20 pixels per side. So if we just did that, if we come back down here to menu item width and instead of 50, we say 70, we're going to come very close to hitting our target. You see, we've got about 20 pixels left. Now we could then add say 8 or 9 pixels to either side of this one here or we could add a couple of pixels to the whole thing which is probably a better idea here. 1, 2, 3, 4, 5, we've got 20 so if we added 4 pixels to each one or 2 pixel to each side, that would probably get us really close. So instead of 70, do 72. Well, that was too much so this drop down, if we take that down to... I think in this situation, what I would do then is rather than go to 72, I would take this back down to 70 and then I would just bump this up say, to 75 and this is just going to make the first one a little bit larger but make all the rest of them the same and then I would call that good. We can easily turn our layout guides off now. Hit save, refresh that and the color extends all the way to the edge just like you want it to and it looks like it's evenly spaced about the whole thing and so it looks as if it is. In fact, stretched across just like this does.
Views: 2415 thesistoolbox
Center the Thesis Nav Menu in the Page
 
03:02
http://www.thesistoolbox.com/ Okay so then we've got the possibility of centering this. So this will actually... when you decide you're going to stretch it across the page, you are pretty much centering it. But let's say that we don't want to do it that way. We want to make everything closer and so we'll just get rid of all the custom button spacing. But we want to center our menu. Instead of having... well, let's look at the right menu alignment first. I mean, what's going to happen is obvious but if we hit save here you know, the menu is going to get smaller and it's going to go flushed to the right, right? So there it is off to the right now. In fact, let's make those menu buttons just a little smaller, menu height and width, let's make them 120. There we go, okay. So our menu buttons are smaller and they're floated off to the right. Now what we want to do is float them center. Now in order to use the center menu alignment, we select center here but then what you have to do is you have to specify the menu's width. If you specify the menu's width then it'll automatically center. So this is one of the reasons why I created that layout guides thing for you because you pick, center the menu, and then do that. Turn that on, refresh this. If we look at the width of this menu, it is about 840 pixels wide. So if we come down here to our overall menu width now and type in 840, now the menu will be centered. And you know, it might be a little bit smaller than that but probably not by much. I mean, this looks pretty good. If you want more space here, let's get rid of the layout guides and then let's look at those menu margins and let's give ourselves more space under the menu. And take away that space over the menu and hit save. Hit refresh. So you've got more room down there, a little less from up there and then this sits in place.
Views: 1148 thesistoolbox
How to Add WP Menu Using Thesis Toolbox Plugins
 
09:47
http://www.thesistoolbox.com/ This is the fifth part of the Style a Site Using Thesis Toolbox Plugins Tutorial Series. We used another Toolbox Plugin for the WP Menus.
Views: 124 thesistoolbox
Add Logo Image Beside the Navigation Menu in a Thesis Website
 
07:34
http://thesistoolbox.com So the next thing that we're going to do then is to... we're going to take a logo image and we're going to put it in the header and then beside that, we are going to place a navigation menu and then we'll add to the search bar or search form. And then finally to that, we'll add the Facebook Like and Tweet buttons similar to what we just did with Christian. So in order to put a logo beside our navigation menu of course, we want these things to be side by side. So I'm going to make my left header area, we're not going to specify a height. We'll just specify a width. Left header area 325 pixels wide and hit save. Now when you're configuring the header area, you have a choice in this area called Thesis defaults. And if you choose to retain the Thesis defaults in this header area, what will happen is it will no longer be widgetized. Now what will happen is the Thesis default stuff will go there instead. So if we save this again and we'll come back over and look at this and refresh it, you can see we've maintained our 325 pixel width but it's no longer a widgetized area so it gets the name of the blog and the tag line which is the default Thesis behavior. And now all we have is a right header area. If we come over and take a look at our widgets, you see the left header is gone and only the right header area widgets remain. So you have that ability to retain Thesis default behavior if you wish. We'll come back over here and we're going to remove the Thesis default behavior because we're not going to use Thesis defaults in this side. We're just going to insert our own logo image and we've given it a width. We're not going to mess with the margin and padding or background or text alignment at this point. So we just hit save and then we'll go ahead and add our logo image. Now I'm going to come over to the widgets panel and I'm going to add the logo image using a text widget. So just grab a text widget and drag it over here and then I'm going to use a sandbox page to create the HTML for that text widget. So if I come over to all pages and then go to my sandbox page, let's see, I'm just going to delete all these stuff. Now I've already put this logo image in my Media Library so all I have to do is select Add Image, come to the Media Library. This is the image I want to add so I hit show. Now I want this image to be the full size so I'll go ahead and do that. I want it to float to the left. I've already given it the title, "Go back to our homepage." And so then what we're going to do is just make sure that the URL here just links to the homepage. Right now, what it does is it links to the image itself. We'll go ahead and delete that. So now, we're just going to link to headerhorizontalwidgets.com or .thesistoolbox.com which is the homepage of the site. This title up here will become the tool tip for our image and then we can add some alternate text and I'm just going to add to the alternate text here. Let's see, tools for customizing your Thesis theme. Now the...actually, not tools. I think I'm going to say plugins. The reason I'm using this text widget is because the text widget lets me put the image in itself so I can use both the title and the tag line... I'm sorry, the title and the alt text and alt text can be helpful for SEO. And so that's why I've chosen to do it this way. So we just select insert it into post, now I've got all my HTML here that I need to display an image. So I'm going to copy that, come back over to text widget and paste it, hit save, go back over to the page and refresh it. And now, my image is right here. If I hover over that image it says, "Go back to our homepage." If I come over to a different page and click on it, it takes me back to the homepage. So it's a clickable banner with a nice, little title plus it's got a nice little SEO alt text associated with it.
Views: 3841 thesistoolbox
How to Use Span Text in the Menu with Thesis Navigation Plugin
 
09:30
http://www.thesistoolbox.com/ Video Transcript So now the next thing we're going to do is we're going to use span text as the next thing. And the span text is text like this where you can change the style of the text for some section of it. And that's what my video live member, those are all elements of span text. And so what we're going to do is we're going to first come over to our menu and we are using the Thesis Nav Menu. And so here what we're going to do is wrap this in a span tag which is span and then a closing span tag which is /span. And then we'll say instead of... and then we'll do the same thing here for these pages, demo, demo 2, category, mommy, demo 6, video, and blog. And then we're going to go ahead and put... actually, right here, after demo, we're going to put closing span tag and then we're going to put a break tag, br / and there's our closing break tag. And now instead of saying the numeral 1, we're just going to say one. Okay so now we'll copy that span and break tag. Let's say two and then the span and break tag between the category and columns and between mommy and blogger and between demo and 6. That's funny, I got that in the wrong spot. And then between video and example and then I'm going to put it right after blog also and say articles. Okay so now I have... well, you'll just see what we have. We're going to have 2-line menu text now. Okay so we've got home, demo 1, demo 2, category columns, mommy blogger... oh, I didn't get the 6 in there... video example and blog articles. Let's just go back to that for a second. I must have missed... oh demo 6. Okay update that. And then what we're going to do is go back to our nav menu and style that span text. So first thing is we're going to center our menu text now so that's in our typical text. And then our span style, we're going to create a span style, checking that box. And then once we've said we're going to create it, we are going to... we're going to change the font family and make it Arial now. We're going to change the font size and say make it 18 pixels. We're going to leave a normal spacing. We're going to leave it all the same except we're going to center the menu text. We're going to leave the link text white. Well in fact, we'll leave all of it white for just a moment and we'll just hit save. Come back and refresh it. Okay so now you see we have our span text which is each piece of it is you know, top piece is bigger than the bottom piece, right? And the color change is only on the main one. We could actually change the color for all of our hover. So we could change the white color to another color, for example. Let's just do that actually just for grins. Let's make the span text here for hover. Let's make it 333333 and hit save and refresh it. Oh, isn't that interesting? Yeah, I got to fix that but... oh, that's cool actually. So the color only changes if you put your finger over it. Otherwise, it doesn't necessarily change. Interesting. I didn't see that coming. Okay so anyway, we'll go back to fff. And then the next thing we want to do, you can tell we have now shortened the menu by doing this. And so we want to make this menu items a little bit bigger and that means we need to turn our layout guides back on again and refresh that. And one thing we could choose to do is make all of our menu items the same width. Now since we have about 980 pixels of width here... what do we have? We have 949 pixels and we've got 8 elements so 949/8 is 118. So we could make 118 pixels wide instead of using the padding. So now we're going to not use menu item padding but we will specify the typical item height and width. And we're not going to specify the first item padding. Instead, we will specify its item width instead of its padding. And so now the typical item width, we're going to give it as 118 pixels. Let's see what happens when we do that. Refresh this. The problem with that is that width adds padding to it obviously. And since I have some padding there, I need to change the width quite a bit smaller. So menu item width, let's just drop it down to 90 and see if we can force this thing into place. Otherwise, we're just going to go back to what we had before.
Views: 539 thesistoolbox
Using Border Styles to Emphasize Menu Items Using Thesis Navigation Plugin
 
07:34
http://www.thesistoolbox.com/ Video Transcript So now what we're going to do is we are going to add some accent borders to our different link states. That is, what I want to have here is when I hover over this, let's refresh that. I don't know if we've changed something. When I hover over this, I want a different color border that shows up on the bottom that indicates that either it's in its hover state or it's in a current state. And then I want that border to be essentially invisible when it's in its typical link state. So we'll come back over here and we are going to say under typical menu item styles, that we want to customize the typical item border. We'll go ahead and hit save to that. And then once we've said that we want to change our typical item border style, now it asks us 2 settings questions. And the first one that we should answer first which is, do we want to configure each link state border separately? That is, do you want to have one border for the link, one border for a current, one border for a hover, another border for a parent? So what we're going to do here is we're going to configure each link state border separately. Now if we didn't check that, we could have all of the borders depending upon their link state be the same but we might not want the border all the way around each menu item to be the same. And so if we want the link and the hover and the current all to be the same color and same width and style then you wouldn't check this. But if we only want a bottom margin for all of those then we would check this. And so those are your two different options when we start talking about a border style. Well, we are going to configure our links differently. So we'll go ahead and select that and hit save. And then once we have selected that, now we have these options. We have the link border style, hover border style, current border style, and current parent border style. And if you expand that, you can see again, we have this choice. Do we want each side of the border to be different? Now since the only border we want to address is the bottom border, the answer to this is yes. So we say yes, allow each side to be different and we're going to do that for each of these so each of these borders is going to be different. Now we can say save again. And now if we look at our link border style, now we have the option to set a top, a right, a bottom, and a left border. So what we're going to do here is we're going to say no top border, no right border, and no left border. But our bottom border, we're going to give it 5 pixels and then the color, we are going to use... we got to go back and get from our menu settings. So we can open up this in a new tab and look at our nav menu settings. And so the link background color is 333, okay. So then our back down here to our bottom border style, we want it to be 5 pixels wide and we want 333333. Okay so that's that color. Now for our hover style, we again want no top border and no right border and no left border but we'll make it a 5 pixel width for our bottom border. And then I'm going to get a nice yellowish orange color there for the hover. So that'll be the hover color then, this color here. You know actually, I'm just going to take this color so that the text and the border are the same. Okay and we're also choosing a solid border style rather than any of the other choices. And then for our current, we're going to say no top border and no right border and no left border but our bottom border, again, is going to be 5 pixels. And then we're going to pick another color for that and we're not going to use one of those existing colors. I think what we'll do is we'll pick a... yeah, we'll pick a bluish gray color. There we go. And that's going to be our current border style. We're going to use the same one for current parent. And so we're going to have no top border, no right border, bottom border will be 5 pixels, that color solid and we'll have no left border. You see we've got tons and tons of options here. That would be really difficult to wade through if you could see them all the time. So we only see that set of options when we want to see that set of options. And now that we've saved that, we can come back over and look at our page and refresh it. Okay and so here's our current condition. These are our link conditions. Oh, look at that. I've got a funny little side border thing happening here. I need to go figure out what's causing... oh, it's a hover. Isn't that interesting? I've got a little border that shows up in hover but does not show up anywhere else so I must have missed a setting here. So if I go down to hover border style, no top border, no right border, no bottom border, see no left border. That's what I missed. Hit save and refresh.
Views: 350 thesistoolbox
Add the Dynamic Content Gallery to the Thesis Feature Box
 
05:41
http://www.thesistoolbox.com/ So we come back over here to our feature box. First, we have to deselect widgetize the feature box and then we're going to use the Dynamic Content Gallery and hit save. Now, I have the Dynamic Content Gallery installed but I don't think I haven't activated. So let's activate that first and Dynamic Content Gallery activated. There we go. Now, you'll notice, if you're familiar with the Dynamic Content Gallery, you will become acquainted with a warning message that shows up here saying that the Dynamic Content Gallery uses the featured image function. And when you activate my plugin, you deactivate that warning and so that's why you don't see that here. Whereas if we were to come back over to this simple feature box and not select that plugin but instead, select the SH Slideshow plugin, come back over to plugins, you'll see we have that error message arises, "This version of Dynamic Content Gallery requires that your theme support WP Post Thumbnails feature." And I don't know why that warning exists. It doesn't actually require that. We don't really use that here but nevertheless. So back to the Dynamic Content Gallery, this is what we'll use first. The Dynamic Content Gallery in this case is already set up. I've already chosen to use the ID method. I've already picked my IDs. I already have the description set up and the gallery CSS set up. My gallery is already set to be 600 pixels wide and 250 pixels tall. My javascript options are configured and all that kind of stuff. This is already configured. If you don't know how to configure the Dynamic Content Gallery, there are videos elsewhere on the site that talk about doing that so I'm not going to go through any further here other than just say that we have the Dynamic Content Gallery already configured on the site and images are already there for it. So now if we come back over to the simple feature box and say we want to use the Dynamic Content Gallery, not the SH Slideshow, and then come back over and take a look at the way it looks like, this whole thing is going to be gone and will be replaced with the Dynamic Content Gallery. Now, you'll notice that I say this whole thing is going to be gone. What I really meant was a text widget is going to be gone because the styling for that area stayed. Because you can actually... you can style the area used by the Dynamic Content Gallery or the SH Slideshow or NextGen gallery, doesn't matter which of those plugins you use, you can style this as well. And so, were we to want to, we could... right now, what we have is you know, this padding that moves the Dynamic Content Gallery away from the edge here and then we still got the rounded corners and all the rest of that stuff. We're going to start off by getting rid of all that. So we're going to get rid of all the padding and we're going to get rid of all the margin and we are going to make the background color transparent. We are not going to have a border. We'll take out the drop shadow for the time being and we won't round the corners. So we're essentially going back to the generic standing. We'll take a look at it there now. So you know, based on this, it would probably be nice to go ahead and add some height or some margin here and add margin over there to get it to line up with this so we can move this into position. So we'll go ahead and add 20 pixels here and 12 pixels there of margin so 20 pixels of top margin, 12 pixels of left margin and we pretty much have the Dynamic Content Gallery sitting in the spot that we want it to. Now, I created this Dynamic Content Gallery this specific width. If we wanted it larger, we would've had to have created the images larger and all the rest of that stuff so that is something to keep in mind. And when you are doing this is that you want to design your images so that they're the right size to fill the space that you have available. And right now, my content area is larger than 600 pixels wide and so I've got a little bit more space here than you might want. If you wanted to move it over and split the difference, you would just more margin to this edge. Okay so that's how you insert the Dynamic Content Gallery. Next thing we're going to do is insert the SH Slideshow instead.
Views: 1285 thesistoolbox
How to Add a Border to a Widget in Thesis with our Thesis Widget Styles Plugin
 
03:49
http://www.thesistoolbox.com Let's begin by opening the Thesis Widget Styles plugin and going to the style's customization options. Select Customize the Widget Border. We'll add a border to the widget to enhance its appearance (video 1 has introductory instructions on using this plugin). Hit save to make this change. Go back to the widget style and then to Overall Border Style and you can see we have a choice here. One of our choices is to allow each side of the border to be different. If we check this, settings will appear for each of the top, bottom, left and right borders. For now leave this unchecked so we'll get a border that is the same on all sides. Add First Border to a Thesis Widget Let's add a border width of 2 and pick a sort of a darker yellow grey color to compliment the yellow we already have. Then we pick the style of the border which in this case will be solid and then hit the save button. Let's go to the page with the widget and refresh it. You can now see the solid border around the widget which makes it stand out. Add Second Border to a Thesis Widget However, an outset border might actually be kind of interesting around the widget as well. To see that let's return to the Overall Border Style and choose outset instead of solid. This change will make the bottom and right side darker with the top and left side lighter. Hit save. Go back to our page and refresh it. You can see that this got to be a darker color and this stayed the same color or lightened up a little bit. Well, it looks a little cleaner if you use straight edges and if you don't have corners. So let's turn off around the rounded corner to see what that looks like. Go back to the style and turn them off and hit save. Return to the page and refresh it. Now you can see the offset look. This look is pretty dramatic. If you like this idea but want to downplay it some, you can do that by selecting the option of Allow each side of the border to be different. Do that, then copy your Typical Border Color and hit save. Add a Border to the Widget with Different Borders on Each Side Now in the border style you can customize each side of the border. For the top border, let's paste that color in but make it quite a bit lighter with the color picker. Then choose 2 pixels for width and solid. Let's add those same settings to the left border the same. The right and the bottom borders we'll make slightly darker keeping the width at 2 pixels and solid. Paste in that color again and then hit save. Let's go back to our page and refresh it. We have very easily, with our Thesis Widget Styles plugin, customized the widget border. We've got a fairly subtle but nevertheless apparent border around the widget with a sense of depth that emerges out of having these different colors.
Views: 582 thesistoolbox
Add NextGen Gallery Slideshow to the Thesis Feature Box
 
07:06
http://www.thesistoolbox.com/ Okay so then the last thing we're going to do with this plugin is to do the same thing with the NextGen Gallery. And by this point, you probably know exactly how we're going to accomplish that. But if we come back over here and say use the common plugin. Instead of add SH Slideshow, we're going to add the NextGen Gallery Slideshow and we hit save and refresh it. Nothing is going to show. And the reason nothing is going to show is because we haven't yet given it, we haven't said what id we want to use for the NextGen Gallery Slideshow. And so I've got this section down here, insert the NextGen Gallery id and then we can specify its width and its height. So at the moment, we got to go find the NextGen Gallery id and you're going to find that under the gallery. So just select this. I only have one gallery and it's going to be Gallery 1, obviously. If we take a look at this, yeah I have one gallery and these images are all 600 by 250 pixels so my id is 1. Alright, that's my picture id but my... that's interesting. Let's see, overview. Well, I guess it's not going to... I guess we need more galleries for it to tell me how many... what my gallery ids are but we're just going to grab... since I've only got 1 gallery, it's going to be our gallery id 1. So if we come back over to Plugin Settings and simple feature box and these are common plugin and insert 1. Hit save, refresh it. So notice how even though the images themselves that I showed you said they were 600 by 250 that the image itself is showing at this smaller size? That is the default behavior of NextGen Gallery display and what it does is it essentially shows you the thumbnail view of the image which is why we have this height and width setting, NextGen Gallery width and height. Because now we can make it show the images at the full height and its full size rather than at its smaller size. So if we hit save again and hit refresh again, okay there we have it. Now we have this sitting in there, again with the very same style that we had before. So we've got the same drop shadow and the same white outline. We could go ahead and get rid of that. Well, in the first place, we could give ourselves a cool purple shadow and we could entirely eliminate that outline like that. We can also opt to do the borders around this, each side differently. So for example, if we come over to our border, we can check allow each side of the border to be different and hit save. Now when we go to borders, we have a choice of which borders we want to use. So we could say top border height or top border width is 1 and pick our blue background color and make it solid. And then we can have our right border be 1. It's that same color and make it solid. And then we can say no bottom border and no left border and hit save, for example. Oh, I should have said... I'm sorry. I made it the right border was blue but I should have made the left border blue. But you can use that feature to do just about anything you want with the border so they don't all have to be exactly the same. So you could put you know, a lighter border here and a darker border there or you could put a lighter border or a thinner border here and a wider border there. So for example, let's just do that. Let's go ahead and have... solid and then it will be 1 pixel and then 1 pixel, solid. But on the left border, let's make the left border 3 pixels and let's make the top border 3 pixels and hit save. Come over and take a look at it. Alright, I can see it. I've got a bigger border on the top and the left and a thinner border on the bottom and on the right. And you can use that to probably more profitably on widgets in order to make them stand out a little bit more if you want. But anyway, you do have complete control over that and we could quite easily... we're going to make each border the same but we could make each border 5 pixels and that blue color and solid. Make our drop shadow back to a gray and have something stand out like that so anyway... Okay well that pretty much wraps up how to use the latest version of the Thesis Simple Feature Box plugin.
Views: 685 thesistoolbox
Making Equal Height Widget Columns in Thesis
 
03:05
http://www.thesistoolbox.com Here we demonstrate how to make equal height widget columns using our Thesis Widget Styles plugin. If you've got two widget columns side by side and one has more content than the other, you get a mismatched appearance with the columns unequal in height. This doesn't look good particularly when you've got a strong background like we have here in our example. To make the widget columns equal height, we set the size of the body so that every widget of the particular style has the same height. Of course, you need to know what that height is going to be which you will know after determining what content is going in the widgets. How Thesis Widget Styles Plugin Makes Equal Height Columns Begin by selecting the Widget Styles plugin under Thesis plugins. Then go to the specific style you want to change and select Customization Options. After it opens scroll down to Style the Widget Body. The first option is Set a Fixed Height for the Widget Body. Check the box next to that option and then click on the save button on the page. After saving, go back to the style you are changing and you will find a new setting for Height of Widget Body. Open that setting and enter the number of pixels you would like for the height and then hit save. Go back to and refresh or open up the page with the widget style and you will see that both columns are the same height. You can easily go back and change the height of the columns if you don't have it right yet or if you change the widgets' content in in the future. Creating Additional Styles This feature works well if you've got widgets that are side by side, side by side and stack on top of each other and for widgets with similar content. You can quickly create styles that are very different or the same as an existing style with one variation such as body height and let the widget height be as long as necessary to accommodate the content.
Views: 485 thesistoolbox
Style Widgets Using CSS3 Gradients and Background Images with the Thesis Widget Styles Plugin
 
09:36
http://www.thesistoolbox.com Let's look at styling the widget area now where we'll style the heading and the body separately. Begin at the widget style's customization options (video 1 has introductory instructions on using this plugin) in the Thesis Widget Styles plugin. Leave the widget background alone but we'll customize the heading font and heading background. And for this example we'll use a background gradient. The heading padding and border will be customized along with the widget body padding and widget body margin so we can separate the text from the header. We'll use a background image to customize the body background. Style Heading Font and Gradient Background In the Thesis Widget Styles Plugin, go to the heading font style. Change the heading font to 24 pixels and pick Molengo one of the Google fonts. Select normal spacing, get rid of all caps and center the heading text. For the background gradient go to colorzilla.com and use the Gradient Editor to configure the gradient code. We have one set up here. It's actually quite simple. I picked a dark red color as the base and then a lighter version of that for the edges. And all I did was just move up directly above the other color to pick a lighter version of that same color and then I created these two stops. You can create a stop simply by pressing a button. I created these two stops, made the two edges lighter and then went to dark. And what I'm aiming for is a very slight variegation of color from light to dark. I have this whole group of text that I have to copy. Then I'll come back over here and paste that gradient text right there. In the padding we'll give ourselves 10 pixels all the way around. Select the save button in the Thesis Widget Styles plugin. Remember, this is style 2 we are working on. Go to our widgets here and we are working in widget block 2. I'll take column 2 here and select style 2 to apply to it. Save it. Come back over and refresh this. Review Changes to Heading Font and Gradient Background Now we have our variegated red that goes from light to dark in here in a way that gives it a sense of depth. I don't love that text so we'll go back to the heading font style and change it to Droid Serif which I like better. So now we've got a heading that's cool looking. Style Widget Body with a Background Image Next we'll style the body with a background image. A few weeks ago, I introduced you to the Subtle Patterns site which has many very subtle patterns that you can download for free. In fact, Thesistoolbox.com uses one of their patterns for the body background. I like this fabric pattern here. I've already downloaded it but you can just hit download and then upload it to your Media Library or even better into your custom folder. For the time being it's been uploaded to my Media Library. I'll go to the library, select edit and copy the URL. Then go back to the Thesis Widget Styles plugin to our style and then to the Body Background Image. Paste that image URL. We want to repeat it in both the x and the y directions. It doesn't really matter where it starts since it's starting in the x and y direction. Go to Body Padding and put in 20 pixels around this. And then add 10 pixels on top for our Body Margins and hit save. Review Changes to Widget Background Image Go back to the page and refresh it. Now we have this paper background, 20 pixels of padding all the way around the text, 10 pixels of margin in between the two. Next we'll add a border around this paper. Return to the Thesis Widget Styles plugin to our style customization options, select customize body border and hit save. Then go to our border style and make it 1 pixel with a solid light grey color. Go back to the page and refresh it. The border gives it a bit of definition because the variegation of the paper no longer continues to the perimeter but stops right there. We could also give it a very slight drop shadow to give it a little bit of depth. Return to the Thesis Widget Styles plugin to our style and give it 2 and 2 and make it slightly darker. Hit save, refresh it. Now we've come up with a very attractive widget style that can be used over and over again. The widget stands out nicely. It's easy to read and it doesn't look like a default Thesis widget.
Views: 1506 thesistoolbox
How to Add Widgets to the Thesis Feature Box
 
07:26
http://www.thesistoolbox.com/ What we're going to look at today here first off is the Thesis Simple Feature Box plugin. And basically, what this plugin does is it either widgetizes the feature box or it adds one of three common plugins to the feature box. And those common plugins are either the Dynamic Content Gallery, SH Slideshow or the NextGen Gallery. So before we take a look at any of that, we're going to just install the plugin first and we're going to install it here on this site that I'm using to demonstrate stuff. And so from the dashboard, we'll go over to Plugins and Add New. You have to have started off by downloading this plugin directly from the website first. But once you've downloaded it to your computer then you can just upload, choose the file, and then go to the place where you stored that. And for me, that's right here. Once you've uploaded it, you simply activate the plugin and the plugin is now ready to go. If this is the first of my plugins that you've installed, you'll see this BYOB Thesis Plugins Menu here. If you have other Thesis plugins installed then what will happen is it'll just join those. So for example, here we are, Simple Feature Box. Click on it and it'll come up here in just a moment. Okay so what we have here is the first thing that you end up deciding is whether or not you want to widgetize the feature box or you're going to use a common plugin. It's one of those 2 options. And so to widgetize the feature box, you simply click widgetize and if you don't want to widgetize the feature box but you want to use one of these plugins then you're going to end up selecting the plugin that you want to use. For the time being, right now, we're going to say widgetize the feature box. And if you've checked to this and one of these, the widgetized feature box will take precedence and all the rest of this will be ignored. So if you've decided to use a plugin, make sure that you uncheck widgetize the feature box because that's going to take the precedence. If we hit save to this, we've now widgetized the feature box. Okay so having said that, one of the first things you need to do in order to see this feature box is you need to set the options for the feature box in Thesis Design Options. So if we come over to Thesis Design Options and come down here to the Feature Box, under Placement, you can choose where you want them placed and then you can choose what pages you want them placed on. Now your choices for where you want them placed are first, do not use the feature box which of course, you're not going to select if you are using my plugin because they're on display. Or you can choose to place it in your content column and in your content column, it's going to end up... this is the content column so it's going to end up above the content column and beside the sidebars. Your next choice is full width above the content and the sidebars and obviously, that means it would be above the content and then it would span the entire distance instead of the width of the content. And your 3rd choice is above the header which again would span the full width of the page and would be up here above the header. So those are your 3 choices. We're going to use in your content column. And then once you've chosen its location, now you can choose what page it should display on, whether it should be on your front page, on your blog page only, on both your front and blog pages or everywhere. Now, if you're displaying it on your front page only, that is the static front page of your site. If you are displaying it on your blog page only, that's your posts page of your site and if you're displaying it on both of them then it's on both your front page and your posts page. Now if you have in your content column selected then you have a choice of where you want it to go, whether you want it to be above all of the posts or you want it to be above post number 1 or actually, you want it to be below post number 1 or you want it to be below post number 2. In this case, we're going to place it above all of the posts. Now if you had selected full width above content and sidebars, you wouldn't have that same choice. And had you had selected do not use the feature box, you wouldn't have had either of those choices.
Views: 544 thesistoolbox
Add Background Images to the Menu using Thesis Nav Plugin
 
14:02
http://thesistoolbox.com Video Transcript And here we are to a completely clean instance of this and then let's go look at it. Okay so here we are, this is our menu. And what we're going to do with this is we're going to add a background image to this tab or this menu item, a background image to this menu item and then a background image that repeats across all of these items. This is the right hand image. This is the left hand image and this is the middle image and the middle image is supposed to repeat. Okay and here's what I've created from this. What I did was I created a sprite. You don't have to use a sprite. You could use 3 individual images but a sprit will allow you to have only a single http request and a monochromatic image like this, the sprite is going to be small. So for example, I created this image sprite here. Let's see, let's just go find it. Okay so I took your images and I stretched them. I made the left one 300 pixels wide, the right one 300 pixels and then I put them all together into a single image which is what we're calling this image sprite. So if I... let's see, hit preview, you can see, this is 300 pixels long. This is the left hand side. This is the right hand side. This is the middle. This was supposed to be semi-transparent for the drop down menu. We'll just ignore that for the time being. This is the image that we're working with. Each of these images is 300 pixels long and each image has 62 pixels of height. And so it's 62 pixels, 62 pixels, and 62 pixels. And I'm going to use a single image but we're going to use different parts of it in different places in the menu. So the way that works is we'll start off with our typical menu style. Now the first thing you have here is this ability to scope what kinds of customization you want to do. In this case, we are going to customize the typical menu item height. We're not going to customize its margin or its padding for the time being. But we are going to customize its background. And then we want to customize the first menu item separately and the last menu item separately. So we're going to put a background image in the typical condition in the first condition and in the last condition. Hit save to that so that gives us our basis. And now under our typical menu condition, we're really only going to add it to the link background style. Now because it's a menu and because it's a Thesis menu, you also have the choice of hover, current and current parent. But we only have one color here so we're just going to use the link background style. And we are going to customize the background color by making it transparent and then we're going to use a background image. And we'll do that with these things here as well. Well actually, we're not going to do that yet. We're just going to get it saved to this for the time being. And then we need to add that image to our Media Library so we'll do that real quickly too. Select the file and graphics, tutorial graphics, navigation menu. So we're uploading the sprite. Okay so there's our image, grab the URL of that image, come back over here and then the link background style, I'm going to paste that URL. And then I'm going to make the background transparent. I'm going to repeat it in both directions and for the time being, we're going to start it in the top left corner. It's actually not going to work properly this way but we'll go ahead and start it there. And if we hit save, what we'll end up with here is this... okay so you can see it has essentially created each one of these things and it starts in the upper left hand corner so now you have a whole bunch of different beginnings of this. So the first thing we're going to do is change its position. So under typical menu item, let's set its height. The images are 62 pixels tall so let's give it an item height of 42 pixels and then we're going to give it... oh, I didn't give us any padding. We need some padding too. We need to be able to customize the padding here. Typical item padding, there we go. And now, the menu item padding, we're going to give it 20 pixels of top padding. So the text is down inside of the image and its height is going to be 42.
Views: 1235 thesistoolbox
Configure Header Rows and Columns Using Thesis Header Layout Plugin
 
05:44
http://thesistoolbox.com Video Transcript Now the way the Header Layout plugin works is first, you determine how many rows you want to create. So in this case, we're going to be creating 2 rows. So select 2 and then hit save. Now, remember I said that we can specify up to 3 columns in each of those rows so that's the next thing we're going to do. And in header row 1 setting, we're going to specify 2 columns and then header row 2 settings, we'll also specify 2 columns. And then we hit save. And now you can see this little diagram here shows us that we've got 2 rows with 2 columns in each row. And at the moment, each of these automatically defaults as a widget area. So if we come over and look at our widget areas or our widgets under Appearance and Widgets, the plugin is now created these 4 widget areas or sidebars. We've got header row 1, widget column 1, header row 2, widget column 2, widget header row 2, widget column 1 and header row 2 widget column 2. Now I actually demonstrated this earlier or practiced this presentation earlier and so what happened is these widgets pre-populated widgets that WordPress 3.3 retained. We're going to actually get rid of those at the moment. So you have essentially 4 empty widget areas now that have been created. Now, we actually don't want them all to be widget areas so we're going to go modify this next. But we come over here to our header layouts and the next question that we want to answer is whether or not we're going to use any Thesis default header. Now, we aren't going to use any of the Thesis default headers in this case. If we did check retain Thesis default header functions then what we would next be requested to do is to select which row we want it in and then which of the columns that we want it in. But we aren't going to do that now we can just uncheck that and hit save. So we're not going to use any Thesis default header. However, we are going to use a nav menu on the header and so when we select this, we'll say yes. So include the navigation menu some place within the header. As you recall that some place is right here. We're going to put it right there. And then we're also going to a place a search form somewhere on the header so we can expand that and now that we've selected those things, we have the choice of deciding where we want it to be located. So we want this in header row 2. I think we're going to have to save this before we can decide which column we want it in. So the Thesis nav menu is going to be in header row 2 and the search form is also going to be in header row 2. So now that we've said that, we can hit save again and with that choice having been made, now we can choose which row it's going to go in now the Thesis nav menu or the nav menu's going to go on row 1. And we don't want to put the Thesis nav menu in there. We want to put this main menu in. This main menu is a menu that we have created under Appearance and Menus so it's a WordPress menu. And any menu that we create using Appearance and Menus will show up in this drop down as well as the Thesis nav menu. We're going to put the main menu there. We want it in row 2 and in column 1 and we have a choice of either the top or the bottom of the widget column. We're just going to... there's actually not going to be anything inside of the widget columns so it doesn't really matter which one we choose. But we'll go ahead and choose top of the widget column for that one. And then while we're here, we'll do the same thing for the search form. The search form is going to go in row 2 but it's going in column 2 and at the top of the widget column. So now, we can hit save again. And then there's just one other thing we want to do which is eliminate the widgets from these 2 columns. Remember those two columns are only... if we go ahead and take a look at it, this is only 40 pixels tall. So we don't have room for any widgets under here so we don't want any widgets showing up. So we're going to turn the widgets off for row 2 column 1 and 2 and you do that by coming down to the row 2 settings and then widget column 1 settings and column 2 settings. And what we do is go all the way to the bottom of those settings and select "Check to remove the widgets from this widget column", the same thing in column 2. Scroll all the way down, check to remove.
Views: 478 thesistoolbox
Configure Header Rows and Columns Sizes Using Thesis Header Layout Plugin
 
03:25
http://thesistoolbox.com Video Transcript So what we'll do next then is come over here and set the heights of those things. And remember, column 1 is 350 pixels. Column 2 is 790 and row and then column 1 is 840 and then column 2 is 300 and row 2. So let's go ahead and go do that. Widget columns... actually, let's specify the height first. So the header row 1 height there was 180. It was 180 and 40. So row 1 height is 180 pixels and then if we look at column 1 settings, that was 350 pixels and then column 2 settings was 790. And then down to header row 2, we give it its height of 40 pixels and then column 1 setting of 840 and then 300. 840 and then column 2 settings at 300. Now this might not work perfectly the first time but we'll adjust a little bit and see how it goes. Okay, take that and refresh it. Okay so what's going on here is that the 2 sets of definitions that we've created are too big in order to show here. And so what we have to do is make sure that the definition for our page width in the header area is the right dimension. And so we said that needed to be 1140 so what we can do is come over to our full width backgrounds plugin and come over to the header area, customizeheaderarea.page. Scroll down here to the bottom and by default, Thesis defines all of them page areas as exactly the same width. So Thesis calculates the width of the page and then makes headerarea.page, contentarea.page and then footerarea.page the same width. But here, we have a chance to explicitly set a different width for any one of those containers and I'm just going to say 1140 for that and hit save. And then we'll come back over and refresh. We should just jump up there now. Okay, there we go. So we have specified the overall width and we have our 2 widget columns and we have these 2 things sitting in here.
Views: 162 thesistoolbox
Add Facebook Like and Twitter Buttons to the Thesis Header
 
08:55
http://thesistoolbox.com Now I think what we'll do is we will add the Facebook Like and the Twitter buttons to this. Now in order to do that, what we need to do is get that Facebook Like and the Twitter tweet code. Let's start off by doing that with Facebook so let's search for Facebook Like button code and that brings up this developer's page. And you can either put a URL in here or you can leave it blank. If you leave it blank, it automatically uses the URL of the page in particular. So that means you generally want this to be blank. I'm going to turn off the send. My layout, you have the choice of standard button count which puts how many people have liked it beside it or box count which stacks it or standard which is essentially like this. I'm going to go ahead and select button count. Now in terms of the width, you can specify the width of this. Really, I only want this much to show up so I think I'm probably going to say about 75 pixels wide. I'm not going to show the faces. Faces would be the faces of people who liked it. I'm not going to show their faces. I can pick a verb to display, I'm going to leave it at Like. I'm going to leave it this light color scheme and leave the font alone and I'm just going to get the code. Now you have 3 different versions of the code that you can use. I think with Thesis, it's nice to use the HTML 5 code. It's much lighter weight than any of the other choices. So if we stick with HTML 5, we have 2 different things we have to deal with. The first one is the javascript code and this javascript code, we're going to put on every page and we'll use the Thesis settings for that. And then this code is the code we're going to put in our widget. So let's start off actually by putting this code in the widget. Go back over to the widgets, here we are. Here's our text widget. Now we just paste that code in the text widget and hit save. And then in order for this to show up, we need to add the javascript. What we're going to do is add that javascript using Thesis Site Options and go over to Stats, Software and Scripts. And we're going to place that javascript code right here which will place it at the bottom of the page. So there's our javascript code, copy that, place it at the bottom of the page and hit save. Okay now if we come over and refresh this, we've got our Like button sitting right here. Three people have already liked this. That's interesting. And it has pushed our menu down again so we're going to move that menu up a bit. But before we do that, let's just add the Twitter button to this too. Okay so that was the Facebook. Now what we want to do is add the Twitter button code so I'm just going to search for Twitter button code and again, back to this Resources. Now in this case, what we'll do is we'll pick the horizontal count just like this. There are a whole bunch of other settings that you can do here which I think are you know, potentially worth considering but we're going to do this as simple as possible for the moment. And the simplest thing possible is to either pick note count or the horizontal count and just grab this, copy it, and come back over to our widget and paste it. Now this is one of those cases where... which way did my widget go? Okay, over to widget. This doesn't have a separate javascript code. This simply has the... well, it has javascript embedded in the HTML here which is not absolutely perfect but it's what it is. You put those 2 things side by side here in this. Now what happens is they will both show up side by side. Okay so now we need to give ourselves a little bit of padding, margin, stuff like that. I think I'm going to take this... I think I'm going to give myself some bottom margin for the search bar first. So search bar settings, bottom margin, I think I'm going to... let's give that 20 pixels of bottom margin. It's going to give the menu some heartburn but... okay that pushed that down there. And then you can see that unfortunately, the Facebook button and the tweet button don't really line up. So we've got to do a little bit of monkeying around with this in order to make it so they do line up plus we want to pull this back up to where it belongs.
Views: 1471 thesistoolbox
Add SH Slideshow to the Thesis Feature Box Plugin
 
05:16
http://www.thesistoolbox.com/ So we'll come back over to here and in our common plugins, instead of adding the Dynamic Content Gallery, we'll add SH Slideshow and hit save. Now if we come down and look at SH Slideshow which I believe is installed, yeah SH Slideshow is installed. Good. So I've already got it configured to be 600 pixels wide and 250 pixels tall. I have transition speed and stop time and different fade effects and all the rest of that kind of stuff is set up. And I also have the various images for each slide selected. Again, I'm not going to go through all the possible ways of setting this up. I do have plenty of videos on the site that show how to style the SH Slideshow. What we're just going to do is show how to use it in its context. So anyway, it's all set up and it's configured and if we come over to our page and refresh it, now what we have is this slideshow sitting in this place. And it looks like under the circumstances, we might want to add a couple more pixels of height to this. You know, I think what's happening here is that the slideshow itself centers itself in the available space. So if we want this to come all the way over to the edge, what we're going to have to do is add some right padding to push this over. And I'm going to start off by... well actually, let's go measure how much padding I think I need to add to this. Or margin actually, I think I probably need to add something in a range of 50 pixels of margin so let's try that. Over to the feature box, go to margin here and let's give ourselves 50 pixels of right margin and see what happens. Yeah, that is pretty close. Maybe 52, just say 52. Let's say 22 here. Yeah, that looks pretty good. So now we've got the SH Slideshow again over here on the side. Now something that we can choose to do here is we can choose to add drop shadow to this. So if we come back over here like that and we come back to our drop shadow and let's just say 3 pixels and 3 pixels again and hit save. We probably have to monkey with this just a little bit to get it be perfect. Yeah, because you can see there's a little white line right there. Let's add 5 and 5 and let's add one more pixel to the margin here. So take drop shadow and do 5 and 5 and add one more pixel to the margin so 53 pixels. I bet you that gets rid of our white line. Well, not quite but just about. So now anyway, we've got this display down there, this little drop shadow going on here. And we could, if we wanted to, add a border around this. So if we come over to our borders, we could say let's add a 1 pixel border and let's get a darker border like that maybe and refresh this. So now you've got a nice, hard line lying around that if you wanted. If you don't want that hard line or if you want a hard white line which is I think is kind of an interesting look, you could choose to do white here. So now you've got that white edge on both sides in the shadow below and maybe, if you're doing that, you'd want a little bit darker shadow. And so, if we come over to our shadow, maybe the thing here to do is just come down a little further, hit save, refresh it. Okay, there we go. Now we got a little bit more shadow. We've got a little bright white border. You know, it's a fairly attractive application of the plugin.
Views: 719 thesistoolbox
Add and Configure Text Widgets Using Thesis Header Layout Plugin
 
06:58
http://thesistoolbox.com Video Transcript Next thing we're going to do is add our logo to this. If you look at our example, the logo covers... fills up the first column and the first row and then covers... projects down to the 2nd row. So what we're going to do with this image then is we're going to make a background image of the header area rather than putting it inside of either of these columns. And then in order to make it clickable, what we'll do is we will put a transparent image in a text widget in column 1 that we can click on. So let's go ahead and start that. Come back over here to header layout and we're looking at our header background color and image because we're going to put this background image in the overall header. Let's go ahead and select customize the background styles. Once we do that, we get a bunch of choices. Now, we want to make the background transparent so that we can see the navigation bar through to it. So we make the background transparent but then we need to go get that logo. So if we go over here to the library, okay so now, we select the image, copy the URL, go to the header background color and image section and we set it to be... we're going to set it to be transparent. We're going to place that image in there. We don't want to repeat it in either direction but we do want it up in the top left hand corner. And now if we hit save, come back over and refresh, there we go. So there's our image and it comes down into the bar like they want it to. We may as well go ahead and put the widget in here so let's go to Appearance and Widgets and header row 1 widget column 1, we're going to drag a text widget in there. We're going to come over here to pages and add new page. We're going to call this page the sandbox page. We're going to make it private and we will insert an image there from the media library. And the image is this one here called transparent logo. You can see it's 350 pixels wide by 180 pixels tall and it is perfectly transparent. It has no color in it whatsoever which means we'll be able to see it when... we'll be able to see what's behind it. And then what we do is we make the link URL here, we make the link URL the homepage and then the title that we give it is "Return to the beautifully coastal homepage." And what this title will become is the tool tip for when the mouse hovers this button here. And we may as well give it... what was your tagline? Oh gosh, I couldn't tell you the whole thing. It's about... decorating. Seaside shore decorating. I don't really know what it is, to be honest with you. Make anything up. Shore decorating. I'll change it later. Decorating blog. Okay so the point of this is that this is the alt text so this is going to... this has some SEO benefits so we want to put the alt text in, the title is going to be the tool tip. We're going to link it when they click on the link back to the homepage and we're going to put the full size in and we're going to insert it into the post. And then all we really do is we just copy this HTML and we paste it in that text widget. Hit save, come back over here and hit refresh. And now that transparent image sits here and you can see when you hover over it, the return to the beautifully coastal homepage shows up. And if you click on it, it takes you there. If we were to scroll down for a moment to another blog post and go off to the single blog post, if we click on this, it'll take us back to our homepage. So this is a strategy that I use actually fairly regularly in the tutorials I give, having essentially creating a hot linkable spot by using a text widget and a transparent ping to cover up something else. So anyway, that's what's going on there. So the next thing to do then will be to... let's see, let's just drop our widget in here and then we'll move the menu over and then we'll move the search over. And then once we're done with that, we'll start refining it. We'll add the menu to this and just keep refining it. Okay so the... let's see, so the next text widget... the next widget actually, we already have a text, I think for this. Yeah, here's our... this is sort of a place holder ad. It's not a really an ad but it's a place holder ad. And if we drop it in there and we refresh it, now that ad's going to show up. Hit refresh, okay. So now our ad is in there.
Views: 576 thesistoolbox
How to Customize the Appearance of the Footer Widgets in Thesis
 
05:55
http://thesistoolbox.com Okay so now that we have our footer rows set up and we've added plugins to those widget areas, it's time for us to configure the size, shape, and background color and that sort of thing of the widget areas themselves. So then we could specify the footer row height if we wished or we could let the footer row height just shake out based on the space needed for these things. I think I'm going to go ahead and specify the footer row height though of 300 pixels. Save that and refresh it. And I think I want to give a little bit more padding to the top of this or margin, I mean. So in terms of our widget columns, I'm going to give us some top margin. Let's just say 50 pixels, say I want I nice, big top margin there. Okay so that moved that down. So then the next thing I want to do in order to help you understand what's going on here is I'm going to change the background style. Now, once you check this and hit save, a whole bunch of background choices are going to pop up. We'll go back to background styling here and now you can choose to put a background image in which I think I'll describe in a later tutorial. So I'm not going to do anything with the background image but I am going to put a background color in. And so I'm going to put a nice... let's see, blue gray background color. There we go and hit save and then refresh this. And now you can see what's really going on here. The whole area here has been colored with that blue background. It's 300 pixels tall. It's got 50 pixels above it to the next piece of the page. And so now what we want to do is move this stuff away from this blue background so it looks like it belongs. And the way we do that then is to come over here to our widget column padding and margins. So the widget top margin is the margin around each one of our columns. In order for you to see what that looks like, I'm going to actually add a background style to the column so we're going to go ahead and check this. And then I'm going to come down here and give us a new background color. And right now, I think I'll just pick a light gray here. Okay so this is the background color for each widget column which is different than the background color for the widget row. We have our widget row background color which is that blue gray and then we have our widget column background color which is the light gray. And if we refresh this, the blue gray has been completely covered by the light gray because they are the same size right now. That is each widget column goes from top to bottom and from left to right all the way over to the next one. However, I can come over here and instead of doing that, I can give myself some padding and margin. So let's start off with margins and let's say I'm going to use 10 for everything. I'm going to have 10 pixels of margin all the way around, top, bottom, left and right. Hit save, come back over here and refresh this. Now, you're going to see that blue gray color because what we've done is we've taken the column itself and we've given that column margin which is essentially space outside of the column, pushing it away from the thing that's wrapping the column. However, because this is a light gray color, the text is still butted right up against the edge of the widget column. And so that's where padding comes in. Margin pushes the element away from its container and padding pushes the contents away from the edges of the container. So what's going to happen is the edge of the container's going to stay in the same place but these things are going to be pushed away from that edge by using the padding. So we come back over here to widget column padding and margins and now, let's say we want 20 at the top and then 10 and 10 and 10 pixels and we hit save and refresh it. Now you can see what's happened, right? This is the 20 pixels of margin or padding that was added to the top and then 10 pixels on the left over here, I guess you see 10 pixels on the right although the text isn't long enough for that to show. And then 10 pixels on the bottom. Again, the text isn't long enough for it to show. So that's how this works. So we've added margin around this color or around the columns and we've added padding inside the columns. And by definition, the columns are the same width. Now it is possible to set different widths for these columns although I'm not going to review that here in this lesson.
Views: 518 thesistoolbox
Introduction - Add Widget Areas to the Thesis Header
 
06:38
http://thesistoolbox.com We're going to take a look at the Thesis Header Widgets plugin now. We're going to do that over here on this site, this Header Horizontal Widgets. Right now, we just got the default Thesis nav menu and the default Thesis functionality here. And so before this plugin is activated, this is what it looks like. This is the standard Thesis expression of WordPress. However, as soon as we activate the Thesis Simple Header Widgets plugin, what happens is it replaces this default Thesis behavior with a widget area, with this familiar Thesis blue default widget. And if we'd come on over to our widgets panel, you can see here in the sidebar area that it has created an additional sidebar or a widget area called a left header area widgets that is empty. And this corresponds perfectly to this left header area widgets. So if we open up the Widget Options page, what this widget does is it creates either one or two areas inside of your Thesis header, either one of which can have a widget area in it. Now, a widget area... I'm calling it a widget area. WordPress calls it a sidebar and this term, 'sidebar' is actually a holdover from the original incarnation of WordPress. You know, once upon a time in WordPress, there were no such things as widgets and the sidebar was just this sidebar of a page that you would put other code in if you wanted your... if you wanted something in the sidebar. And then I don't know, 3 years ago, something like that, WordPress added this concept of widgets where you could drag and drop widgets into this thing that was called sidebar and it was still imagined as this bar along the side. However, as it became apparent that were lots of potential places that you might want to use widgets, WordPress gave us that ability to put sidebars anywhere we wanted, including the top and the bottom and in the middle and no longer on the side whatsoever. And so the term 'sidebar' lost its location specific information. It's no longer necessarily on the side. Now a sidebar can be anywhere and now, sidebar doesn't suggest a location. Sidebar just suggests a function. Well, sidebar is not a particularly useful term anymore, I don't think. And so, I refer to it as a widget area. You can think of it as either a sidebar or a widget area as long as you don't think of it as being dependent upon being on the side of a page because these widget areas are going to be everywhere. In this case, we'll have either one or two widget areas in the header. And so, what this plugin allows you to do is create one or two areas inside the header. Either one of those header areas can have widgets and in addition to that, you can style the background of the overall header and also of each individual widget area. So the very first thing you do when configuring this is to decide the number of header areas and you have a choice of one header area or two header areas. If you select two header areas, this little header layout section here shows you what the configuration looks like. So now if you come over to the page and refresh it, you'll have one header area, the left header area and the right header area down below. These two things will stack on top of each other. And if we come over to the widget side again, now you have the left header widgets and the right header area widgets. So you've got these two sidebars or these two widget areas showing up on your widgets panel. So we go back to the options again and you have a choice of header arrangements. You can either have them stacked just like this or you can have them sit side by side. Now if you want an actual left header and a right header area, what you have to do is you have to give the left header area a width. If you give it a width, the right header area will be automatically sized to take up the rest of the available space and will pop up here beside this. So for example, if we come up to the left header area width and we give it a width of 300 pixels, I gave it a height. That doesn't do the job. We have to give it a width. Now it shows you this header layout thing shows you that the header areas are side by side rather than stacked on top of each other. And if you come back over to the page and refresh it, you can see the left header area is 300 pixels wide and the right header area takes up all the space. So those are your 2 choices for how to arrange your header. If you do not specify a width then the header areas will be... I clearly did not delete that. If you don't specify a width, the header areas will be stacked and no longer really left and right. Now, it's top and bottom. But this little box here will always show you how they look.
Views: 3418 thesistoolbox
Add a Background Image to the Thesis Header
 
05:49
http://thesistoolbox.com So if we come back over to our settings here, the first thing you want to do is we're going to add a background image to the overall header. So if I hit save there, now this background color and image dialog pops up. Now you know, if there's something that's going on behind the header that you want to show, you can check the box make the background transparent. You can also change the background color here if your page color is a different color. You can make it transparent or you can put a background image in or you can do all 3. Well, you can't do all 3. It's either colored or transparent but you can do both as well. By default what happens is it makes the header white and nothing else. But what we'll do here is we're going to add a background image and we're going to do that. We're going to do that from... we need to get that image from the Media Library and that was this image right here, this little bottom border. So if I hit edit and then just grab the URL for that, go back over here and paste that. And then we don't... this is going to be essentially a bottom border for the header so I don't want it to repeat either in the X or the Y direction so I'm going to leave it alone. And I also want it to be centered horizontally and I want it to be at the bottom of the header as opposed to the top of the header or the center of the header, right? I could also specify a specific horizontal position using pixels if I wanted to but that's a more fine tuning that is actually necessary for this image. So if we go ahead and hit save to this now, come over and refresh this, okay this image is... this image actually continues all the way across but it's being hidden by this text widget. And what we'll need to do then is if we want this image to show below it which we do, we need to give the overall header a height that's greater than the header, that's greater than the height of this image. So now we're going to start using a height calculations or we'll use the height functions of the plugin. So if we come back over to the overall header and we give it an overall header height of say 200 pixels and hit save, come back over and refresh it, now you can see that 200 pixels has pulled this image down below this image. And so we've got our bottom border across here and now all we want to do or we need to do is just drag this down, maybe make it level with the professor. And so the way we're going to do that is to give it some top margin which we will push the menu down from the top of its container and it looks like that's probably about 70 pixels or so. So if we come back over to the right header area menu settings and we give ourselves a top menu or a top margin of 70 pixels and then refresh that, it looks like maybe even another 10 pixels. Top margin for the menu, give it 80 pixels and I think also, we're going to make the text alignment on this to go to the right so that the menu floats all the way to the right. Let's see how that turns out. Okay actually, it didn't move the menu to the right so what we'll need to do is add some margin on the left hand side so we can push this over. It looks to me like we want about 50 pixels there so let's go ahead and add...text alignment doesn't matter on this so it didn't do the job. So we'll add the menu settings. We will add a... well, we could do this one or two ways. We could either add left side margin to the menu or we could add left side margin to the widget area. I think we'll go ahead and add left side margin to the widget area and we'll go ahead and... let's see, right header, left margin. So we call that 50 pixels. There's you know, more than one way to skin this cat obviously. You know, that looks pretty close. Actually, it's a nice little overhang in there and an overhang there so that's pretty much got us where we want this to be. So now we've got a header image on the left and we've got a navigation menu on the right. We've got a nice little you know, background image border for the bottom of it and the next thing we're going to do is add a search bar up here.
Views: 383 thesistoolbox
How to Style a Widget Heading with the Thesis Widget Styles Plugin
 
04:47
http://www.thesistoolbox.com Let's begin by opening the Thesis Widget Styles Plugin and then going to our style options. Here we'll style the widget heading by customizing its font, padding and border but we'll leave the background alone for the moment. Select each of those options and hit save to so the choices for those appear. Style the Font in a Thesis Widget Heading We'll make the heading font style Arial and make it 24 pixels in size. Let's choose a yellowish-charcoal color. We want normal spacing and we'll get rid of the all caps and center the heading text. We won't add a background image yet but we will add a border style. Style the Border in a Thesis Widget Heading Copy that same color and we'll use it in the border that we'll add. We'll only use a bottom border here for the heading. Go to the Heading Border Style and select the option of Allow each side of the border to be different then hit the save button so the options for this appear. Check the boxes for No Top, No Right and No Left Border. Let's make the bottom border 4 pixels wide with the same color used above and we'll make it solid. Hit the save button. Then let's go to the page with the widget and refresh it, you can see all the changes. Review the Changes to the Thesis Widget Heading Font and Border You can see we lost our margin around the heading since we modified the text so we need to add some padding to the top. Let's go back to the 20 pixels of heading padding. Return to the Thesis Widget Styles plugin and go back over to the Overall Padding and get rid of the 1 that we'd placed in Overall Top Padding. Hit save. Now we'll have 20 pixels on the top again. Go back to the page and refresh it again. It looks like we could use some top margin on the the body text to move it down a bit from the heading. Return to the plugin again and go to our Widget Style Customization Options. Now let's go to Style the Widget Body and check Customize the Widget Body Margin. Hit save. Then let's add 10 pixels to the Body Top Margin and leave the rest blank. Return to the page and refresh it and you can see that the body text has moved away from the heading. As you can see using the Thesis Widget Styles plugin to customize widgets is very simple. There are many ways that you can customize and style individual widgets using the overall widget style plus some special styling for the heading and for the body.
Views: 160 thesistoolbox
Use the Thesis Simple Nav Menu and the Thesis Simple Header Widgets Plugin Together
 
02:47
http://www.thesistoolbox.com/ There is one other thing I wanted to talk about here and that is this setting in the plugin that says do not display. So you've got nav menu location, got below the header, above the header, or do not display. You might wonder, "Why on earth would I want to use do not display?" And the reason why you'd use do not display is because you were using one of the header widgets plugins and you were using it to place the menu. So for example, if we come over to this one here, that's what's going on here. You probably learned from last week that we created this heading or this header using the Thesis Simple Header Widgets plugin and we inserted the menu using that. And these two plugins work perfectly together. So for example, WP Admin... so we look at the Simple Nav Menu plugin. You can see that nav menu location is specified as do not display and then if you come over to the Simple Header Widgets plugin, you can see in the right header area, under Thesis defaults, we said place the Thesis nav menu in this header. And then under menu settings, we said place it at the bottom of the header. And so that's why we have this... that's why the menu can sit here and that's why we have that do not display. If we said... if we told it to display, you'd end up with another copy of it. Let me just show you what that looks like. Go to the nav menu plugin and say... let's put it at the top, above the header. What you're going to end up with is there it is, sitting above the header. It has all the same characteristics as the one here including its right alignment and any changes you made to the style would be reflected in both of them. That's why that setting exists. And because I think it's useful to be able to place a nav menu inside the header in some cases and so it gives you that flexibility to do that.
Views: 342 thesistoolbox
How to Add Background Images Using Thesis Toolbox Plugins
 
14:24
http://www.thesistoolbox.com/ This is an introductory video of Style a Site Using Thesis Toolbox Plugins Tutorial Series. We show how to add background image in the header area and content area of a WordPress website.
Views: 144 thesistoolbox
Thesis Widget Styles Plugin -- Create a New Style
 
05:34
http://www.thesistoolbox.com To begin we'll create a new style into which we'll place the image. Open the Widget Styles plugin under Thesis plugins. Then under Widget Style General Settings add one more style (if you only have 1 style, choose 2). Click on the save button and then the new style will appear below your last one. Open the Customization Options and under Style the Widget Heading select the Customize Heading Font, Customize Heading Background -- Use Background Image, and Customize the Heading Padding. Save again to have these options show in the new style. Add a Background Image to a Widget Heading in Thesis We'll customize the heading font and the background using a background image. We'll customize heading padding and the body margin. We'll take this background image, copy the URL, go back to the Thesis Widget Styles plugin, go to the new style, edit Heading Background Image and paste it. We don't want to repeat it all. We want it to be located in the center and in the top so select those. Adjust Widget Heading Font, Padding and Margin Go back to the page with the widget you are styling and refresh it. We need to make the font bigger and give ourselves more padding plus a margin. So go back to the style and down to Heading Font Style and choose Arial Black, size of 18 pixels, keep white, change to normal spacing, remove all caps, and center the heading. Next go to Heading Padding and make top 15 pixels and bottom 20 pixels. Under Body Margins add 20 for top, bottom, left and right. Then hit the save button and go back to the page with the widget style and refresh it. We have now added a background image to our widget heading and adjusted the font style, padding and margins all easily within our Thesis Widget Styles plugin.
Views: 312 thesistoolbox
Center the Menu in the Page using Thesis Nav Plugin
 
02:41
http://thesistoolbox.com Video Transcript The next thing I'm going to do is show you how to center the menu in the available space. And the way you do that is go to the nav menu plugin and you need to turn on the layout guides because this will help you estimate the space available or how much space this thing takes up. And so this menu is taking up just under 800 pixels. So it looks like it's about 895 pixels. This each gradation here is 20 pixels so it got about 895 pixels for this menu. And the way this works then is if you want to center your menu, you specify the overall menu size and then you set the left and right margins of the menu to auto. Okay so if we come back over here to our overall menu thing here, we are going to customize the overall width and we're going to customize the overall margins. Hit save. And now the overall margin width, I mean, the overall width we said was what, 795 pixels? And then for the overall margins, you can see in fact, I've given you a little hint here. I said to center the menus, specify the overall menu width and then set the overall menu margins to auto. So we specified 795 and all we have to do now is just check, set left and right margins to auto. Come over here and save. And that will center the menu. So now the last thing to do really is to simply turn off the layout guide so we can't see the layout guides anymore. Refresh it and now we've got it centered. Now these 2 little lines here, that's not part of the menu. That's part of the Thesis Design Options. If we want to get rid of that, we can come over to Design Options and what we do is we get rid of those interior layout and borders. It's this thing right here, show interior layout and borders. We turn that off and then we get rid of that double line there.
Views: 291 thesistoolbox
Create a Button Style Menu with Rounded Corners & Drop Shadows
 
09:21
http://www.thesistoolbox.com/ Okay so the next thing that you can do instead of that is you could make menu buttons. And so we have... we'll go ahead and leave it below the header but instead of the nav menu style as a single bar, we should select individual buttons. Now that individual button automatically puts space in between each one of the menu items so the chances are with that additional space, our stuff is too big. So we need to reduce the amount of padding in this and in this case then, we can choose what our button width is. Now we can make that button width a fixed width so that every button is exactly the same width or we could make it a variable with so that every button has 70 pixels of padding on each side. So if we take this down to 50 pixels of margin or padding on each side. All the buttons will get smaller but they aren't all identical in size. If this said... well, they seem close but Demo 1 and Demo 2 are larger than Blog is because the text is larger. The space on either side of the text is exactly the same but the menu itself is larger. On the other hand... and you can... let's see, let's turn on our layout guide so you can see what's going on there. So you know, this one is about... well, this is about 160 pixels so is that whereas this one's only 140 pixels and the blog is really 120 pixels. Now we could make them all 160 pixels if we wanted to so instead of having a variable width button, we could get rid of that variable width and we could make them all a fixed width. And you might think that fixed width is going to be 160 pixels but it's not going to be. It's close but it's not going to be and the reason it's not going to be, we made these things 160 pixels wide but in actuality, it's 160 pixels plus the width of the padding that's inside of this. And since we've got about 30 pixels of padding automatically inside of here, I think we need to take it down about 130 in order to get these things to be roughly 160 pixels wide. So if we come down again and say 130 instead of 160 and hit save, all of our menu items should be the same width. And if we look at this... yeah, it's pretty dang close to 160 pixels wide. It might be a little smaller but every single one of these is exactly the same size. Notice how the text has gone off to the left. Now the reason for that is that when you set the size as the menu item by margin, we're setting an equal amount of margin or padding, we are setting an equal amount of padding on either side so it's automatically centered in space. But if we don't set an equal amount of padding on either side and instead we specifically set the fixed width then this just sticks with the padding on the left and hangs the left. And maybe you want it to look like that but if you don't want it to look like that, we can come over here to this and say center the menu text and hit save. And now that menu text will be centered inside the button, okay? Now, you could say that what you want is you like it this way but you want this spread across the entire thing. So you want this button over here some way. You can either increase the size of these buttons to accomplish that or you can increase the amount of space between the buttons. So in this case, we'll use menu spacing instead and right now, we've got about 20 pixels of... well, the way the spacing is added is we've added up automatically, 20 pixels of margin on the left hand side of each one of these things. So you've got your 20 pixels right there and then come over here and then 20 pixels and then 20 pixels and then 20 pixels and there's no margin over here. So if we wanted to, we've got about 120 pixels in 5 things... actually, 1, 2, 3, 4, 5 yeah, so 6. So something in the range of 10 pixels additional. So let's give ourselves 30 pixels of left margin and see what happens. Yeah, that did not do it. We need more than that so... in fact, obviously, I did my math wrong and so if we do our spacing and we do say 50, that's probably too far but let's just try anyway. Yeah, this is a bit of trial and error, obviously. And you know, there's about 40 pixels on this side and there's not quite 40 pixels over here so we could decide to reduce this from 40 down to say maybe 35 which would maybe equal this out. And that's why we've got that left, the first menu item.
Views: 656 thesistoolbox
Introduction and Installation to the Thesis Navigation Menu
 
05:56
http://www.thesistoolbox.com/ Video Transcript Okay so now I guess what I'm going to do is introduce my latest plugin which is the BYOB Thesis Nav Menus plugin. The Thesis Nav Menus plugin differs from the Simple Nav Menus plugin in that it's not simple. It's a lot more complex. It gives you a lot more control over the design and appearance of the menus. And so this menu right here is created using that plugin and this menu that we created last week is created using that plugin. And this menu that I created for the website makeover was created with an early version of the plugin. And essentially, it gives you complete control over the appearance of the menu so you can add background images. You can change font style. In fact, even on my website, if we just refresh this page for a second, this is something I just added. See this text right here, the new free class, Build an Online Store Using Shopp? That is something that I created using this plugin. And so you have a lot of control over how things can look with the plugin. And so we're going to start off by installing the plugin and I have a site over here that we're going to install it on, this one right here. And the first thing to do is download it from BYOB Website. So under member benefits and plugins and then you're looking for the Thesis Nav Menu plugin and not the Thesis Simple Nav Menu plugin but the Thesis Navigation Menu plugin. And we are now at... currently at version 2.0.1 so just download that to your computer. And then we come back over here to the website and I'm going to say Add New Plugin and then upload. Choose the file and it went into Downloads. Let's see, BYOB Thesis Nav Menu, that's the one right there. I'm going to say open to that and install and activate. Okay and now that we have it activated, we'll have created this little menu, administrative menu over here called the BYOB Thesis Plugins. And if we just click on the nav menu button there, here's our configuration screen. And so with this plugin, you can adjust the nav menu location whether it's above the header, below the header or to hide it. You can... if you have a membership site, you can adjust the visibility of it so you can either set it so everybody sees the menu or only logged in users can see the menu or only non-logged in users can see it. This is how on our site, we end up with 2 different menus. This is the version of the menu that you see after you've logged in. And then this is the version of the menu that you see before you're logged in. And so we have these 2 different versions of the menu showing up using that functionality of... what's specifying the visibility of it. The next thing you can do is set the navigation menu's alignment. You know, most Thesis navigation menus are aligned to the left. You can see that here where we've got this left-aligned menu, right? And although interestingly, I must have some old settings that took effect. And so it's now got some margins over here. But the typical thing is that the menu is left-aligned but you can choose to have it left-aligned. You can center the menu in the available space or you can align the menu to the right. We align the menu to the right here. That's how we got this menu over this way. So... and you'll note that if you say center the menu, you'll notice this little message down here that says, "In order to center the menu, you'll also need to specify the menu width." And so we'll talk about that later when we talk about doing it. But we'll go ahead and leave it aligned to the left for the time being. And in general, that's what you can do with this plugin. So when you're using it, that's the first set of things you have to decide. What we're going to do is we're going to decide to place it below the header. We're going to let everyone see the menu. We're going to go ahead and leave it left-aligned and we're going to say save. And if we refresh this, I wonder if the old settings go away. Okay, the old settings did go away so we're back to this appearance here.
Views: 289 thesistoolbox
Add a Background Image and Position a Widget Using Thesis Header Layout Plugin
 
06:21
http://thesistoolbox.com Video Transcript So in terms of our header row 1 column 2 settings, we are going to customize the padding for this column. And so what we're going to say is that we're going to have a top padding of 30 and a left padding of 15. And I think we're going to have to say 75 here so that we don't get too big. Let's see how that looks. We're going to put that image as a background in our header row 1 and header row 1 settings, header row background style. We're going to make the background transparent and we are going to library. We're going to grab this one again. We're going to paste it there. We're not going to repeat it in the x and the y direction. We are going to place it in the top left corner and we're going to hit save. Okay actually, very oddly, without really doing much more to this, we are very close, aren't we? Very close. We still need to bring the ad segment down some and to the right so... Yeah. And by bringing the ad segment down, what you need... you also want to bring this grey down. Right, the whole thing. Yeah. So we go to our header row 1 background style again and we said top left but actually, what we really mean is 10. Is 10 too much? No, I don't think it is. Okay and background style. The right's not going to work with the 10 there so we say 350. That might not be enough but we'll try it. No, we want it to go a little bit further over so let's say 360. Yeah, let's give it 360. And then we want to move this down about 10 pixels and over about 20 and that is the widget itself. And so in terms of header row widget column 1... not column 1, column 2 settings, we want the top margin... let's see. What did I say? Did I say I wanted that to go down? I want to come down another 10 and I want to go over 20. So I want to top padding of 40, left padding of 35. Failed to adjust the other settings, in particular, this one here. Okay, that looks pretty right doesn't it? Yeah, that's good. Okay so then the next thing we want to do is add this menu. So we're going to do that using the Thesis nav menu plugin which is a more complicated version than the Thesis simple nav menu plugin.
Views: 283 thesistoolbox
How to Remove Page Titles from Selected Pages in Thesis Website
 
01:34
http://www.thesistoolbox.com This is the second part of BYOB Landings Page plugin. In this video we show how you can remove page titles from specific pages in Thesis.
Views: 228 thesistoolbox
Use a Custom CSS Location
 
03:45
http://www.thesistoolbox.com/ Now a couple of other just minor things I want to talk about with this. The first is where to store your CSS file. You see, I've got this custom CSS location choice and you have the choice of either saving the CSS in the head of your page or saving the CSS in a separate CSS file. Now if you're only using this plugin of mine, you're not using any of my other plugins then you want to just go ahead and store this in the head of the page. Because it doesn't write very much CSS and it saves you an http request so your site will run you know, milliseconds faster because it's not having to go get the CSS file. So we take a look at this for example, we just look at our source, here is the custom CSS that was created by that plugin. It sits inside the head of your page and you know, that's not actually very much and there's no reason... if this is the only plugin you're using, there's no reason not to do this. However, if you're using multiple plugins of mine or if you're using one of the more complex plugins that does not give you the chance of putting the CSS in the head then you want to choose to place it in a separate CSS file. Now before I show you what that looks like, if we come back over to that custom file editor for a second, the plugin creates this BYOB custom CSS file and places it in your Thesis custom folder. And when it's created, it's automatically created blank. But all of my plugins will write to this file. And so if you've got 6 or 7 of my plugins, they will each put their CSS in this one file. And so... that you can get all of their CSS served up from one http request which is the most efficient way to do this stuff. And so, showing you what that looks like then, if we come back over to the simple nav menu and we choose to place it in... not in the head of our page but in a separate CSS file and hit save, come back over to our custom file editor, you'll see that we've actually changed our custom file. And now that CSS has been placed here and every time that you hit your save button on any one of the plugins, it replaces the code for that plugin in this file. So that's one of the benefits of doing these plugins with Thesis is that we can... we know for certain where the file can be stored safely and we know that we can share the file. So if you see BYOB Custom in your custom folder, that's because you're using one of my plugins and I've written to that file. And if for some reason now that you destroy this file, all you have to do is go save your plugins again and it'll rewrite the file.
Views: 210 thesistoolbox
Understanding the Parts of the Thesis Navigation Menu
 
06:06
http://www.thesistoolbox.com/ Video Transcript So the next thing to do is to understand the various elements of the nav menu so that you can tell what you're going to be editing when you are adjusting things. And the first thing is the overall menu. Now the overall menu is this. It starts on this edge, in this case, since it's left-aligned, it starts on this edge and it goes all the way over to the far edge because that's how Thesis automatically lays the menu out. The automatic Thesis menu is the full width of the available page so even though the menu items don't fill it up, this whole thing is the menu and that is the overall menu. So it's essentially a wrapper around the menu proper. Then the next part of the menu is the typical menu item styles. So the typical menu items are these things here. This is a menu item. Home is a menu item. Demo 1 is a menu item. Demo 2, category columns, Mommy Blogger. Each of these are menu items and the typical menu item is a style that applies to all of the menu items unless you tell it to do something otherwise. So in other words, it's typical. It applies to every menu item. But you actually have a choice to have atypical menu items as well. And in particular, you can choose to have typical items and then customize the first menu item separately. You can do the first and or the last menu item separately or you can even choose to customize every menu item separately. And so if you choose to customize each menu item separately, you'll have some typical settings that will apply to all of them and then you'll have the specific individual settings that will apply to the individual menu items. This menu we had last week, we had a left menu item, a right menu item and then a typical menu item. And so that's how we got the two different ends on this menu. Then the next thing you have is the submenu. Now the submenu styles apply uniformly to all of the submenus and actually, there aren't any submenus on this menu. But the submenu is the menu that drops down below. And so if you're looking at this you know, this stuff down here is the submenu. These are all elements of the submenu. And so you can stylize the submenu items separately from the menu items. And then finally, what you have is the menu text. Now you've got the... the menu text, we have 3 different types of text here. We've got the default Thesis text which is what you're seeing right now. That's the default Thesis text. And then you have the potential span text style which is text that would be wrapped in span tags inside of the menu. And then you have submenu text style so you could also create a separate style of text for your submenu. And we'll talk about that more as we talk about how this thing is constructed. So you've got overall menu styles, typical menu styles, atypical menu item styles, submenu styles and menu text styles. Those are all of the elements of the menu that you can be styling with this plugin. Now because this is the Thesis navigation menu, you have a whole bunch of design options that apply to the nav menu as well. So you've got font type or the font style. You've got the font size. You've got the link text, current link and current parent link text color. So these are the text colors. These are the background colors and then you've got a border width, a border color and then a submenu width. Now the way this works is that my suggestion is to set everything that you can in Design Options first. And then once you've got say your link text colors and background colors and that kind of stuff the way you want it, then if you need to override something, you can override it using the plugin styles. But you start off by doing what you can in Thesis Design Options and then move on to the plugin to augment the Thesis Design Options. And so for example, the only thing you can do with text here is set the text color and set the font style and set the size. Well, the Nav Menu plugin gives you the opportunity to also change the default text letter spacing. It comes with 2 pixels by default but you can get rid of that if you want. You can remove the all caps style. You can center the menu text and you can make the menu text bold so there are these additional styles that you can apply your menu text to the Thesis menu text. But you want to set the menu text in Thesis first and then come back and make these changes after that. So that's how the relationship is. You want to work in Design Options first and then once you're doing what you can do in Design Options then you come on over to the plugin and make those changes.
Views: 204 thesistoolbox
How to Create a Widgetized Footer in Thesis
 
04:03
http://thesistoolbox.com What we're going to do is we're going to add another row of footers. We hit save. Now we have our 2nd row of footers. Now, in this case, I'm going to use 2 widget columns and I'm going to... let's see, I want to change the background style of that footer row so we'll go ahead and hit save. And then if we come back over to our widget section, you'll see that we have 2 new sidebars, footer row 2, widget column 1 and widget column 2. So I'm going to add a text widget over here. It says the site was designed by me and then hit save. And you know, I'm just going to do that again just so we can have a 2nd piece of stuff here. Not search, pardon me, but text. This site was designed by me. Save, come back over and refresh this. So here we've got our 2 little things saying the site was designed by me and if we come over to our widget columns and let's say that its height is 50 pixels and what was our background color? Oh, I'm just going to use... no, let's use a background color, the same background color. So if we use our background style, we're going to copy this color and then come down here to our background style. We'll change that background color. Let's see, change that background color to that and hit save. Come back over and refresh it. Now you can see why we might want to... we're going to want to change this one from its original gray color to something that's going to show up a little bit better. And so we come back over then to this setting. Actually, let's give ourselves some margin as well. So let's give ourselves a 10-pixel top margin and a 10-pixel left margin. And then we'll also change that text style so come up here and hit save. And then come down to that text style and let's just leave them as they are. Let's leave them all as white there. Actually, let's make this a dark blue for the hover color. We don't actually have any hover text there but... so we refresh it. I think I must have failed to save that. Did I? Text style... yeah, I also have to check this box. Check the customize font link. If we don't check that box, the color isn't applied. So there you go. We've got little pieces of text here. That's sort of a rough explanation or short explanation of how you can use the BYOB Thesis Footer Widgets plugin.
Views: 184 thesistoolbox
Basic Styling Concept using Thesis Shortcode Content Widgets
 
09:09
http://www.thesistoolbox.com/ Video Transcript:Now we don't to do... we don't have to add any styling at all if you want to use... continue to use the default styling that is in your sidebars. If we put a Pages widget over here as well... let's go back over to widgets and let's just grab Pages again, put it there and refresh it. You can see in all these, they're pretty much the same. I guess this does have a slightly different styling. But having said that, you know that text style is the same, it's the same size. The heading sizes are the same. They're the same style. So you don't actually have to do any styling to these at all if you don't want to. However, the bulk of the settings in here allow you to create styles. So once you've placed your widget columns in there, you can specify widths. You can specify margins, heading style, text style, background style. And then you can specify those for the columns as well. So the first set covers the block as a whole. You know, I think I'm going to show you what I mean by block as a whole while we're at this. Okay let's see, let's bring that down. So if we inspect the element, here is... that right there is our content block, right? That content block has 2 widget columns in it, widget column 1 and widget column 2, right? And that's the content block. Now, we can specify padding and margins around that content block. We can specify background colors, background images. We can do anything we want with those and in fact, I'm going to do that. Actually, we'll go ahead and put colored backgrounds, say behind each of these and let's just go ahead and use that color, whatever that color is. Okay so we'll copy that color and we'll come back over to our settings. And what we're going to do is... and our widget column background style is we want this to apply to the columns as opposed to the overall background. So for the widget column background style, we're going to say background color is this, that background color. Now, we can also use background images in exactly the same way that we used the background images for the full width framework areas. We can do exactly the same thing with background images for these widget areas. I'm just going to stick with colors for the moment. If we hit save to that, we'll come back over here and we refresh it. Now we've got blue. Now what we really want to do is we want to move the text away from the edges and we want to get some space in between and we want these 2 blue colors to go you know, the full height. And so, the way we do that is by... first thing we want to do is specify a height for our widget column. So you would do that under widget block dimensions and we're just going to give it a height of say, 250 pixels. Well, if we refresh that, I think... now, you can see...oh let's give it 300 pixels. But you can see now that the blue color extends all the way to the bottom. Once we specify a fixed height then we can make sure that both of those things... that all of the widgets display at the same height. So let's just say... let's make it 350 just for grins. Okay so then the next thing we want to do is add margin around these columns. And so, under widget column margins, what we really want is say, a left margin. If we got a left margin, say, of 24 pixels and hit save, that should separate our pieces. So there we go, now they are separated from each other by 24 pixels. Now, it's not really absolutely obvious that this is going on here but what's happened is 24 pixels have happened here as well and maybe, you don't want that. Maybe you want this to go back to its regular line up and you just want the 24 pixels here. In that case, what you would do is come down here to your widget column 1 settings, that's your first setting, and just put 0 on there. You're going to adjust the left margin by making it 0. What we did here was we made the typical left margin 24 pixels and the left margin of column 1, we made 0 pixels. So now, if we hit save to this, come over and refresh that, now these things are equal width and this line's back... it goes back to lining up with the text. Now the next thing we want to do is pull this stuff away from the edges. And so, we'll come down to padding. That's where we address this question, under padding. And so under our top padding, let's give that 20 pixels and under bottom padding... well, in fact, let's give it 20 pixels all the way around. So we've got a typical 20-pixel padding all the way around that thing, come back over and take a look at it.
Views: 153 thesistoolbox
How to Customize the Thesis Nav Menu
 
03:00
http://www.thesistoolbox.com/ The Simple Nav Menu plugin will let you do a couple of relatively simple things. One of them, for example, is to take the nav menu and move it below the heading or below your header and stretch it across your page. Something else you can do with it is to create and turn it into little buttons like this and you can round the corners, you can give it little bits of drop shadow and that sort of thing. And you can even do that same thing but center the menu in the width of a page. So that's sort of the general capability of this plugin. Okay and so we've activated that plugin and if we take a look at the plugin options here you know, in terms of its general options, you can specify the location of the nav menu, whether above the header, below the header, or whether or not you don't even want to display it which we'll talk about later. You can specify the style of the menu whether it's a nav bar style like a single style or if it's like individual buttons. So this is the nav bar style and this is the button style. You can determine how the menu should be aligned that is, do you want it aligned to the left like a traditional menu? Do you want it centered? Do you want it aligned to the right? We have examples of all of those here. This one is left aligned. This one is aligned to the right actually, and this one is center aligned. And then I also have these... I've added some layout guides that you can essentially turn on or turn off so you can use them to help you decide you know, how big things ought to be if you're going to change their sizes. So those are sort of the general settings here. What we need though is a menu in order to do this with and at the moment, I'm going to... let's see, let's go to Thesis and Site Options. And we're going to select the Thesis Nav Menu and we're going to pick some pages. I think we'll pick Demo 1, Demo 2, About, Home, and Blog. Let's make sure that we've told this not to include the Home link. I'm going to go ahead and turn off the feed link as well.
Views: 315 thesistoolbox
Install the Thesis Header Layout Plugin Using Thesis Header Layout Plugin
 
01:37
http://thesistoolbox.com Video Transcript The first thing to do is to install the plugin. And so we download that plugin from thesistoolbox.com and over under plugins and that plugin is the Thesis Header Layout plugin. So if we select 'Learn more about that plugin', we can now scroll down here and select download. And it's downloading that plugin for us now. We come back over to our site and go to plugins and add new and then upload the plugin. We'll choose the... let's see BYOB Thesis Header Layout plugin and select install. Activate the plugin. And if this is the first time you've installed one of my plugins, you'll have this new menu that pops up here. As it is, we already have the full width backgrounds plugin installed here so the header layout plugin now shows up inside this menu. So let's go ahead and select the Header Layout plugin.
Views: 126 thesistoolbox
Remove All Background Colors from the Thesis Nav Menu
 
02:30
http://www.thesistoolbox.com/ Now you know, all of these situations are showing instances where you want this button to have color. However, it may very well be the case that you don't want color in these buttons. And especially if you've got a background image that you've placed back behind this. Any kind of color you put here will obscure that background image. And so, let's see... what we're going to do here is we're going to pick... let's see, we'll just going to go ahead and style as a nav bar. We'll go ahead...and you know, we'll leave it centered for a moment. But what we're going to do is under... well, we got to save it first and then under menu item colors, there is this box here that says remove all menu background colors. Now, I'm assuming, for the moment, that if you're going to have a button style menu then you want color to show. If you don't want your colors to show then you don't need the button style menu. You'll just use the bar file menu. So this just turns off all those background colors. If you look at it now, you can't see it because the text is white, right? Let's come over to Design Options and let's make our text black for a moment. Refresh that and now, there's no background color to the menu regardless of hovering or not. And so, that gives you a chance to have something behind your menu that you want to show through in a menu rather than having a color that's going to obscure it. That works nicely with... like the Header Widgets plugin or the Thesis Nav Menu... I mean, I'm sorry... the Full Width Framework Backgrounds plugin because if you've got a background color that you want to show up, you don't want other menu colors blocking that from showing through. So anyway, there's a solution to that for you.
Views: 124 thesistoolbox