K2 Category Listing

Hello, I would like to ask you for an assistance with a few design changes on our site TennisDesire.com:

In the category listings I would like to:
1) Have a text next to the picture and not below it just like at the moment.

image1.jpg

2) Move the article tags from the position behind the introtext just below the article title.

image2.jpg

3) Move the READ MORE button from the left side to right and add some space between the text and button.

image3.jpg

4) Have the text of the articles in block here.


Also would it be possible to have these changes connected only to a given K2 category? As I would like to have this look only in Tennis Guide section (http://www.tennisdesire.com/tennis-guide)


Many thanks for your help!!

Download attached zip file and extract it. This will give you a folder named "tennis".
Copy this folder to

Code: Select all

templates/gl_league_news/html/com_k2/templates/tennis


Go to K2 Categories and select your "tennis Guide" category.
In Category settings, top right Select a template, choose "tennis".

Now you need to add following css code to your override.css located in templates css folder and enable css override option in template settings > advanced settings > css override.

Code: Select all

.itemImageBlockTennis { float: left; margin-right: 20px; }
.itemReadMoreTennis { float: right!important; margin-top: 10px!important; }


This should cover your questions 1 to 3.

What is your 4th question as I could not understand what you mean.

Thanks for your reply, Norman.

It worked well for points 1 and 3 but the look of the tags on the top do not look like I wanted. You can compate it to my previous image.

image5.jpg

And regarding the fourth point - I would like to have the text in block, would use the whole area from left to right.

image4.jpg

Also how can I implement the modul that you have on Gavick homepage - I mean the red line on the bottom of the page about cookies policy. I would like to use this for presenting my own text to visitors.

Once again many thanks for your assistance!

Check this screenshot and let me know if this is how you want it.

http://awesomescreenshot.com/0241ltch6a

See you around...

Well, not exactly. The look of the title-tags area is great in your example but I want the text to be presented a bit differently. Please see this image

image6.png

or this part of our website: http://www.tennisdesire.com/stepanek-vs ... nnati-2013 as the text should be presented in the same way as there.


Also please provide me an information regarding the Gavick home page red line modul.

Once again many thanks for your time and help!

Please re-download and replace tennis folder with attached file in this reply and replace your css with below css

Code: Select all

.itemImageBlockTennis { float: left; margin-right: 20px; }
.itemReadMoreTennis { float: right!important; margin-top: 10px!important; }
.itemBody { text-align: justify; }


Regarding red module, I am assuming you are talking about cookie law plugin. I believe that is customized version of what is available in template settings > Cookie Law.

See you around...

Many thanks for your assistance, Norman, it worked well! But I would still need a small adjustment:

When an article includes tags the looks is great but when there are no tags the grey and blue lines under the title of articles are missing. Please see the image:

image8.png

I still need your help regarding a few design changes and hope you will find time to respond again...

I need to change the color of modul titles (bottom1-12 and footer, footer_nav) at the bottom of the site as the current one (grey) is not visible on the dark background at all. Next thing is connected to the previous one as I need to also change the color of the links when you move cursor on them as they are also hardly visible then.

image7.png

Thanks again!

Please note following changes will also take effect in other k2 sections so if you are only changing them for tennis category then we need to change their css class.

For border after tags, we have to remove border from tags and add them to header title.

Code: Select all

.itemTags { border-bottom:none!important; border-top: 1px solid #EEEEEE; }
.article header { border-bottom: 4px solid #3681B6; }


For bottom module titles text color use below code and change color.

Code: Select all

#gkBottom2 h3 { color: #FFFFFF !important; }


For bottom links text color on hover and other states use below code and change color.

Code: Select all

#gkBottom2 a:active, #gkBottom2 a:focus, #gkBottom2 a:hover { color: #252525 !important; }


See you around...

It work great, Norman.

I still have a few problems I would need your assistance...

1) You have helped me to change the color of links in the bottom modules and color on hover but I need the same change also for footer_nav position.

2) Would it be posible to somehow add borders to K2 images in articles? Exactly in the same way like in your Publisher theme:

image1.png

3) At this moment the template adds the logo description to all sites as a H1 tag and this results in multiple H1 tags on most of the pages. Is there any way to remove it or turn this function off?

4) I would like to change the look and position of image caption and credits as it is currently placed at the beginning of an article, before the main text. It should be placed under the image with caption on the left side and credits on right. See the image:

image2.png

5) Would it be possible to have a k2 articles look this way? First introtext, then image and then fulltext, instead of current image, intro, fulltext.

6) Is there any chance to re-design this template and make it responsive? As it is not looking well on mobile devices.

Once again many thanks for your time and effort.

1. Footer Links Hover Color

Code: Select all

footer a:active, footer a:focus, footer a:hover {
    color: #ffffff;
}


3. I cannot see this, usually h1 tags holds page title which I can see template is displaying. Show me few pages where it shows same h1 tag with logo description and I ll check.

4. Image Caption on left. For credit text you need to enable it so I can see it.

Code: Select all

.itemImageCaption {
    clear: both;
    float: left;
    text-align: left;
    width: 400px;
}


2. 5. & 6. I cannot do anymore customizations as what I have already done was out of our support scope as it goes into customization. I am sorry.