What is the Thesis full-width framework?

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

Comments

  1. says

    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. says

    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!

  3. says

    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

  4. says

    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

  5. Bob says

    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

  6. says

    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.

  7. says

    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.

  8. says

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

  9. says

    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.

  10. says

    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

  11. says

    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.

  12. says

    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}

  13. Chinedu Mgadi says

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

  14. Sherwin says

    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?

  15. says

    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.

  16. Sherwin says

    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.

  17. robert phillips says

    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.

  18. says

    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.

  19. robert phillips says

    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

  20. says

    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?

  21. says

    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.

  22. says

    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?

  23. says

    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

  24. says

    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.

  25. says

    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!

  26. says

    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!

  27. says

    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.

  28. says

    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!

  29. says

    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.

  30. says

    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………..

  31. says

    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?

  32. mark williams says

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

  33. Babusel says

    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

  34. says

    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.

  35. says

    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.

  36. says

    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.

  37. says

    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.

  38. says

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

  39. tobie says

    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.

  40. says

    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!

  41. says

    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)

  42. says

    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.

  43. Tony says

    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?

  44. says

    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.

  45. says

    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.

  46. says

    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

  47. says

    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!

  48. says

    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

  49. Edward says

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

    Ed

  50. says

    krista,
    I love the video and did everything exactly the same as what your vid showed, however, I am not seeing any different colors in the header nor the nav. Any suggestions?

  51. says

    Hi kristarella, I just find these tutorials. These are really great. I am new to thesis customization. Hopefully you have discussed everything in details here. So I will check often your site to learn some thing more about thesis. see ya :)

  52. says

    Kristarella,
    Please don’t publish this URL, it isn’t live yet. Thank you.
    I’m having a heck of a time with cross-platform design on a site.
    At your suggestion, I just switched to the full-width framework, but it doesn’t matter whether I am or not, I’m having the same problem. I have the columns set (currently) to left sidebar 298 px and content 662 px. That makes the best balance of problems, but the header is 912 px, plus white padding brings it to 932px. If I set the content width to 634 (with sidebar 298) to add up correctly making it 932 based on the header, then the header falls off the right side of the page in Firefox. If I line it up for Firefox setting the content to 690, I get too much white space on the right in Safari. I thought, ok, fine I’ll try to center the header iamge, but couldn’t get the header image to center no matter what css I tried.

    But even disregarding the above, when I look at this site in IE or Firefox on a PC (I’m on a Mac, testing in Safari & Firefox), well, on a PC, the navigation is only making do in position (more on that below) (I tried using ems, but that places the menu correctly on a Mac and above the visible area on a PC, so I reverted back to pixels), and the text falls off the left side on in IE on the homepage.

    I seem to have one issue figured out ok, but I’m mentioning it because it may be related. I have tweaked the custom.css to have the navigation on the right on the right upper part of the header. I have setup the homepage to use the no sidebars template, and haven’t finished with the content on that page yet. And I made the background image a layered photo, using the inset photo centered and 978 pixels wide to give some buffer to the layout. But the page on the PC in IE is about 200 pixels off to the left. Or is IE putting the background too far right?

    Your above tutorial mentions that I could use full-width framework and still set a page width, but then you don’t actually show that code… I’m thinking that may help, perhaps even centering the page — what do you think?
    Thank you, I appreciate your help! I’m trying to learn WP/Thesis for client sites, but I’m about to revert to coding them all myself because it took SO much less time than this is!

  53. says

    LynnW — The width settings in the Thesis design options are the useable content areas in each section, but there is also extra padding around. So, if you set the content to 600px, and the sidebar to 200px, they are the widths of the stuff you can put in the posts and sidebar widgets, but there will be at least another 40px or more of padding around the place. I find it simplest to decide what content widths I want, then use Firebug to determine what the resulting page widths are then make my header image accordingly.

  54. says

    Hi Kristarella,

    Hope you’re still answering comments on this tutorial! Great tutorial — I used it for my site and everything is working out great. However, my yellow nav bar and my red footer are still extending the full width of the screen. I guess what I’m trying to do is change the color of the parts of the nav bar and footer that are outside the content area to blue (like the rest of the site).

    Also — as a side note — I have been trying to get rid of this horizontal white line above the yellow boxes — any thoughts on this would be appreciated! :)

    My code is below: Any help much appreciated!

    /*full width nav bar*/
    .custom #nav_area {background:#bc921b; padding-bottom: 5px; padding-top:5px;}
    .custom #nav_area .page {background:transparent;}
    .custom ul#tabs {border-bottom:10; border-color:#EBFF66;}
    .custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
    .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}

    /*full width footer*/
    .custom #footer_area {background:#7d0214; padding:0.5em 0; border-top:1px solid #bbd;}
    .custom #footer_area .page {background:transparent;}
    .custom #footer {border-top:0;}

  55. says

    Hi Kristarella,

    quick question – do you know if the framework can be set from within the css/functions file?
    I normally use full width framework and my theme customisations are normally optimised for this. But when i apply a new customisation for the first time i always need to go into site options and set the framework so that my design will display properly.

    I would like to just apply my theme folder and thats it – with the css/functions file declaring the framework. Do you know if it can it be done?

    Thanks!
    Craig

  56. says

    Thanks Kristarella for putting this video together. I found the pace of your instruction to be just right.

  57. jeff says

    Hi,
    I really appreciate your help. My full-width header doesn’t fill the screen when viewed on an Ipad. Do you have any suggestions or work arounds? Thanks in advance.

    Jeff

  58. says

    Jeff — Yep. Find out what your .page width is (let’s say it’s 100em) and then add .custom .full_width {min-width:100em; width:100%;} to custom.css. That should fix the iPhone/iPad issue, and also another problem that can occur when a browser’s width is less than your site width.

  59. Jeff says

    Hi, This is Jeff again from comment #75. Thank you so much for fixing my issue. Very appreciative, Jeff

  60. Rachel says

    Thanks for the tutorial. I am using widgets in the footer area, and I would like the background behind the widgets to extend full-width. I succeeded in making footer_area full width, but the footer widgets appear above footer_area. Any ideas?
    Thanks again.

  61. says

    Rachel — Do you have a link that I can see. I’m not sure why your footer_area background would not extend behind the footer widgets, unless they are not really in the footer_area, or if there’s is some floating anomaly that is causing the area to not wrap the widgets properly, but either way, I don’t think I can fix it without seeing it.

  62. says

    Hi, i m very big fan of your site, n u doing great work, i m newbie to thesis n also don’t know much about coding etc, can u please tell me how to remove the “Inner page padding” from thesis… I want to remove the little spaces around interior layout borders…

  63. says

    Ayub — The best way is probably to use firebug to find which elements need to have padding removed and then remove it via custom.css. E.g., .custom .sidebar_list {padding:0;}. But note that the widths and padding are quite finely tuned, if you change them apart from the design options you might need to change other widths and paddings to balance everything.

  64. says

    Thank you so much for pointing me in the right direction… i used firebug n have successfully removed the extra padding…. Thanks for telling me about this ad-on it is really helpful….

  65. says

    Sorry, Little off topic question, but i dont know who else to ask, so i think may b u r the best, ;-)…. i just want to place a hook at the end of post “containing one ad n social bookmarking buttons together” very closely framed…. can you give me any idea how it can be done? i want to gather two things like this…

    http://www.tonightschedule.com...../image.png i dont know how to add it at the end of post…..

  66. says

    ok leave that, tell me one thing, is there any possibility of using the killer recent entery widget after post, instead in sidebar, actually i want to show the recent posts from a different category at the end of the post, with the same css as in sidebar….. any idea…

  67. Jeff Kinley says

    Hi again,

    What version of Thesis were you using here. I am using 1.8 and I don’t seem to be getting the same results as you in the screencast above. I am on full-width framework, yet when I change the header to be full-width as you demo above, there is a page effect still appearing in the header. Wonder why the inconsistency?

    JK

  68. says

    Jeff — No, it would have been Thesis 1.5, or 1.6 when I made this. There has been a change since then and you need .custom #header_area .page {background:transparent;}, or .custom .page {background:transparent;} if you want all sections to appear full-width.

  69. says

    Hey Kristella i have noticed you have not written any tutorial on how to place google ads in different ocations of thesis themes, i need your help i want to place some ads on that page which came when we click any tag in single post… i dont know what would be the name of that page to use that in conditional tag… i know how to place ads on single page, home page, n categories page…. but i dont know how to place on this page… i am giving you link.. have a look.. n… Help me if possible…

    http://1ind.com/tag/class-xii-results-2011

  70. Jeff Kinley says

    Hey Mate!

    Thanks again for all your help. Quick question: Could you do a brief tutorial on CSS and menus? I know you have touched on this before, but I am having problems specifying the CSS for multiple nav bars. For example, .custom .menu works on EVERY menu. Obviously, because all menus have that class. How can we differentiate between, say, header nav and sidebar nav? Also, I am so tired of the CSS rules in the thesis admin panel stuffing me up. Any recent CSS resets? How can I get the thesis default settings out of the way?

    Thanks,

    JK

  71. says

    Jeff — I am intending to do some more CSS tutorials, but the key thing you need is to increase the specificity of your CSS. In this case you can add the containing element in the CSS cascade; e.g., .custom #header_area .menu and .custom .sidebar .menu.

  72. says

    Thank you for addressing the Iphone/Ipad fullwidth framework issue (comment 75-77)!!! My socks have been rocked.

    Aloha

  73. says

    Fantastic tutorial! I had been trying to work out how to make the full-width look like it was page for a while now and this cleared it up perfectly. Thanks!

  74. says

    Actually i want to stop such pages [http://goo.gl/Xt0hX] from indexing… n i know about those options you pointing me to… But those options are not working for me…

  75. says

    Anita — The Thesis options page has check boxes to say whether certain archive pages should be indexed or not and Thesis will add nofollow and noindex to those pages… Another alternative is to use the Google XML Sitemaps plugin, which will create a sitemap of your site and you can exclude tag archive pages that way. If you’re finding that it’s not working, that might be because the pages have already been indexed and they haven’t been flushed from the search engine’s cache yet, and there’s no guarantee that all search engines will obey your commands. Google should obey noindex, but there may be other spiders that don’t care what you tell it, I’m not sure.

    However, if you’re not sure whether your options are working, check the HTML of the tag pages for “noindex” after you’ve applied it in the Thesis Options. Also if you want to expedite flushing those pages from Google’s cache you can request that they be removed via Google Webmaster Tools.

  76. says

    Thanks for so detailed information, i think it will solve my problem and i now i can prevent all those unwanted pages from indexing… Thanks a lot…

  77. michael says

    If i want to make the NAV menu the full width, how do I do that? you know what i mean? Instead of having the nav menu and formatting being only as long as the number of pages you have, i would like to have it fill the bar with a similar formatting. can you pls help?

  78. says

    Hi Krista,

    I’m having a problem with the full-width header because it displays differently in various browsers. The only thing I’ve done so far is choose the “full width framework” within the Thesis Site Options dashboard. The result works as expected when viewed in Safari. However, in Firefox 6.0.1, the full-width framework expands and contracts to the full-width of the window, leaving no padding whatsoever, which looks a bit silly.

    I’m afraid to look at it in IE. : )

    Do you have a workaround?

    With much thankfulness for your ongoing generosity!
    Mary

  79. says

    Mary — It sounds like you’re not getting the new CSS in Firefox… browsers cache websites slightly differently, so try reloading a couple more times in Firefox, or clearing the browser’s cache. That should give you a correct view of the site.

  80. says

    Hi Kristen,

    Thank you for sharing your goodies to the world.

    I went to the full with framework. It looks beautiful.
    I did a change I do not know, when I click a comments link it takes me to the footer (comments and the actual post disappear).

    Please can you take a look?
    for instance click: http://inspiredachievement.ro/...../#comments

    See, comments and the actual post are missing.

    Any hint is very highly appreciated.

    Thank you,

    Ioan

  81. says

    Ioan — I think it might be an error in the domtab javascript, there’s an error in that script that seems to coincide with the time that the comments disappear when loading the page. Can you disable whatever you have that is creating tabbed content and see if that is the culprit?

  82. says

    Hi Kris,

    Indeed I have disabled the js file and now it works. I wonder what changed since I upgraded wp that makes the js file affect how comments show up.

    You are a beautiful human being. Thank you very much for attention.

    I will offer something free to somebody else and pay your gesture forward.

    I wish you peace,

    Ioan

  83. says

    I have a question regarding thesis theme. i don’t know what is in thesis default robots.txt e.g noindex for tags etc.. so can you guide me what i need to write in robots.txt or there is no need to add anything in robots.txt and thesis theme will handle everything itself.. i have seen many blogs some are using default robots.txt like…

    User-agent: *
    Disallow:

    Sitemap: http://www.example.com/sitemap.xml

    while others are using so many conditional tags as they are trying to disallow things like cgi-bin, wp-include, wp-admin etc so just give me a tip i should follow which one? I know it is different topic. but i think you have not posted any post on thesis theme review in your site.. thats why i asked here.

    • says

      Ayesha — you don’t really need to worry about manually writing in robots.txt with Thesis: you can set all archive pages to noindex or nofollow on the Thesis Site Options, or individual archive pages by editing the category or tag info, or individual posts and pages on their edit page.

  84. says

    Hi Kristarells,
    Found you site and really like the way you are helping novice to get up to speed. I’m a total novice, so how do you get rid or change of the header, in your case “Snoopy Test Sites” and tag that appears underneath or “MY Blog” on my website and the tag.
    I’ve tried to change but can’t figure it out.

    Another question, when I downloaded thesis, the template only has home and nothing else and I’ve seen examples of peoples websites that have a sample page with reference to Teasers etc., and other pages with sample text. Am I imagining or am I missing.
    Thx’
    Randeep

  85. says

    Randeep — The title and description of your site is set on the General Settings page of the WordPress admin.

    The setting for whether you show a page or blog posts is on the Reading Settings page of WordPress: it looks like you’ve got a static home page set. If you want to see blog posts on the front page then set it to show the posts… You’ve instead got them showing on the blog page, but you won’t see teasers until you have more posts, or you set the Feature Posts number to 0 in the Thesis Design Options under home page settings.

  86. says

    Thanks Kristarella, that was so simple. Going forward will be asking you more questions, thanks again for the info and a terrific resource site for Thesis.

  87. says

    Hi Kristarella, I want to use thesis in my site and want to replicate this site http://www.bidsketch.com. My question is how can I replicate this header in home page that will not be the same in other page.

    Please explain how this is done. It will be a great help if this will be solved.

    Thanks

  88. says

    Hi Kristarella
    I just went onboard Thesis and for a new bee it’s going okay :-) But I have trouble making full-width framework. I know right now I’ve only having the header and footer color at page-width but every time I try to change it, it’s like the hole page is laying on top of the background?

    Futhermore sometimes it takes 3-4 minutes to update changes? Sounds wired? Do you think I have to make a complete new installation?

    Love your design here at kristarella.com and also your guides – keep up the work nobody comes near this in Denmark :-)

  89. says

    Tom — You probably need to check that your layout.css file has the correct permissions (666) and that you have the Design Mode option checked in Thesis Site Options. If that option is not checked it combines layout.css and custom.css, but not necessarily every single time you change it; it might not recompile it until you visit the options, which would probably explain the delay you’re seeing.
    I’m not sure about the rest of the issues you mention… it depends what CSS you’re putting in custom.css.