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?