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 »

[SOLVED] Transparency blend with background image


  #1  
Old Mar 7, 2009, 08: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 01:40 PM.
  #2  
Old Mar 7, 2009, 09: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, 10: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, 05: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, 01: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 01:39 PM.

Bookmarks



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 08:36 PM
[SOLVED] Background Image Not Showing in IE6 Jcasteli Atahualpa 3 Wordpress theme 4 Jun 4, 2009 07:41 PM
[SOLVED] [SOLVED] Background image not showing up WebWeaver Atahualpa 3 Wordpress theme 2 May 28, 2009 06:39 PM
[SOLVED] How to get a background image show thru background color juggledad Header configuration & styling 3 Apr 18, 2009 06:03 AM
Changing repeated background image forces each page to reload background doctorrobert Atahualpa 3 Wordpress theme 8 Feb 15, 2009 07:36 AM


All times are GMT -6. The time now is 12:53 PM.


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