Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Moving the text widget

  1. notchangingmyname
    Member

    Hi all, I would like to move and fix my Text widget to the right side of the browser (the same way I did moved my Search widget to the bottom), but for the life of me I can't figure out what the proper selector is! I tried the following code based off what I have for my search widget, but it didn't work:

    #textwidget {
	position:fixed;
	top:250px;
	z-index:100;
	right:190px;
}

#textwidget .widget-title {
	display:none;
}

    I also tried #textwidget-1, #textwidget-2 and #textwidget-3 as selectors, but they didn't work.

    Any help would be greatly appreciated, thanks!

    The blog I need help with is notchangingmyname.com.

  2. houstonweaver
    Member

    Do you mean that you would like your whole sidebar widget area fixed so that it remains onscreen as you scroll down the page? I have no answer, but wanted to clarify.

    On your search widget, it might just be an iPad thing, but for me it obscures the right side of your bottom fixed menu because it occupies the same fixed space.

  3. timethief
    Member

    Twenty Ten:
    https://wpcom-themes.svn.automattic.com/twentyten/style.css
    https://wpcom-themes.svn.automattic.com/twentyten/style-wpcom.css

  4. notchangingmyname
    Member

    no houstonweaver, just the text widget. I was thinking about fixing my twitter, instagram etc. buttons to the right side of the page.

    Ugh thanks for the info about the ipad. It's crazy how many little tweaks have to be made to get it just right!

  5. houstonweaver
    Member

    Try using the . instead of the #. However when I did that with textwidget I got wonky stuff because I think taking it out of the widget area made it go horizontal instead of vertical for me.. However with the selector widget-area and your code and I got it fixed on screen. In order to fix it where you had it I had to fiddle with the numbers a bit.

    This got close on my notebook screen anyway. Don't know what it would do to my ipad:

    .widget-area{
position:fixed;
top:350px;
z-index:100;
right:5px;
}

    You would have to play with it a bit. It did include those items under your sharing buttons, but without that they would scroll up.

    Let me know if this gets you there.

  6. houstonweaver
    Member

    correction: 250 not 350

    On my notebook screen with all the toolbars I run, i am only able to get the 5 connect with me items showing. Thats the only thing that would concern me about a fixed sidebar, will all viewers be able to see all your conent. on my ipad I should also be able to see those 5 items, so your instinct to limit it to those items was correct.. You might just have to find a space in the footer or elsewhere for the other items or change the size.

  7. notchangingmyname
    Member

    Thanks! I will play around with it on my lunch break and see what happens. :-)

  8. notchangingmyname
    Member

    thanks again houstonweaver! It worked. I ended up changing ".widget-area" to ".textwidget" and was able to move just those buttons. I didn't make it permanent, though, because I know that I will have hours and hours of tweaking ahead if I decide to make the change. But at least now I know how to do it!

  9. houstonweaver
    Member

    So glad it worked for you. Thanks for sharing your code solutions here and on the other post. I love it when we all learn something.

  10. designsimply
    Staff

    You should definitely check out web browser tools or add-ons like Firebug for Firefox. They're crazy good for figuring out selectors.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags