Layout Anomaly

Hi, I'm changing the Postnote template and so far so good. One thing that seems to go haywire though is the position of Mainbody and whatever module I place in the "inset2" position. For some reason the "Mainbody" part does not exactly cover three columns, but instead falls a bit short of it (see: www.changingplanet.co.uk/test) which means that it all looks rather messy. I also noted that on the demo site for postnote (http://demo.gavick.com/joomla15/jun2010/) a similar situation occurs, although now "Mainbody" takes in more space than three columns. Is this a known issue and, if so, is there a way to ensure that "Mainbody" takes in exactly the same amount of space as three positions above it?

Also, I realised that the text is derived from a Joomla article and I'd like it to show the last news article from a certain category. I take it that the only way to do it is replace it with a mod_latestnews module and style it myself in order to make it appear similar? I'm not too familiair yet with it though, so before I have a stab at it... is this even possible?

OK, so I've gone and created a NewsShowPro module that pretty much looks like the "Mainbody" module, although I'm still toying with CSS a bit as the text doesn't float to the right positions. I have placed this NewsShowPro module in the "inset1" position instead of the "Mainbody" module and have kept the default settings for the dimensions in the template manager.

What I'm getting is this: http://changingplanet.co.uk/test/

Clearly the NewsShowPro modules ("Swing Swing" and "Latest Work") are not horizontally aligned with the modules above. I can find two reasons for this, but can't figure out how to solve it:

1) There's padding to .main .inner in layout.css which pushes the "latest work" module to the left with 20px:

Code: Select all

.main .inner {
    padding: 20px;
}

However, if I change this a lot else in the template changes and the module doesn't have an unique ID with which I can override CSS with !important

2) The width of both "inset1" and "inset2" modules is driven by the template manager and can only be specified in percentages, which quite simply isn't detailed enough. Again, I can't find any unique div's for either of the modules that I can use to override CSS.

Any thoughts? As it stands the bottom bit of the website is really disorganised which is a shame as it's coming together so nicely..

Hi

Add module suffix in News Show Pro options for example ' news1' and then add to override.css rules for .news1

Hi

Add module suffix in News Show Pro options for example ' news1' and then add to override.css rules for .news1

Seriously, can you do that? I had no idea that you could do that with suffixes. That should solve it I'd say, you're a star! I'll let you know how I get along.

Ok, that solves the issue of setting the width of the NSP modules, so thank you very much for that. Basically I renamed the modules to _nsp_latestwork and _nsp_latestnews and added the following in gkstuff.css:

Code: Select all

.moduletable_nsp_latestnews { width: 650px; background: #ffffff; }
.moduletable_nsp_latestwork { width: 220px; background: #ffffff; }


I lose all the existing layout of those modules, but that should be easily fixed. One issue remains, if you look at that specific row, there's 20px padding to the right of it driven by <div class="inner ctop cleft cbottom clearfix"> as in in layout.css there's the following:

Code: Select all

.main .inner {
   padding: 20px;
}

layout_2011-02-25-3.jpg

And as a result, the latest work module cannot align to the right hand side of the modules above it as the 20px padding is in the way. However, if I start tinkering with .main or .inner a lot changes in the layout throughout the whole site, so I'm at a loss how to take the padding out in this instance without affecting the rest of the site.

Offtopic...
Which Firefox extensions (or is it the Webdeveloper extension; than which settings)are you using (shown in your screenshot)??

firebug, it's a must-have.

Did you manage to solve this issue? If not then maybe this post will help you on the way to a fix take alook.