Announcement

Collapse
No announcement yet.

1&1 website CSS issue. Built-in shadow overlays over front page images.

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • 1&1 website CSS issue. Built-in shadow overlays over front page images.

    http://www.craftlinegraphics.com/

    This is apparently the way the template is setup by default. I'm looking to remove the shadow overlays over the five equipment images. If you hover over each one separately, the shadow goes away. My client doesn't like the equipment being dark by default, and I agree.

    The template has a single CSS style sheet, but I'm struggling to figure out how to remove the overlay! Any ideas?

    Code:
                                    /*
    -----------------------------------------------
    Layout 1001: Screen Styles
    ----------------------------------------------- */
    
    body {
    	margin: 0;
    	padding: 0;
    }
    
    .altcolor {
    	background-color: #|:bg_color1|:;
    }
    
    
    /* Container */
    
    div#container {
    	margin: 0 auto;
    	width: 940px;
    	background-image: url(1001-container_bg.gif);
    	background-repeat: repeat-y;
    	background-position: 239px 0;
    }
    
    
    /* Header */
    
    div#header {
    	position: relative;
    	padding-bottom: 40px;
    	background: #fff;
    	zoom: 1;
    }
    div#header_wrapper {
    	padding-top: 20px;
    }
    
    div#emotion-header {
    	position: relative;
    }
    div#emotion-header strong#emotion-header-title {
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    
    
    /* Content */
    
    div#content {
    	width: 700px;
    	float: right;
    	background: #fff;
    }
    div#content div.gutter {
    	padding: 0 100px 60px 100px;
    }
    
    
    /* Sidebar */
    
    div#sidebar {
    	width: 239px;
    	float: left;
    	padding: 0 0 40px 0;
    }
    
    div#jimdobox {
    	margin-bottom: 20px;
    }
    
    
    /* Navigation */
    
    div#navigation {
    	margin: 0 0 20px;
    	padding: 0 0 30px;
    	background: url(1001-navigation_bg.gif) repeat-x 0 100%;
    }
    
    ul.mainNav1 {
    	margin: 0;
    	padding: 1px 0 0;
    	list-style: none;
    	background: url(1001-dots.gif) repeat-x;
    }
    ul.mainNav1 li {
    	width: 239px;
    }
    ul.mainNav1 li a {
    	font-weight: bold;
    	display: block;
    	width: 219px;
    	padding: 5px 10px;
    	background: url(1001-dots.gif) repeat-x 0 100%;
    	background-color: #fff !important;
    	text-align: right;
    	text-decoration: none;
    }
    ul.mainNav1 li a:hover, ul.mainNav1 li a.current {
    	background: transparent !important;
    	color: #fff;
    }
    ul.mainNav2 {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    ul.mainNav2 li a {
    	padding: 5px 30px 5px 10px;
    	width: 199px;
    }
    ul.mainNav3 {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    ul.mainNav3 li a {
    	padding: 5px 50px 5px 10px;
    	width: 179px;
    }
    
    div#sidebar_content {
    	margin: 0 0 20px;
    	padding: 0 20px;
    }
    
    
    /* Footer */
    
    div#footer {
    	width: 700px;
    	margin-left: 240px;
    }
    div#footer div.gutter {
    	background: url(1001-dots.gif) repeat-x;
    	background-color: #fff;
    	float: left;
    	width: 660px;
    	padding: 10px 20px;
    }
    
    br.c {
    	display: block;
    }

  • #2
    Hi there ReMeDy


    try adding this...

    Code:
    
    .imageSubtitle::after {
        display: none!important;
    }
    to your stylesheet.



    ~ the original bald headed old fart ~

    Comment

    Working...
    X