HELP! Side-bar disappeared

jsoo · 2011-01-28 02:24:15

Currently, the site has something like this:

----------------------------
|         container        |
| ------------------------ |
| |       branding       | |
| ------------------------ |
| |       nav_main       | |
| ------------------------ |
| |       content        | |
| |             |        | |
| |   main      | feature| |
| |             |        | |
| |             |        | |
| |             |        | |
| |             |        | |
| |             |        | |
| |             |        | |
| ------------------------ |
| |      subscribe       | |
| ------------------------ |
| |         info         | |
| ------------------------ |

#container has a white background, which is great for everything except #branding. Options include:

give #container a transparent background, then give everything else except #branding a white background, or;
pull #branding out of #container, then you have to get it centered and aligned properly, or;
give #container a transparent background, and enclose everything except #branding in a new div with a white background.

Which of these makes most sense is mainly a matter of what is easiest. If you had success with the first technique, fine.

At one point when I checked the test page, you had added the image directly to the page, rather than as a CSS background image as it is on the live site. Fine, just a different technique. Doable, but you have to overlay the #vcard element somehow. Also, if I’m not mistaken you had put the img tag inside the <head> section, a no-no.

n2 · 2011-01-28 02:35:03

I think the best/easiest option is the 3rd one (a new div with a white background for the main content) , but what I don’t know how to do is creating another div container with a transparent background in the CSS (to put the branding in.)

jsoo wrote:

#container has a white background, which is great for everything except #branding. Options include:

give #container a transparent background, then give everything else except #branding a white background, or;
pull #branding out of #container, then you have to get it centered and aligned properly, or;
give #container a transparent background, and enclose everything except #branding in a new div with a white background.

Which of these makes most sense is mainly a matter of what is easiest. If you had success with the first technique, fine.

At one point when I checked the test page, you had added the image directly to the page, rather than as a CSS background image as it is on the live site. Fine, just a different technique. Doable, but you have to overlay the #vcard element somehow. Also, if I’m not mistaken you had put the img tag inside the <head> section, a no-no.

Last edited by n2 (2011-01-28 16:11:32)

jsoo · 2011-01-28 14:12:43

n2 wrote:

I think the best/easiest option is the 3rd one (a new div with a white background) , but what I don’t know how to do is creating another div container on the CSS sheet to put either the branding in.

If I’ve followed you correctly to this point, you are using the “default” page template for the home page. I would also guess the “default” template is used for all sections except “calendar”. It’s possible that other sections use other templates; check in Presentation->Sections.

Without seeing all the various forms I am making something of a guess, but probably the correct place to add the new tags in the “default” template would be to add:

<div id="content_container">

right below the “nav_main” form (because I don’t think nav_main needs a white background either), then add the closing </div> tag at the very bottom of the template. Then style div#content_container as you like in the appropriate CSS file.

You’d need to add the div tags in the calendar template (and any other templates in use) also.

GugUser · 2011-01-28 15:42:56

n2:

I recommend: Learn the principles of HTML and CSS

Give a man a fish, and you feed him for a day; teach a man to fish, and you feed him for life.

n2 · 2011-01-28 17:33:44

But the content already has a container. What ineed is another container for “branding” (header image only) and i don’t know how/where to put that in the page template, which is coded like this:

<txp:output_form form=“header” />
<txp:output_form form=“branding” />
<txp:output_form form=“nav_main” />

<!— content —>
<div id=“content” class=“wrapper”>
<div id=“content_main”>

<txp:article status=“sticky”

<hr />

</div>

<txp:output_form form=“home_sidebar” />
</div>

<txp:output_form form=“nav_promote” />
<txp:output_form form=“newsletter” />

<txp:output_form form=“siteinfo” />
<txp:output_form form=“footer” />

jsoo · 2011-01-28 17:42:04

n2 wrote:

But the content already has a container. What ineed is another container for “branding” (header image only) and i don’t know how/where to put that in the page template, which is coded like this:

Again, there are several ways to skin this cat. The problem is that #container holds everything on the page, except for the body margins. Probably the easiest fix is to add a secondary container, inside #container, and holding everything except #branding (and, optionally, #nav_main). From the template you posted, it probably works to add tags like this:

<txp:output_form form="header" />
<txp:output_form form="branding" />
<txp:output_form form="nav_main" />

<div id="foobar">

<!-- content -->
<div id="content" class="wrapper">
<div id="content_main">

<txp:article status="sticky" />

<hr />

</div>

<txp:output_form form="home_sidebar" />
</div>

<txp:output_form form="nav_promote" />
<txp:output_form form="newsletter" />

<txp:output_form form="siteinfo" />
<txp:output_form form="footer" />

</div>

renaming #foobar to whatever you like, then giving that div the white background.

Now, possibly this extra div isn’t needed. For example, it might work to move the close tag for div#content.wrapper to the bottom of the page, instead. I’m not sure; I haven’t studied the CSS that closely.

n2 · 2011-01-28 18:12:52

Right; that’s exactly what i need: a secondary container to separate out the main contents from the header & the blue navigation bar.

i’ll try your code suggestion & see if that does it. Thanks JS…

Edit: no need to quote entire posts

Last edited by jsoo (2011-01-28 18:26:13)

jsoo · 2011-01-28 18:28:36

BTW, if the template really has this:

<txp:article status="sticky"

that tag needs to be closed:

<txp:article status="sticky" />

n2 · 2011-01-29 00:35:03

JS, a thousand thanks for all your guidance with this.
I would have given up long ago if it weren’t for yoru help & patiance.

The test page is looking right and now i just need to format the real page.

Thank you so much…
:)
n2

jsoo wrote:

BTW, if the template really has this:

<txp:article status="sticky"

that tag needs to be closed:

<txp:article status="sticky" />

jsoo · 2011-01-29 13:11:44

n2, glad to help. Looks like you’ve got it all worked out; new header looks good. (You might consider a png instead of gif to make the transparency effect smoother, although then you’d have to deal with IE6, which can’t handle png transparency.)

Don’t forget those issues the site owners ought to know about, particularly the need to upgrade to a newer Txp version. There was that site_name tag I don’t think ever got worked out. There are also some HTML validation errors, all minor stuff, but still a good idea to fix. I’m not saying any of this is stuff you personally need to fix; it all predates your involvement in the site. But it ought to be done by someone.

n2 · 2011-01-29 18:28:29

I was thinking the same thing about saving it as a PNG, but i remembered something to that effect. Too bad as clean edges on the orchid would be nicer. But i’m so glad to just have their new header & Flash banner up and working now.

Thanks, yes— I did pass on all your suggestions to them and they’re giving it to the person who’s going to be handling the site soon. The way it is now is way too confusing for anyone coming in to sort through. Btw, I tried changing the site_name and taking the “s” out, but it did something wacky to the page, so i put it right back! :-S

All in all, this crash-course in TP was good as at least i can lend a hand with small graphic or text changes till they have a real webmaster.

THANK YOU!

jsoo wrote:

n2, glad to help. Looks like you’ve got it all worked out; new header looks good. (You might consider a png instead of gif to make the transparency effect smoother, although then you’d have to deal with IE6, which can’t handle png transparency.)

Don’t forget those issues the site owners ought to know about, particularly the need to upgrade to a newer Txp version. There was that site_name tag I don’t think ever got worked out. There are also some HTML validation errors, all minor stuff, but still a good idea to fix. I’m not saying any of this is stuff you personally need to fix; it all predates your involvement in the site. But it ought to be done by someone.

Textpattern CMS

Textpattern CMS support forum

#91 2011-01-28 02:24:15

Re: HELP! Side-bar disappeared

#92 2011-01-28 02:35:03

Re: HELP! Side-bar disappeared

#93 2011-01-28 14:12:43

Re: HELP! Side-bar disappeared

#94 2011-01-28 15:42:56

Re: HELP! Side-bar disappeared

#95 2011-01-28 17:33:44

Re: HELP! Side-bar disappeared

#96 2011-01-28 17:42:04

Re: HELP! Side-bar disappeared

#97 2011-01-28 18:12:52

Re: HELP! Side-bar disappeared

#98 2011-01-28 18:28:36

Re: HELP! Side-bar disappeared

#99 2011-01-29 00:35:03

Re: HELP! Side-bar disappeared

#100 2011-01-29 13:11:44

Re: HELP! Side-bar disappeared

#101 2011-01-29 18:28:29

Re: HELP! Side-bar disappeared

Board footer