Solved

changing background colour of div

Posted on 2013-06-12
6
495 Views
Last Modified: 2013-06-13
Hi,

I was wondering whats the best way of changinf the bg colour of my twitter widget on the righ so that the background is the same colour as the facebook widget?

here is the code

<a class="twitter-timeline" href="https://twitter.com/PiratesCove6" data-widget-id="344828048253784064">Tweets by @PiratesCove6</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Open in new window

0
Comment
Question by:jonathanduane2010
  • 3
  • 2
6 Comments
 
LVL 42

Expert Comment

by:sedgwick
ID: 39241667
Do u know the facebook widget id?
If u do then u can do this:
$('.twitter-timeline').css('background-color',$('#widget').css('background-color'));
0
 

Author Comment

by:jonathanduane2010
ID: 39241726
no, i dont know it :(
0
 
LVL 42

Expert Comment

by:sedgwick
ID: 39241743
Does it have unique name or is it wrapped inside div with unique id/class?
Can u post the page source?
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:jonathanduane2010
ID: 39241767
here is the index.php

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">
		
			<div class="box_row1">
              <?php 
$page_id = 10; 
$page_data = get_page( $page_id ); 
$content = apply_filters('the_content', $page_data->post_content);  
$title = $page_data->post_title; // Get title
//echo "<h2>$title</h2>";
echo $content; // Output Content
?>
					
         </div>
      <div class="photos_videos">   
       <h2>PHOTOS &amp; VIDEOS</h2>
      <div id="banner-fade">
        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
       <?php  query_posts("cat=4"); 
         while (have_posts()) : the_post(); ?>
         <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
        <li><a href="<?php the_permalink(); ?>"><img src="<?php echo $image[0]; ?>" title="<?php the_title(); ?>"></a> </li>
         <?php endwhile;
	    wp_reset_query(); ?>
      
        </ul>
        <!-- end Basic jQuery Slider -->
      </div>  
     </div> <!-- #photos_videos -->  
    <div class="widget widget_foo_widget new1" id="foo_widget-2" >
    <h3>Latest News</h3>
   <?php query_posts("cat=3&showposts=3"); 
         while (have_posts()) : the_post();
		echo '<h2><a href="'.get_permalink().'">'.get_the_title().'</a><span>'.get_the_date('d-M-Y').'</span></h2>';
		echo '<p>'.substr(get_the_excerpt(),0,100).'...</p>';
		endwhile;
		wp_reset_query(); ?>
    </div>
   </div><!-- #content -->
        
	</div><!-- #primary -->

<?php get_sidebar(); ?>
      <div class="box_row4">
            	
                   <!--<a href="#"><img src="<?php //bloginfo('template_url') ?>/images/oxygen_map.png"></a>
            
                
                     <a href="#"><img src="<?php //bloginfo('template_url') ?>/images/wexford_img.png"></a>
                
          	      <a href="#"><img src="<?php //bloginfo('template_url') ?>/images/booking_forms.png" style="margin-right:0px;"></a>-->
                  
                  <a href="#"><div class="red1">Pirates Cove Map</div></a>
                  <a href="#"><div class="green1">Wexford</div></a>
                  <a href="http://piratescove.yourcitybeats.com/index.php/hire-us/"><div class="blue1" style="margin-right:0px;">Hire Us</div></a>
                  
                  
             
            </div>


<?php get_footer(); ?>

Open in new window


then here is the header.php

<?php

/**

 * The Header for our theme.

 *

 * Displays all of the <head> section and everything up till <div id="main">

 *

 * @package WordPress

 * @subpackage Twenty_Twelve

 * @since Twenty Twelve 1.0

 */

?><!DOCTYPE html>

<!--[if IE 7]>

<html class="ie ie7" <?php language_attributes(); ?>>

<![endif]-->

<!--[if IE 8]>

<html class="ie ie8" <?php language_attributes(); ?>>

<![endif]-->

<!--[if !(IE 7) | !(IE 8)  ]><!-->

<html <?php language_attributes(); ?>>

<!--<![endif]-->

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>" />

<meta name="viewport" content="width=device-width" />

<title><?php wp_title( '|', true, 'right' ); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11" />

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>

<!--[if lt IE 9]>

<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>

<![endif]-->

<?php wp_head(); ?>



<script type="text/javascript" src="<?php bloginfo('template_url') ?>/kkslider.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_url') ?>/sec.js"></script>


<script type='text/javascript'>
//<![CDATA[
/*
 * jQuery spritely - Sprite up the web!
 * http://spritely.net/
 *
 * Latest version:
 * http://spritely.net/download/
 *
 * Copyright 2010, Peter Chater, Artlogic Media Ltd, http://www.artlogic.net/
 * Dual licensed under the MIT or GPL Version 2 licenses.
 */
(function($) {
	$._spritely = {
		// shared methods and variables used by spritely plugin
		animate: function(options) {
			var el = $(options.el);
			var el_id = el.attr('id');
			if (!$._spritely.instances) {
				$._spritely.instances = {};
			}
			if (!$._spritely.instances[el_id]) {
				$._spritely.instances[el_id] = {current_frame: -1};
			}
			var instance = $._spritely.instances[el_id];
			if (options.type == 'sprite') {
				var frames;
				var animate = function(el) {
					var w = options.width, h = options.height;
					if (!frames) {
						frames = [];
						total = 0
						for (var i = 0; i < options.no_of_frames; i ++) {
							frames[frames.length] = (0 - total);
							total += w;
						}
					}
					if ($._spritely.instances[el_id]['current_frame'] >= frames.length - 1) {
						$._spritely.instances[el_id]['current_frame'] = 0;
					} else {
						$._spritely.instances[el_id]['current_frame'] = $._spritely.instances[el_id]['current_frame'] + 1;
					}
					el.css('background-position', frames[$._spritely.instances[el_id]['current_frame']] + 'px 0');
					if (options.bounce && options.bounce[0] > 0 && options.bounce[1] > 0) {
						var ud = options.bounce[0]; // up-down
						var lr = options.bounce[1]; // left-right
						var ms = options.bounce[2]; // milliseconds
						el
							.animate({top: '+=' + ud + 'px', left: '-=' + lr + 'px'}, ms)
							.animate({top: '-=' + ud + 'px', left: '+=' + lr + 'px'}, ms);
					}
				}
				animate(el);
			} else if (options.type == 'pan') {
				if (options.dir == 'left') { 
					$._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] - (options.speed || 1)) || 0;
				} else {
					$._spritely.instances[el_id]['l'] = ($._spritely.instances[el_id]['l'] + (options.speed || 1)) || 0;
				}
				if ($.browser.msie) {
				    // fixme - the background-position property does not work
				    // corretly in IE so we have to hack it here... Not ideal
				    // especially as $.browser is depricated
				    var bp_top = $(el).css('background-position-y') || '0';
				    $(el).css('background-position', $._spritely.instances[el_id]['l'] + 'px ' + bp_top);
				} else {
				    var bp_top = ($(el).css('background-position').split(' ') || ' ')[1];
				    $(el).css('background-position', $._spritely.instances[el_id]['l'] + 'px ' + bp_top);
				}
			}	
		},
		randomIntBetween: function(lower, higher) {
			return parseInt(rand_no = Math.floor((higher - (lower - 1)) * Math.random()) + lower);
		}
	};
	$.fn.extend({
		spritely: function(options) {
			var options = $.extend({
				type: 'sprite',
				do_once: false,
				width: null,
				height: null,
				fps: 12,
				no_of_frames: 2
			}, options || {});
			options.el = this;
			options.width = options.width || $(this).width() || 100;
			options.height = options.height || $(this).height() || 100;
			var get_rate = function() {
                return parseInt(1000 / options.fps);
            }
            if (!options.do_once) {
				window.setInterval(function() {
					$._spritely.animate(options);
				}, get_rate(options.fps));
			} else {
				$._spritely.animate(options);
			}
			return this; // so we can chain events
		},
		sprite: function(options) {
			var options = $.extend({
				type: 'sprite',
				bounce: [0, 0, 1000] // up-down, left-right, milliseconds
			}, options || {});
			return $(this).spritely(options);
		},
		pan: function(options) {
			var options = $.extend({
				type: 'pan',
				dir: 'left',
				continuous: true,
				speed: 1 // 1 pixel per frame
			}, options || {});
			return $(this).spritely(options);
		},
		flyToTap: function(options) {
			var options = $.extend({
				el_to_move: null,
				type: 'moveToTap',
				ms: 1000, // milliseconds
				do_once: true
			}, options || {});
			if (options.el_to_move) {
				$(options.el_to_move).active();
			}
			if ($._spritely.activeSprite) {
				if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues...
					$(this)[0].ontouchstart = function(e) {
						var el_to_move = $._spritely.activeSprite;
						var touch = e.touches[0];
						var t = touch.pageY - (el_to_move.height() / 2);
						var l = touch.pageX - (el_to_move.width() / 2);
						el_to_move.animate({
							top: t + 'px',
							left: l + 'px'
						}, 1000);
					};
				} else {
					$(this).click(function(e) {
						var el_to_move = $._spritely.activeSprite;
						$(el_to_move).stop(true);
						var w = el_to_move.width();
						var h = el_to_move.height();
						var l = e.pageX - (w / 2);
						var t = e.pageY - (h / 2);
						el_to_move.animate({
							top: t + 'px',
							left: l + 'px'
						}, 1000);
					});
				}
			}
			return this;
		},
		active: function() {
			// the active sprite
			$._spritely.activeSprite = this;
			return this;
		},
		activeOnClick: function() {
			// make this the active script if clicked...
			var el = $(this);
			if (window.Touch) { // iphone method see http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone/9 or http://www.nimblekit.com/tutorials.html for clues...
				el[0].ontouchstart = function(e) {
					$._spritely.activeSprite = el;
				};
			} else {
				el.click(function(e) {
					$._spritely.activeSprite = el;
				});
			}
			return this;
		},
		spRandom: function(options) {
			var options = $.extend({
				top: 50,
				left: 50,
				right: 290,
				bottom: 320,
				speed: 4000,
				pause: 0
			}, options || {});
			var el_id = $(this).attr('id');
			var r = $._spritely.randomIntBetween;
			var t = r(options.top, options.bottom);
			var l = r(options.left, options.right);
			$('#' + el_id).animate({
				top: t + 'px', 
				left: l + 'px'
			}, options.speed)
			window.setTimeout(function() {
				$('#' + el_id).spRandom(options);
			}, options.speed + options.pause)
			return this;
		},
		makeAbsolute: function() {
			// remove an element from its current position in the DOM and
			// position it absolutely, appended to the body tag.
			return this.each(function() {
				var el = $(this);
				var pos = el.position();
				el.css({position: "absolute", marginLeft: 0, marginTop: 0, top: pos.top, left: pos.left })
					.remove()
					.appendTo("body");
			});
		
		}
	})
})(jQuery);
// Stop IE6 re-loading background images continuously
try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(err) {} 
//]]>
</script>
<!-- /BEGIN executor -->
<script type='text/javascript'>
		(function($) {
			$(document).ready(function() {
			
				$('#cloud').pan({fps: 30, speed: 1, dir: 'right'}); 
				
				$('#cloud2').pan({fps: 30, speed: 1, dir: 'right'}); 
				
				$('#cloud3').pan({fps: 30, speed: 0.5, dir: 'right'}); 

			});
		})(jQuery);
	</script>   



<script type="text/javascript">

//Twitter

window.onload = function() {

	var ajax_load = "<img class='loader' src='ajax-loader.gif' alt='Loading...' />";

	var url = 'https://api.twitter.com/1/statuses/user_timeline.json?screen_name=PiratesCove6&include_rts=true&callback=twitterCallback2&count=3';

	var script = document.createElement('script');	

	jQuery("#twitter_feed").html(ajax_load);

	script.setAttribute('src', url);

	document.body.appendChild(script);

}

function twitterCallback2(twitters) {

  var statusHTML = [];

  for (var i=0; i<twitters.length; i++){

    var username = twitters[i].user.PiratesCove6;

    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, 

	function(url) { return '<a href="'+url+'">'+url+'</a>';

    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {

      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';

    });

    statusHTML.push('<li class="twitter_date"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></li> <li><p>'+status+'</p></li>');

  }

  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');

}

function relative_time(time_value) {

  var values = time_value.split(" ");

  time_value = values[1] + " " + values[2] + " " + values[5] + " " + values[3];

  var parsed_date = new Date();

  parsed_date.setTime(Date.parse(time_value));  

  var months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',

	'Sep', 'Oct', 'Nov', 'Dec');

  var m = parsed_date.getMonth();

  var postedAt = '';

  postedAt = months[m];

  postedAt += " "+ parsed_date.getDate();

  postedAt += ","

  postedAt += " "+ parsed_date.getFullYear();

  return postedAt;

}										 

</script>

</head>



<body <?php body_class(); ?>>
 <!-- CLOUDS -->
<div id='cover-cloud'>
<div id='cloud2'>&#160;</div>
<div id='cloud3'>&#160;</div>
</div>
<!-- // CLOUDS -->

<div id="page" class="hfeed site1">

	<header id="masthead" class="site-header" role="banner">

		 <div class="center1">
           <img src="http://piratescove.yourcitybeats.com/wp-content/themes/twentytwelve/images/logo4.png" style="
    position: absolute;  bottom: 0px;  left: 280px;  z-index: 9999;
">
          <img src="<?php bloginfo('template_url') ?>/images/RED-FLAG-ANIMATED2.gif">

         

         </div><!-- Center1 -->

         <div class="right">

                	 

         </div><!-- right -->

		<nav id="site-navigation" class="main-navigation" role="navigation">

			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>

			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>

			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

		</nav><!-- #site-navigation -->



	</header><!-- #masthead -->

</div>

<div id="page" class="hfeed site">

	<div id="main" class="wrapper">

    

        <?php if(is_home()) { include (ABSPATH . '/wp-content/plugins/wp-featured-content-slider/content-slider.php'); } ?> 

Open in new window


if there is anything else i can get i will
0
 

Author Comment

by:jonathanduane2010
ID: 39241768
0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 425 total points
ID: 39242036
Your background is being set here on line 737 of styles.css
#text-3 {
  background: url("images/latest_news_bg.png") repeat scroll 0 0 transparent;
  border: 1px solid #444444;
}

Open in new window


As you can see it is a png that is repeating - not sure why you are using a png to background  a solid colour but there you go - either change to
#text-3 {
  background: #fff;
  border: 1px solid #444444;
}

Open in new window

Or make a different PNG for it
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now