Styling pre-header area

[larryboulder]

I’m trying to create a header with a logo on the left and a linked text box or image on the right within the pre-header area.

I’m not sure how how to add the text box/image on the right 

I also want to contain the pre-header area to the theme width. I tried a couple things that didn’t work.

Thanks!

http://thepaintviking.com/

[Weaver]

If you have a new site, you should consider switching to Weaver Xtreme. We are really not supporting Weaver II any more.

Within one HTML insertion area, the easiest way to get things organized is with float:left; and/or float:right; styling, plus specifying a width for each “box” as a percent so it will work responsively.

Just a little proofreading: you misspelled Boulder in your header image….

[scrambler]

You should definitely switch to Xtreme, sooner or later you will have to, so the sooner to take the plunge the better 🙂

There is a detailed procedure to convert below

http://forum.weavertheme.com/discussion/11303/converting-a-weaver-ii-pro-or-aspen-site-to-weaver-xtreme

As for your issue, why are you not using the header widget area with two widgets, you can set their width in % in main options > Header > Header Widget Area

[larryboulder]

Wow! Thanks

Yeah, I’m planning on upgrading once I finish up with this project!

You guys are great, I really appreciate the quality of the theme and the knowledgeable folks on your forums. 

Cheers!

[larryboulder]

Using the header widget area is a great solution, except that I can’t figure out how to move it to the top of the page. I was up til two in the morning trying different things…

http://full.boulderwordpress.com/

[scrambler]

The layout seem to have changed, I don’t remember the menu being on top.

But the header widget area is under the header insertion area.

So we will need to use a different method, but to know which area is best, you need to clarify where the two widgets should be in relation to that menu at the top.

Below a thread with a description of the header insertion areas Layout under /*Layout and order of Header Insertion Areas*/

http://forum.weavertheme.com/discussion/5462/infos-and-examples-for-custom-css-rules-part8#Item_1

Once we know which area will be appropriate, the way to create the two widgets manually will be with regular html divs like below

<div style=”max-width:1024px;margin:0 auto;”>

    <div style=”float:left;width:75%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;”>left widget content </div>

    <div style=”float:left;width:25%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;”>right widget content </div>

</div>

Then depending on which HTML insertion area you will be using it may need some tweaking

[larryboulder]

I want the two widgets to be above the menu, I tried the pre-header and pre-wrapper and ran into complications I don’t understand.

I’m trying to get it to look like this http://thepaintviking.com/&nbsp;

Thanks

[larryboulder]

Will getting Weaver Extreme Plus make this process easier?

I thought making these tweaks would be relatively easy with Weaver II Pro

[scrambler]

Put the HTML in the pre header code box, and post back explaining what issue you are having with t there

And Yes, Xtreme with the “Plus” plugin would make all that easier 🙂

[larryboulder]

Cool, I’ll go buy it!

[scrambler]

conversion:

http://forum.weavertheme.com/discussion/11303/converting-a-weaver-ii-pro-or-aspen-site-to-weaver-xtreme

Insertion areas

http://demo.weavertheme.com/insertion-areas/

Tutorial on use the custom widget width on widget areas

http://forum.weavertheme.com/discussion/10342/weaver-xtreme-tips-and-tutorials-part-1#Item_1

You can use the header widget area to put both the 2 widgets and the image you had in inject header below that. Use the Custom widget width layout to lay them like below

desktop: 75,25;100;

you can then decide on a different layout for small tablets and phone, like stack all of them on phones with

phones: 100;100;100;

There is an option to put the header widget area at different levels

[larryboulder]

If I delete the plus plugin after I finish using it on prototype site, will I be able to transfer it to another site?

[scrambler]

You can transfer the license without problem.

You actually do not need to activate the license on the development site. The license is only needed for the updating of the plugin

[larryboulder]

Right on!

[Author]

Posts