Background Color Change

• 

  midwestamc · Member · Jan 6, 2017 at 8:03 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I would like to have the background color and text color change from edge to edge for only a small section of my page. Is there a code for that?

  ex. it is a yellow background with red text and i want it to switch to a red background with yellow text for a paragraph or two and then go back to the yellow background with red text.

  Thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  samjhamdy · Member · Jan 6, 2017 at 11:03 pm

  • Copy link

  Hi there!

  You can set this up by creating some custom CSS rules, and then using tags within your content whenever you want to change the background/text color.

  You can continue using the same process you’ve been using for a yellow background with red text.

  For a red background with yellow text, first add these rules to your CSS panel:

  #page {
    overflow: hidden;
  }
  
  .color-block, .color-black span {
  	background: #5f000a;
  	color: #ffe600;
  	padding: 10px 0;
  	position: relative;
  }
  
  .color-block:before,
  .color-block:after {
  	background: #5f000a;
  	bottom: 0;
  	content: "";
  	display: block;
  	position: absolute;
  	top: 0;
  	width: 100%;
  }
  
  .color-block:before {
  	left: 100%;
  }
  
  .color-block:after {
  	right: 100%;
  }

  For single paragraphs where you want the red background with yellow text, you can open the paragraph with this tag:

  <p class="color-block">

  Then close the tag at the end:

  </p>

  For multiple paragraphs, you can open with a div tag:

  <div class="color-block">

  Then close at the end:

  </div>

  Let us know if this helps, or if you have any other questions.

• 

  midwestamc · Member · Jan 23, 2017 at 4:18 pm

  • Copy link

  That is realllly close, but how do I get the text to become yellow?

• 

  midwestamc · Member · Jan 23, 2017 at 6:06 pm

  • Copy link

  never mind. I figured it out. Thanks!

• 

  midwestamc · Member · Jan 23, 2017 at 8:04 pm

  • Copy link

  I just tried using this code behind the pictures on the page link below and it did not work. I want the color block to show up direct behind the pictures so that it looks like the red it full width on the page. Any ideas?

• 

  thesacredpath · Member · Jan 26, 2017 at 1:48 am

  • Copy link

  @midwestamc, did you mean to give a link to a page with your previous reply? If you can let us know where you wish to do this, we can see what is preventing it from happening.