Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 527
  • Last Modified:

changing background colour of div

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
jonathanduane2010
Asked:
jonathanduane2010
  • 3
  • 2
1 Solution
 
Meir RivkinFull stack Software EngineerCommented:
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
 
jonathanduane2010Author Commented:
no, i dont know it :(
0
 
Meir RivkinFull stack Software EngineerCommented:
Does it have unique name or is it wrapped inside div with unique id/class?
Can u post the page source?
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
jonathanduane2010Author Commented:
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
 
jonathanduane2010Author Commented:
0
 
Julian HansenCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now