Grow your CSS skills. Land your dream job.

Joomla – converting template from fixed to dynamic width

  • # May 15, 2013 at 7:20 pm

    Hi all,

    I’m currently setting up a Joomla CMS to replace a bespoke but basic CMS.

    I’ve found and modified a template that we quite like however it’s built to be at a fixed width (970px off the top of my head).

    The site is here – http://109.74.205.191/ and the CSS file is http://109.74.205.191/templates/siteground-j16-22/css/template.css – in particular #content, .topround and .bottomround

    #content
    {
    background: url(“../images/cont_bg.png”) repeat-y top center;
    height: 100%;
    width: 970px;
    }
    .topround
    {
    background: url(“../images/top_round.png”) no-repeat top left;
    height: 20px;
    margin: 10px 0 0;
    width: 970px;
    }
    .bottomround
    {
    background: url(“../images/bottom_round.png”) no-repeat top left;
    height: 20px;
    width: 970px;

    I’m talking in particular about the large grey area that holds all the content, menus etc.

    The top and bottom rounded bits are done with their own rounded images and the main body of the box is done with a small image which is repeated vertically.

    The problem being that changing the site to a dynamic width causes the images to tile (like tiling an image on your desktop) which suffice to say looks a bit dodgy.

    My concept is to chop off little right and left bits of the images to cover the curves and edging and then create small images that can be used with repeat-x to cover the dynamic gap in between the two ‘caps’ on either end.

    My last attempt I managed to get it to dynamically widen but it only used the solid background image so it completely lost the curves and edging effect.

    Image wise not a problem to do that but I have no idea how to do it in the actual code, it’s been 5 years or so since I did any web design and what little knowledge I had is pretty much gone now – plus the sight of php flat out scares me.

    Apologies as this is probably a simple question. I’ve spent some time googling and come across a technique that’s often referred to as ‘sliding door’ but I’m struggling to see how to implement it – a lot of the tutorials are centered around making tabbed navigation rather than what I’m trying to do.

    Help would be much appreciated and feel free to talk to me like a 5 year old.

    Cheers,
    Steve

    # May 21, 2013 at 4:46 pm

    Hello Steve,

    Could you set the widths to max-width: 970px; or if you wanted, you could just set width:100%;

    # May 24, 2013 at 6:08 pm

    Hi Presto,

    Thanks for your reply.

    I can set the width to a dynamic width no problem, the issue is that the background is designed for a fixed width template and as such when I increase the width it just tiles the background image.

    So if we call < the left side and > the right side, and – the width I need to have images for the left and right as well as a small repeatable image for the center.

    So at the moment if I increase the width it will repeat the single fixed image like so:

    < --->< --->< -- (etc until it ends)

    What I need it to do is repeat a central image like this:

    Small Resolution: < --->
    Larger Resolution: <


    >
    Really Big Resolution: <

    >

    As I say the dynamic width is easy it’s getting it to display a set of 3 images correctly that I’m having problems with.

    Cheers,
    Steve

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".