headers, sliders, magazine theme

[monere]

Hi.

THE IDEA:

I am working on this website: http://www.justbeatit.net
And I want to make it look like this site: http://www.bettermyplace.biz …. sort of

THE DETAILS:

Now… let’s start with the header: you can see 1 ad and one slider in the header. Well, they look ugly as they are now (unaligned), so I want to align them horizontally (ad first, slider second, with some space between the 2, obviously) inside of the header. So, how do I do it?

Secondly, the slider… I want to display this slider ONLY on the home page. Right now it’s in the header cause I wanted to show you how badly the elements align (if they align at all) in the header, but normally I will remove it from there and insert it into the home page (ONLY). I tried with the shortcode that the slider provides, but… I set the home page as a 2-column template because I want it to pull posts from my site and display them magazine-style on the home page (yes, I did choose the magazine sub-theme but so far I’m not seeing any difference between this sub-theme and other sub-themes).

So, I want the slider to show up only on the home page, along with the other articles. EXACTLY like you see in the other website that I referenced (with pictures included, colored titles, etc.)

Thirdly…. why does the “home” writing still appears on the home page?? I disabled the page title while in the home page editing section, so why does that still appear there? Actually, I’m not as interested in why it shows up there, as I am interested in knowing how to get rid of it 😀

Fourthly…. you can not see this (because there’s 2 widgets in the header), but…. if I leave just the slider inside of the header widget area it starts abruptly from the menu (so, no space between the header and the menu), unless… I set slider’s height (inside of the plugin’s settings) to over 200. I tested with 220 px and 250 px and when I chose these heights the slider got positioned a bit lower indeed. But otherwise its top margin got hidden below the menu. So, is it possible to fix this from within the theme’s settings?

And I think I have more questions, but I forgot them 😀 …. Anyways, please help me with these first, as they’re the roadblock for me at this point.

Thanks!

[techryan]

I am not a Weaver master, there are others on this forum that are better but I do know that concerning your 2nd concern, if you put the HTML/shortcode in the “Advanced Options–>HTML Insertion” area there is a checkbox that allows the control you are looking for. 

The 3rd concern can be adjusted on the actual page by per page options. See image.

The other 2 issues may require some custom css coding if I am understanding correctly. 

[scrambler]

1- Right now the ad and the slider are in the header widget area, each in a separate widget and the widget area is set as a single column, so of course they are on top of each other.

Given you do not have the “plus” plugin, if they are in different widget, you can only set the header widget area to use 2 column, but they will be split evenly (plus would allow custom width). What you can do is use a single widget, and place both the add and the slider in that single widget, eventually using some html so control the space of each (example below).

<div style=”float:left;width:30%;”>Place the add here</div>
<div style=”float:left;width:70%;”>Place the slider here</div>

2- I am confused here. If the slider is only on the Home page, what happens with the Ad on other pages, is the Ad alone full width there on the other pages?

If you want a home page that has a slider at the top of the content area and below that posts in two columns (like in your example), just create a page, Select the “page with posts” Template for it and publish it.

Then in the content editor place your slideshow

Then towards the bottom of the editing page option area, select “Display Post Columns” > 2 Columns, so the post diplay in two columns below the slider.

3- The Home you see are the breadcrumbs in the Info bar.

You can Hide the whole info bar globally for all the site in Main options > Menus > Info bar, or you can hide the info bar only on that page using the Editing page option “Hide Info bar on this page”

4- You can easily add space above the header widget area using Main Options > Header > Header Widget Area > Top Margin option box

[monere]

Hi techryan,

Thanks for the tips. I will try with the shortcode like you said. Also, about the title pf the page, that’s exactly the option I chose on the per page options and it didn’t work.

I will wait for other replies, maybe I can get a solution to these problems. But still, thanks a lot for your help 🙂

[scrambler]

We probably cross posted, make sure to read the answer above

[techryan]

Use scrambler’s suggestions prior to mine. He is a lot more knowledgeable on the weaver back-end than I am. My suggestions may help but generally he is pretty spot on.

[monere]

I will 🙂

I’ll go through the entire thread tomorrow probably, as right now I’m a bit busy and can’t work on this website.

[monere]

Hi scrambler. I tried your suggestions, and some of them worked (the insertion of both the ad and slider in the same widget), while others didn’t. I added 10 px to the top margin in the header widget area and as you can see the header AND the menu got moved 10 px lower, but I only want the elements in the widget area to get moved (is the navigation menu part of those elements??), not the menu, as well.

Also, to your question… I won’t keep the ad in the header. Right now I am oscillating between keeping both the ad and the slider in the header, or moving slider on the home page, and the ad in the sidebar. I’m not sure, I’ll have to sort this out…

Also, probably not something you can help me with, but I’ll ask anyway: any idea how to make both the ad and the slider the same height? I mean, I DID set the slider’s height to 250 px (the same seize as the ad) in the slider plugin’s settings, but as you can see this doesn’t solve the issue. So, I am assuming this is something that should be set through the theme’s settings. Or?? I really don’t know…

[scrambler]

I am probably not seeing what you are seeing.

I see 10px of white at the top (The 10px top padding of the wrapper), then the menu bar, then 10px of white, then the header widget area.

So from what I see it is working fine. If you are not seeing a 10px space between the menu bar and the widget area, clear your cache, test on other browsers and computers and let us know on what browser you dont have a gap

You do appear to have put the 10px margin in two different places as I see two rules

#header-widget-area {margin-top:10px;}

.widget-area-header {margin-top:10px;}

They both do exactly the same thing so no issue, but the top one is the last so if you only change the second one it wont work.

Making both the ad and the slider is easy. Given the ration of each (heigh / width) there will only be one %width that will make them be the same size.

You could use some basic math to figure it out, or you can just  do trial and error.

First you must remove the max-width:760px and max-height:220px  that you placed on the slider, then change the respective percentages to 24.1% and 75.9%

[monere]

Change the respective percentage where exactly??

As for the 10x space, yeah I see it exactly like you described, but it’s not right. I mean, before adding the code you recommended in the previous message the menu bar was positioned just right. But, after I added the code – which was supposed to add 10px space between the menu bar and widget area – the menu bar also got moved 10px lower, and I don’t like it anymore 🙂

[scrambler]

The code I gave you cannot be responsible for adding space above the menu bar.

Above the menu bar I see 10px exactly the same space as between the menu bar and the widget area. This space comes from the padding on the wrapper.

If you mean you want the menu bar stuck at the very top of the wrapper without any space, you can remove the padding on the wrapper with a zero in Main options > Wrapping Areas > Wrapper ware > Padding top box

For the percentage , it is In the divs that you created following my initial advice 🙂

<div style=”float:left;width:24.1%;”>Place the add here</div>
<div style=”float:left;width:75.9%;”>Place the slider here</div>

[monere]

Yes man, I know where the space between the menu bar and the top of the site comes from because I added it there myself. What you don’t understand however is that – as weird as this may sound – when I added the 10px space in the header widget area it automatically made the space between the menu bar and the top of the site bigger than just 10px. And this is not normal, I think…. And it’s what I’m crying about here 🙂

So, can you help me keep the space between the menu bar and the top of the site just like I set it (at 10px)? If not… well, I’m not sure what I’ll do, but I definitely won’t keep my site like that.

[scrambler]

[scrambler]

“it automatically made the space between the menu bar and the top of the site bigger than just 10px. And this is not normal, I think…. And it’s what I’m crying about here :)”

Well if you read what I said, on my machine it is only 10px, so I am not seeing what you are seeing.

This why I had asked you to test different browsers and tell me on which one you had the issue.

So I tested IE, Chrome and FF, and the only one with the issue is FF, there is apparently some weird bug in there.

So remove the Top margin (remember you appear to have set that in TWO different places), and instead out a 10 in Main options > HEader > Header Widget Area > Padding top box

[monere]

yeah man, it’s firefox. Only this imbecile browser gives errors and it’s the one I use the most 🙁

[monere]

actually, it’s the one I use all the time, not most. I’ve been only using firefox since it first came on

[Author]

Posts