This is 3rd part of the this thread: https://www.joomlart.com/forums/d/18361-template-and-k2-gets-messed-up-after-update-part-2

I have updated joomla on the third and last site I am using Kranos.

On this site, the template did not crash as was the case with the two other sites. So I have not addded the CSS from the first site. I tried that, but that made brought forth other issues.

There are some minor changes that has taken place by the joomla update.

  1. This blue color should be green:

  1. The YT video on the fromt page is not stretching out to the sides:

  1. I want to reduce spacing between these 2 bottons so it looks similiar to the other sites.

  1. Links have changed color from grey to green, I want grey like the other sites, and the hhover color for the links to be green:

  1. The module on the right side in the k2 articles has added extra spacing and removed the dotted lines, I would like that to be as in the other sites.

This is correct:

This is how it is:

    starlight You may require to whitelist - I.P Address - 106.0.57.224 - Country - India as the site link in question isnt accessible and returning with 403: Access Forbidden error

        starlight Hi

        1) You may check now. Have added some CSS rule-sets in custom.css file to get the result as envisaged
        2) Not sure as to which screen size you wish to refer here as the specific module is appearing alike other sites. Kindly elaborate
        3,4 and 5) You may check for these too.

            aman204 Thx, it looks good!

            A) In terms of the YT video, I mean from the breakpoint at 767px and downwards. It is not stretching out to the edges as in the other two sites.

            B ) On the front page, from 522px to 480px, one of the module items is being pushed down, is it possible to fix that?

            C) The big blue button inside articles, it was green before. Can it be made green again:

            D) Also these links should be grey, and when hoovered they should be green:

                starlight hi please try add this to css

                @media only screen and (max-width:991px) {
.jsslide:nth-child(2n+3){
clear: both;
}
}

                Video looks fine to me.

                Where can I see elements from C & D ?

                    teitbite Thx, that fixed the issue.

                    C&D can be seen in the link I posted, scroll down to the end of the article.

                    In terms of the video, this is how it looks:

                    And this is how it looks like on the other pages, and should also look like here:

                        starlight Hi

                        A) Video : And this is how it looks like on the other pages, and should also look like here:

                        Kindly let us know the other page where similar module can be seen assigned so as to take closer look

                        C) Quick way would be adding this to CSS file :

                        #k2Container a.btn-blue {background-color: #4dc247 !important;border-color: #4dc247 !important;}

                        D) Try add this also to similar CSS file :

                        .itemBody sup a,.itemCategory a{color:#333 !important;}
.itemBody sup a:hover,.itemCategory a:hover{color:#4dc247 !important;}

                            starlight Hi

                            A) Try add this to CSS file :

                            @media (max-width: 767px){.itemid-435 .t3-content .item-page{padding: 20px 0 0 0 !important;}

                            D) Try change the above CSS to

                            .itemBody sup a,.itemCategory a,.itemBody a{color:#333 !important;}
.itemBody sup a:hover,.itemCategory a:hover,.itemBody a:hover{color:#4dc247 !important;}

                                aman204

                                A ) Yes, that fixed it. But can you make the text above the video centered as well (like the other site), because now its going all the way out to the side.

                                D ) I have added it. The links are correct, but the back to top button is still the same, and now the big button text has also been affected. Its supposed to be white, also when hoovered.

                                    aman204 Yes, that looks good. I was going to check why the YT video had black bars on the top and the bottom, but for some reason, after saving the article, without any change in the code, without enabling any editor, the video is not displaying.

                                    This is the embed code: <div class="videoWrapper"><i-frame src=//www.youtube.com/embed/KHD2b7gXLEI?rel=0&modestbranding=1" frameborder="0"allowfullscreen="allowfullscreen"></iframe></div>

                                    What can be the issue?

                                        starlight but for some reason, after saving the article, without any change in the code, without enabling any editor, the video is not displaying.

                                        There is syntax error in specific code snippet due to which it isnt rendering. You may make the code structure right with changing to iframe as seen in screenshot

                                            aman204 I see. I just did so, but after saving it adds the "-" between "i" and "frame" again automatically.

                                                saguaros Thx, that was helpful!

                                                I see that there have been added black bars to top and the bottom of the video. The embed code does not include this as it is responsive. Is there a css override to fix this?

                                                    starlight Hi. Problem with bars at top and bottom is because there is no way for CSS to be prepared for resizing. So the default code is prepared for size 16:9. If the video is even slightly bigger in height or weight than it will show those bars. You may play with the padding value in this code:

                                                    .videoWrapper {
    padding-bottom: 56.25% !important;
}

                                                    but it may fix one video and break (add black bars) in another if they are not equal size.

                                                        starlight But I just noticed that the text here was not affected, is there another code I can add to change size of this text:

                                                        Try change this :

                                                        div.itemFullText p {font-size: 16px !important;}

                                                        to

                                                        div.itemFullText p, div.itemFullText ol li{font-size: 16px !important;}

                                                            You need to Login to view replies.