Need help? Check out our Support site, then


CSS for Debut theme

  1. Hello! 8)

    I have the premium "Debut" theme, and I´m thinking about getting the CSS upgrade, and I´m wondering about a couple of things:

    - Can I move the "connect with us" buttons at the bottom, so that they appear at the top instead? So that they are still on the right side, but on top of the widget area instead of bellow. And they need to stay there when I scroll down, and not move along with the scrolling!

    I discussed this with the author of the theme, but unfortunately he said that it was impossible. So I thought maybe someone else knows how to do it? It´s worth at try… 8)
    We discussed it here - http://premium-themes.forums.wordpress.com/topic/css-help?replies=7

    - Is it possible to add a facebook "like" button next to the icons mentioned above? I´d rather have that than the "like" widget which is to big...
    Or if the the icons mention above can not be moved, I´d still like to add the FB "like" button at the top right, above the widget area.

    - Can I change the white of the content and widget areas to, for example, gray?

    If this is possible, what would be the CSS-codes that I need to add in the editor...?

    Thanks a lot! 8)

    The blog I need help with is magnusfroidh.wordpress.com.

  2. Can I move the "connect with us" buttons at the bottom, so that they appear at the top instead? So that they are still on the right side, but on top of the widget area instead of below. And they need to stay there when I scroll down, and not move along with the scrolling!

    I think you can do what you are asking, but Luke is right that there isn't really an ideal way to do it and also make it work well. Here's why: when you used fixed positioning, it removes the content from the normal flow of the page and just sticks it exactly where you tell it to be in the viewport. That means if your content height or width changes, the buttons won't move with it. This would be a problem for you in the [UPDATE: Debut] theme if you ever varied the height of your footer, for example. There are other problems too. One is that the buttons will overlap everything and look really weird laying over the top of whatever content you scroll through. That said, here is how to do what you asked: move the buttons to the top of the widget area and fix them in place so they don't move when you scroll:

    #networking {
    	bottom: 403px;
    	position: fixed;
    	width: 900px;
    	z-index: 9;
    }
    #networking li {
    	float: right;
    }
    #networking li.text {
    	display: none;
    }

    You should adjust the bottom value to place the buttons where you want.

    It could be that my interpretation isn't what you expected. Did you maybe mean you wanted to fix the buttons to the top of the widget area and not that you wanted to fix them to the page?

  3. Hm, I just read this again. I was thinking of "footer widget" areas when I first read your request because I was looking the demo site home page. Same rules apply though, the positioning would probably just need to change a bit. Anyway, to help further on this exact subject, please provide an example URL where I can see the buttons on your site.

  4. Is it possible to add a facebook "like" button next to the icons mentioned above? I´d rather have that than the "like" widget which is to big...

    There is not a way to change the Facebook link in the [UPDATE: Debut] footer from a link to a like button. However, you can add a Facebook like button to the bottom of posts using the Settings → Sharing page. Set "Button style" to "Official buttons" to see the like button style.
    http://en.support.wordpress.com/sharing/

  5. Or if the the icons mention above can not be moved, I´d still like to add the FB "like" button at the top right, above the widget area.

    The FB like button can only be added through the Facebook Like Box widget or the Sharing tools.

  6. Can I change the white of the content and widget areas to, for example, gray?

    Here's an example for how to do that on a single post to get you started:

    #entry-container .entry,
    #sidebar,
    .comment-title-wrap,
    .pingback-title-wrap,
    #comments {
    	background: #eee;
    }
    .sidebar-right #main {
    	background: url("http://s2.wp.com/wp-content/themes/premium/debut/images/sidebar-right.png") repeat-y;
    }

    To copy the way this theme sets up the background colors for the bottom part of the right sidebar that extends past the actual sidebar content area, you will need to save the current right sidebar background image, change the colors, upload the image with the new colors to your media library, copy the image URL of your revised image, and replace the url() value in the example above with your new image URL.

  7. Could you please ask future questions that are separate topics each in a separate thread and also please always include example URL links to your site?
    http://en.forums.wordpress.com/forum/css-customization/#postform

  8. Hi, and thanks for all our answers! 8)

    I´m using the "Debut" theme, not "On Demand" as you referred to...don´t know if it makes any difference though?

    Here´s my page: http://magnusfroidh.wordpress.com/ Sorry for not providing it right away.

    And now, let me try reply in order! 8)

    Maybe I didn´t express myself very clearly, so let me try again!

    What I want to do, is simply to move the icons (and the "connect with us" text) so that the visitors see them at the top of the page, instead of the bottom. Right now the visitors see them slightly beneath the widget area, in the right corner of the bottom. I want them to be seen at the top of the page, to the right, slightly above the widget area.
    Other than that, they are behaving precisely the way I want them to!
    And I want this change to be the same on all templates and pages that originally have the icons there.

    I think there also may have been some misunderstandings concerning the scrolling. I probably used the wrong words for trying to describe what I wanted to do.

    But I want the icons to relate to scrolling the way they are doing in the theme from the beginning. I don´t know if that is technically called fixed to the page or widget or something else, but the point is that when the visitor is scrolling down, he doesn´t see the icons any more ´cause they leave the page along with everything else at the top of the page. And when he scrolls up, he can see them again with the rest of the things up at the top of the page.

    The only difference I want to make to the icons is the position, as described above.

    This is my first, and preferred, solution.

    But, IF this is not possible, I want them to behave like they do in the first code you gave me:

    #networking {
    bottom: 403px;
    position: fixed;
    width: 900px;
    z-index: 9;
    }
    #networking li {
    float: right;
    }
    #networking li.text {
    display: none;
    }

    EXCEPT that I want them to appear on a vertical line instead of a horizontal line.

    This solution is something I want ONLY if the first one is impossible.

    Regarding FB "like" buttons and changing the colors:

    I have the "debut"theme, not "on demand". Does that matter for your answer...?

    I´d like to change the color/background of both the entire left column where the different texts and posts appear, and of the entire right widget column. Is this possible, and how?

    Haha, yes I´ll create different threads in the future! Didn´t know you guys wanted me to do that - I thought it would be easier for you to have it all in the same thread! 8)

    Thanks for your time! 8)

  9. I'm using the "Debut" theme, not "On Demand" as you referred to...don´t know if it makes any difference though?

    Yeah :) it *completely* makes a difference. However, I really was looking at Debut, and I made a mistake and posted the wrong theme name. I've fixed the posts above to have the correct name.

  10. Can you please update the Website field on your Users → Personal Settings page?

  11. What I want to do, is simply to move the icons (and the "connect with us" text) so that the visitors see them at the top of the page, instead of the bottom. Right now the visitors see them slightly beneath the widget area, in the right corner of the bottom. I want them to be seen at the top of the page, to the right, slightly above the widget area.

    I was looking here: http://debutdemo.wordpress.com/

    Note the placement of the footer widgets on the bottom of the page. This is why it helps so much to have the direct link to the blog in question.

    But I want the icons to relate to scrolling the way they are doing in the theme from the beginning. I don´t know if that is technically called fixed to the page or widget or something else, but the point is that when the visitor is scrolling down, he doesn´t see the icons any more ´cause they leave the page along with everything else at the top of the page. And when he scrolls up, he can see them again with the rest of the things up at the top of the page.

    Yeah, that was confusing! In the other thread you said, "Is there any way to fix them up in the corner, so that they stay there when I scroll down?" That's fixed positioning. Now it sounds like what you really wanted was absolute positioning.

    Haha, yes I´ll create different threads in the future! Didn´t know you guys wanted me to do that - I thought it would be easier for you to have it all in the same thread! 8)

    It really depends on the types of questions. In the CSS Customization Forum, I like to keep each question or group of really similar questions (i.e. font colors for x, y, and z) each in a separate thread if possible because it makes them much easier to read and answer each question, and it also makes searching for issues in the forums easier later.

    I'm working on the "#networking" positioning question now and I'll post another reply soon. For the other things, can you please create new threads instead? I see you already did for the Facebook like button question here. Thanks!

  12. What I want to do, is simply to move the icons (and the "connect with us" text) so that the visitors see them at the top of the page, instead of the bottom.

    Okay! I think I have a better handle on this now. :) Whew.

    Please try this:

    #footer,
    #footer-container {
    	position: static;
    }
    #networking {
    	position: absolute;
    	top: 190px;
    	padding-left: 750px;
    	z-index: 99;
    }

    Adjust the "top" and "padding-left" values as necessary. Note that if you change the contents of "#networking" by adding another icon in the future, you will also need to adjust the "padding-left" value accordingly.

    Caveat: Note that I purposely broke the relative positioning of the "#footer" and "#footer-container" rules to make absolute positioning possible here.

    Sorry I got so confused about your original question! Goodness.

  13. Yes! It worked beautifully!!! Thanks a lot! 8)

    And thanks for taking the time to read all the text and trying to understand what a CSS-noob like me really means, haha 8)

  14. When we're done, you'll be an expert!!!

    I'm looking forward to see how your final design updates turn out. :)

Topic Closed

This topic has been closed to new replies.

About this Topic