IPB Header Issue [TECH HELP]

Yesterday (12/11/08), my header and bodyline was correct, and today they aren't. There have not been any modifications to the CSS or any other portion of the board.

The bodyline has moved to the top of the board and the header image is now embedded within the bodyline. It used to be that the bodyline was under the navbar and the header was auto width to fit the screen res of the viewer.

Can someone please fix the problem and make the header the way it was? Thank you.

~bump

Still an issue...

try putting [*center] logo [/*center] around your logo (without the * )

Ganning4 wrote:try putting [*center] logo [/*center] around your logo (without the * )

Here's the portion of the header code...

Code:

/* ***************************Header*************************** */
div#logostrip {
   min-height: 68px;
   background-image: url('http://i75.servimg.com/u/f75/11/55/71/28/module10.gif');
   background-repeat: repeat-x;
   text-align: right;
   }
*+ html div#logostrip {
   min-height: 70px;
   }
div#logostrip #logo {
   display: block;
   margin: 0 10px;
   float: right;
   }
div#logostrip #main-title,div#logostrip #main-title h1 {
   padding-top: 25px;
   font-size: 24px;
   font-weight: bold;
   font-family: Arial,Verdana,Tahoma,sans-serif;
   }
div#logostrip #main-title h1 {
   padding-top: 0;
   }

Around which portion of the code am I to place the center tags?

you know you can just go to pictures/colors - pic management - and you should be able to edit your logo.

It's not the logo that I want to edit. The logo is aligned right, where I want it. The problem is the header image behind the logo. When IPB first came to us, the header spanned the entire page width and now it doesn't. The bodyline used to be lower than it is now. I want my page layout (the header and the bodyline) to be where they used to be. Again, it's not a pics issue, but a coding issue that must have come from the portion of the code that we cannot access since it changed without my altering the CSS.

Ohhh, then i don't know sorry >.>

No prob.. but thanks for at least responding.

Logged out of my forum last night and viewed it as a guest to see that the monitor width header was there.... with an ad on it! >.< There's already an ad placement on the page for guests, so can FM please give up the resolution width header ad and give it back so I can use it as a header image placement for my forum? Like it was when we were first presented with the Invision scheme? Please?

Ok, it's been almost a month.. can this one also be moved to tech support, please? edited first post title

~ bump

Buried on page 2 and in need of help. Thanks.

~ bump

Buried on page 5! I realize we're being told the techs are working on the 'next big update', but it's been over a month since I posted this.. can someone at least move this to the "Need of technician" forum, please?

Again, buried on page 5! Apparently no one has enough IPB CSS knowledge to help, so PLEASE move to 'need of technician' forum AND contact tech for support. Thank you.

HellOOOooooo..... anybody there? Buried on page 4 this time....

Posted this in December and it is now February! I have noticed that another forumotion powered site running the invision theme, has their header spanning the width of the forum, just as mine did when I first starting using Invision. I would like for someone to either fix this issue, or at the very least move this topic to 'need of a technician' so maybe Typlo or Canceo can alert the techs to my problem.

Kyouri ... hi
I've just noticed your problem... you should have PMed me about this... instead of waiting 2 months.

I can tell you this... it seems you or someone talented in CSS has created your theme. He/She/it is using the hidden class called minwidth_IE...
now that thing has limited your header display. Because of the properties in the class the entire forum in confined within the container.

nvm the above... I seem to have miscalculated...
nonetheless I think this can be fixed.
I have your CSS ... I could try to modify it to your liking.
this might take a while seeing as I'm caught up in a couple knots...

Is the black theme you currently using the one you want changed?

lol.. yea, the CSS is what I copied from the basic CSS and only modified the ever more basic images, widths, and colors.

I thought about pm'ing you, but you've seemed rather busy, so thought maybe this topic might be moved to tech. But ah well.. at least the CSS know-how guy responded.. thanks.

As for modifying the current theme, I kinda like the layout the way it is, but I would love to have the CSS code that would allow me to create a skin using the previous wide-width header with the IPBWrapper under it like it used to be when we were first given the Invision theme. As for the header issue and the CSS I'm currently using... it's the same CSS I was using when the header spanned the screen resolution width; that's why I'm confused and thought this was a tech issue. If you'd like, you can pm me the CSS code, or just the portions thereof, that would correct whatever happened to the basic code. I appreciate your help. Thank you.

thanks for Pming... i have replied....
sometimes and especially now I'm getting lost in threads I'm monitoring...

As mentioned already... I'll take the time to convert your black theme to they way you describe and I bet you'll get the rest done as you please.

cheer:P


yes it works as I said...
go to your css and set the ipbwrapper to 100%...
then add a class called no-left
you can add it where ever you like
it should look like this:
.no-left{
width: 70%;
margin: 0 auto;
}

this will make your forum 70% whilst the wrapper with the header will stay 100%... then play around with your background images to get everything back to normal

I'll try that! Thanks sooooo much, Jalokim! Of course I could be dancing before I realize I have no idea what I'm doing. I'll get back to you via pm and let you know.

*Edit.. please do NOT lock this thread just yet. Thank you.

*Edit-edit...
Ok.. The code works. Thank you, Jalo. However, I also set the margin for the body class to 10px which pushed down the entire ipbwrapper section. I then reset it to 0px and set the ipbwrapper margin to 10px which changed nothing.. the ipbwrapper was still down 10px. On both settings, the background image was showing in the upper 10px of pages. Need to find a code that actually separates the header and logo positioning from the ipbwrapper (like it was when we first obtained the Invision theme).
Sending the above to Jalokim via pm, but leaving posted here so maybe others can chime in on this, too.

*Edit-edit-edit...
Been playing with the CSS after looking at some tutorials, and from what I have gathered, FM modified the html to embed the header and logo into the bodyline (ipbwrapper). I also took a look at the CSS I copied when all this worked and it is no different than the CSS I am using now.

When Invision first came to us we were able to put in a background image for the header, our logo on top of that, a body background image, and a separate image for our ipbwrapper. Now, if we want the look of IPB we have to negate the header background image, use a body image that appears to only span the top of the header section, forgo any sort of lower body image, and reset the ipbwrapper so it doesn't span to the top of the page. But then, how are we to have our logo at the top? I suppose we could add the same body image to either our ipbwrapper or header, which would also make us forgo the lower ipbwrapper images and have to be left with colors only.

Admittedly I'm no CSS genius and I really hope someone can figure this out because I'm getting really tired of being ignored by the ones that can get some answers directly from the techs.
My apologies to Jalokim.. I know you're trying to work something out, and I truly appreciate it.

I didn't even realize the css was changed... but i do remember when i first themed an IPB forum... that when I changed the wrapper width the header didn't move.

Now that doesn't happen... so i can agree with you on that.
From what I can gather you want the header and nav links to span 100% and for the wrapper with the forum to span 70% and be detached from the header?

Yep, yep! That's precisely what I want back. When I saw a thread about it shortly after Invision was given to us, where people were complaining about the header separation, I had a sick feeling that it was going to be lost. If I wanted to use phpbb, I would have used it. That was the main reason I started using the Invision theme, with the profiles being secondary, and the profile layout in the posts being third. So unless tech wishes to undo the html tags, then we're going to have to try and figure this one out with the CSS.. unless we get template editing with the next update, which I seriously doubt.

Anyway, I'm going to take a look at the html markup and see if there is a way to create and/or separate the classes and ids within the CSS.

This isn't really the solution to doing away with the header and logo being embedded within the ipbwrapper, but I did come up with a solution that helps.

Using the code Jalo posted (.no-left), adding (#main), and tweaking the #content-container right, I was able to set it up so it appears that the bodyline is centered with a solid background color, that the background (actually the ipbwrapper) has a background image, and the header (where one can use either a color or an image) are all separated... like it should be with an Invision theme.

Added codes:

Code:


.no-left {
        display: block;
        width: 70%;
        margin: 0px auto;
        }
And to make the appearance on the portal page as though the bodyline is separate with its own background color or image, I added this code under Modules / Portal:
#main {
        background-color: #0f0f0f;
        border-left: 3px double #535353;
        border-right: 3px double #535353;
        }

Tweaked codes:

Code:


div#logostrip {
        display: block;
   min-height: 68px;
        max-height: 200px;
        width: 100%;
        background-color: #0f0f0f;
        background-image: url('');
        background-repeat: repeat;
   text-align: center;
        margin: 0px 0px 0px 0px;
        border-bottom: 1px solid #000000;
   }
div#logostrip #logo {
   display: block;
        padding-top: 5px;
   margin: 0px 0px 9px 0px;
   float: center;
   }
#ipbwrapper {
   margin: 0px auto;
        float: center;
        padding: 0px 0px 0px 0px;
        background-color: #0f0f0f;
        background-image: url('http://i65.servimg.com/u/f65/11/55/71/28/40651110.jpg');
        background-repeat: repeat;
        background-attachment: fixed;
   text-align: left;
   width: 100%;
        }
#content-container div#container {
   width: 100%;
   float: left;
   margin-right: -230px;
        background-color: #0f0f0f;
        border-right: 3px double #535353;
        height: 100%;
   }
#content-container div#content {
   margin-right: 219px;
        background-color: #0f0f0f;
        padding: 0px 0px 0px 0px;
        height: 100%;
   }
#content-container div#main {
   margin: 0px 0px 0px 0px;
   overflow: hidden;
        padding: 0px 5px 0px 5px;
        background-color: #0f0f0f;
   border-left: 3px double #535353;
        }
#content-container div#right {
        margin: 0px 0px 0px 0px;
   width: 210px;
   float: right;
   overflow: hidden;
        padding: 0px 5px 0px 0px;
   }
[^This code allows you to continue using the sidebar modules on the right. If you have the sidebar modules on the left, then you'll need to tweak that code.^]

I keep the padding codes in there, even though they are set to 0px so I don't forget what I can play with if I wish to alter it later.

I realize that I may have went overboard with the codes, not being CSS savvy, but it's working.

However... it would still be nice if someone would alert tech to the issue that an Invision theme is NOT phpbb and therefore the header and the logo should NOT be embedded within the ipbwrapper.

I have totally neglected this thread. I am currently fighting with a vertical nav bar...
*no, not the one placehold is using... mine is better... its only CSS... not some other fancy pants hidden stuff.

Kyouri... you do know how to play with CSS so I could give you a few more classes to try.
#outer-wrapper... I haven't explored that one yet.. but it should work like no-left... maybe it has more options.

Or you can start using a bit more thinky power... maybe try making images to act like its spanning the full 100%? when times get hard even I do that

Can you please search for and change the following in your CSS code

Original Code:

Code:

#ipbwrapper {
   margin: 0px auto;
   text-align: left;
   width: 70%;
   min-width: 1071px;
   padding: 5px;
   }

Change it to this

Code:

#ipbwrapper {
   margin: 0px auto;
   text-align: left;
   width: 100%;
   min-width: 1071px;
   padding: 5px;
   }

Let me know the outcome

regards







Craig

width 100% ...
that will set the header to 100% but what about forum content?
this is where you'd use the no-left at 70% but as you say the widgets arn't effected

tag team Jalokim

Yeah the content wil shunt over however if this makes the forum wide we can then go from their

Regards





Craig

Kyouri wrote:

Code:

#ipbwrapper {
  margin: 0px auto;
        float: center;
        padding: 0px 0px 0px 0px;
        background-color: #0f0f0f;
        background-image: url('http://i65.servimg.com/u/f65/11/55/71/28/40651110.jpg');
        background-repeat: repeat;
        background-attachment: fixed;
  text-align: left;
  width: 100%;
        }

Already set the ipbwrapper to 100% and the margin to 0px auto, it's my no-left that I have set to 70%. As for the ipbwrapper padding, I tried that yesterday and it ended up running things too far to the right making people have to scroll right and left to see the whole screen. It's working with the code I posted, but it's still not allowing anyone to separately set the header and logo outside the ipbwrapper parameters. That's what I'm really wanting.. for FM to undo the html they did which ended up embedding the header and logo to better match up with their phpbb versions. Although I know I'm probably beating a dead horse. But thanks, Placehold.

@ Jalo.. Yea, I've been reluctantly learning CSS by trial and error. I've learned that things listed in the html as div should be listed in the CSS with # before it, and things listed as class shoud have a period before it. I tried working with the outer-wrapper just a wee bit yesterday and not sure what it did, except I could no longer see the background image I placed in the ipbwrapper. I'll go to my test site play around and see what I come up with. Thanks.

The site doesn't look half bad...
And trial and error is how I learned CSS... so I really don't care how you learn it as long as you understand it...

oh and a little tip... the whole . and # thing is vital.
# = id tags
. = are classes... you can't mix them up.
* html = are usually IE hacks and fixes.

I recommend you download Adobe dreamweaver. Just for the trial period... you can then save your website and open it via the program... there you'll be able to learn the ways of the CSS.
Dreamweaver CS4 is fantastic... its so smart...
But I'm currently downgraded... using CS3 now... and there is a large difference between CS4 and 3... I need to get my CS4 back.

back ontopic.
Using dreamweaver you can quickly see how things change... everything is nicely color coded. CSS is a vital language to know.
remember html is just the skeleton... but to put flesh on it you need CSS