placing a body of text under header

• 

  julienealvoh1 · Member · Mar 9, 2012 at 1:45 pm

  • Copy link
  • Add topic to favorites

  How would I go about placing a body of text under where I have my header image? I was trying to create a bio. Thank you very much! http://julienealvoh.wordpress.com

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

• 

  designsimply · Member · Mar 10, 2012 at 12:14 am

  • Copy link

  There is one way to add content using CSS, but it’s not ideal for bio text because the text wouldn’t really be part of the document and therefore wouldn’t get picked up by search engines. In any case, here is an example of adding a bio using CSS:

  #branding:after {
  color: black;
  display: block;
  padding-top: 350px;
  text-align: center;
  content: "This is a test. This is content added by CSS and so it isn't really a part of the HTML.";
  }

  Note that this is based on the design your site is currently using, including other CSS you have added. So if you make other CSS adjustments, you may also need to adjust the code example above.

  Another option would be to use the tagline which you can change on the Settings → General page. You could reposition the tagline using CSS after you added it.

• 

  julienealvoh1 · Member · Mar 10, 2012 at 12:25 pm

  • Copy link

  Thank you again! Just another quick question, with the brandings and large pixels, is that why I can’t see my widget area?

• 

  designsimply · Member · Mar 15, 2012 at 2:49 pm

  • Copy link

  You can see the widget area at http://julienealvoh.wordpress.com/ it’s just that it’s at the bottom of the page. Look for the “Archives” and “Meta” headings. The reason that the widgets appear at the bottom is that you selected the option “Don’t use Twenty Eleven’s CSS” on your Appearance → Custom Design → CSS page and then you didn’t style in a place for the widgets to be. Do you want some help styling that part differently? If so, where would you like to see the widgets appear?

• 

  designsimply · Member · Mar 15, 2012 at 3:01 pm

  • Copy link

  To test to see where the current boxes are placed, try adding this using a tool like Firebug for Firefox or your built in browser tool for whatever browser you’re using:

  #page {
  border: 3px dotted orange;
  }
  #primary {
  border: 3px dotted red;
  }
  #secondary {
  border: 3px dotted blue;
  }

  It will add borders around each area. The widgets are in the #secondary area.

  Also, here’s a quick, illustrative example of how to move the sidebar up to the left of the content area based on your current CSS that you have right now:

  #page {
  width: 1180px;
  }
  #primary {
  width: 960px;
  float: right;
  }
  #secondary {
  width: 200px;
  float: left;
  }