Last night I had three columns in my blog, Thin, wide, thin, using the Minimal Blue style, I went and tried to add formatting to the Main Index and wiped the columns out, which went to the bottom of the screen and I cannot figure out what tags are needed to get them to come back. I know this is vague, Any help to be had?
Reported on Movable Type 5
It's usually an unclosed <div&rt; tag, or an extra one, that upends any design that uses css.
I've spent way too much of life hunting and counting them.
I mean <div>, of course.
Is there a site that will show me the original Main Index Template mark up? I just can't find it. Thanks so much for answering me.
What template set are you using Melanie?
Could I see your Website URL in order to provide you the fix?
Does this look like it? http://ppcf.net/default_templates/main_index.mtml
Can't tell if this is mt5 (I'm still with 4.x) but the dates here look about right.
http://www.melanietesta.com/mtype/
Mihai, I would love if you would look at this, I am no expert, I would love to figure it out.
Shenews, the template you direct me to is similar though not quite it.
I believe I am using Minimalist red. I have MT5 on my system.
Thank you.
Hi Melanie,
Am immediate fix on your project is to add the following reference to the CSS style on your "HTML Head" template module.
However, as you've damaged a bit the HEAD section I would recommend you to ignore the phrase I've just wrote above and to do the following:
Go to: Design -> Templates
From the sidebar click on "Refresh Templates" under "Actions" and choose "Reset to theme defaults" from the page that would popup.
As you didn't implement any customization to the blog, this is the right path to go.
I've noticed that you've tried to add a custom header image, but you didn't do it on the right place.
After you restore your classic blog templates to the default version, I would recommend you to overwrite the default header image by patching the CSS file.
You could easily do that by adding the following to your "Stylesheet" template:
#header {
background: #ad0404 url(/mtype/archives/header1209v2.jpg) repeat-x center center;
}
Kind Regards,
Mihai Bocsaru
Melanie,
The problem is that you've edited the <head> section and removed some of what needs to be there and inserted your <h1> tag in the <head> rather than in the <body> section. What I suspect you actually did was to delete the <mt:Include module="HTML Head"> statement from the Main Index template and insert your own <h1> statement in its place.
The stuff that goes in the <head> section as defined in the HTML Head template module, doesn't appear on the screen directly. Instead it defines what resources the page will require including the CSS style sheets, javascript files, and various other meta tags as needed.
Here's a plain vanilla install of MTOS 5.01 with minimalist red. Take a look at "view source" and see how the <head> section differs from yours.
http://www.tzcdev.com/mtos5demo/blog/
You need to put the HTML Head template module back in. That means putting the mt:include statement back into Main Index template. Here's what the beginning of the Main Index template looks like for the mtos5demo blog.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> <head> <$mt:Include module="HTML Head"$> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$mt:Link template="rsd"$>" /> <title><$mt:BlogName encode_html="1"$></title> </head> <body id="<$mt:BlogThemeID$>" class="mt-main-index <$mt:Var name="page_layout"$>"> . . .Then add your <h1> statement to the Banner Header template module or do as Mihai suggested and use a background image in CSS to add your picture to the top banner area.
Hope this helps.
Violet, it is best is Melanie just restores to the default template set and does the change I've recommended her.
Looking at how the site is now, you could understand that Melanie is not very technical so if we go too deep with the explanation we might confuse her even more ;)
So, my recommendation to Melanie is to follow the advice I've provided her and that would solve all her problems without too much hassle.
Thank you both. I was able to restore the columns, mostly by cutting and pasting and used both your prompts in helping me get there.
Mihai, you are right. I am newbie at this. I haven't been able to figure out how to replace the header and would like to. I would also just like to understand, so that the blog can look way better than this. I have a lot of other information, I would like to put into the code, images, links and the like. How do I learn?
I used to use MType 2.665. I tinkered with the code all the time. This install seems to be much more serious and geared toward the experienced people.
As I see it, there are no stylesheet templates, as I am used to seeing them anyway. So I don't know where I would place the code you suggest Mihai.
I tried pasting my h1 tag in the banner header in several places and nothing seems to stick. I really wish I understood this.
It's looking better than it did!
As for tinkering with MT 2.665, HTML and CSS coding standards have come a long way since that was released and the current versions of MT, both v4 and v5, attempt to implement good semantic coding in their template designs.
You can add links in the sidebars by creating widgets and then adding them to the widget set that you want. Look at a widget that already exists to get the basic code for the widget structure. Copy & paste it into a new widget that you create and then change the content to what you want to appear in that widget.
You can change an awful lot just by tweaking the CSS style sheets. As for images, if they are background images that you want to appear behind your blog title or a column heading then coding them as part of your CSS is what you want to do.
Part of the reason that your design still looks a little funky is that you've removed the container and container-inner div's and all the header div's from your template.
A lot of the default formatting is tied to those. If you don't include them in your HTML, then none of the style information that's present in the CSS stylesheet can be applied to your web page.
Try this. Add this back into your template right after the <body> statement:
And add this to the bottom just above the </body> statement.
You'll see an immediate improvement.
My guess is that you removed the <mt:Include module="Banner Header"> statement from the Main Index template. Doing that removed the header divs from your code.
Either add the mt:Include statement back into the Main Index template and then go edit the Banner Header template module and add what you want in or add these statements to your Main Index template right after the container-inner div statement.
Now if you want an image behind your blog title that appears in your <h1> statement then add a background parameter to the header-inner div in the CSS.
Be sure to add the background statement to the rest of what's there for the #header-inner div within the { } and define the height of the div to be the height of the picture.
As to where to make the CSS changes, look at the Stylesheet template. You'll see two import statements:
Those statements get transformed into this when you publish the site:
Don't touch the first one. Copy the second one. Rename it. Add that new name to the Stylesheet template import statement.
Make your CSS style changes to your new style sheet and then upload it via FTP to the correct directory folder.
Hope this helps.
Melanie, the approach you've chosen to follow takes a lot more time than the one I've recommended and also it involves giving you a lot of manual instructions as well as the probability that you miss something.
If you would have followed by advice with the templates refresh, you would have solved your problems in less than 1 minute.
I bet you've spent a lot more and you are still to spend time on this.
Can you just do what I've advised in step-by-step format above?
http://forums.movabletype.org/2010/02/width-columns-what-tha.html#comment-37808
MIhai, Thanks.
I did actually follow your instructions in the end. I tried the other but like Violet said, I missed some code somewhere and could not figure out where. I am still working on personalizing and I have been able to get my header up while following Violets instructions but not without the minimalist red header in addition to mine. I do want to wrap my mind around the how-to aspect and appreciate the more long winded instruction because I want to understand more than the very basics. We all need to start somewhere I suppose.
Wow, I am finally sort of getting it.
The Assetts do not work (righthand sidebar). They never have. I am unsure I did anything to cause this and sort of thing perhaps the directory for the photos isn't poiting in the right place. I would like to be able to use this. Any help there?
Also, is there a way to get rid of the red border in the header and footer?
How wide could my header be if I used the entire area?
Thanks so much for all the help. This has been a great experience.
You're welcome Melly and congratulations for getting there!
I see that you've figured out the header width which is 940 pixels by default. Obviously, everything is adjustable if needed, but that is the default value for this theme.
On another topic you've raised at http://forums.movabletype.org/2010/02/recent-assets-not-working.html I've provided you advice on how to fix the problem you have with the assets.
You didn't do anything work on that, but you need to try a specific image engine, or to ask your hosting support to install some modules for you, or to look for an alternative hosting solution (I could be of help if needed).
I'm having a similar problem.
I am using the Professional Templates, and have made some changes to colours, fonts, etc. I don't think I've changed margins, padding, or anything like that. But instead of a wide-medium layout, I get the medium column displaying at the bottom of the page. I have no idea where I should be looking to find the origin of this problem.
http://ottawavalleyirish.com/blog/
At the moment the alpha and beta div's do not have any width's set so each is expanding to 100%, that is why one drops below the other.
The Styles template in an unaltered Professional install of MT4.32-en includes the following 2 statements
which turn out to look something like this in an unaltered install of Professional Black:
The first, blog.css, has critical information in defining the positioning of the divs in a wm layout.
It and its contents appear to be missing altogether in your implementation.
The other thing that's curious is that although the div's that define the sidebar do appear within your code:
Nothing appears in between those two sets of HTML statements in the "view source" of your webpage. Whatever should be contained in there is defined in the Sidebar template include. In an unaltered copy of Professional Black for a wm-layout, it should be pulling in the "Main Sidebar" widget set.
You'll need to correct the stylesheet issue and then check the Sidebar template include to see what's going on there.
Hi Melanie,
Am immediate fix on your project is to add the following reference to the CSS style on your "HTML Head" template module.
However, as you've damaged a bit the HEAD section I would recommend you to ignore the phrase I've just wrote above and to do the following:
Go to: Design -> Templates
From the sidebar click on "Refresh Templates" under "Actions" and choose "Reset to theme defaults" from the page that would popup.
As you didn't implement any customization to the blog, this is the right path to go.
I've noticed that you've tried to add a custom header image, but you didn't do it on the right place.
After you restore your classic blog templates to the default version, I would recommend you to overwrite the default header image by patching the CSS file.
You could easily do that by adding the following to your "Stylesheet" template:
#header {
background: #ad0404 url(/mtype/archives/header1209v2.jpg) repeat-x center center;
}
Besty regards