Adding a column

• 

  lizalhuadmissions · Member · Apr 9, 2012 at 5:00 pm

  • Copy link
  • Add topic to favorites

  I would like to have 4 columns at the top of my webpage to basically direct viewers to my 3 different pages. My first column would be my logo then the next 3 would go to my pages. Similar to this:
  http://xandolabs.com/

  It has the X and O Lab logo and then the 3 sections. Anyone know how to design this?

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

• 

  timethief · Member · Apr 9, 2012 at 5:05 pm

  • Copy link

  Please note that CSS editing cannot be used to add columns to themes that aren’t already coded to have them. CSS editing can be used to change theme appearance only. It cannot be used to chnage the way any theme functions.

  Does the Custom Design upgrade let me edit HTML?
  No. The Custom Design upgrade allows you to edit fonts and CSS only. You can change the appearance of a theme, but not its HTML markup, PHP code, or content.
  http://en.support.wordpress.com/custom-design/#frequently-asked-questions

  You cannot build or use your own custom theme built from scratch at WordPress.com.

  http://en.support.wordpress.com/ftp-access/

  http://en.support.wordpress.com/themes/adding-new-themes/

  The only themes we can use are those found here > Appearance > Themes
  This is a multiuser blogging platform. All blogs wearing the same theme are using the same underlying template and we cannot access the underlying files and edit templates or themes. http://en.support.wordpress.com/themes/editing-themes/

  There are two free themes, Sandbox and Toolbox designed to allow maximum flexibility for CSS editing and creating new “skins”. Toolbox is more modern and includes a lot of support for CSS3 and HTML5, so it is really only limited by your skills and knowledge.

  If you have CSS editing experience the upgrade will allow you to stylize the appearance of themes you find here > Appearance > Themes, but will not allow you to change the functionality, by editing the underlying template. It does not allow you to remove footer links to the theme designer or to WordPress.com. Also note that CSS is theme specific, so you cannot use the CSS stylesheets from other themes with the themes at WordPress.COM. http://en.support.wordpress.com/custom-design/custom-css/

• 

  designsimply · Member · Apr 17, 2012 at 5:52 pm

  • Copy link

  You could actually add a block like that by adding a text widget with some HTML and some CSS to position it where you want in the header. Here is a basic example if you’d like to try it out in the Twenty Eleven theme:

  Add this to a text widget:

  <div id="boxes">
  	<div class="box1">
  		<p>box one</p>
  	</div>
  	<div class="box2">
  		<p>box two</p>
  	</div>
  	<div class="box3">
  		<p>box three</p>
  	</div>
  	<div class="box4">
  		<p>box four</p>
  	</div>
  </div>

  Then add this to your Appearance → Custom Design → CSS page and click Preview:

  #page {
  position: relative;
  }
  
  hgroup {
  padding-bottom: 125px;
  }
  
  #boxes {
  display : block;
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
  height: 150px;
  }
  
  #boxes div {
  float: left;
  height: 128px;
  padding: 1%;
  border: 1px dashed black;
  }
  
  .box1 {
  width: 46%;
  }
  
  .box2,
  .box3,
  .box4 {
  width: 15%;
  }

  The content inside those areas would always need to be updated manually through the text widget, but you can see an idea of how it would work.