Converting a non-fixed width template to fixed

  • Unknown's avatar
    philm35 · Member ·

    Greetings all–

    I would like to convert the Rubric template, which is non-fixed width, to a fixed width. The reason is, I want to embed wide-screen HD videos and photos (800 pixels wide), and if when the width of the browser is varied, it makes some very ugly changes to the word wrap of my text. Here is the link:

    http://philmblog.wordpress.com

    Can I easily convert this template to fixed width, to avoid these word-wrap problems? None of the two-column fixed width templates I found were wide enough to handle 800 pixel wide videos… Would it be easier to widen the fixed width of a fixed template?

    I do have the CSS editing option for my blog. And by the way, I know next to nothing about writing or editing CSS.

    Thanks very much,

    –Phil Mastman

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

  • Unknown's avatar
    devblog · Member ·

    Rubric’s CSS is horrid…

    If you have the CSS upgrade you can modify other themes that have better CSS code and widen them up.

    I’d recommend you choosing a different theme and I’ll see what I can do for you. However, if you still want to keep the one you’re using, let me know and I’ll take a look at it once I get home.

    BTW, you don’t need to paste the entire CSS in the CSS Editor. You only need to put there your additions/modifications to the CSS, unless you’re writing your CSS from scratch or doing MAJOR changes to the theme.

  • Unknown's avatar
    philm35 · Member ·

    Hi Devblog–

    The layout and look of Rubric seems to best suit what I’m trying to do with my blog out of all of the themes I’ve looked at. I’d like to stick with it if it can be made to work. If you can help me solve the width issue, I’d greatly appreciate it. I do have the CSS upgrade, but I have very little knowledge of CSS programming.

    Thanks,

    –Phil

  • Unknown's avatar
    timethief · Member ·

    @philm
    Here’s a link to a post devblog published on this topic:
    If you have the WordPress.com CSS upgrade

  • Unknown's avatar
    devblog · Member ·

    Phil,

    Since it seems you set your header image through the Custom Header feature, I would recommend you to reset it (revert it to the default header) and set it through your CSS (it’s better to control everything from just one place; besides it’s more efficient if you later on you decide to change the dimensions of your header).

    Also, when modifying/adding code to an existing stylesheet, you don’t need to copy everything in the Editor. For more info (and future reference) read the article timethief is linking to in her above post.

    Now, regarding your layout. I made it of 1000px fixed width. This is so it won’t create a horizontal scroll bar (which can be very annoying) on screen resolutions of 1024×768. Still, the content area allows you to post images of a maximum width of 800px.

    Now, replace everything in the CSS editor with the following (this should be the only code there).

    #rap {
margin: 0 auto;
position: relative;
padding: 0;
width: 1000px;
}

#header {
background: #fff url(http://philmblog.files.wordpress.com/2010/02/cropped-philmblogheader1.jpg) 0 0 no-repeat !important;
margin: 0 0 20px;
padding: 0;
position: static;
width: 100%;
}

#header, .credit {clear: both;}

#content {
float: left;
margin: 0;
overflow: hidden;
padding: 0 9px;
position: static;
width: 810px;
}

#menu {
float: right;
margin: 0;
padding: 0 5px;
position: static;
width: 160px;
}

    HTH

  • Unknown's avatar
    philm35 · Member ·

    Hi Devblog–

    Thanks very much for your generous help with this. I’ll give it a try and let you know how it goes.

    Cheers,

    –Phil

  • Unknown's avatar
    assocenin · Member ·

    hi i am having the same problem. i tried your code as well, tried using %, even resorted to js but to no avail. can you help please? its at asei.com.ph/invisible . my problem is when i change the resolution they lose their proper positioning. edges should be aligned to the edges of the header. would really appreciate your help

  • Unknown's avatar
    timethief · Member ·

    @assocenin
    The blog linked to your username is a wordpress.com blog wearing the Sapphire theme. Is your question about that blog or is it about another blog? If it’s the latter then please post the complete URL for the blog in question starting with http://

  • The topic ‘Converting a non-fixed width template to fixed’ is closed to new replies.