changing content background to transparent

  • Resolved revolutionary

    (@revolutionary)


    12 years, 8 months ago

    My website: http://www.decomachine.net

    I’m trying to put together a website for my mom with some of her photos and artwork. I have a nice background picture and I would like the different feautured images with her work to scroll over this picture without the black background that they have now. In other words, I just want the featured image pictures without any further content background. What’s the magic CSS line for this?

    Also, can I get rid of the small blue arrows next to each featured image thumbnail?

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Pioneer Web Design

    (@swansonphotos)

    12 years, 8 months ago

    It is this CSS:

    body.custom-background {
background-color: #000000;
background-image: url('http://www.decomachine.net/wp-content/uploads/2013/08/header11.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed; }

    And this one:

    #bg_image { display:block;margin:0 auto;}  #main,  #access  ul  li.current_page_item,  #access ul li.current-menu-item ,#access ul ul li  { background-color:#000000}  #access ul li { background-color:#000000}  #primary { background-color:#000000}  #secondary { background-color:#000000}  * , .widget-title {font-family:Arial Black, Gadget, sans-serif ; } #content h1.entry-title a, #content h2.entry-title a, #content h1.entry-title , #content h2.entry-title {font-family:Arial Black, Gadget, sans-serif ; } .widget-area *  {font-family:Arial Black, Gadget, sans-serif ; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6  {font-family:Arial Black, Gadget, sans-serif ; } #content .wp-caption {  background-color:#000;color:#CCC;}
 #access ul li { border-radius:0;-moz-border-radius:0;border-radius:0;} .entry-meta { background:#FFF;}  .entry-content ul li { background-image:none ; padding-left:0;} .entry-content ul { margin-left:0;}  #respond .form-allowed-tags { display:none;}  .nocomments, .nocomments2 {display:none;}  .comments-link span { display:none;}  #content table {border:none;} #content tr {background:none;} #content table {border:none;} #content tr th,
#content thead th {background:none;} #content tr td {border:none;} #header-container > div { margin-top:9000px;} body { background-color:#000000 !important ;} #header { background-color:  ;} #footer { background-color:#000000  ;} #footer2 { background-color:#000000  ;} #site-title span a { color:#fffff  ;} #site-description { color:#999999  ;} #content p, #content ul, #content ol { color:#ffffff  ;} .widget-area a:link, .widget-area a:visited, a:link, a:visited ,#searchform #s:hover , #container #s:hover, #access a:hover, #wp-calendar tbody td a , #site-info a ,#site-copyright a, #access li:hover > a, #access ul ul :hover > a { color:#0D85CC;}  a:hover, .entry-meta a:hover, .entry-utility a:hover , .widget-area a:hover { color:#12a7ff ;} #content .entry-title a, #content .entry-title, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6{ color:#000000 ;} #content .entry-title a:hover { color:#000000 ;} .widget-title,#footer-widget-area .widget-title { background-color:#000000 ;} .widget-title { color:#2EA5FD  ;} #content article.post{float:left;width:47%;margin-right:3%; }  #content article.sticky { margin-right:3%;padding:0; } #content article:nth-of-type(2n+1) {clear: both;}   #footer-widget-area .widget-title { color:#0C85CD ; ;} #footer-widget-area a { color:#666666  ;} #footer-widget-area a:hover { color:#888888  ;} #content .wp-caption { background-image:url(http://www.decomachine.net/wp-content/themes/mantra/images/pins/mantra_dot.png)  ;} .widget-area ul ul li{ background-image:url(http://www.decomachine.net/wp-content/themes/mantra/images/bullets/mantra_dot2.png);background-position: 0px 8px ;} .page h1.entry-title, .home .page h2.entry-title { display:none;}  h1.page-title { display:none;} .entry-meta .bl_sep {display:none;} .entry-meta span.entry-date,.entry-meta span.onDate {display:none;} .entry-meta .comments-link,.entry-meta2 .comments-link{display:none;} .entry-meta .author {display:none;} .entry-meta span.bl_categ {display:none;}  .entry-utility span.bl_posted, .entry-meta2 span.bl_tagg,.entry-meta3 span.bl_tagg {display:none;}  .entry-utility span.bl_bookmark {display:none;}  .entry-meta .entry-time {display:none;}  #content .entry-meta {display:none;}
#branding { height:900px ;}

    Whew – not gonna rewrite that also for clarity, but all the above requires editing the background color.

    To discover what CSS is output by your theme, use a web inspection tool such as Firebug: http://getfirebug.com/ , Chrome Inspect Element: https://developers.google.com/chrome-developer-tools/ or Internet Explorer 9+ F12 Dev. Tools: http://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx#csstool

    There are others.

    When editing CSS, use a Child Theme
    http://codex.wordpress.org/Child_Themes
    Custom CSS Plugin, or Theme provided custom CSS option.
    Edits to parent themes are lost on theme update.

    Learn CSS: http://www.w3schools.com/css/

    Thread Starter revolutionary

    (@revolutionary)

    12 years, 8 months ago

    Sorry -I did not understand your post.

    So far I managed to make the header transparent by adding the following line:

    #header {background-color:transparent;}

    to the custom CSS window under ‘Mantra Settings’.

    I’m looking for a similar bit of CSS to now make the content background transparent, leaving only the featured images to scroll up and down over the background image.

    Is there a simple line or two of CSS to do this?

    Thanks,

    Thread Starter revolutionary

    (@revolutionary)

    12 years, 8 months ago

    Found it:

    #main {background-color:transparent;}

    Done!

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

The topic ‘changing content background to transparent’ is closed to new replies.