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. 😉
John Hamilton Farr 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.
Mark Settle says
Kristarella, I’ve been looking for info on this subject. Thanks for the video!
ivete 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!
Internet Business With Purpose 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
nobugs says
Really excellent! Thank you for this.
dinu says
thanks ! it was helpful
Miguel Wickert says
Thanks for sharing, I’ll watch as soon as things slow down. 🙂 Stumbled and reviewed. Cheers,
-Mig
Lorenza 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
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
kristarella 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.
muhdfarhan says
nice !
tigtog 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.
Tinh says
Excellent tutorials, i am implementing it with mine and hope nothing happens
Lynn Currie 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. 🙂
kristarella 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.
John O. 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
kristarella 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.
John O. 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}
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.
kristarella says
Hey Chinedu, the instructions I used for rotating background images are at SonSpring. 🙂
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?
kristarella says
Sherwin — I think you will need some CSS that gives
#header
the styleposition: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.
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.
Ayo says
How did you do the Clips thingy with coda? (when you dragged the code into coda page)
kristarella says
Ayo — press the clips button at the bottom of the Coda window.
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.
kristarella 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.
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
Autumn Beck | Cloth Diapers 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?
kristarella 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.
craig sunney says
Cool beans!
If I am combining this tutorial with the header and navigation move tutorial on https:\/\/”www.”kristarella.blog/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?
kristarella says
Craig — You shouldn’t use the old header tutorial, but the updated one linked to at the top of that post (http://www.”kristarella.blog/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.
craig sunney says
cool beans!
thx
Tonya Gray 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
kristarella says
Tonya — What you are suggesting sounds about right. You would set#column_wrap a width of 80% and then
.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
#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.Tonya Gray 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!
Oscar 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!
VJ 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.
Rich 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!
kristarella says
Rich — The only difference in hooks between the two frameworks are that you can use
thesis_hook_before_content_area
andthesis_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.Thesis Theme Design 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………..
kristarella 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?
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 😉
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
kristarella 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.
Jon Barash 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.
kristarella 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.
Samir 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.
Freddy says
I’m just getting familiar with Thesis. I google’d “full-width framework” and came across your video. Thanks for the explanation.
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.
kristarella says
Tobie — I don’t really know what you mean. You may be able to derive what you want from my full-width headers tutorial.
Melissa 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!
Heather 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)
kristarella 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.
Eric Rovner says
Just wanted to say thank you for a very nice tutorial! Helped me to understand the full-width framework.
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?
kristarella says
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.
Sarah @ Give Me Neither 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.
kristarella 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.Sarah says
Thanks Kristarella,
At least I know I wasn’t missing something simple:)
Steven Böhm says
love that safari icon 😉 and thanks for the interesting screen cast
Navin 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
kalengi 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!
Roger Sanchez 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
Edward says
This post is clear, succinct and precisely what I need to get my header issue corrected.
3 cheers for Kristarella!
Ed
Jonathan 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?
kristarella says
Jonathan, did you copy the changes to your stylesheet after testing in firebug?
Raj Hasan 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 🙂
Columbus Ohio Dentist says
Thesis seems simple, but I certainly still have a lot to learn about it.
LynnW 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!
kristarella 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.
Andrea 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;}
Craig Fagan 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
Michael says
Thanks Kristarella for putting this video together. I found the pace of your instruction to be just right.
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
kristarella 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.Jeff says
Hi, This is Jeff again from comment #75. Thank you so much for fixing my issue. Very appreciative, Jeff
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.
kristarella 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.
Rachel says
The web site is http://www.icehousegang.com
kristarella says
Rachel — Those widgets aren’t in the footer, but in the sidebars as they are positioned in the single column layout of Thesis. They’re not in a full-width area of their own, so to make a full-width widget area in the footer of that site design I would add footer widgets and then either just leave the sidebars with no widgets in them, or remove the sidebars with a filter.
Ayub 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…
kristarella 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.Ayub 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….
Ayub 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…..
kristarella says
Ayub — I recommend reading these Thesis basics tutorials and this user manual article. They’re essentially what you need to add something after a post.
Michelle DeMarco says
This was really helpful. Now just about all of my sites are full-width. Thanks so much!
Ayub 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…
kristarella says
Ayub — Yes, you can put a widget area anywhere you like, the same way I do in the footer tutorial, or I have examples of showing related or recent posts in my custom loop tutorial.
Ayub says
Thanks, it was really helpful….
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
kristarella 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.Shah Zina 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
kristarella says
Shah — All the Conditional Tags are on the Codex. These are all the ones for a tag page.
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
kristarella 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
.Ashley says
Thank you for addressing the Iphone/Ipad fullwidth framework issue (comment 75-77)!!! My socks have been rocked.
Aloha
Andrew 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!
Anita Rao says
Nice tutorial, can you tell me how to prevent tags from indexing? Im facing that problem…
kristarella says
Anita — Check your Thesis site options page.
Anita Rao 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…
kristarella 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.
ANITA RAO 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…
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?
kristarella says
Michael — See this post.
Mary 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
Suraj @seekably says
Very Nice .
Thanks for sharing such a wonderful post!
kristarella 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.
Ioan Nicut 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
kristarella 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?
Ioan Nicut 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
Ayesha Khan 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.
kristarella 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.
Randeep 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
kristarella 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.
Randeep 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.
Kenneth 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
kristarella says
Kenneth — This post on page specific headers should help you.
Kenneth says
Kristarella,
How can I copy this exact homepage in thesis, is there a way that this can be done in thesis?
kristarella says
Kenneth — yes, it can be done, but it’s a matter of being able to manipulate CSS and HTML, and in WordPress you’ll probably need to use some PHP for the custom home page.
There’s no short way of telling you how to do it, except to point you to some info on these topics.
http://www.w3schools.com/css/
http://diythemes.com/thesis/cs.....ty-thesis/
http://diythemes.com/thesis/rtfm/ (particularly how to use hooks)
Tom 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.blog and also your guides – keep up the work nobody comes near this in Denmark 🙂
kristarella 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.
James says
Hey, where’s the video?
kristarella says
James — It’s in the post. I don’t know if it works on the iPhone… it’s a Vimeo embedded video.
Fijura Web Design Perth says
For website designers like ourselves, we must say that tizag.com and w3schools.com are invaluable resources that are excellent for quick referencing!