What is the Thesis full-width framework?

18 May 2009 in Tutorials

tagged with CSS, Thesis, Tutorials, Videos

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. ;-)

{ 9 trackbacks }

100 Resources for Thesis Wordpress Theme Users | MattFlies.com: 21 May 2009 at 07:56
Thesis Theme Tutorial Reviews: 2 June 2009 at 10:03
Thesis Tutorial Compilation - The Most Useful Thesis Theme Tutorials on the Web organized by subject and author: 30 June 2009 at 02:55
100 Tài nguyên h?u ích cho ng??i s? d?ng Wordpress Thesis Theme | GI?I PHÁP S?: 6 July 2009 at 17:16
100 resources for users of the excellent Thesis Theme for Wordpress: 6 August 2009 at 03:28
Twitter Trackbacks for What is the Thesis full-width framework? — kristarella.com [kristarella.com] on Topsy.com: 1 September 2009 at 17:02
100 Tài nguyên h?u ích cho ng??i s? d?ng Wordpress Thesis Theme | TinhYeu.Mobi: 27 September 2009 at 11:20
250+ Thesis Theme Resources | Sahil Kotak dot Com: 9 December 2009 at 05:26
Top 25 Thesis Tutorials for Newbies: 26 February 2010 at 03:19

{ 42 comments… read them below or add one }

1 John Hamilton Farr 19 May 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 19 May 2009 at 06:17: Kristarella, I’ve been looking for info on this subject. Thanks for the video!
3 ivete 19 May 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 19 May 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 20 May 2009 at 14:22: Really excellent! Thank you for this.
6 dinu 22 May 2009 at 03:26: thanks ! it was helpful
7 Miguel Wickert 22 May 2009 at 05:42: Thanks for sharing, I’ll watch as soon as things slow down. :) Stumbled and reviewed. Cheers,

-Mig
8 Lorenza 29 May 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 19 June 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 19 June 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 28 June 2009 at 14:18: nice !
12 tigtog 3 July 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 6 July 2009 at 15:12: Excellent tutorials, i am implementing it with mine and hope nothing happens
14 Lynn Currie 3 August 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 3 August 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. 18 August 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 18 August 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. 18 August 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 5 September 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 5 September 2009 at 23:23: Hey Chinedu, the instructions I used for rotating background images are at SonSpring. :-)
21 Sherwin 7 September 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 8 September 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 8 September 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 24 November 2009 at 04:43: How did you do the Clips thingy with coda? (when you dragged the code into coda page)
25 kristarella 24 November 2009 at 08:12: Ayo — press the clips button at the bottom of the Coda window.
26 robert phillips 24 December 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 28 December 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 28 December 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 11 January 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 11 January 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 17 January 2010 at 12:19: Cool beans!

If I am combining this tutorial with the header and navigation move tutorial on http://www.kristarella.com/200.....h-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 17 January 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/200.....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 17 January 2010 at 13:30: cool beans!
thx
34 Tonya Gray 22 January 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 22 January 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 23 January 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 26 January 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 5 March 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 7 March 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 7 March 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 11 March 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 12 March 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?

What is the Thesis full-width framework?

Catch me on Twitter

Recent Snippets

Recent Bookmarks

Donate