Ticker Tape

vi - IVM7 - V - I

Here is a hacky way to enable photo transparency and make the look more consistent in Effector theme.

The top picture shows the problem: Even though the eyes are transparent, they appear white, not green (the true vanilla Effector code actually would make the eyes black, but I had already messed with the code at this point) as shown in the second picture. How should we go about this?

[[MORE]]
Looking at the theme’s HTML code around line 500, we see what the problem is:

      {block:Photo}
        <div class="post-panel">
          <div class="media">
            <div class="photo-panel">

              {block:IfContentWidth500}
                {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
              {/block:IfContentWidth500}

              {block:IfNotContentWidth500}
                {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
              {/block:IfNotContentWidth500}

              <div class="photo-btns">
                                    {block:HighRes}{/block:IfNotContentWidth500}
                  <a class="lightbox" href="{PhotoURL-HighRes}">Pop-up</a>
                {/block:HighRes}
                <a class="photo-url" href="{PhotoURL-HighRes}">View Separately</a>
              </div>

            </div>
          </div>
          {block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
      {/block:Photo}


According to this, the “photo-panel” (which hosts the photo) is inside the “post-panel”, whose background is white. This means that even if you make the “photo-panel“‘s background transparent through custom CSS, you will still have the white background of “post-panel” to deal with. Of course, if you make the “post-panel” background transparent, you won’t be able to read the text!

After some thinking, I looked at the code for photoset (which strangely has transparency fully enabled by default) and realized that in photosets, the photos are hosted outside “post-panel”. If this happens, we could enable transparency. So I cut the entire “media” part out of the “post-panel” and posted it right above it, to obtain this:

      {block:Photo}
        <div class="media">
          <div class="photo-panel">

            {block:IfContentWidth500}
              {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
            {/block:IfContentWidth500}

            {block:IfNotContentWidth500}
                {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
              {/block:IfNotContentWidth500}

              <div class="photo-btns">
                                    {block:HighRes}{/block:IfNotContentWidth500}
                  <a class="lightbox" href="{PhotoURL-HighRes}">Pop-up</a>
                {/block:HighRes}
                <a class="photo-url" href="{PhotoURL-HighRes}">View Separately</a>
              </div>

            </div>
          </div>
        <div class="post-panel">

          {block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
      {/block:Photo}


This makes the “photo-panel” independent of the text portion; now we can add a custom CSS on the Customize page:

.photo-panel {
background: transparent;
}


And the background of the photo will be transparent, letting the transparent portions of our image shine.

But wait, this looks awkward. Unlike the photosets, this single photo is stuck to the post panel with zero gap, making the look inconsistent. Well, although I haven’t found the legitimate solution, I found out that disabling the ‘display: block’ property in much of .media eliminated this. So your final custom CSS should look like this:

.media img, .media object, .media embed, .media iframe {
display: inline;
}

.photo-panel {
margin-bottom: 1px;
background: transparent;
}


(Note: the margin-bottom was added to make the single-photo posts perfectly consistent with photosets in terms of margins)

So there it is. A relatively simple but rather hacky way to enable partial transparency in this simple theme. I think the pay-off was definitely worth thirty minutes of looking at the code and figuring out how to modify it. Here is a hacky way to enable photo transparency and make the look more consistent in Effector theme.

The top picture shows the problem: Even though the eyes are transparent, they appear white, not green (the true vanilla Effector code actually would make the eyes black, but I had already messed with the code at this point) as shown in the second picture. How should we go about this?

[[MORE]]
Looking at the theme’s HTML code around line 500, we see what the problem is:

      {block:Photo}
        <div class="post-panel">
          <div class="media">
            <div class="photo-panel">

              {block:IfContentWidth500}
                {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
              {/block:IfContentWidth500}

              {block:IfNotContentWidth500}
                {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
              {/block:IfNotContentWidth500}

              <div class="photo-btns">
                                    {block:HighRes}{/block:IfNotContentWidth500}
                  <a class="lightbox" href="{PhotoURL-HighRes}">Pop-up</a>
                {/block:HighRes}
                <a class="photo-url" href="{PhotoURL-HighRes}">View Separately</a>
              </div>

            </div>
          </div>
          {block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
      {/block:Photo}


According to this, the “photo-panel” (which hosts the photo) is inside the “post-panel”, whose background is white. This means that even if you make the “photo-panel“‘s background transparent through custom CSS, you will still have the white background of “post-panel” to deal with. Of course, if you make the “post-panel” background transparent, you won’t be able to read the text!

After some thinking, I looked at the code for photoset (which strangely has transparency fully enabled by default) and realized that in photosets, the photos are hosted outside “post-panel”. If this happens, we could enable transparency. So I cut the entire “media” part out of the “post-panel” and posted it right above it, to obtain this:

      {block:Photo}
        <div class="media">
          <div class="photo-panel">

            {block:IfContentWidth500}
              {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
            {/block:IfContentWidth500}

            {block:IfNotContentWidth500}
                {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
              {/block:IfNotContentWidth500}

              <div class="photo-btns">
                                    {block:HighRes}{/block:IfNotContentWidth500}
                  <a class="lightbox" href="{PhotoURL-HighRes}">Pop-up</a>
                {/block:HighRes}
                <a class="photo-url" href="{PhotoURL-HighRes}">View Separately</a>
              </div>

            </div>
          </div>
        <div class="post-panel">

          {block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
      {/block:Photo}


This makes the “photo-panel” independent of the text portion; now we can add a custom CSS on the Customize page:

.photo-panel {
background: transparent;
}


And the background of the photo will be transparent, letting the transparent portions of our image shine.

But wait, this looks awkward. Unlike the photosets, this single photo is stuck to the post panel with zero gap, making the look inconsistent. Well, although I haven’t found the legitimate solution, I found out that disabling the ‘display: block’ property in much of .media eliminated this. So your final custom CSS should look like this:

.media img, .media object, .media embed, .media iframe {
display: inline;
}

.photo-panel {
margin-bottom: 1px;
background: transparent;
}


(Note: the margin-bottom was added to make the single-photo posts perfectly consistent with photosets in terms of margins)

So there it is. A relatively simple but rather hacky way to enable partial transparency in this simple theme. I think the pay-off was definitely worth thirty minutes of looking at the code and figuring out how to modify it.

Here is a hacky way to enable photo transparency and make the look more consistent in Effector theme.

The top picture shows the problem: Even though the eyes are transparent, they appear white, not green (the true vanilla Effector code actually would make the eyes black, but I had already messed with the code at this point) as shown in the second picture. How should we go about this?

Looking at the theme’s HTML code around line 500, we see what the problem is:

      {block:Photo}
        <div class="post-panel">
          <div class="media">
            <div class="photo-panel">

              {block:IfContentWidth500}
                {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
              {/block:IfContentWidth500}

              {block:IfNotContentWidth500}
                {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
              {/block:IfNotContentWidth500}

              <div class="photo-btns">
                                    {block:HighRes}{/block:IfNotContentWidth500}
                  <a class="lightbox" href="{PhotoURL-HighRes}">Pop-up</a>
                {/block:HighRes}
                <a class="photo-url" href="{PhotoURL-HighRes}">View Separately</a>
              </div>

            </div>
          </div>
          {block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
      {/block:Photo}

According to this, the “photo-panel” (which hosts the photo) is inside the “post-panel”, whose background is white. This means that even if you make the “photo-panel“‘s background transparent through custom CSS, you will still have the white background of “post-panel” to deal with. Of course, if you make the “post-panel” background transparent, you won’t be able to read the text!

After some thinking, I looked at the code for photoset (which strangely has transparency fully enabled by default) and realized that in photosets, the photos are hosted outside “post-panel”. If this happens, we could enable transparency. So I cut the entire “media” part out of the “post-panel” and posted it right above it, to obtain this:

      {block:Photo}
        <div class="media">
          <div class="photo-panel">

            {block:IfContentWidth500}
              {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
            {/block:IfContentWidth500}

            {block:IfNotContentWidth500}
                {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
              {/block:IfNotContentWidth500}

              <div class="photo-btns">
                                    {block:HighRes}{/block:IfNotContentWidth500}
                  <a class="lightbox" href="{PhotoURL-HighRes}">Pop-up</a>
                {/block:HighRes}
                <a class="photo-url" href="{PhotoURL-HighRes}">View Separately</a>
              </div>

            </div>
          </div>
        <div class="post-panel">

          {block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
      {/block:Photo}

This makes the “photo-panel” independent of the text portion; now we can add a custom CSS on the Customize page:

.photo-panel {
background: transparent;
}

And the background of the photo will be transparent, letting the transparent portions of our image shine.

But wait, this looks awkward. Unlike the photosets, this single photo is stuck to the post panel with zero gap, making the look inconsistent. Well, although I haven’t found the legitimate solution, I found out that disabling the ‘display: block’ property in much of .media eliminated this. So your final custom CSS should look like this:

.media img, .media object, .media embed, .media iframe {
display: inline;
}

.photo-panel {
margin-bottom: 1px;
background: transparent;
}

(Note: the margin-bottom was added to make the single-photo posts perfectly consistent with photosets in terms of margins)

So there it is. A relatively simple but rather hacky way to enable partial transparency in this simple theme. I think the pay-off was definitely worth thirty minutes of looking at the code and figuring out how to modify it.

Notes
  1. thecube42 reblogged this from thecube42
  2. imagendrageans reblogged this from thecube42