moving text widget to top of page

• 

  anothernicole · Member · Jan 6, 2012 at 6:37 pm

  • Copy link
  • Add topic to favorites

  I’ve read some other forums on this topic, but I’m really new to CSS so I’m still a little lost. A lot lost, really.

  I have a text widget with 4 social icons in my sidebar (I figured out how to do that in the forums–thanks!), and I would like to move that text widget (those 4 icons) to the top left corner of my site (not in the sidebar).

  I know you have answered this for other people and I really did try to copy from that, but I didn’t know how to find out what my text widget is called (some forums called it text-4, others text2, etc), so I got even more confused. Can you help me please?

  Ps. I know that the theme I am using has the option to make some social icons appear in the corner—but I wanted more icons than the theme offers; that’s why I’m trying to do it this way.

  THANK YOU!!

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

• 

  thesacredpath · Member · Jan 6, 2012 at 8:04 pm

  • Copy link

  I see you got it moved. You might want to try adding this to your CSS and then the text widget will be positioned relative to the overall container (canvas) instead of the browser window and will stay fixed in relation to the rest of the content.

  To see what I mean, narrow and widen your browser window and then add the following and again narrow and widen your browser window.

  #canvas {
  position: relative;
  }

• 

  anothernicole · Member · Jan 6, 2012 at 8:09 pm

  • Copy link

  THANK YOU!!

• 

  designsimply · Member · Jan 6, 2012 at 8:21 pm

  • Copy link

  Welcome to using CSS! I hope you end up loving it tons. :)

• 

  anothernicole · Member · Jan 6, 2012 at 8:23 pm

  • Copy link

  yay! i know i will–so far i LOVE it. and its so easy to learn with all the forums and support on wordpress–thanks you guys!!

• 

  thesacredpath · Member · Jan 6, 2012 at 9:48 pm

  • Copy link

  You are welcome.

• 

  annemariesanderson · Member · Jan 15, 2012 at 4:54 am

  • Copy link

  Hello all,
  Should the code supplied by TSP here apply to other themes?
  I think I’m trying to do something similar with my icons, but as pointed out here, if I narrow and widen the browser window things all get a bit messy.
  I’m using the clean home theme.
  http://annemariesanderson.com/

  Thankyou!

• 

  thesacredpath · Member · Jan 15, 2012 at 5:01 am

  • Copy link

  No, CSS is theme specific.

  There would be two options that I see right away.

  1. Set a left margin on #wrapper so that it stays stationary in relation to the icons

  #wrapper {
  margin-left: 80px;
  }

  2. Move the soundcloud and title/tagline to the right and lock the icons into #wrapper.

  Give #1 a try and see what you think. If you want to do #2, let us know and we can work out the changes.

• 

  thesacredpath · Member · Jan 15, 2012 at 5:04 am

  • Copy link

  I should mention that on #2, the icons would scroll up and down with the content area instead of being fixed, so perhaps #1 would be the best solution.

• 

  annemariesanderson · Member · Jan 15, 2012 at 3:42 pm

  • Copy link

  Thanks so much, solution #1 works perfectly!
  Yay! :)

• 

  thesacredpath · Member · Jan 15, 2012 at 6:08 pm

  • Copy link

  You are welcome.