Jump to content


Photo

How to make Twitterbar background color full page width like the footer?


  • Please log in to reply
7 replies to this topic

#1 abellemare

abellemare

    Advanced Member

  • Members
  • 44 posts

Posted 25 August 2011 - 02:51 PM

I would like the background color of the twitterbar to be full page width like the footer. I see that the twitterbar resides in the #morefooter. Can someone direct me how to move this into the #footer so that I could use a background image in the #footer to continue the color of the #twitterbar? Or if you have an easier more elegant solution, please provide. Thanks.

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 August 2011 - 06:09 PM

Please send a link to your site. Thanks. In Dashboard > PlatformPro > Template Setup use the drop down menu to Morefoot and see if you find a drag and drop bar for Twitter there. If so, move it to the right, removing it from the Morefoot. Now, return to the drop down list and go to Footer. Drag and drop the Twitter bar where you want it (above or below the Footer. The background color should now match.

#3 abellemare

abellemare

    Advanced Member

  • Members
  • 44 posts

Posted 25 August 2011 - 07:42 PM

Nice try, but it didn't work. The twitterbar is not an available section for the Footer Template.

#4 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 25 August 2011 - 09:29 PM

Okay, heres a solution that works. It puts a div inside the twitterbar that acts as the background:

First, activate the base child theme and put this in platformbase/functions.php:

 
	//extend twitterbar
	add_action ('pagelines_inside_top_twitterbar','extend');
	function extend(){
		?>
	    <div id="extend-twitter"></div>
	    <?php
	}
	

Then paste this css code into platformbase/style.css OR in the backend at Custom Code -> Custom CSS:

 
	#extend-twitter {
		position:absolute;
	    background: #f7f7f7;
	    height: 48px;
	    left: 0;
	    position: absolute;
	    width: 100%;
	    z-index: -1;
	}


#5 abellemare

abellemare

    Advanced Member

  • Members
  • 44 posts

Posted 25 August 2011 - 11:40 PM

I added the code to the functions.php and tried adding the custom css to both the custom code and stylesheet. In both cases there was no change. The bar remains the same size as the page layout 960px. Here is a screenshot of the code in the functions.php: http://twistedcrepe....-7.45.09-PM.png

#6 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 27 August 2011 - 01:21 AM

For your twitter bar width, try doing something like this:

 div#twitterbar.container {
	     width:1200px;
	     margin-left:-120px;
	}

You will need to change the width pixels and the left margin pixels to get it centered the way you want.

#7 abellemare

abellemare

    Advanced Member

  • Members
  • 44 posts

Posted 29 August 2011 - 01:50 PM

div#twitterbar.container { width:1280px; margin-left:-157px; }

#8 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 03 September 2011 - 01:14 AM

Glad you got it working!