Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

Opacity settings for header image itself.


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Apr 6, 2009, 06:23 PM
thesnucka22
 
2 posts · Apr 2009
Opacity settings for header image itself.

Howdy!

First, love the theme. I've recommended it to a bunch of friends, I can't believe I didn't find it sooner!

I've almost got my site set up the way I want it - I'm looking to add opacity to the entire background image (the rotating header image), instead of just the side columns. Is this possible? How would I go about doing this?

Thanks, and keep up the great work!
  #2  
Old Apr 6, 2009, 07:04 PM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
Try HTML/CSS Inserts -> CSS Inserts

HTML Code:
div.header-image-container {
filter: alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
}
  #3  
Old Apr 6, 2009, 07:12 PM
thesnucka22
 
2 posts · Apr 2009
You rock, that worked. Thanks for the quick reply.

I assume this uses the background color of the image div itself?
  #4  
Old Apr 6, 2009, 07:55 PM
Flynn's Avatar
Flynn
 
3,765 posts · Oct 2008
Munich, Germany
It seems to be using white by default, and setting another (background) color doesn't seem to work as the background is being covered by the image, which is a background image. Looks like a div would have to be laid over the image as it is already being done with the left and right opacity areas.

One way to accomplish this would be to turn off one of these left / right opacity areas in the theme options, and make the other one stretch the whole div.header-image-container width. Since the theme options expect a pixel value for the width of these opacity areas this would work for fixed width layouts. For fluid width layouts the width of that opacity area would have to be hard coded in header.php

<?php if ( $bfa_ata['header_opacity_left'] != 0 AND $bfa_ata['header_opacity_left'] != '' ) { ?>
.opacityleft {
background-color: #<?php echo $bfa_ata['header_opacity_left_color']; ?>;
height: <?php echo $bfa_ata['headerimage_height']; ?>px;
width: <?php echo $bfa_ata['header_opacity_left_width']; ?>px; --> 100%;
filter: alpha(opacity=<?php echo $bfa_ata['header_opacity_left']; ?>);
-moz-opacity:.<?php echo $bfa_ata['header_opacity_left']; ?>;
opacity:.<?php echo $bfa_ata['header_opacity_left']; ?>;
}
<?php } ?>

Bookmarks

Tags
opacity

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Sidebar Background Opacity Jcasteli Sidebars & Widgets 2 Jun 2, 2009 05:49 AM
adding opacity to menu bar background colors nickcee Page & Category Menu Bars 0 Mar 23, 2009 01:46 PM
[SOLVED] Howto: Align page menu bar with left sidebar or opacity overlay width iroQuai Page & Category Menu Bars 1 Mar 7, 2009 05:01 PM
nextGen gallery with image rotator as header image shatchp Header configuration & styling 1 Feb 13, 2009 07:40 PM
Header image and widget image mamngirl Header configuration & styling 1 Feb 4, 2009 12:36 PM


All times are GMT -6. The time now is 05:19 AM.


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