vb.org Archive - Simple (i would think) style change in CMS

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)

- - Simple (i would think) style change in CMS (https://vborg.vbsupport.ru/showthread.php?t=265374)

otectom

06-17-2011 09:33 PM

Simple (i would think) style change in CMS

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

06-17-2011 10:25 PM

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:

HTML Code:

.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

06-17-2011 11:23 PM

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

06-17-2011 11:29 PM

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

06-17-2011 11:36 PM

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 [DATE]1308357613[/DATE] at [TIME]1308357613[/TIME] ---------------

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

06-18-2011 01:32 AM

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

HTML Code:

.fullwidth > div.article_preview .cms_article_txt_content {    clear: both;

}

(not tested)

otectom

06-18-2011 01:41 AM

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 [DATE]1308414370[/DATE] at [TIME]1308414370[/TIME] ---------------

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

Lynne

06-21-2011 11:25 PM

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:

HTML Code:

/* 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

06-23-2011 12:02 AM

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.

All times are GMT. The time now is 02:42 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01030 seconds Memory Usage 1,728KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (3)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (9)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: