Simple (i would think) style change in CMS

[otectom]

All I want to do is modify the size of the images displayed by the cms, but I don't know how.

I am currently using a 1 X 2 layout and would like to do something where the first post image was displayed at a res of 800x400 and all the following images are displayed at 300X100 (sizes approx)

Can anyone help me with this, or at least explain where I should start!?


Site -------> www.teamotec.net

[Lynne]

Change the preview size you currently have to replect what you want for all images except the first one. Then add this to additional.css to set the size for the first one:
.fullwidth > div.article_preview .cms_article_preview_image { max-height: 400px !important; max-width: 800px !important;}
That works on my 4.1.4 default test site.

[otectom]

Thank you for the quick response, but this is where I have to bite the bullet and feel a little slow.

I cannot find where to change the preview size, or the additional.css file. I have looked, but cannot find them.

Can you please guide me just a little further, it would be greatly appreciated. I have been wanting to make these changes for quite a while now.

[Lynne]

preview size is a stylevar - style manager > find style > stylevars > image_thumbnail_max

addiitonal.css is a template - style manager > find style > edit templates > css templates > additional.css

[otectom]

Ok, wait. I found additional.css and the improvement is amazing, I think we even got the size correct on the first try!

I still don't know where to change the preview size for the other images, however that is now less important to me.

Also, after seeing it live, I wonder, can we move the preview text below the image?

--------------- Added 1308357613 at 1308357613 ---------------

Lynne, you rock!

The site looks WAY better now, but would like to move preview text below the image on the first post only, if possible.

would like to center image and text on first post only, if possible.

[Lynne]

to move the text, you'll need to add something like:

.fullwidth > div.article_preview .cms_article_txt_content { clear: both;
}
(not tested)

[otectom]

Thank you again! The text is now displayed below the image, exactly like i wanted.

I still would like to center image and text on the first post only, if possible.

If that can be done my job will be complete, and I will be very happy!

--------------- Added 1308414370 at 1308414370 ---------------

Lynne, where did you go!? we were so close!!!!

[Lynne]

I would suggest bookmarking the link in my sig to w3schools. It will help you to do this on your own instead of having to wait for someone else to do it.

In total, you'll need these lines:
/* first article centered with larger image */
.fullwidth > div.article_preview .cms_article_preview_image {max-width: 300px !important; max-height: 300px !important; float: none;; text-align: center;}
.fullwidth > div.article_preview .cms_article_txt_content { clear: both; ; text-align: center;}
.fullwidth > div.article_preview, .fullwidth > div.article_preview .cms_article_section_location {text-align: center;}

only tested in firefox.

[otectom]

Lynne, thank you very much for the help. Your code worked perfectly.

I have looked into w3schools, but there is so much to learn, and vb is so advanced that sometimes it's easier to ask for help.