Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

background image in header with a widget area on top


  #1  
Old Feb 8, 2012, 02:47 PM
abdell
 
21 posts · Jul 2011
Hi guys,

It's killing me trying to get this right. I basically want to have a header area that has a background image and then a widget area (in which I'm going to put a table with a video and an optin box)

My current coding in the 'configure header area' is:

background: url(https://...com/kill-bill-d.jpg); <?php bfa_widget_area('name=Center Column Widget'); ?> %pages %cats

The widget area works, but the background image doesn't

Any suggestions ?

Thanks in advance
  #2  
Old Feb 8, 2012, 02:57 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
To put a background for the header you wouldn't but the code there. You would use the #header selector and put the code in CSS Inserts.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Feb 8, 2012, 03:02 PM
abdell
 
21 posts · Jul 2011
lmilesw,

Would you be kind enough to dumb that down for me ? lol.
I'm not very technical with all this stuff... could you please tell me exactly what code and where ?

I really appreciate your time.

Thanks
  #4  
Old Feb 8, 2012, 03:13 PM
abdell
 
21 posts · Jul 2011
Do you mean something like what is here:

http://forum.bytesforall.com/showthread.php?t=4389

When I do that, the header appears twice !

Thanks
  #5  
Old Feb 8, 2012, 06:47 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
Unfortunately there is no one way to do what you want.

In order to be able to point you in a direction you do have to have some familiarity with CSS and the theme options as you may have to use floats, absolute positioning and other techniques to position things as you want.

I can't give you exact code as that depends on the path to where the image is, what you have in the Configure Header Area box, how you want the header laid out etc. This is especially hard with no access or even a link to the site.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Feb 8, 2012, 08:12 PM
abdell
 
21 posts · Jul 2011
I do have a little familiarity :-) but not much.

Currently what's in the header configure area is:
background: url(https://...com/kill-bill-d.jpg); <?php bfa_widget_area('name=Center Column Widget'); ?> %pages %cats

I can figure out how to change the image file path and I can figure out the pixel changes for the positioning.

Is there anywhere that I can send you what I want the header to look like ?

Thanks again
  #7  
Old Feb 8, 2012, 08:18 PM
abdell
 
21 posts · Jul 2011
Actually... just realised that I can use this to attach file:

The widget would include:
  • text: how to detach...
  • button with arrows
  • as seen on with the logos and addresses
  • the video

Everything else is the background... from the black thing with "whims-I-Kill" to the break lines...

I'm thinking that if it's a table that would make life somewhat easier and I would be using the widget friendly html plugin that I read about elsewhere in this forum.

Thanks again.
Attached Thumbnails
Click image for larger version

Name:	Screen Shot 2012-02-09 at 03.13.15.jpg
Views:	551
Size:	73.9 KB
ID:	1764  
  #8  
Old Feb 8, 2012, 08:51 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
You have a lot of styling that you want that can't be easily answered in a forum post but here is some code that may point you in a direction. On your current site if you put the following in CSS Inserts it will position the video in a different spot. Perhaps you can deduct from this code what you need to do to position things as you want.

What I did was determine the selector with Firebug and use absolute positioning to move it. I also had to add a higher z-index so it was in front. For fun I added a box shadow.
HTML Code:
#vm_iPEmp4_container {
    position: absolute;
    left: 500px;
    bottom: 300px;
    z-index: 99;
    box-shadow: 0 0 23px;
}
This of course is not what you want to do but I thought might help in your learning process. You should also check out w3schools.com for tutorials.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Feb 9, 2012, 03:23 AM
abdell
 
21 posts · Jul 2011
lmilesw,

Thanks

And what coding would i put in the coding in the 'configure header area' ?
  #10  
Old Feb 9, 2012, 06:38 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
That is difficult to say. I could be the code for a one or two celled widget area and then use CSS to position the elements. This is the kind of thing that could take me several hours to do depending on the specifics and trying to explain in a few sentences is rather difficult.

The best way to get a handle on this is install a test site and try different things in the theme options. That along with getting comfortable with Firebug will start to make things clearer.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Want to have widget area next to header image crunchyfrugalista Header configuration & styling 1 Sep 1, 2011 02:01 PM
Background color for header image area Publinaut Header configuration & styling 2 Dec 29, 2010 03:24 PM
apply the opacity property to a New widget area background-image bigliettaio Sidebars & Widgets 2 Oct 25, 2010 06:50 AM
header image as background image for logo area soni Atahualpa 3 Wordpress theme 8 Apr 2, 2010 03:05 AM


All times are GMT -6. The time now is 03:53 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.