18 replies to this topic

[lutz]

Hello!

I have to place a sidebar to my page, which starts at the very top. But everything I tried lets the sidebar begin below the header ("branding") section. I have some ads in my secondary sidebar and those have to start now BESIDE the header, not BELOW it.

The site is www.mobiwatch.de

 

Could somebody tell me how to make the content in that secondary sidebar starting at the very top of the page, please?

 

Thanks in advance!!!

[catrina]

A sidebar can't begin at the top unless you resize the header (so that there's space for the sidebar to sit) and use custom CSS to move the sidebar up. Please see these instructions on how you can use custom CSS to make these adjustments:

Please Login or Register to see this Hidden Content

 

Also use this as a reference for the CSS attributes you need:

Please Login or Register to see this Hidden Content

[lutz]

Dear Catrina,

 

thanks for the quick response! I already resized the header )
Do you have a piece of css code for me I could use to lift the sidebar up? I'm no pogrammer and don't have a clue from all that stuff!

The links you provided showed some general topics only ...

I really hope you can help me with that!!!

[lutz]

@Catrina,

 

in the meantime I found this piece of code: .home #sidebar-wrap{margin-top:-250px;}

That lifts up the sidebar as high as I want to - so far, so good.

 

New problem: This code moves BOTH sidebars up, but I need to move the second (the outerone on the right) one only.

That's why I currently use a minor value (-50px) because othewise the inner sidebar would cut through the header.

So what I need right now is to know, how to make that css code work for the second sidebar (right) only and ignore the first sidebar (left).

 

Can you tell me how to do that?

[catrina]

You can actually specify only one sidebar by using selector #sidebar2 (or something of that sort). When you look in Firebug, the class it has is #sidebar2.

[lutz]

Dear Catrina,

 

great, works, thanks a lot!

Unfortunately this concerns the home page only. When I click on a post, on this page the sidebar starts below the header section still.

Is there a command that adresses ALL pages, not the home page only?

I already tried things like just ".#sidebar2{margin-top:-359px;}" or ".page #sidebar2{margin-top:-359px;}" but those didn't do anything.

 

I hope there is a way to change that globally?

 

Thanks again in anticipation!!!

[photofusionusa]

I'm was trying to do a similar routine in controlling a tertiary bar but for only one specific page (page ID 22). Through reading the posts I have summed up that I needed to add the page ID before the css. Frustrating because the post just assume you know what the hell your doing. After lots of trials and errors it goes like this.

The Page ID apparently is in the form of a class (the names with periods). It can be found in the HTML code on the top header line.

In the HTML file the ID will most likely be found at the top header and listed somewhere after a list of other names predeeded by style="xvxvxv  vxvv xvvvxv vxvxvx page-id-22 nsnsnns nsnsnns nn nssn blabla"

So now I have my page ID, .page-id-22 jsut place the page id in front of th ecode you have been using

SO here is my code I used for my tertiary bar:

.page-id-22 .section-sb_tertiary {
position:fixed;
top:330px;
}

dont use any commas between the names, this will keep them to affect the only to the tree structure below.

Hope that helps,
Cheers

[lutz]

Dear

Please Login or Register to see this Hidden Content

,

 

thanks for that. But to be honest: I don't understand it )

Because I don't know what you mean with "page-id": I have the blog roll (or home page with all of it's subpages with older posts), I have the post page with each single post, and I have the categories and tags pages with their special posts. Real "pages" I do not use, so I haven't any page-id to try your code on. You know what I mean?

 

For me the code ".home #sidebar2{margin-top:-359px;}" works great ... but on the home page (=blog roll) only.

If I would know the correct command for ALL pages that would fix my problem completely. But everything I tried out like "".all #sidebar2{margin-top:-359px;}" dind't work ...

[photofusionusa]

Hmm, with the little I know, I agree, the Page ID will not work since the blog is dynamic within the page.  You will definetly need help from the wizards, sorry I could not help.

~ John

[Danny]

Unfortunately, we are unable to provide you the custom CSS needed to achieve your layout. If you're not comfortable with custom CSS or code. I recommend you contact one of our Pros (

Please Login or Register to see this Hidden Content

) for assistance or check out our CSS Customization section in our Doc Center to give you a good headstart on CSS changes you can make,

Please Login or Register to see this Hidden Content

[lutz]

@Danny

Who said I'm not comfortable with CSS code?

I'm indeed very comfortable with that and actually asked for the correct command that would influence ALL pages but no the home page alone.

Would you please be so kind to provide the command I need for that?

 

Thanks in advance!!!

[Rob]

Hi Lutz,

 

The info that Photofusion provided was correct. Just leave out the .page-id-22 bit and start off with the .section-sb_tertiary

[lutz]

@Rob
@Photofusion

 

alright, that's great - and is really working an ALL pages.

I already screamed "hallelujah" ... and then I realized what the code "position:fixed" means )

That's something I cannot do: the sidebars have to scroll up and down with the page!

 

I tried it without that "fixed" code, but that didn't work anymore.

Is there a command like "position:relative" (tried this one, didn't work) or something that makes the command work but lets the sidebards scroll down with the page?

[catrina]

Have you tried position: absolute? (Reference:

Please Login or Register to see this Hidden Content

)

[lutz]

@Catrina,

@Rob
@Photofusion

 

YES!!! Great! Thanks a lot to all of you!!!

This is working, wonderful!

 

There is still a little minor issue, if you could solve that, too, it would be perfect )

I also want to push up the primary sidebar a little, too because it's starting quite low for some reason which looks very uneven.

So I tried

 

.section-sb_primary {
 position:absolute;
 top:300px;}

 

But this isn't working together with the ".section-sb_secondary" command: when I use both, the layout crashes totally, displaying one sidebar very large and the other on top of that. No way!

 

As you can see above I tried these commands earlier:

.home #sidebar1{margin-top:-45px;}

.home #sidebar2{margin-top:-359px;}

 

That works perfectly well for both sidebars, but unfortunately on the home page only.

 

So I would need to know

a) how to make "section-sb_primary" and "section-sb_secondary" work together

or

how to make the "home #sidebar2{margin-top:-359px;}" command work on all the other pages, too, and not on the home page only.

 

Thanks again to all of you, you already helped me really a lot!!!

[lutz]

I just discovered another problem: When you watch the site on a mobile device, the "section-sb_primary" method causes the sidebar to appear on top of the content area. So this is a way I cannot go. When I use the "home #sidebar2" method the mobile layout is alright. So that's the way I have to go ...

Sorry, Rob + Photofusion

So, does anyone have an idea how to make this "home #sidebar2" command make work an all the other pages, too?

Please?

[lutz]

Hi everybody!

 

This issue is still unsolved: I would need the commands to make the ".home #sidebar2{margin-top:-359px;}" code work on all the other pages, too. Is there no one who can help me with that? Please!

[Danny]

Hi Lutz,

 

Try the following,

 

Please Login or Register to see this Hidden Content

If this doesn't work, I recommend you contact one of our pros for further assistance.

 

Please Login or Register to see this Hidden Content

[lutz]

@Danny

 

Wonderful! Great! That's it what I've been looking for!

Thanks a lot, you made my day. And week. And month!!!

Thanks a lot!!!