Adding extra containers

• 

  apersonnamedmike · Member · Mar 8, 2014 at 12:42 am

  • Copy link
  • Add topic to favorites

  I am using the confit theme, and I want to add containers on the side and top of the main atricle content. What would be the best way to do this? I am brand new to css, and any tips would be welcomed.

  the link to the blog I’m editing is: http://rackemupblog.com/

  Thanks so much!

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

• 

  hfzrhmn · Member · Mar 9, 2014 at 1:02 am

  • Copy link

  Hi,

  I’m not quite sure what you mean with ‘containers’. Do you mean to visually add a sort of block with different bg color outside of the main article area?

  If you can show an example of what you want to achieve, that would help as well.

• 

  apersonnamedmike · Member · Mar 9, 2014 at 3:10 am

  • Copy link

  Yeah, that’s what I mean. still trying to learn the right terms.

  (what would be the best way to show it? i can’t see where to add an image. I made a concept from a screenshot.)

• 

  hfzrhmn · Member · Mar 9, 2014 at 3:22 am

  • Copy link

  You can upload the picture to imgur.com for example, and then paste the link here.

• 

  apersonnamedmike · Member · Mar 9, 2014 at 3:28 am

  • Copy link

  ok, here it is,

  http://imgur.com/KfHsB96

  something like this is the end goal

• 

  designsimply · Member · Mar 13, 2014 at 2:37 pm

  • Copy link

  Hi there :) first you should read this note about advertising:
  http://support.wordpress.com/advertising/

  Next, I have worked on a similar question about sidebars and Confit in the past. You should start with this example:
  https://en.forums.wordpress.com/topic/adding-additional-sidebars-in-confit?replies=7#post-1250140

  Then adjust the “top” and “right” values to move the sidebar around on your site until it looks good to you.

  Since you’re using a photo for the background, you’ll probably want to set that whole “#secondary” sidebar background to black and add a little padding at the top. Try adding these to the #secondary block:

  background: #000 !important;
  	padding-top: 1em;

• 

  apersonnamedmike · Member · Mar 14, 2014 at 8:07 pm

  • Copy link

  Thanks for the help so far, its working Pretty well. I just want to try to get the content from the left to the right. I’ve messed around with the example of the twitter widget, but I’m probably doing it wrong because it’s just making the “twitter-widget-0” disappear instead of putting it into the right sidebar.
  Any way I can get all of the stuff from the right sidebar into the Left one so that I can put my WordAds there?

• 

  apersonnamedmike · Member · Mar 14, 2014 at 8:21 pm

  • Copy link

  Also, I would like to add some transparency to #secondary to match the other elements on the page.

• 

  thesacredpath · Member · Mar 15, 2014 at 2:20 am

  • Copy link

  Hi, Since you have set the sidebar (#secondary) to position absolute, it restrains the widgets to that div. If a parent div has a position declaration (relative, fixed, absolute) then the element divs inside of that will position in relationship to the boundaries of the parent.

  Short version, with #secondary having been moved to the right of the content using position: abosolute, you cannot move the widgets out of it.

• 

  thesacredpath · Member · Mar 15, 2014 at 2:21 am

  • Copy link

  On the transparency, I see no transparency on the content or left area.

• 

  thesacredpath · Member · Mar 15, 2014 at 2:24 am

  • Copy link

  You can add transparency by specifying the color in rgb with alpha instead of hex. Change the background declaration on #secondary to the following:

  background: rgba(0, 0, 0, 0.7) !important;

  The first three number represent the red, green and blue values (in this case 0 for all three (black)). The last number, 0.7 is the opacity. The closer to 1, the more opaque. The closer to zero (0) the more transparent.