Remove Smiley Face, Extend Sidebar, And Colors

  • Unknown's avatar
    veraxpoint · Member ·

    Hey,

    I’m trying to make my wordpress site look as close to veraxpoint.com as possible. I’m using the Twenty Ten theme and taking on the following code:
    http://pastebin.com/qqCcyRHN

    However, I’ve got some problems that I’m hoping someone can help me overcome:
    • Removing the smily face from bottom of the page
    • Changing the color of “Blog at WordPress.com”
    • Extending sidebar to the bottom of the page

    Thanks in advanced,
    Mitch

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

  • Unknown's avatar
    hallluke · Member ·

    The first two are pretty simple to solve:

    img#wpstats {display:none;}
#site-generator a {color:#000;}

    The third one is a little more difficult. You might want to try setting the clock background image for the #main div and then setting the #container div background white. It isn’t possible to expand #primary to the bottom of the screen as div elements only take up the height they need in HTML. Here’s a rough idea to get you going:

    #main {background-image: url("http://veraxpoint.com/img/sidebar.jpg");}
#container {background:#fff; width:628px; margin:0;}
#content {margin:30px 35px;}
#primary {background:transparent;}

    You might need to play around with margins and paddings and widths to get everything to line up properly but it should illustrate the idea. You’ll also need to swap the sidebar border and apply it to the right side of the content area instead (assuming it will be longer than the sidebar).

  • Unknown's avatar
    veraxpoint · Member ·

    Thanks hallukee — smiley is gone and the color has changed.

    As for the sidebar, I like your suggestion of putting the image in main rather than in #primary.

    What about using a different theme? Would “Elegant Grunge” be easier to work with?

  • Unknown's avatar
    hallluke · Member ·

    In my opinion if you know HTML and CSS to a good level you might as well start from (almost) nothing and use Sandbox 1.6.1 which is a very naked theme with lots of useful classes and IDs which you can use to style with. The only complaint I have with it is how it styles the date and time stamps for posts. If you have any specific questions you know where to find me. I’m in the process of writing quite a few Sandbox skins so I’d be happy to share the tips and tricks I’ve come up with.

  • Unknown's avatar
    veraxpoint · Member ·

    Sandbox 1.6.1 looks interesting. There’s no way to actually edit the HTML is there?

    Now my two worries are:
    •Moving the menu bar above the Title (or switching themes)
    •Inserting the veraxpoint.com menu buttons (the EXACT images) to the wordpress site

    New idea: what about eliminating the WordPress menubar (you can do that with CSS right?) and then having a text “widget” with raw html to show load the buttons above the title. Is this possible and reliable?

    Thanks for your suggestions halluke; very helpful.

  • Unknown's avatar
    hallluke · Member ·

    There’s no way to edit the underlying HTML on wordpress.COM but you can add your own HTML into posts, pages and the text widget.

    You can move the menu to the top of the page with the example code below. You could do this with a custom menu or the custom menu widget too. Adding the images as they appear on your main (non-wordpress.com) site is entirely possible but would take a little more work.

    #access {position:absolute; top:0;}
body.logged-in #access {top:28px;}
  • Unknown's avatar
    veraxpoint · Member ·

    You’ve done it again halluke; that worked perfectly.

    How about getting the background in the sidebar to extend to the bottom of the page, then when the image ends have just the color #8C8163 follow the page down?

  • Unknown's avatar
    hallluke · Member ·

    Similar to the code at the bottom of my first reply, try this:

    #main {background:url("http://veraxpoint.com/img/sidebar.jpg") top right no-repeat #8C8163;}
#container {background:#fff; width:628px; margin:0;}
#content {margin:30px 35px!important;}
#primary {background:transparent; border-left:none!important;}
  • Unknown's avatar
    veraxpoint · Member ·

    Marvelous; any way to bring back the black 1px boarder to separate the body from the sidebar?

  • Unknown's avatar
    hallluke · Member ·

    Haven’t tested but you should be able to do that with something like:

    #content {border-right:1px solid #000;}

    You might need to set a minimum height for the content area so that it always extends at least as far as your sidebar. If the sidebar ends up stretching the furthest down the page your one pixel border won’t reach the bottom.

  • Unknown's avatar
    veraxpoint · Member ·

    Regrettably this results in a border that hugs the text instead of the sidebar.
    http://img59.imageshack.us/img59/7597/screenshot20101210at502.png

    Any ideas?

  • Unknown's avatar
    hallluke · Member ·

    You should add it to the container rather than the content although this will mean you have to reduce the width by one pixel:

    #container {border-right:1px solid #000; width:627px!important;}

  • The topic ‘Remove Smiley Face, Extend Sidebar, And Colors’ is closed to new replies.