Tutorials

What is the Thesis full-width framework?

18 May 2009 · 75 comments · tagged with , , , ,

As promised, here is a screencast demonstrating what the full-width framework in Thesis is (best viewed full-screen).

This demonstration assumes some basic XHTML and CSS knowledge. If you’re not familiar with those, I recommend tizag.com and W3Schools.

Yeah, I’ve had a bit of a cold, so forgive me for sounding a bit stuffy. ;-)

{ 65 comments… read them below or add one }

1 John Hamilton Farr May 19, 2009 at 02:54

Thanks for this video, Kris! I haven’t ever tried the full-width framework, but now I will. It’s my first time to see the Web Inspector thingie too, which I just enabled in Safari. Still not sure how to use it, but I’ll figure it out.

2 Mark Settle May 19, 2009 at 06:17

Kristarella, I’ve been looking for info on this subject. Thanks for the video!

3 ivete May 19, 2009 at 08:14

Thank you for this, it’s really helpful! I had played with the full-width framework before but didn’t know why I should use it, now I do!

4 Internet Business With Purpose May 19, 2009 at 23:31

Hi Kris,

I didn’t understand anything about the full width framework BEFORE the video. Now I have a good idea of what to do.
You also have a real talent for explaining the steps involved in the process. You didn’t sound stuffy at all.

Thanks for taking the time to put out such informative information.

Greg

5 nobugs May 20, 2009 at 14:22

Really excellent! Thank you for this.

6 dinu May 22, 2009 at 03:26

thanks ! it was helpful

7 Miguel Wickert May 22, 2009 at 05:42

Thanks for sharing, I’ll watch as soon as things slow down. :) Stumbled and reviewed. Cheers,

-Mig

8 Lorenza May 29, 2009 at 11:24

Hi Kristarella,

thank you for all the precious info and tutorials. I am very new in Thesis and wordpress blogging in general, I’ve been working on my site for a couple of days now and managed to put a custom header, thanks to you, and other little things. I am trying to add 3 small images in my sidebar2 that I would like to appear in every page. I have uploaded my images on the wp-content/themes/thesis_15/custom/images then tried with Text Widget with no success. How can I do it? Do I have to use Open Hook? Thank you for your help,

Lorenza

9 Bob June 19, 2009 at 14:13

Kristarella – thanks for the video. Do you have some advice on how to make the center column of a 3 column layout fluid using the full width frame work? I want the page to be the full width, but have a fix width left and right columns/sidebars with a center content column that is liquid/fluid, ie expand with the page width.

thanks,
Bob

10 kristarella June 19, 2009 at 14:54

Bob — part of the CSS is .custom .full_width .page {width:auto;} then you would also need to change the width of #column_wrap and #content so that they are fluid, but I’m not quite sure how. Since custom.css works by adding new styles and overriding already declared ones, I’m not sure what widths to give them so that the sidebars will be next to them. This example is related, but doesn’t work in our situation because the sidebars come after the content in the HTML (and rightly so for semantic code).

It could be done with javascript, but I’m not sure if that is ideal.

It would be easier if you made all the sections fluid, but I’m not sure about fixed sidebars and fluid content.

11 muhdfarhan June 28, 2009 at 14:18

nice !

12 tigtog July 3, 2009 at 16:39

This tutorial has made me understand why a code snippet that I’m trying to port from one theme to another isn’t working! Thank you so much.

13 Tinh July 6, 2009 at 15:12

Excellent tutorials, i am implementing it with mine and hope nothing happens

14 Lynn Currie August 3, 2009 at 02:35

Thanks for the video.

Quick question – what are you using for the Web Inspector and CSS editing? I’ve been using Text Wrangler with Firebug. Maybe it’s time for a change. :)

15 kristarella August 3, 2009 at 16:01

Hey Lynn, I use Coda for website editing and management and the web inspector in the video is the Webkit Inspector with Safari. I use Firebug as well, particularly if I want to play with changes on the fly, but I use Safari more often for browsing, so I use the Webkit Inspector for that.

16 John O. August 18, 2009 at 07:59

Kristella,

I added the custom background css you described in this video, and it blew-out my custom footer which has a background image. Here is the code I used for my footer:

//// .custom #footer_area {background:#fff; background-image:url(../custom/images/Footer.jpg); background-repeat: no-repeat; background-position: center; padding:0.5em 0;}
.custom #footer {border-top:0;} ////

Any answers as to why this happened? Thank you!

John

17 kristarella August 18, 2009 at 09:51

Is that a direct copy of your code because if so, those forward slashes could be hidden characters mucking things up. You should only need background-image:url(images/Footer.jpg);, the rest of that relative URL was superfluous.
If it’s not either of those things it’s possible you have an extra } in your CSS file above the footer CSS, I’ve seen that break the styles below it before.

18 John O. August 18, 2009 at 10:50

Kristella,

I got it! The footer background image now appears, and God is good! I needed some of the superfluous code for positioning. (I added the forward slashes above just in case the code displayed funny online.) Here is the code in custom.css:

/* This line adds a custom footer */
.custom #footer { background:#fff; background-image:url(../custom/images/Footer.jpg); background-repeat: no-repeat; background-position: center; padding:0.5em 0;
border-top:0;}

/* This line adds a custom background */
.custom {background: #76909F;}
.custom .page {background:#FFF}

19 Chinedu Mgadi September 5, 2009 at 16:47

how did you get the image rotator for your background images? You are a God send to the blogging community, stay BLESS.

20 kristarella September 5, 2009 at 23:23

Hey Chinedu, the instructions I used for rotating background images are at SonSpring. :-)

21 Sherwin September 7, 2009 at 21:50

I would like to have just 4 button links (Home, Past Offers, Contact and About us) to the right side of my logo inside the header. Now on the default thesis navbar under the header i will be putting in some nav links to categories like Electronics, Computers, etc and they will all have a drop down menu for each category. Every code i got so far would move my default navbar and i don’t want to move it as i have need for it under the header. My website will not really be a blog but more of an affiliate site. I am using OpenHooks with thesis 1.5.1 and Full-Width Framework. How can i get these button links to the right side of my logo in the header?

22 kristarella September 8, 2009 at 11:02

Sherwin — I think you will need some CSS that gives #header the style position:relative and then a div containing those buttons (call it “buttons” for this purpose) #buttons {position:absolute; right:1.1em; top:50%;}.

That should cause the buttons to be absolutely positioned within the relatively positioned header on the right, in the middle.

You can see an explanation of this behaviour on CSS Tricks.

23 Sherwin September 8, 2009 at 11:24

I would like to say Thank You for the help provided. Its been a great help because i was trying to figure that out for 2 days.

24 Ayo November 24, 2009 at 04:43

How did you do the Clips thingy with coda? (when you dragged the code into coda page)

25 kristarella November 24, 2009 at 08:12

Ayo — press the clips button at the bottom of the Coda window.

26 robert phillips December 24, 2009 at 10:56

When you’re doing the editing, I briefly see a little iconized bar appear (if I recall, had among other icons, Firefox). I’ve seen this in other videos. What is it?

tnks!

%%robert

P.S. On the strength of your demo, I got Coda, and my coding life just got way better.

27 kristarella December 28, 2009 at 10:20

Robert — Not really sure. Am unable to watch the video (on my dodgy connection) at the moment, but it might be the Develop menu in Safari that allows you to open the current webpage in any other installed browser.

28 robert phillips December 28, 2009 at 10:39

Tnks, but I don’t think it’s that. Tried it — drop down from menu bar. This was/is apparently right over coda, and has more than browsers in it. I just took a screengrab of it and can send if you give me an email address for it.

tnks!

%%robert

29 Autumn Beck | Cloth Diapers January 11, 2010 at 07:55

I don’t know if you answer questions on old posts..

I am “just” a mom trying to learn how to tweak Thesis on my own. I switched to full frame and added custom code for background to match my header however a border still exists. What custom code do I need to add to make the whole header area the color of my choice?

30 kristarella January 11, 2010 at 10:33

Autumn — I think the border currently there is from the empty Feature Box. If you turn off the Feature Box display under the Thesis Design Options it should go away.

31 craig sunney January 17, 2010 at 12:19

Cool beans!

If I am combining this tutorial with the header and navigation move tutorial on http://www.kristarella.com/2008/11/thesis-full-width-headers/
function full_width_header() { ?> <div id="title_area" class="full_width"> <div class="page"> <div id="header"> <?php thesis_default_header(); ?> </div> </div> <div id="nav_area" class="full_width"> <div class="page"> <?php thesis_nav_menu(); ?> </div> </div> </div>

that sinches my header to the top of the page and tucks the nav bar just under it…..

do I still declare the custom full width colour for #header-area?

32 kristarella January 17, 2010 at 13:17

Craig — You shouldn’t use the old header tutorial, but the updated one linked to at the top of that post (http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/). The #title_area was only used before because there was no hook in between #header_area and #content_area to insert #nav_area, but there is now. So, you can discard #title_area and apply all header styling to #header_area.

33 craig sunney January 17, 2010 at 13:30

cool beans!
thx

34 Tonya Gray January 22, 2010 at 09:08

This is such a great resource – thank you for all you do! I was reading the comment about fluid width and I can work with fluid sidebars, assigning perhaps a 20/60/20 setup. Would I set the column wrap at 100%, sidebars at 20% and content at 60%?

Thanks!

TAG

35 kristarella January 22, 2010 at 10:16

Tonya — What you are suggesting sounds about right. You would set .page to 100%, or perhaps 95% to make sure the content doesn’t touch the sides of the browser and you would want to set it to 0 padding in the Thesis Design Options because padding is added on top of the width and 100% width + padding would result in a permanent horizontal scroll bar.
If you’re using a sidebar-content-sidebar layout you will probably have to give #column_wrap a width of 80% and then #content a width of 75%, #sidebar_1 25% and #sidebar_2 20% because in that arrangement there is an extra div around the first sidebar and the content to help with the layout.

36 Tonya Gray January 23, 2010 at 00:24

Excellent! Thanks for the help. I always set the padding to 0 – just seems to fit better with my designs. Thanks for the extra tips on the div’s, etc. also!

37 Oscar January 26, 2010 at 15:38

Ah, now it makes perfect sense. That was very clear, thanks for making a video of it too, I think it really helps out that we can see the changes as you make them. Thanks for posting this!

38 VJ March 5, 2010 at 07:03

wow….I enjoyed every second of your 7.38 minutes :) presentation. I really like your website, especially the background. It is fantastic. And your work on wordful.com. Man! you are such a genius. :). Thank you.

39 Rich March 7, 2010 at 02:17

Great video! It made me realize all the problems of layout I’ve been having (particularly placing my social media buttons where I want) can be much more easily solved and better managed with the full width page framework. I’ll work on switching to that.

I do have a question regarding hooks in the full width framework – are they handled differently than the page framework? I ask because I used the thesis_hook_before_content_box to place my social media buttons. That allowed me to sorta place them where I want but the prob is that the feature box is now pushed down. I want the social media buttons to float over the feature box in the same relative position without pushing the feature box down. With the page “broken” up into divs, I’m hoping I can accomplish that.

I’ll dig through your site for more details on setting up and using the full width framework ’cause it’ll solve a number of layout issues for me, I think.

Thanks!

40 kristarella March 7, 2010 at 11:36

Rich — The only difference in hooks between the two frameworks are that you can use thesis_hook_before_content_area and thesis_hook_after_content_area to make another full-width section after the header or before the footer. Otherwise all hook handling is the same.
Not sure exactly where you mena you’re trying to put the social buttons, but perhaps the thesis_hook_before_content_area hook will help.

41 Thesis Theme Design March 11, 2010 at 21:28

It would be better if you were elaborated. However; i have learned the main things (Thesis Customization) from the comments above.

thanks for this news………..

42 kristarella March 12, 2010 at 08:53

Thesis Theme Design — Elaborated on what? The video has examples of sites using full-width, shows the code behind the page and full-width frameworks and how to customise the full-width framework. What do you think is missing?

43 mark williams March 16, 2010 at 09:41

Thnx Christarella I finally *got* the fullwidth framework and why we should use it from your video. A lot more flexibility with that option.

Once again thnx and keep up the good work!

ps – you didn;t sound stuffy at all ;)

44 Babusel April 6, 2010 at 23:15

Hi Kristarella,

I’ve just started blogging @ bought Thesis v. 1.7
I very much like the way you’ve organized the Comments section.
Do I need any special skills to organize my Comments section the same way?

Thanks,

Babusel

45 kristarella April 6, 2010 at 23:23

Babusel — The only skills you need for these comments are some CSS skills. Feel free to take a look at my current custom.css file, it is marked which part relates to the comments. Also, firebug is invaluable when playing around with CSS.
If you need some beginner info on CSS syntax etc, try the tizag.com and w3schools.com tutorials.

46 Jon Barash April 7, 2010 at 11:35

Thank you for all the videos and tutorials. I am very new in Thesis and wordpress. I’ve been working on my site for a couple of days now and hope I haven’t messed things up with little changes I’ve made here and there. Anyway, after watching your video, I was excited to go play with the different settings you discussed. First thing I did, I changed from page to full-width and expected to see a difference and did not see any change at all? Any idea why? Thanks.

47 kristarella April 7, 2010 at 12:45

Jon — Did you watch the video? It’s pretty much the first thing I demonstrate when switching the framework: there is no difference visually until you start to make other changes.

48 Samir April 11, 2010 at 06:22

Hello madam,

This is indeed a really nice tutorial and one more addon to knowledge me for Thesis frame work. I am using thesis for one of my website and needed this and got it at the right time.

Thanks for the tutorial.

Regards,
Sam.

49 Freddy April 21, 2010 at 13:02

I’m just getting familiar with Thesis. I google’d “full-width framework” and came across your video. Thanks for the explanation.

50 tobie April 23, 2010 at 12:53

hi, i was wondering what would the code be if i wanted to put a full span background to the page, http://www.magicmembers.com/ simalar to on the site where the first blue section is underneath the words..and buttons? thanks.

51 kristarella April 23, 2010 at 13:07

Tobie — I don’t really know what you mean. You may be able to derive what you want from my full-width headers tutorial.

52 Melissa May 8, 2010 at 02:15

Thank you SOO much!!
I’m just building my site, and I’ve seen so many examples of full-width headers but couldn’t figure out how to do it!! Now I will apply it. Thanks a million!

53 Heather May 14, 2010 at 14:25

Great tutorial, thank you! How do you get the “content area” to not extend all the way to the edge of the page? (I put it in quotes because I don’t know if that’s what it’s really called- the actual post part of you site)

54 kristarella May 15, 2010 at 11:28

Heather — There are multiple examples of what I think you’re talking about in the video. If you can’t find the answer there, please expand more on what you’re trying to do & I’ll try to give you the CSS for it.

55 Eric Rovner May 15, 2010 at 14:30

Just wanted to say thank you for a very nice tutorial! Helped me to understand the full-width framework.

56 Tony June 11, 2010 at 06:43

Hi Kristella —

Thanks for these tutorials… takes me a few minutes to grasp some of the instructions as a newbie, but eventually it’s sinking in.

Question – I have been able to make my nav_menu full width using
function full_width_nav() { ?>

<?php }
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_html', 'full_width_nav');

Now, I’d like to make my header area the same. In other words, the nav menu and the header would be right up against the left side, but the rest of the content would look like the page format. (I think I’m using the jargon right here….)

But I can’t figure out the code for doing so. Can you help?

57 kristarella June 11, 2010 at 16:59

Tony — I’m not really sure what you mean. At this point I can only suggest taking a look at my full-width header tutorial and seeing if the answer is there.

58 Sarah @ Give Me Neither June 29, 2010 at 12:05

Kristarella,
I’m using the full-width framework and I can’t figure out how to use an image as a border around my site. I’ve watched the video a few times and I’ve successfully put the image as a background behind all my content (not what I’m trying to do).
I’m a newbie with CSS, so any help would be great.
Here’s what I added to my custom.css file.
.custom {background: url(‘images/leafygreenbackground.png’)

.custom .page {background: #fffffe; }

Thanks.

59 kristarella June 29, 2010 at 17:23

Sarah — Unfortunately there’s not really an image border solution with CSS, you need to get creative with background images. So, you’d probably need a repeating background image that is the width of the content, which has the leaves on either side and solid colour in the middle. Then use repeat-y in the CSS background property to get it to repeat vertically only.

60 Sarah June 30, 2010 at 00:27

Thanks Kristarella,
At least I know I wasn’t missing something simple:)

61 Steven Böhm August 18, 2010 at 05:00

love that safari icon ;) and thanks for the interesting screen cast

62 Navin August 18, 2010 at 06:30

Thx for the prompt reply.
I copied the code exactly from your post and got it right.Only thing did not use my brain at all…..hahaha
Never thought life was was so easy CODING…

Regards
Navin

63 kalengi August 27, 2010 at 22:28

Hey Kristarella,

Great demo on the full-width framework. I’d like to add that using full-width framework also avails some additional Thesis hooks for those wishing to do further customization.

Thanks!

64 Roger Sanchez September 1, 2010 at 00:42

Hi Kristarella;

Great tutorial; as with many of the posters on here, I was indifferent to trying to understand just what ‘full-width framework’ was and watching your tutorial gave me an understanding and has broadened my horizons to consider doing full-width sites when made using WordPress.

I’ve never been a fan of full-width site styles (always have preferred narrow for some reason and sometimes ‘boxy’ if that makes sense, lol), but you have made me reconsider with how you implement it throughout your sites in your examples – great work!

Thanks again for your insight – gotta love Thesis : )

Roger

65 Edward September 1, 2010 at 13:25

This post is clear, succinct and precisely what I need to get my header issue corrected.
3 cheers for Kristarella!

Ed

Leave a Comment

Want to show PHP or XHTML code in your comment? Encode it first so that WordPress doesn't strip it away.

Read the comment policy.

Previous post:

Next post: