How to make my pages transparent?

by Jensha
7 replies
Hello.
I'm new to wordpress and I'm designing my website.
I've installed the shuttershot theme.
Everything's okay so far but when I go to a page, it has a white background.
I want to make it transparent (not semi transparent) so that the slider back ground can still be seen clearly.
I can't seen any theme option that allows me to do that in shuttershot theme unlike in flexibility theme where that option is included.
Please help me.
#make #pages #transparent
  • Profile picture of the author buzilla
    In style.css remove the background color and shadow in the following section:

    Code:
    .incasing{
    	background:#fafafa;
    	padding:0px 0px 20px 0px;
    	margin-top:150px;
    	margin-bottom:50px;	
    	width:800px;
    	float:left;
    	-moz-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);
    	-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);
    	box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);	
    }
    {{ DiscussionBoard.errors[7999226].message }}
  • Profile picture of the author Jensha
    Hi,

    Thank you for replying.

    But how exactly do I do that?

    I found this on Appearance>Editor>Stylesheet (style.css)>

    }

    .incasing{
    background:#fafafa;
    padding:0px 0px 20px 0px;
    margin-top:150px;
    margin-bottom:50px;
    width:800px;
    float:left;
    -moz-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);
    box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);

    /* display:none; */

    }

    How do I remove it from that code?
    {{ DiscussionBoard.errors[7999245].message }}
  • Profile picture of the author buzilla
    Replace what's there with this:

    Code:
    .incasing{
    padding:0px 0px 20px 0px;
    margin-top:150px;
    margin-bottom:50px;	
    width:800px;
    float:left;
    }
    And hit update file.
    {{ DiscussionBoard.errors[7999317].message }}
  • Profile picture of the author ricox
    maybe you can take the background image in css and then take it to photoshop and make it transparant
    {{ DiscussionBoard.errors[7999334].message }}
    • Profile picture of the author Jensha
      Originally Posted by ricox View Post

      maybe you can take the background image in css and then take it to photoshop and make it transparant
      Thanks but I'm not sure how to do that.

      Originally Posted by buzilla View Post

      Replace what's there with this:

      Code:
      .incasing{
      padding:0px 0px 20px 0px;
      margin-top:150px;
      margin-bottom:50px;	
      width:800px;
      float:left;
      }
      And hit update file.
      Thanks for the help buzilla, it didn't work though. It's still the same.

      Here, I uploaded a photo of what I'm talking about in Flickr, maybe you guys can check it out for me. I just want to learn how if it's possible so I won't have to hire someone to do it for me.

      Here's the link:

      samplephoto | Flickr - Photo Sharing!

      As you can see the background of the page is white, and the colorful background is actually a slide show so it changes and that's why I want the white background of my pages to be transparent so that the slide show can still be seen on whatever page they are.

      It's a simple page only of what I'm up to so please bear with me.

      Also, if you looked at the photo, can I still remove those "twitter updates" and "sponsors" in the right side bar? I don't see that option, so far.

      Thanks for the help
      {{ DiscussionBoard.errors[7999488].message }}
  • Profile picture of the author buzilla
    Not sure why it didn't work, here is a screengrab of the updated css and the result working for me, can you confirm you did the same? Photo Album - Imgur

    To remove the twitter updates and sponsors remove these lines from sidebar.php:

    Code:
    <!-- Twitter widget -->	
    <div class="featbox">
    <h3 class="sidetitl">Twitter updates</h3>
    <?php
     = get_option('shut_twitter');
    include('twitter.php');?>
    <?php if(function_exists('twitter_messages')) : ?>
           <?php twitter_messages("") ?>
           <?php endif; ?>
    </div> 	
    
    <!-- 125px banners -->	
    <?php include (TEMPLATEPATH . '/sponsors.php'); ?>
    If you're still having problems and wan't to hire a coder PM me.
    {{ DiscussionBoard.errors[8002403].message }}
    • Profile picture of the author BigM
      Hello,

      I'm very new to Wordpress and website design in general. I'd like to design a small homepage for my photography and I've a similar problem.

      I am using also the shuttershot theme, and I'd like to make the background semi-transparent if possible.
      If this is not possible, I'd like to change the background color to #DDDDDD.

      I've edited style.css but I don't have the section mentioned above.
      ".incasing" is nowhere to be found.

      Is it possible that I have a newer version of the theme and that modification must be done different?
      It would be great If you could help me.
      {{ DiscussionBoard.errors[9051968].message }}

Trending Topics