Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] Transparency blend with background image


  #1  
Old Mar 7, 2009, 07:53 AM
mjelinek
 
3 posts · Mar 2009
I am currently using Atahualpa 3.2 and WordPress 2.7. Trying to determine if there is anyway to get the Blog title text to utilize transparency settings in a way that will allow it to blend with the random header image instead of being place in a separate <div> on top of the image?

I can set the alpha settings for the text and not use a background color, but this causes the text to be jagged when it is overlaid on top of the background image. You can smooth the text by giving the box a background color (which I donít want to do, not even white) or by actually setting the background to the url of the header image. The problem with the second option is that you lose the random background image benefit (which I want to keep).

Does anyone know some way to work around this?

Last edited by mjelinek; Mar 8, 2009 at 12:40 PM.
  #2  
Old Mar 7, 2009, 08:30 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
It seems you already accomplished that but the opcity is a bit low with 0.2

If you want to have a huge smooth font you'd need to use graphics or Flash.

Create a transparent PNG and in bfa_header_config.php change

PHP Code:
        // END: If Header Opacity 
        
if ( $bfa_ata_overlay_blog_title' == "Yes" OR $bfa_ata_overlay_blog_tagline == "Yes" ) {
        $header_image .= '
<div class="titleoverlay">' . 
            ( $bfa_ata_overlay_blog_title == "Yes" ? '
<h1 class="blogtitle"><a href="' . get_option('home') . '/">' . get_bloginfo('name') . '</a></h1>' : '' ) . 
            ( $bfa_ata_overlay_blog_tagline == "Yes" ? '
<class="tagline">' . get_bloginfo( 'description' ) . '</p>' : '' ) . 
            '
</div>';
        } 
to

PHP Code:
        // END: If Header Opacity 
        
if ( $bfa_ata_overlay_blog_title' == "Yes" OR $bfa_ata_overlay_blog_tagline == "Yes" ) {
        $header_image .= '
<div class="titleoverlay">' . 
            ( $bfa_ata_overlay_blog_title == "Yes" ? '
<a href="' . get_option('home') . '/"><img src="/path/to/logo.gif" alt="'.get_bloginfo('name').'" /></a></h1>' : '' ) . 
            ( $bfa_ata_overlay_blog_tagline == "Yes" ? '
<class="tagline">' . get_bloginfo( 'description' ) . '</p>' : '' ) . 
            '
</div>';
        } 
For IE6, you'll also need to integrate a PNG transparency fix into the theme http://www.twinhelix.com/css/iepngfix/
  #3  
Old Mar 7, 2009, 09:48 AM
mjelinek
 
3 posts · Mar 2009
Flynn - actually the code I inserted makes no difference. I have pulled it out now and you will see that the result is the same, the light color of the text just makes it seem like there is some transparency going on. Here is a good page that explains what I am trying to do: http://www.mandarindesign.com/opacityblending.html

Maybe your code will achieve this, but essentially I need the alpha effect to occur as a process of using the random header image in creating the blend with the text, but the setup creates the new <div> with a box and its own background - if the background in that process could match the random one that is chosen I could get it to work.
  #4  
Old Mar 8, 2009, 04:11 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
The div containing the blog title doesn't need to have a background, it can be transparent, then it would always "blend" with the background image. Your problem seems to be that the borders of the text aren't smooth, but they aren't smooth at the URL you posted either. Actually I didn't see anything there that you couldn't achieve with Atahualpa right now, without any file edits. You may have applied the opacity in a wrong way.

HTML Code:
.xxxxxx {
    opacity: .4;
    -moz-opacity: .4;
    filter: alpha(opacity=40);
    }
  #5  
Old Mar 8, 2009, 12:26 PM
mjelinek
 
3 posts · Mar 2009
Flynn,

I did a change that achieved what I wanted by using the following for the <h1>

<h1 class="blogtitle" style="width:1000px;height:130px;background: url(' . $selected_header_image . ') no-repeat;">

Thanks for your help though, knowing where to make the change I was able to think through that fix.

Last edited by mjelinek; Mar 8, 2009 at 12:39 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Even default background image doesn't show up - can you help? ftf79 Page & Category Menu Bars 2 Jun 29, 2009 07:36 PM
[SOLVED] Background Image Not Showing in IE6 Jcasteli Atahualpa 3 Wordpress theme 4 Jun 4, 2009 06:41 PM
[SOLVED] [SOLVED] Background image not showing up WebWeaver Atahualpa 3 Wordpress theme 2 May 28, 2009 05:39 PM
[SOLVED] How to get a background image show thru background color juggledad Header configuration & styling 3 Apr 18, 2009 05:03 AM
Changing repeated background image forces each page to reload background doctorrobert Atahualpa 3 Wordpress theme 8 Feb 15, 2009 06:36 AM


All times are GMT -6. The time now is 03:36 PM.


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