layout glitch k2 tags/rating and image gallery

hi there,

looks like you didn't plan to use k2 tags and the rating all over this great template, right? Haven't found K2 tags anywhere in the demo.

I like to use them nevertheless on my site. Enabling them in category view or article view looks like on the screenshot.

gk_cloudhost_k2-tags.jpg

Could you please provide me with a solution to fix the layout glitch. The images on the screenshot is the K2 article image gallery, simple image gallery pro is also installed.

thanks
C.F.

Hello,

Could you provide an URL to your website?

it's still work in progress on a live site but http://www.2r8.de/blog/server-hosting/c ... ngsoption/ or http://www.2r8.de/blog/joomla/na-alle-e ... ten-stand/ show the issue.

Please add the following code at the end of css/k2.css file:

Code: Select all

/* Tags fix */
ul.sigProClassic li.sigProThumb,
.itemBody .itemTags li {
   padding-left: 0px!important;
   padding-right: 10px;
}
.itemRatingList li:before,
.itemTags li:before,
.sigProThumb:before {
   display: none;
}

thanks dziudek,

there's still some layout hiccup, see screenshot

first star is not in line with the others, when hovering also not in line.
the last image still shows the list "dot"

gk_cloudhost_k2-tags_1.jpg

Please add also this code in the same file:

Code: Select all

.itemRatingList a:hover {
top: -5px;
left: 3px;
width:25px;
}

.itemRatingList a, .itemRatingList .itemCurrentRating {
top: 1px;
}


thanks dziudek,

the rating is fine now.

there's still the last "list class" visible, see screenshot.

also on the screenshot: the height of the thumbs sometimes flows out of it's box. this can be corrected by changing line 182 in joomla.css. if I use "100%" instead of "auto" it looks fine again.

181 section img {
182 height: 100%!important;
183 max-width: 100%!important
184 }

Should I use this or do you recommend any better way?

gk_cloudhost_k2-tags_2.jpg

http://www.2r8.de/blog/server-hosting/c ... ngsoption/

In order to fix this problem with last list element please change in the added code fragment:

Code: Select all

.itemRatingList li:before,
.itemTags li:before,
.sigProThumb:before {
   display: none;
}

to:

Code: Select all

.itemRatingList li:before,
.itemTags li:before,
.sigProThumb:before,
.sigProClear:before {
   display: none;
}

In order to fix the problem with thumbnails please use the following code:

Code: Select all

.sigProLinkWrapper a {
   overflow: hidden;
}

thanks dziudek,

all sorted out and fine now.
I really appreciate your support. Also thanks to ercan-usta for providing me with the new files.
Have a nice day.
C.F.