Joomla. Хаки стилей. Три столбца, кнопки "ReadMore", резиновые iframe

Это первые мелочи и первые хаки. Надо было поискать сначала в template.css Так что лучше использовать решения из более поздние посты на эти темы

Resize Videos Proportionally with Intrinsic Ratios
How to Make Responsive Iframes — it’s easy! - и при помощи CSS или javascript
Responsively change div size keeping aspect ratio [duplicate]

Хаки стилей¶

Три колонки на странице кактегории (блог) - текст

Три колонки на странице кактегории (блог) - заголовки поля и отступы

In [ ]:

.row-fluid p {
    
    text-align: justify;
}
.page-header {
    margin: 2px 0px 10px;
    padding-bottom: 0px;

    border-top: 1px solid #EEE;
    border-bottom: none;
}

А ниже категория для кнопок "Далее", немного помучившись с ними, я просто отключил в админке показ кнопок. Ьак что внизу не хак, а персоисточник.

In [ ]:

.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0px;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333;
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #F5F5F5;
    background-image: linear-gradient(to bottom, #FFF, #E6E6E6);
    background-repeat: repeat-x;
    border-width: 1px;
    border-style: solid;
    border-color: #BBB #BBB #A2A2A2;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-radius: 4px;
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
}

In [ ]:

.row-fluid [class*="span"]:first-child {
    
    text-align: justify;
}

Для Фреймов¶

In [ ]:

div.custom{
    background-color:blue;    
    max-width: 960px;
    max-height: 540px;
    overflow:hidden;
}

iframe{
    max-width: inherit;
    max-height: 560px;
    
}

И вот он, правильный ответ для iframe¶

In [ ]:

div.custom p {
position: relative;
height: 0;
padding-bottom: 57%; /* This should be changed to match the aspect ratio of your video */
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Посты чуть ниже также могут вас заинтересовать