• Rick

    (@figurehead)


    Hello, I would like to change the font colour of the slider in travellikealocal.org. The dark grey text on the slightly darker background is barely visible.

    Now, I found the section in the CSS related to the slider, and I managed to change, as a test, the colour of the title from white to a horrible blue. However I can’t seem to be able to change the colour of the small text. This is the CSS

    #featured { border-bottom: 1px solid #ffffff; background: #000000; height: 300px; overflow: hidden; }
    	div.slide { height: 300px; position: relative; }
    		div.overlay, div.top-overlay { background:url("images/dropshadow.png") repeat-x bottom left; bottom:0; height:22px; left:0; position:absolute; width:100%; }
    		div.top-overlay { background:url("images/top-overlay.png") repeat-x bottom left; top: 0px; height: 43px; }
    		.slide .description { background:url("images/overlay.png") no-repeat scroll 0 0 transparent; float:right; height:276px; margin-top:6px; padding:18px 68px 0 50px; width:342px; }
    			.description h2.title { font-weight: bold; font-size: 36px; padding-top:3px; }
    				.description h2.title a { color: #ffffff; text-shadow: 2px 2px 2px #000000; }
    					.description h2.title a:hover { color: #eeeeee; text-decoration: none; }
    			.description p.tagline { font-size: 14px; font-family: Georgia, serif; font-style: italic; color: #4f4f4f; padding: 7px 0px 4px; }
    				.description p.tagline a { color: #4f4f4f; }
    					.description p.tagline a:hover { color: #7c7c7c; text-decoration: none; }
    			.description p { line-height: 19px; }
    
    			.slide a.readmore { background:url(images/featured-readmore-right.png) no-repeat scroll right bottom; display:block; float:left; height:31px; line-height:32px; padding-right:11px; color: #ffffff; text-shadow: 1px 1px 1px #0080bd; margin-top:8px; }
    				.slide a.readmore span { background:url(images/featured-readmore-left.png) no-repeat; display:block; padding: 0px 4px 0px 15px; }
    
    a#prevlink, a#nextlink { position:absolute; bottom:-2px; right:0; height: 40px; text-indent: -9999px; display: block; z-index: 1000; }
    a#prevlink { right: 80px; background: url(images/arrow-left.png) no-repeat; width: 81px; }
    a#nextlink { width: 80px; background: url(images/arrow-right.png) no-repeat; }

    I was sure that the line to edit was this:
    .description p { line-height: 19px; }
    Which I changed as follows:
    .description p { line-height: 19px; color: #ffffff; }
    but with no effect on the live site whatsoever.

    Any ideas?
    thanks!
    Rick

  • The topic ‘[Theme: TheSource] Help with CSS editing’ is closed to new replies.