Hello

I would like to align the image in each item to the left/right in Category view and the actual item.... please can you assist me in doing so? i have tried searching for it in the forum..
Thanks

Anyone?

Forum Search should had helped.

Use this :

In the style.css search the div-Tag called

div.catItemImageBlock

put in :
{float:left;}

... and the text is right of the pic.

greets

Thank you so much!

Troponin said:Forum Search should had helped.
Use this :

In the style.css search the div-Tag called

div.catItemImageBlock

put in :
{float:left;}

... and the text is right of the pic.

greets

hello, i make the change in css for the imageblock Left
but i don't undestand what i must to change when you say "... and the text is right of the pic."

i must to change something inside the css? in the div.itemFullText ?
thank you

k2.css

Component: Item view

div.itemImageBlock {padding:8px;margin:0 16px 16px 0;}
span.itemImage {display:block;text-align:left;margin:0 0 8px 0;}
span.itemImage img {border:1px solid #ccc;padding:8px;}
span.itemImageCaption {color:#666;float:left;display:block;font-size:11px;}
span.itemImageCredits {color:#999;float:right;display:block;font-style:italic;font-size:11px;}

div.itemIntroText {color:#444;font-size:18px;font-weight:bold;line-height:24px;padding:4px 0 12px 0;}
div.itemIntroText img {padding:2px;margin:4px;background:#fff;border:1px solid #ccc;}

div.itemFullText {}
div.itemFullText h3 {text-align:left; margin:0;padding:16px 0 4px 0;}
div.itemFullText p {}
div.itemFullText img {padding:2px;text-align:left; margin:4px;background:#fff;border:1px solid #ccc;}

Manalo,
What Troponin is saying is:

Look for css div.catItemImageBlock
Add in the list: float:left;

He means, that by doing this, the image floats left and the text will appear to the right.
You do not need to change anything in itemFullText.

Let me know if you need further help.

Simon
K2 Support

hi simon

i don't speak good english and and probably did not tell well

in the Category view options it's all ok, my image is in the left position and the and the text is right of the pic.
but
in the Item view options my image is in the left position BUT my text is below to image
i want (in the Item view options) my text to start from begin of article in the left or right of image.

like this
how can i doing that?

thank you very much

Do you have a link to the site, or is it local host?

Simon
K2 Support

manolo said:hi simon
i don't speak good english and and probably did not tell well

in the Category view options it's all ok, my image is in the left position and the and the text is right of the pic.
but
in the Item view options my image is in the left position BUT my text is below to image
i want (in the Item view options) my text to start from begin of article in the left or right of image.

like this
how can i doing that?

thank you very much

It would be nice to have this as an option in the front-end :)

Hi,

can you please explain where I'll find the correct file where to add the

{float:left;}

Where is the style.css file?

 

Thanks!

Amy

Look inside your sites root -> components -> com_k2 -> css ->  k2.css

Unless your using sub templates or overrides then this is where you can edit any css styles pertaining to k2.

Hi Josh,

 

Thanks for your reply! I did that yesterday and k2.css the line looks like this now:

 

div.catItemImageBlock {padding:8px;margin:0 0 16px 0;float:left;}

 

Still the images are in the middle:

portal.server49.internet-content.net/tyo

 

So I'm still wondering what am I doing wrong!

 

Amy

 

 

 

Hi there
In k2.css find the code below and set text-align to left


div.subCategory a.subCategoryImage, div.subCategory a.subCategoryImage:hover {
    display: block;
    text-align: center; }




Let me know if that works. Are you trying to make the image float on the left with the text on the right or would you just like to align the image to the left with the text below that?

Hi Josh,

 

thanks! One step closer to what I need. Now the image is on the left, but yes I do need the text to the right side of the image, both Heading and the description and links.

 

portal.server49.internet-content.net/tyo

Greetings,

Amy

No problem, for what you ask above, the subCategoryImage div is located inside the subCategory div so the easiest option would probably be to float the subCategoryImage left so that the image is in a neatly wrapped box. Then you might need to move your html in your category.php around a bit and float the other elements to the left too. The key is to move the image div out of the subCategory div and make it float left while making sure that the title and description (inside the subCategory div) are floating to the left of that.

Basically you want the image div floating on the left with the other details floating to the right of the image div.

Sorry if this sounds confusing, just ask and I will clarify.

 

Hi Josh,

 

I understand in theory what you mean. But can you please tell me in practise what changes to do to these codes.

**********************************************************************************************************************************

k2.css:

/* --- Sub-category block --- */div.itemListSubCategories {}    div.itemListSubCategories h3 {}        div.subCategoryContainer {float:left;}        div.subCategoryContainerLast {} /* this class is appended to the last container on each row of items (useful when you want to set 0 padding/margin to the last container) */            div.subCategory {background:#f7fafe;border:1px solid #ddd;margin:4px;padding:8px;}                div.subCategory a.subCategoryImage,                div.subCategory a.subCategoryImage:hover {text-align:left;display:block;}                div.subCategory a.subCategoryImage img ,                div.subCategory a.subCategoryImage:hover img {background:#fff;padding:4px;border:1px solid #ddd;margin:0 8px 0 0;}                div.subCategory h2 {}                div.subCategory h2 a {}                div.subCategory h2 a:hover {}                div.subCategory p {}

************************************************************************************************************************************'

Category.php:

 

<?php if(isset($this->category) || ( $this->params->get('subCategories') && isset($this->subCategories) && count($this->subCategories) )): ?>    <!-- Blocks for current category and subcategories -->    <div class="itemListCategoriesBlock">        <?php if(isset($this->category) && ( $this->params->get('catImage') || $this->params->get('catTitle') || $this->params->get('catDescription') || $this->category->event->K2CategoryDisplay )): ?>        <!-- Category block -->        <div class="itemListCategory">            <?php if(isset($this->addLink)): ?>            <!-- Item add link -->            <span class="catItemAddLink">                <a class="modal" rel="{handler:'iframe',size:{x:990,y:650}}" href="<?php echo $this->addLink; ?>">                    <?php echo JText::_('Add a new item in this category'); ?>                </a>            </span>            <?php endif; ?>            <?php if($this->params->get('catImage') && $this->category->image): ?>            <!-- Category image -->            <img alt="<?php echo $this->category->name; ?>" src="<?php echo $this->category->image; ?>" style="width:<?php echo $this->params->get('catImageWidth'); ?>px; height:auto;" />            <?php endif; ?>            <?php if($this->params->get('catTitle')): ?>            <!-- Category title -->            <h2><?php echo $this->category->name; ?><?php if($this->params->get('catTitleItemCounter')) echo ' ('.$this->pagination->total.')'; ?></h2>            <?php endif; ?>            <?php if($this->params->get('catDescription')): ?>            <!-- Category description -->            <p><?php echo $this->category->description; ?></p>            <?php endif; ?>

**************************************************************************************************************************************

 

Greetings,

Amy

Hi Amy

This is what I used. You may not need alot of it and you might have to make a few small changes here and there but you should be able to use most of it.

                        <?php if($this->params->get('subCategories') && isset($this->subCategories) && count($this->subCategories)): ?>                <div class="itemListSubCategories">                        <?php foreach($this->subCategories as $key=>$subCategory): ?>            <div class="subCategoryContainer" style="width:<?php echo number_format(100/$this->params->get('subCatColumns'), 1); ?>%;">                <div class="subCategory">                    <?php if($this->params->get('subCatImage')): ?>                    <a class="subCategoryImage" href="<?php echo $subCategory->link; ?>">                    <img alt="<?php echo $subCategory->name; ?>" src="<?php echo $subCategory->image; ?>" />                    </a>                    <?php endif; ?>                                    <?php if($this->params->get('subCatTitle')): ?>                  <h2>                        <a href="<?php echo $subCategory->link; ?>">                            <?php echo $subCategory->name; ?><?php if($this->params->get('subCatTitleItemCounter')) echo ' ('.$subCategory->numOfItems.')'; ?>                        </a>                  </h2>                    <?php endif; ?>                                    <?php if($this->params->get('subCatDescription')): ?>                  <p><?php echo $subCategory->description; ?></p>                    <?php endif; ?>                                                                            <div class="clr"></div>                </div>            </div>            <?php if(($key+1)%($this->params->get('subCatColumns'))==0): ?>            <div class="clr"></div>            <?php endif; ?>            <?php endforeach; ?>                        <div class="clr"></div>        </div>        <?php endif; ?>    </div>    <?php endif; ?>

 

css

 

div.itemListCategoryTitle h1 {    margin: 0 5px 0 5px;    padding: 0px 5px 2px 10px;    font-size: 22px;    font-weight: normal;    color: #581414;    font-family: Georgia, "Times New Roman", Times, serif;    font-weight: normal;}div.itemListCategoriesBlock {    border:solid 1px #d5d5d5;    padding:0px;}div.itemListCategory {    margin:0 10px;    padding:0;    border-top: 0px solid #999;    border-bottom: solid 0px #e2c259;}div.itemListCategory img {    background:#fff;    padding:2px;    border:1px solid #d5d5d5;    margin:0 8px 0 0;    float: left;}div.itemListSubCategories {    margin:0 10px 10px 10px;}div.itemListSubCategories h3 {}div.subCategoryContainer {    float:left;}div.subCategory {    margin:0px;    padding:0px 4px;    border-bottom: solid 0px #e2c259;}div.subCategory a.subCategoryImage, div.subCategory a.subCategoryImage:hover {    text-align:left;    display:block;    float: left;    clear: right;}div.subCategory a.subCategoryImage img, div.subCategory a.subCategoryImage:hover img {    background:#fff;    padding:4px;    border:1px solid #ddd;    margin:0 8px 0 0;}div.subCategory:hover {    background-color:#f0e1ac;}div.subCategory h2 {    font-weight: normal;    font-size: 16px;}div.subCategory h2 a {    font-weight: normal;    background-position: left 50%;    background-repeat: no-repeat;    padding-left:15px;}div.subCategory h2 a:hover {}div.subCategory p {}div.itemListCategory p {    font-weight:normal;}div.itemListCategory h2 {    border-bottom: solid 0px #e2c259;    padding-left:0px;    margin-top:10px;}a.subCategoryMore {    font-size: 11px;}

 

Hi Josh,

 

I copied it all ;) and it seems to work fine. Thanks for your help!portal.server49.internet-content.net/tyo

 

Greetings,

Amy

Hello.  I have a similar question.  In Image View, I would align both the image and the image caption to the left. So far, in k2.css, I have added: float:left to span.itemImage img on line 178.

 

 This aligned the image to the left like it want, but the image caption is still aligned to the center of the page.  How do I align both the image and caption to the left?

 

Thank you!

hi josh,

 

i would like to align the image in category view and item view to the left. the text should be right next to the image. i added to div.catItemImageBlock float:left; and to div.ItemImageBlock float:left;

i also change text-align to left, like you suggested. but the image is still centered with the text below.

maybe you can help me?

kind regards

ulli

 

 

Josh said:

Hi there
In k2.css find the code below and set text-align to left


div.subCategory a.subCategoryImage, div.subCategory a.subCategoryImage:hover {
    display: block;
    text-align: center; }




Let me know if that works. Are you trying to make the image float on the left with the text on the right or would you just like to align the image to the left with the text below that?