Adding a column with CSS

• 

  tnbennett · Member · Jan 4, 2014 at 9:00 am

  • Copy link
  • Add topic to favorites

  Hello,

  I would like to know if it is possible to add a third column with the Enterprise theme or with the Twenty Fourteen theme via CSS?

  I would also like to tighten up my blogs appearance ie. spacing gaps and menu color. Would anyone be able to assist me please?

  Thanks

  -Taylor

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

• 

  thesacredpath · Member · Jan 6, 2014 at 3:46 pm

  • Copy link

  When you say, “add a third column,” are you talking about a sidebar column or something else?

• 

  designsimply · Member · Jan 17, 2014 at 2:25 pm

  • Copy link

  I would like to know if it is possible to add a third column with the Enterprise theme or with the Twenty Fourteen theme via CSS?

  You can’t add new, dynamic content using CSS—but you can move around things that are already on the page. For example, if you had a single sidebar setup, you might be able to split it into two columns without too much trouble.

  Here’s a basic example to illustrate:

  #sidebar .widget {
  	width: 45%;
  	clear: none;
  }
  
  #sidebar #rss_links-4,
  #sidebar #search-2 {
  	float: right;
  	clear: both;
  }

  This CSS is specific to the Enterprise theme and the widgets currently setup at http://shesourrock.com/

• 

  designsimply · Member · Jan 17, 2014 at 2:46 pm

  • Copy link

  I would also like to tighten up my blogs appearance ie. spacing gaps

  What CSS to use to adjust spacing gaps will depend on which elements you want to change. For example, this CSS will reduce the space below paragraphs in the main content column:

  .entry p {
  	padding-bottom: 5px;
  }

• 

  designsimply · Member · Jan 17, 2014 at 3:21 pm

  • Copy link

  and menu color

  Changing the menu colors in the Enterprise theme takes a bit of work. Enterprise uses images for some of the menu backgrounds to get a gradient effect. I created an example, but it uses plain colors without gradients to make it easier to work with.

  Start with the following and swap out any of the color codes to make changes if you’d like:

  #nav {
  	background: #7F2F5B;
  }
  
  .nav ul li a {
  	color: #EEEEEE;
  	text-shadow: #000000 1px 1px;
  	background: inherit;
  }
  
  .nav ul li a:hover,
  .nav ul li a.selected,
  .nav ul li.current-menu-item > a,
  .nav ul li.current-menu-ancestor > a,
  .nav ul li.current_page_item > a,
  .nav ul li.current_page_ancestor > a {
  	background: #7F2F5B;
  	color: #EEEEEE;
  	border-bottom: 1px solid #642548;
  }
  .nav ul li a:hover {
  	background: #642548;
  }
  
  .nav ul li ul li a {
  	background: #7F2F5B;
  	color: #FFFFFF;
  	border-bottom: 1px solid #642548;
  	text-shadow: #000000 1px 1px;
  }
  
  .nav ul li ul li a:hover {
  	background: #642548;
  	color: #FFFFFF;
  }
  
  .nav li:hover > a {
  	background: #7F2F5B;
  }
  
  .nav ul ul :hover > a {
  	background: #7F2F5B;
  }
  
  #subnav {
  	background: #C6A6C4;
  }
  
  .subnav ul li a {
  	color: #FFFFFF;
  	text-shadow: #999999 1px 1px;
  }
  
  .subnav ul li a:hover,
  .subnav ul li a.selected,
  .subnav ul li.current-cat a,
  .subnav ul li.current-menu-item > a,
  .subnav ul li.current-menu-ancestor > a,
  .subnav ul li.current_page_item > a,
  .subnav ul li.current_page_ancestor > a {
  	background: inherit;
  	color: #FFFFFF;
  	border-bottom: inherit;
  }
  
  .subnav ul li a:hover {
  	background: #B695B4;
  }
  
  .subnav ul li ul li a {
  	background: #777777;
  	color: #FFFFFF;
  	border-bottom: 1px solid #666666;
  	text-shadow: #999999 1px 1px;
  }
  
  .subnav ul li ul li a:hover {
  	background: #666666;
  	border: none;
  }
  
  .subnav li:hover > a {
  	background: inherit;
  }
  
  .subnav ul ul :hover > a {
  	background: #666666;
  }

  Note: I only tested one dropdown menu level in the first menu and no dropdowns in the 2nd, so if you added addition menu levels in the future, you may have to adjust some of the subnav colors from the example.