CMS Layout

[Steve038]

Thanks again Lynne, can you give me an example? I'm quite new to this.

[Lynne]

Here's a page from my favorite CSS site - http://www.w3schools.com/css/css_dimension.asp

So, something *like*:
div.showpreviewonly img {max-width: 350px; max-height: 200px;}

[Steve038]

Thanks again Lynne, I really do appreciate your help. I've been working on this for about three days now and am getting a bit frustrated, as its obviously over my head. I have been able to change the order of the preview images, title, author etc for the previews, but I still can't get the preview image sizes to change. With the code you've written above: div.showpreviewonly img {max-width: 350px; max-height: 200px;} where would I place this in the code below to get the changes I'm after:

<div class="fullwidth article_preview_contents<vb:if condition="$showpreviewonly"> showpreviewonly</vb:if> restore">
<vb:if condition="$showpreviewonly">
<vb:if condition="$previewvideo">
{vb:raw previewvideo}
<vb:elseif condition="$previewimage" />
<a href="{vb:raw page_url}">
<img class="cms_article_preview_image" src="{vb:raw previewimage}" alt="<vb:if condition="$attachment_settings['alt']">{vb:raw attachment_settings['alt']}<vb:else />{vb:rawphrase article_preview}</vb:if>" <vb:if condition="$attachment_settings['title']">title="{vb:raw attachment_settings['title']}"</vb:if> /></a>
</vb:if>
</vb:if>
<div>

[Lynne]

CSS goes in a .css template. Try putting it in the additional.css template (and, as I said, it was an example, I don't know if it will work). If you still can't get it to work, you should post a link so we can view the problem.

[Steve038]

Thanks again Lynne, unfortunately still no changes with preview image sizes. Here is my site: www.theroaringseason.com

[Lynne]

You have this:

.vbcms_content img {
  max-width:100%;
}

so, use those properties for your CSS.

[Steve038]

Where did you find that Lynne? I changed the code in my additional.css file from what you'd placed in post #12, to:

.vbcms_content img {max-width: 350px; max-height: 200px;}

But that only changed the size of the latest CMS Article at the top, whereas the previews are still the same size. Is the key to getting this in the wording:

.vbcms_content img

I did try:

.vbcms_showpreviewonly img

But this didn't work.

[Lynne]

I'm finding it while using firebug to view your CSS (there is an article on this).

You are using thumbnails for the other images (vboptions > Content Management > Use Thumbnails in Preview), so those are already resized. If you want your CSS to resize those, you need to set that to No unless you are resizing them to smaller than the thumbnail size (which I don't think you are).

And I am not seeing this in your CSS:
.vbcms_content img {max-width: 350px; max-height: 200px;}

[Steve038]

Thanks again Lynne. I had changed the css back again after it resized the main CMS image, thats why it didn't show up.

OK, so now I've set Content Management > Use Thumbnail In Preview to "No". In additional.css I've set the code to:

.vbcms_showpreviewonly img {max-width: 350px; max-height: 200px;}

But still preview images won't change. Surely it must have something to do with the way I've worded the ".vbcms_showpreviewonly" text? When I set it to ".vbcms_content img" it works on the main image size, so if I can get the preview image text correct then surely it must resize these?

[Lynne]

I didn't say to add .vbcms_showpreviewonly img, I said to add .vbcms_content img. As far as I can see on your page, .vbcms_showpreviewonly is not a valid class at all.