Solved

changing background colour of div

Posted on 2013-06-12
6
500 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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 55

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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

828 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