Semi-transparent template foreground

Static background looks great with semi-transparent foreground.  I would like to know what I have to edit to make the images on the foreground semi-transparent without affecting the text, as I have a static background.

Is it a .css? If so which one and what edits do I make please.

Are they files to make more transparent with photoshop? If so what are there names and location of the folder.

Many thanks Jennifer

I just heard about the color scheming in the Dolphin 7, and it's a bit of a love/hate thing for me right now.  I implemented a lot more color control in a tweak to our Dolphin 6 install, and also added partial transparency.  Nice to see this feature added, but it's going to be a pain for us to keep during the upgrade (not the authors' fault though - just the risk of tweaking).

It turns out there's no HTML/CSS standard that will work in all browsers to provide partial transparency - believe me, I (and many more) sure wish there was.

So what I did: I took all the colors in the customize profile drop-down and wrote a script in Paint Shop Pro to create a 1x1 PNG image of all those colors at transparencies ranging from 0% to 100% in 20% increments, encoding the color hexadecimal value and transparency amount into the filenames of those 706 images.

I added some fields on the Customize Profile page to control the color and partial transparency of both the main profile section and the profile boxes.  So now the user can have their background image, a main color screen, and another color screen for the boxes' backgrounds - kind of a stained glass effect.

I know, I should really write a mod, but there's a few big problems I need to tackle first.  Plus, as I said, I'm not sure how this will jive with the version 7.

Here's my basic changelog though:

  /templates/base/scripts/BxBaseProfileView.php
    Added CSS code for additional customizations

  /media/images/profile_bg/colors
    New directory added with 706 1x1 PNG files with all colors and opacities

  /profile.php
    Added CSS code and pull in new database entries for customizations

  /profile_customize.php
    Added code: 1. To save new post data, 2. To prepare data lists, 3. Show form data

Of course, if you wanted to just set the boxes of all profiles to the same color/opacity, it wouldn't be nearly as hard and would still look really nice.  Our users just really wanted to see more of the backgrounds, so that alone would go over well.

I suppose I could post the actual code changes too, if you're interested?

It depends on what images your looking to do.

Some of them could be done by replacing the images that the template uses with PNG files. PNG supports alpha transparency, and all modern browsers support it. The background on the D7 sub menu is an example of that, as well as the transparent overlay in the promo area.

If your looking to make member photos transparent then you would look into the CSS transparency effects. You can do a google search for CSS transparency and get all kinds of information on how to use it.

That's right Deano just like the menu, but  I don't know which images are in the blocks the white ones, as well as the options and quick search that is all I want to know the rest is easy, I just can't identify them LOL.

Jennifer the enthusiastic dolphin fan

Hi Celtic Curls, I am using D7 and I don't want to add a script its more than I want to do. But yes I want to semi opaque the box images the quick search box , login,  options, the map, the photos yes, and anything I've left out, if I know where in the css to do that to what entries, and names of the images if I have to make them more transparent in photoshop .png. I have a static background and I love that, and I"m loving the look of the semi opaque that is why I'm here asking.

Thanks so much

Not sure which one you are asking... but I pulled an example for you.

hehe Audanbal how Awesome yes that is what I want to do.

Cheers Jenn

templats/base/css/common.css

around line 260
.boxContent {
overflow: hidden;
font-size: 11px;
padding: 1px 1px 1px 1px;
background-color: rgba(255,255,255,0.5);


templates/base/css/general.css

around line 157
div.sys_main_logo {
position: relative;
z-index: 56;
background-color: rgba(244,244,244,0.5);

Thank you so much you rock!

I read this about the welcome banner

In the file: templates/base/css/index.css - add the text in red (display:none;)


#indexPhotoLabel {
display:none;
height:82px;
line-height:82px;
position:absolute;
bottom:0px;
width:100%;
z-index:1;
background:transparent url(../images/opSplash.png) repeat-x scroll left top;
}

When I did that however the welcome banner is always gone logged in or not logged in. I just wanted it gone when logged in.

Thanks Jenn

If it's too much transparency, try changing 0.5 to higher number (I think .75 looks good, makes the reading easier).

I have no clue on how to remove welcome banner after logging in. I suck at PHPs. CSSs and HTMLs are what I'm good at. However there's instruction on how to remove promo after logging in.

http://www.boonex.com/unity/forums/#topic/TIP-Make-the-Promo-go-away-for-logged-in-users.htm

I really appreciate this help its exactly what I needed!

Thanks for the url too!

Jenn

Just to let you know, the use of rgba is new to CCS3. No internet explorer browsers below and including IE8 beta 2 support it. So anyone using IE 7 will not see the transparency. So if your ok with that then go ahead and use it. Opera 9.6.1 and lower also do not support it. Opera is up to version 10 now, so i do not know how many are still using the older versions.

Thanks D!

I was just reading http://www.boonex.com/unity/forums/#topic/TIP-Make-the-Promo-go-away-for-logged-in-users.htm about the promo go away for logged in users. What promo are they talking about?

"This change will show the Promo image reloader to guests only, and it will not be displayed once a user is logged in. This will allow site owners to use the Promo image rotator to show guests what they can do on the site, and not annoy logged in members with what they already know."

Jenn

 To make the banner appear when not logged and disappear when logged it has nothing to do with CSS files as they don't recognize the difference between logged & not logged.

You need to look to the index.php file, which will refer you on to:  inc/classes/BxDolPageView.php

You'll then find this:

function getBlockCode_LoginSection($iBlockID, $sParams = '') {
  $sDolUrl = BX_DOL_URL_ROOT;
  $sAdminUrl = BX_DOL_URL_ADMIN;

  $sAdminPanelC = _t('_Admin Panel');
  $sLogoutC = _t('_Log Out');
  $sControlPanelC = _t('_Control Panel');
  $sHelloMemberC = _t( '_Hello member', getNickName( $this -> iMemberID ) );

  $ret = '';
  if (isAdmin()) {
   $ret .= <<<EOF
<div class="logged_section_block">
 <span><a href="{$sAdminUrl}index.php" class="logout">{$sAdminPanelC}</a></span>
 <span> |&nbsp;| </span>
 <span><a href="{$sDolUrl}logout.php?action=admin_logout" class="logout">{$sLogoutC}</a></span>
</div>
EOF;
  /*} elseif (isModerator()) {
   $ret .= '<div class="logged_section_block">';
    $ret .= '<span>';
     $ret .= '<a href="' . $sDolUrl . 'moderators/index.php" class="logout">Moderator Panel</a>';
    $ret .= '</span>';
    $ret .= '<span>';
     $ret .= '|&nbsp;|';
    $ret .= '</span>';
    $ret .= '<span>';
     $ret .= '<a href="' . $sDolUrl . 'logout.php?action=moderator_logout" class="logout">{$sLogoutC}</a>';
    $ret .= '</span>';
   $ret .= '</div>';
  } elseif (isAffiliate()) {
   $ret .= '<div class="logged_section_block">';
    $ret .= '<span>';
     $ret .= '<a href="' . $sDolUrl . 'aff/index.php" class="logout">Affiliate Panel</a>';
    $ret .= '</span>';
    $ret .= '<span>';
     $ret .= '|&nbsp;|';
    $ret .= '</span>';
    $ret .= '<span>';
     $ret .= '<a href="' . $sDolUrl . 'logout.php?action=aff_logout" class="logout">{$sLogoutC}</a>';
    $ret .= '</span>';
   $ret .= '</div>';*/
  } elseif (isMember()) {
   $sMemberIcon = get_member_icon( $memberID, 'none' );

   $ret .= <<<EOF
<div class="logged_member_block">
 {$sMemberIcon}
 <div class="hello_member">
  {$sHelloMemberC}<br />
  <a href="{$sDolUrl}member.php" class="logout">{$sControlPanelC}</a>&nbsp;
  <a href="{$sDolUrl}logout.php?action=member_logout" class="logout">{$sLogoutC}</a>
 </div>
</div>
EOF;
  } else {
            return getMemberLoginFormCode('login_box_form', $sParams);
  }
       
  return '<div class="dbContent">'.$ret.'</div>';
 }

The trick here would be to use the same type of rule to call the promo field when not logged and omit it when members are logged.  Perhaps the simplest way will be to create a 2nd page_1.html file, one if logged and one if not logged and then just omit the promo field for the if logged page_1.html  Not sure why anyone would direct you to a CSS file for this, it's a function.

Thankyou mydatery,

I got that from http://www.boonex.com/unity/forums/#topic/TIP-Make-the-Promo-go-away-for-logged-in-users.htm and your right of course its a function. I don't know much php but learning.

This is to hide the promo when logged in. if(!isMember()) this tells you when they logged in or not so maybe that would do the trick.

In the file: /inc/design.inc.php

Find:

function getPromoCode() {
global $site;

$sSiteUrl = BX_DOL_URL_ROOT;

if( getParam( 'enable_flash_promo' ) != 'on' )


Change to:

function getPromoCode() {
global $site;

$sSiteUrl = BX_DOL_URL_ROOT;
if(!isMember())
if( getParam( 'enable_flash_promo' ) != 'on' )

I had no idea what he meant about the promo dissapear when logging in till I did it LOL heh now I know

Thanks !

Want that bottom bar disappear?

templates/base/css/index.css

around line 81
#indexPhotoLabel {
height:82px;
line-height:82px;
position:absolute;
bottom:0px;
width:100%;
z-index:1;
background:transparent url(../images/opSplash.png) repeat-x scroll left top; <---- remove this line

Oh yes thankyou this is great, Audanbal!

Jenn,

You are most welcome! Give me scream anytime ya need help.

Cheers,

Nathe