CMS Layout

[Steve038]

Hi guys, I'm wanting to change the layout of my CMS Home page slightly. Here is the Home page for my site: www.theroaringseason.com

Currently, I have the layout set with the latest CMS article at the top with a single large image, then the older articles dropping in underneath of 3x2 columns.

I'm happy with this layout, however, I was wanting to change the way each of the individual layouts are set. Currently, they have the article title name at the top, then the author beneath that, plus the date etc, and beneath that they have the picture or video with the article text next to and beneath the picture.

Am I able to change these so the image is at the top, with the article name, then author beneath, then the article text beneath that? The only reason I want to do this is to make the page look tidier, as the images aren't horizontally aligned with each other if one has a larger article title than the other. If one article has a title that requires two lines, it pushes the picture down another line, so it looks a bit messy.

Sorry, I know its only an aesthetic thing, but I'd really like this page to look tidier than it currently is. Here is an example of a nice clean look that I'd like to achieve: www.jalopyjournal.com

Is this possible to do, and how do I achieve this?

I also would like the thumbnail images to be larger than they currently are. I've set their sizes at 350pixels, then clicked to rebuild attachment thumbnails, but they are still smaller than 350pix for some reason.

[Lynne]

The previews are all spit out in the template vbcms_content_article_preview. So, modify that template to be the way you want.

[Steve038]

Hi Lynne, thanks for your help. So if this is the info in my vbcms_content_article_preview as below, what do I change here to move the image in the article previews to be above everything else, ie, image at the top, article name beneath image, author beneath article name etc?

And also, how do I make the preview image so its 350pix? I've set the Thumbnail Size within Message Attachment Options to 350pix wide, but they're appearing smaller than this on the page. They look more like about 210pix.


{vb:raw css}
<div class="article_preview">
<vb:if condition="$showtitle">
<div class="title">
<h3 class="article_preview">
<a href="{vb:raw page_url}"><span>{vb:raw title}</span></a>&nbsp;
<vb:if condition="$can_edit">
<a class="edit" href="{vb:raw edit_url}">
<img class="editimage" src="{vb:stylevar imgdir_cms}/edit_small.png" alt="{vb:rawphrase edit}" />
</a>
</vb:if>
</h3>
</div>
</vb:if>

<vb:if condition="$showuser OR $showpublishdate OR ($showupdated AND $lastupdated) OR ($viewcount AND $showviewcount) OR ($showrating AND $rating!='')">
<div class="cms_article_username">
<vb:if condition="$showuser">
{vb:rawphrase by_x_nolink, {vb:raw memberaction_dropdown}}
</vb:if>

<vb:if condition="$showpublishdate">
<vb:if condition="!$published OR !$setpublish">
<span style="color:red">
<vb:if condition="$publishdate AND $setpublish">
{vb:rawphrase page_will_be_published_x {vb:raw publishdatelocal}} {vb:raw publishtimelocal}
<vb:else />
{vb:rawphrase page_not_published}
</vb:if>
</span>
<vb:elseif condition="$publishdate" />
{vb:rawphrase published_on_x {vb:raw publishdatelocal}} {vb:raw publishtimelocal}
</vb:if>
</vb:if>
<vb:if condition="$showupdated and $lastupdated">
&nbsp;{vb:rawphrase updated_on_x {vb:date {vb:raw lastupdated}, {vb:raw dateformat}}}&nbsp;
</vb:if>

<vb:if condition="$viewcount AND $showviewcount">
&nbsp;{vb:rawphrase number_of_views}: {vb:raw viewcount}&nbsp;
</vb:if>

<vb:if condition="$showrating">
<span class="cmsrating rating{vb:raw rating}"></span>
</vb:if>

</div>
</vb:if>
<vb:if condition="!empty($categories)">
<div class="cms_article_section_location">
<ol class="commalist">
<li>{vb:phrase in_category}</li>
<vb:each from="categories" key="categoryid" value="category">
<li><a href="{vb:raw category.category_url}">{vb:raw category.category}</a>{vb:raw category.comma}</li>
</vb:each>
</ol>
</div>
</vb:if>
<vb:comment>
<!-- Display Section Location -->
<div class="cms_article_section_location">
{vb:rawphrase section}: <a href="{vb:raw section_url}">{vb:var parenttitle}</a>
</div>
</vb:comment>

<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>
<br />
<div class="cms_article_txt_content postcontainer">
{vb:raw previewtext}
<vb:if condition="$preview_chopped">...</vb:if>
</div>
</div>
</div>

<div class="fullwidth">

<vb:if condition="$preview_chopped">
<span class="cms_article_readmore"><a href="{vb:raw page_url}">{vb:rawphrase read_more_phrase} <img src="{vb:stylevar imgdir_cms}/read_more-{vb:stylevar right}.png" alt="{vb:rawphrase read_more_phrase}" /></a>
</span>
</vb:if>

<vb:if condition="$comment_count">
<span class="cms_article_comment_number">
<a href="{vb:raw newcomment_url}"><img class="inlineimg" src="{vb:stylevar imgdir_button}/firstnew-comment.png" alt="{vb:rawphrase go_to_first_new_comment}" /></a>
<a href="{vb:raw newcomment_url}" rel="nofollow">{vb:raw comment_count}
<vb:if condition="$comment_count == 1">
{vb:rawphrase comment}
<vb:else />{vb:rawphrase comments}
</vb:if></a>
</span>
</vb:if>
</div>
</div>

[Lynne]

I would suggest you create a new style that you can play with and play with the template there.

The image part of the code is here
<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>

[Steve038]

Hi again Lynne, thanks for your help, I'll do as you've suggested. Thanks again.

--------------- Added 1334906612 at 1334906612 ---------------

Lynne, that section of code you've highlighted above, am I able to change the order in which the preview image, article title, author etc are displayed by working in that section?

[Lynne]

The section of code I posted is only for the image. The article tile and author, etc, are all in the code you posted - you should be able to easily find them. Then just arrange everything how you want it.

[Steve038]

Thanks again Lynne, OK I'll go through it and hopefully it'll work out. If I keep a copy of the original code, can I revert back to this if the changes I make mess things up?

[Lynne]

Sure. You can always hit the Revert button also. And, you can always see the default template by going to edit the modified template and clicking the View Default button on the left.

[Steve038]

Thanks again Lynne, I've been messing around with it today as you've suggested and have been able to move the preview images above the headings etc, so am making good progress. I appreciate all your help.

If I want my preview images to all be, for example, 350pix wide x 200pix high, what would I add/change to this code to achieve that:

<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]

After you have your template created, then you would write some CSS to style it and that would include CSS to make your image a certain size.

[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.

[Steve038]

Yep, I tried:

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

and:

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

The first one doesn't change anything, the second one makes the latest article image size 350px wide, but doesn't change the preview images at all. I don't want to change the size of the latest article image, just the preview images.

--------------- Added 1335329618 at 1335329618 ---------------

btw, I've currently set it to .vbcms_content img {max-width: 350px; max-height: 200px;} so you can see how it looks with this setting, if thats of any help?

[dimobr]

Hi,

Some of you might just help me remove the solid background of the cms? just want to use an image as background, I already use the same of forum.
I left the variable vbcms_body_background as transparent, but this option does not take effect throughout all cms.

sorry for bad english ...

[Lynne]

Your problem is this:

.cms_article_preview_image {
max-height: 150px;
max-width: 150px !important;
}

It's got !important on it so it is overriding your CSS.

You need to get firebug and take a look at your CSS. It shows right up when you use that tool.

[Lynne]

Hi,

Some of you might just help me remove the solid background of the cms? just want to use an image as background, I already use the same of forum.
I left the variable vbcms_body_background as transparent, but this option does not take effect throughout all cms.

sorry for bad english ...
Please start your own thread for you own problem.

[dimobr]

Please start your own thread for you own problem.

like this? https://vborg.vbsupport.ru/showthread.php?t=281923

[Steve038]

Your problem is this:

.cms_article_preview_image {
max-height: 150px;
max-width: 150px !important;
}

It's got !important on it so it is overriding your CSS.

You need to get firebug and take a look at your CSS. It shows right up when you use that tool.

Which folder is this in Lynne, I'll go and remove the "!important"

[Lynne]

It should be in a template. Do a Search in Templates for that class.

[Steve038]

Lynne, you're awesome!!! Many thanks, its now working the way I want it to, and I'm able to size the preview images to my liking. I'd really love it if they could be automatically cropped to a size of my choosing, such as 330px x 220px, regardless of the original size, but I can resize them before I post them so they're all the same size to start with.

But this is great, and allows me to create my Home page in a way that suits me, and looks nice and tidy.

Thanks again for all your help Lynne, I really appreciate it.

[Lynne]

I'm glad you got it how you want. :)

[Steve038]

Thanks again Lynne, I'm really pleased with the outcome.

[sonhit]

@ Steve038

I also have the same problem with you, it took me 2 days
every things seem very simple and i already do all, but it still not work !!!
the css in firebug show still

.vbcms_content img {
max-width: 100%;
}
css.ph...ud.css, (line 1669)
.cms_article_preview_image {
max-height: 150px;
max-width: 150px !important;
}

Could you share the way to do

many thanks in advance

my site iss: http://xommohinh.com

[Lynne]

the max-width !important is causing your issue just like it caused his.

[sonhit]

thank Lynne for your reply
but i just tried both have and no have !important;
in vbcms.css

my code here:

.cms_article_preview_image {
max-height: 250px;
max-width: 300px;
}

But it still not work :( in firebug the code still:
.vbcms_content img {
max-width: 100%;
}
css.ph...ud.css, (line 1669)
.cms_article_preview_image {
max-height: 150px;
max-width: 150px !important;
}

It seem not affect, so what's my problem here ???

[Lynne]

An !important will overrule anything you add because that is what an !important does. You need to remove it or override it.

[sonhit]

oh, thank Lynne

i already find out my problem.
I have 2 copies of forum, one in the host site and the other in my local,
when i do change in local it is not affect because it still in host and now i fix the url of my forum in local, it's definitely work

one again thank to you and best wish !