slideshow & transparent background for text

  • Resolved nootka

    (@nootka)


    12 years, 11 months ago

    i’ve been trying to make some changes to slideshow of sight theme (by wpshower) to look similar to this one:
    https://wpcorner.atlantiswebholdings.com/demo/

    all went well with post content – text was over the image on transparent background, but the title of the post/page didn’t show, it stayed behind the image.

    here is the code i’ve been using to make transparent background for text – i’ve just added it to style.css code in the part for slideshow.

    .slide. post-content {
    color: #FFFFFF;
    opecity: 0.85;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 20px;
    height: 290px;
    line-height: 1.8em;
    margin: 0 0 0 640px;
    padding: 15px;
    position: absolute;
    right: 0px;
    top: 0;
    width: 270px;
    }

    does anybody have idea how to make it work?

Viewing 7 replies - 1 through 7 (of 7 total)

  • First of all you have some spelling mistakes in your css, i fixed them (opacity was spelled wrong and the dot for the classname was in the wrong place):

    .slide .post-content {
color: #FFFFFF;
opacity: 0.85;
font-family: Arial,Helvetica,sans-serif;
font-size: 20px;
height: 290px;
line-height: 1.8em;
margin: 0 0 0 640px;
padding: 15px;
position: absolute;
right: 0px;
top: 0;
width: 270px;
}

    Next to that; try adding:

    z-index:999;

    My guess is that that will work…

    Thread Starter nootka

    (@nootka)

    bad typing ??

    thanx, towonder,
    but it’s still working just with post content, and not with post title

    to see exactly what i mean, here is how it looks like:
    https://imageshack.us/photo/my-images/194/slideshow01.jpg/

    and here is the image where you can see that post title is left behind transparent background (i see this only when i change featured image dimensions):
    https://imageshack.us/photo/my-images/707/slideshow02.jpg/

    i really don’t have idea how to bring it on the same with post content…

    here is code from style.css file, considering slideshow:

    /*** Slideshow ***/

    #slideshow, .slideshow {
    height: 290px;
    width: 980px;
    overflow: hidden;
    position: relative;
    padding: 10px 0 0 0;
    box-shadow: 0px 7px 5px #d9d9d9;
    }
    .slide {
    height: 290px;
    width: 980px;
    background: #e0e0e0;
    }
    .slide img {display: block; float: left; width: 670px; height: 290px; position: relative; top: -20px; left: -30px;}
    .slide .post {padding: 20px 30px 0;}
    .slide .post-category {font-size: 11px; color: #d9d9d9; text-transform: uppercase; margin-bottom: 5px;}
    .slide .post a {color: #000;}
    .slide .post .post-category a {text-decoration: none;}
    .slide .post .post-category a:hover {text-decoration: underline;}
    .slide .post .post-meta {font-size: 11px; font-style: italic; color: #656363; margin-bottom: 20px;}
    .slide .post .post-meta span, .slide .post .post-meta a {color: #000; text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-style: normal;}
    .slide .post .post-meta a:hover {text-decoration: underline;}
    .slide .post .post-author {text-transform: uppercase;}

    .slide .post-content {
    color: #000;
    opacity: 0.70;
    z-index:999;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    background-color: #fff;
    height: 290px;
    line-height: 1.8em;
    margin: 0 0 0 640px;
    padding: 15px;
    position: absolute;
    right: 0px;
    top: 0;
    width: 280px;
    }

    .slide .post-content p {margin-bottom: 15px;}

    .slide .post h2 {margin-bottom: 5px;}
    .slide .post h2 a{
    color:#000;
    font-size: 20px;
    font-weight: normal;
    text-transform: none;
    }

    .slide .post-content h2 a:hover {text-decoration: underline;}

    #larr, #rarr {display: block; width: 32px; height: 53px; position: absolute; top: 106px !important; opacity: 0.2; z-index: 99 !important;}
    #larr {background: #000 url(“images/larr.png”) 8px 50% no-repeat; left: 0 !important;}
    #rarr {background: #000 url(“images/rarr.png”) 11px 50% no-repeat; right: 0 !important;}
    #larr:hover, #rarr:hover {opacity: 1;}

    Can you show me the html/php markup?

    I think the h2 tag might be in the wrong position…

    Thread Starter nootka

    (@nootka)

    of course!

    here is slideshow.php file:

    <?php
    $args = array(
    ‘meta_key’ => ‘sgt_slide’,
    ‘meta_value’ => ‘on’,
    ‘numberposts’ => -1,
    );
    $slides = get_posts($args);

    if ( !empty($slides) ) : $exl_posts = Array(); ?>

    <div class=”slideshow”><div id=”slideshow”>

    <?php foreach( $slides as $post ) :
    setup_postdata($post);
    global $exl_posts;
    $exl_posts[] = $post->ID;
    ?>
    <div class=”slide clear”>
    <div class=”post”>
    <?php if ( has_post_thumbnail() ) echo ‘‘.get_the_post_thumbnail($post->ID, ‘slide’,
    array(
    ‘alt’ => trim(strip_tags( $post->post_title )),
    ‘title’ => trim(strip_tags( $post->post_title )),
    )).’    ‘; ?>
    <div class=”post-category”><?php the_category(‘ / ‘); ?></div>
    <h2>“><?php the_title(); ?></h2>

    <div class=”post-meta”>by <span class=”post-author”>” title=”Posts by <?php the_author(); ?>”><?php the_author(); ?></span> on <span
    class=”post-date”><?php the_time(__(‘M j, Y’)) ?></span> ? <?php comments_popup_link(__(‘No Comments’), __(‘1 Comment’), __(‘% Comments’), ”, __(‘Comments Closed’) ); ?> <?php edit_post_link( __( ‘Edit entry’), ‘? ‘); ?></div>
    <div class=”post-content”><?php if ( has_post_thumbnail() && function_exists(‘smart_excerpt’) ) smart_excerpt(get_the_excerpt(), 50); else smart_excerpt(get_the_excerpt(), 150); ?></div>
    </div>
    </div>
    <?php endforeach; ?>

    </div>



    </div>
    <?php endif; ?>

    If you only want the title and the post excerpt (so no metadata) try this:

    <?php
$args = array(
'meta_key' => 'sgt_slide',
'meta_value' => 'on',
'numberposts' => -1,
);
$slides = get_posts($args);

if ( !empty($slides) ) : $exl_posts = Array(); ?>

<div class="slideshow"><div id="slideshow">

<?php foreach( $slides as $post ) :
setup_postdata($post);
global $exl_posts;
$exl_posts[] = $post->ID;
?>
<div class="slide clear">
<div class="post">
<?php if ( has_post_thumbnail() ) echo ''.get_the_post_thumbnail($post->ID, 'slide',
array(
'alt'	=> trim(strip_tags( $post->post_title )),
'title'	=> trim(strip_tags( $post->post_title )),
)).''; ?>
<div class="post-category"><?php the_category(' / '); ?></div>
<div class="post-content">
<h2>"><?php the_title(); ?></h2>
<?php if ( has_post_thumbnail() && function_exists('smart_excerpt') ) smart_excerpt(get_the_excerpt(), 50); else smart_excerpt(get_the_excerpt(), 150); ?></div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>

    if you also want the post’s author and creationdate displayed, try this:

    <?php
$args = array(
'meta_key' => 'sgt_slide',
'meta_value' => 'on',
'numberposts' => -1,
);
$slides = get_posts($args);

if ( !empty($slides) ) : $exl_posts = Array(); ?>

<div class="slideshow"><div id="slideshow">

<?php foreach( $slides as $post ) :
setup_postdata($post);
global $exl_posts;
$exl_posts[] = $post->ID;
?>
<div class="slide clear">
<div class="post">
<?php if ( has_post_thumbnail() ) echo ''.get_the_post_thumbnail($post->ID, 'slide',
array(
'alt'	=> trim(strip_tags( $post->post_title )),
'title'	=> trim(strip_tags( $post->post_title )),
)).''; ?>
<div class="post-category"><?php the_category(' / '); ?></div>
<div class="post-content">
<h2>"><?php the_title(); ?></h2>

<div class="post-meta">by <span class="post-author">" title="Posts by <?php the_author(); ?>"><?php the_author(); ?></span> on <span
class="post-date"><?php the_time(__('M j, Y')) ?></span> ? <?php comments_popup_link(__('No Comments'), __('1 Comment'), __('% Comments'), '', __('Comments Closed') ); ?> <?php edit_post_link( __( 'Edit entry'), '? '); ?></div>
<?php if ( has_post_thumbnail() && function_exists('smart_excerpt') ) smart_excerpt(get_the_excerpt(), 50); else smart_excerpt(get_the_excerpt(), 150); ?></div>
</div>
</div>
<?php endforeach; ?>

</div>

</div>
<?php endif; ?>

    Thread Starter nootka

    (@nootka)

    you are really wonder towonder!
    https://www.youtube.com/watch?v=IxAKFlpdcfc
    thank you sooooo much, you’ve saved me!!! ??

    hahaha cool!

    No problem and thanks for the applause! ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘slideshow & transparent background for text’ is closed to new replies.