0 Пользователей и 1 Гость просматривают эту тему.
  • 89 Ответов
  • 138872 Просмотров
*

raduga

  • Moderator
  • 70
  • 75 / 2
1. Пошаговое описание создания закругленных углов в модулях (подойдет для все модулей, включая те, что выводятся над областью mainbody:
часть1
часть2

2. Описание хака по изменению файла frontend.html.php. Закругленные углы получаются без дивов.

3. Описание техники создания круглых углов без картинок.

4. Пример кода, который я использую чаще всего в своих шаблонах:

Код
div.module {
  width: 183px;
  background: url(../images/mod_mid.gif) repeat-y;
  margin-bottom: 15px;
}

div.module div {
  background: url(../images/mod_bot.gif) bottom left no-repeat;
}

div.module div div {
  background: url(../images/mod_top.gif) top left no-repeat;
  padding: 10px 10px 20px 10px;
 
}
div.module div div div {
  background: url(../images/px.gif) no-repeat; /** Внес изменения для ИЕ7, раньше было background: none; **/
  background: none;
  padding: 0;
  width: auto !important;
  width: 100%;
}

div.module div div div h3 {
display: block; 
padding : 0px 0px 10px 0px; 
margin : 0;
font-family      : Arial, Verdana;
font-size        : 12px;
font-weight      : bold;
color            : #527a33;
text-transform   : uppercase;
text-align       : center;
letter-spacing   : 1px;

}

Здесь последний стиль описывает заголовок.
В файле index.php должен быть следующий код для вывода модулей в позиции left, right:

Код
<?php mosLoadModules ( 'left',-3 ); ?>
<?php mosLoadModules ( 'right',-3 ); ?>

Внимание!
В код выше я внес изменения для корректного отображения верхушки закругленных модулей в ИЕ7. Не спрашивайте зачем это надо!
Код
div.module div div div {
  background: url(../images/px.gif) no-repeat; /** Внес изменения для ИЕ7, раньше было background: none; **/
.......

px.gif - это однопиксельный прозрачный gif, положите его в папку images

Вот, что получилось:

[вложение удалено Администратором]
« Последнее редактирование: 18.08.2007, 00:36:02 от raduga »
*

userxp

  • Живу я здесь
  • 2019
  • 403 / 6
  • Злой и ужасный бармалей
самое интерсное (полезное) вот это:
style -3: you will have extra "divs" tags which generate the following format in your Mambo templates.
а я то всё ни как не мог понять, как это мне джумла "родит" rounded... :(

2 raduga: Гранд мерси!
поиграюсь, как-нибудь на досуге.
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3

Сделал, в IE 7 betta  коряво с косяками смотрится :)

С модулями User тоже не прокатывает :(
с обычными одулями все тип топ , а вот
с модулями user, тоесть которые содержат пользовательский скрипт ,
нифига не получается не действует на него этот хак
*

raduga

  • Moderator
  • 70
  • 75 / 2
С модулями User тоже не прокатывает :(
с обычными одулями все тип топ , а вот
с модулями user, тоесть которые содержат пользовательский скрипт ,
нифига не получается не действует на него этот хак

Для модулей, которые выводятся в области mainbody и которые не имеют фиксированной ширины, надо применять техники из пунктов 1,3 (см. первый пост).

Да поковырялся , вот не получается сделать для модулей top с не фиксированным размером закругление  углов , надо всего лишь 2 картинки вставить по краям и все

Извиняюсь за тупой вопрос, но куда вставлять этот код:

div.module {
  width: 183px;
  background: url(../images/mod_mid.gif) repeat-y;
  margin-bottom: 15px;
}

div.module div {
  background: url(../images/mod_bot.gif) bottom left no-repeat;
}

div.module div div {
  background: url(../images/mod_top.gif) top left no-repeat;
  padding: 10px 10px 20px 10px;
 
}
div.module div div div {
  background: none;
  padding: 0;
  width: auto !important;
  width: 100%;
}

div.module div div div h3 {
display: block; 
padding : 0px 0px 10px 0px; 
margin : 0;
font-family      : Arial, Verdana;
font-size        : 12px;
font-weight      : bold;
color            : #527a33;
text-transform   : uppercase;
text-align       : center;
letter-spacing   : 1px;

}

*

userxp

  • Живу я здесь
  • 2019
  • 403 / 6
  • Злой и ужасный бармалей
template_css.css шаблона
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3

Спасибо большое! А вот
<?php mosLoadModules ( 'left',-3 ); ?>
<?php mosLoadModules ( 'right',-3 ); ?>

можно вставлять после какой строчки? После </table> или куда?
*

userxp

  • Живу я здесь
  • 2019
  • 403 / 6
  • Злой и ужасный бармалей
ну ты спросил.... в шаблон вставлять.
как я тебе ещё могу по-другому ответить?
обычно в index.php, там где грузиться html-разметка сайта.

почитай статью на портале http://joomlaportal.ru/content/view/409/53/ + внизу ещё пару ссылок
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3

Спасибо еще раз за ссылки...
Естественно, что код нужно в index.php вставлять, но вот куда....разницы нет?

Просто вчера мучился мучился и в конечном итоге у меня шаблон начал выдавать ошибку...
*

userxp

  • Живу я здесь
  • 2019
  • 403 / 6
  • Злой и ужасный бармалей
возьми другой не сложный шаблон и посмотри, как там сделано.
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3
*

Mitrich

  • Захожу иногда
  • 289
  • 524 / 13
  • Все можно. Но сначала учиться, учиться и учиться.
В index.php написано
Цитировать
<body>
<?php mosLoadModules ( 'left',-3 ); ?>
</body>
в template_css.css
Цитировать
div.module {
  width: 335px;height 10px;
/*  background: url(../images/mid.gif) repeat-y;*/
background:#ff0000;
  margin-bottom: 15px;
}

div.module div {
  background: url(../images/bottom.gif) bottom left no-repeat;
}

div.module div div {
  background: url(../images/top.gif) top left no-repeat;
  padding: 10px 10px 20px 10px;
 
}
div.module div div div {
  background: none;
  padding: 0;
  width: auto !important;
  width: 100%;
}

div.module div div div h3 {
display: block; 
padding : 0px 0px 10px 0px; 
margin : 0;
font-family      : Arial, Verdana;
font-size        : 12px;
font-weight      : bold;
color            : #527a33;
text-transform   : uppercase;
text-align       : center;
letter-spacing   : 1px;

}
на выходе получается следующее (картинка в аттаче)
имеются три картинки,все размером 335х30 с именами
top.gif
mid.gif
bottom.gif
картинкe фона середины (mid.gif) закоментировал и положил красный цвет для наглядности.
Подскажите в чем косяк

[вложение удалено Администратором]
*

raduga

  • Moderator
  • 70
  • 75 / 2
А ты попробуй закругления нарисовать не с прозрачным фоном, а с зеленым, т.е. фоном колонки и тогда краснота не будет проступать.
*

Mitrich

  • Захожу иногда
  • 289
  • 524 / 13
  • Все можно. Но сначала учиться, учиться и учиться.
БЛИИИН протупил
спасибо
*

ButuzOFF

  • Захожу иногда
  • 144
  • 22 / 2
Знаю уже с этими углами уже достаточно решений есть
Но блин туплю я >:( Уже Бог знает сколько мусолил эту тему и никак с пунктом третим разобраться не могу (углы с ява и цcc) уже и описание на русском нашел и нифига не выходит
Может кто делал и сможет подсказать ,вроде делаю как написано ,но полюбому гдето МОЯ ошибка .В итоге результ 0
« Последнее редактирование: 30.09.2006, 15:48:50 от ButuzOFF »
*

4853

  • Захожу иногда
  • 170
  • 20 / 11
Знаю уже с этими углами уже достаточно решений есть
Но блин туплю я >:( Уже Бог знает сколько мусолил эту тему и никак с пунктом третим разобраться не могу (углы с ява и цcc) уже и описание на русском нашел и нифига не выходит
Может кто делал и сможет подсказать ,вроде делаю как написано ,но полюбому гдето МОЯ ошибка .В итоге результ 0
Фиг его знает, глянь под моим ником на сайтик, если то, то попробую объяснится, хотя работал метод научного тыка. Если не то, тогда...
*

ButuzOFF

  • Захожу иногда
  • 144
  • 22 / 2
Спасибо тебе большое  ^-^ но насколько я понял у тебя там картинками? Жуть как хочу   сделать с nifty (мой пост выше) и не хрена не получаеться
Картинками уже делал (да и щас на моем сайте меню картинками) Просто увмидел офигенный  стильный "легкий" дизайн на div и css  и захотелось сделать по аналогии ,минимум картинок
Кстати а левый блок чем делал?
Еще раз спасибо
*

4853

  • Захожу иногда
  • 170
  • 20 / 11
Цитировать
Кстати а левый блок чем делал?
Теми же картинками и через дивы прописаны.
Обошёлся тремя картинками, верхней, нижней и середина бэкграундом.
Правда две недели ялозил ;D
Но получилось.
Кстати, верхняя и нижняя картинка весят по 1,17кб, бэкграунд 0,88
Итого это добро , в одном блоке, обходится 3,22кб
« Последнее редактирование: 01.10.2006, 00:27:50 от 4853 »
*

moro

  • Новичок
  • 4
  • 0 / 0
Слушайте, помогите, а то мозг плавится. Никто не обращал внимание на такую херь?
Код
.moro_graphic_titles div.module {
  background: url(../img/title_point.gif) no-repeat top left;
  padding-bottom: 10px;
  width: 100% !important;
  z-index: 111;
}

.moro_graphic_titles div.module div {
  background: url(../img/title_end.gif) no-repeat top right;
   z-index: 100;
}

.moro_graphic_titles div.module div div {
   line-height: 24px;
   height: 24px;
   z-index: 98;
}

.moro_graphic_titles div.module div div div {

}

.moro_graphic_titles div.module div div div h3{
color: #666666;
text-align: left;
padding-left: 30px;
height: 24px;
line-height: 24px;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
margin: 0 0 2px 0;
}
Картина ясна, да? я делаю не закругленные углы, а картинку под заголовком. Она из двух частей: основа и хвост, чтобы делать ширину модуля любой, и присобачивать в конец картинку title_end.

Так вот получается, что .moro_graphic_titles div.module div === .moro_graphic_titles div.module div div div и даже четыре или пять div. Он присобачивает эту закрывающую картинку ко всем divам, которые ему встречаются внутри модуля!!!! В тех модулях, где нет дивов и h3 - нормально, а в остальных - жесть... просто гляньте: http://www.churchny.org
Модуль с календарем - нагляден. Но это не самое хреновое. Модуль Site Login - при форме выглядит нормально, а если залогинится - пипец. А вот who's online внизу правой колонки - хоть бы хны. Там все просто - никаких дополнительных слоев...

Как с бороться с эдакой напастью?


ПРИДУМАЛ!!!! ТУПО НО ПРОСТО спасибо за вдохновение :)
Код
.moro_graphic_titles div.module div div div div{ background: none;}
.moro_graphic_titles div.module div div div div div{ background: none;}
.moro_graphic_titles div.module div div div div div div{ background: none;}
.moro_graphic_titles div.module div div div div div div div{ background: none;}
.moro_graphic_titles div.module div div div div div div div div{ background: none;}
.moro_graphic_titles div.module div div div div div div div div div{ background: none;}
« Последнее редактирование: 05.10.2006, 18:34:52 от moro »

Может кто делал и сможет подсказать...
Жуть как хочу   сделать с nifty (мой пост выше) и не хрена не получаеться
Картинками уже делал (да и щас на моем сайте меню картинками) Просто увмидел офигенный  стильный "легкий" дизайн на div и css  и захотелось сделать по аналогии ,минимум картинок

Поздновато пишу (только сейчас увидел эту тему), но судя по тому, что на Портативе до сих пор нет ни одного javascript-закруглённого уголка, то тема продолжает быть актуальна. Возможно, я могу подсказать, как сделать закруглённые уголки БЕЗ картинок применительно к Joomla.

1. В директории с используемым шаблоном создаём новую папку. Называем её, допустим, "corners";
2. Скачиваем прилагаемый архив, распаковываем, полученные 3 файла помещаем в созданную папку;
3. Подключаем новые файлы поместив в index.php шаблона между тэгами "head" следующие строки:
Код
<link rel="stylesheet" type="text/css" href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/corners/niftyCorners.css">
<link rel="stylesheet" type="text/css" href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/corners/niftyPrint.css" media="print">
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/corners/nifty.js"></script>
4. Закругляем уголки любого используемого в CSS контейнера помещая опять же в index.php между тэгами "head" следующие строки:
Код
<script type="text/javascript">
window.onload=function(){
Rounded("div#user1","#000","#FFF");
}
</script>

Примечание:
- вместо "user1" подставляем название любого другого модуля или заголовка;
- если необходимо закруглить несколько модулей, дублируем строку Rounded("..."), перечисляя элементы;
- #000 - цвет внутреннего угла, #FFF - внешнего;
- если хотим закруглить только верх или низ модуля, используем RoundedTop или RoundedBottom;
- использовал этот метод только на шаблонах свёрстанных слоями - работает без проблем.

Отпишись потом, получилось добиться результат, или нет. Ну или можно "+" поставить, если заработает. :)



[вложение удалено Администратором]
*

ButuzOFF

  • Захожу иногда
  • 144
  • 22 / 2
Цитировать
Ну или можно "+" поставить, если заработает
Нужно и полезно   ;) Вот чаще бы отписывали о найденном решении больше пользы было бы
а не мусорить "не помогли, а я нашел ,всем пока"

Каким образом можно сделать такой же дизайн, только для основного новостного контента, т.е. для <?php mosMainBody(); ?> ?
Ведь выбора с 4-мя <div> нету ...

Закруглить углы области в которой выводится основной контент? Rounded("div#MainBody","#000","#FFF"); - не пробовал? Либо вместо "MainBody" тот класс, который отвечает за вывод контента в Main.

Приведу пример, так будет гораздо проще ....
Т.е. в качестве закруглённых краёв выступает jpg.
Как я понял с помощью cssтакого не сделать.

Как раз наоборот, тремя сообщениями выше рассматривается случай, где закругление происходит именно БЕЗ jpg, а только с помощью css и js.

Как раз наоборот, тремя сообщениями выше рассматривается случай, где закругление происходит именно БЕЗ jpg, а только с помощью css и js.
Извините, я немного ввёл в заблуждение, мне нужно сделать таким образом дизайн каждой новости, например как на этом сайте _http://pc-soft.ru.
*

raduga

  • Moderator
  • 70
  • 75 / 2
*

IceFusion

  • Захожу иногда
  • 60
  • 0 / 1
Люди чё то тут какая-то ерунда происходит сдедал

вывод вот так:
<?php mosLoadModules ( 'right',-3 ); ?>
А выводится аж 4 див тегов!

<div id="right_outer">
            <div class="module-cart">
         <div>
            <div>
               <div>
                  <div>
                <a style="font-size:11px; color:#1A3DC1; text-decoration:underline; font-weight:normal;" href="http://x-sive.ru/index.php?page=shop.cart&option=com_virtuemart&Itemid=1">
                Показать корзину</a><br/>
Ваша корзина пуста.</div>

               </div>
            </div>
         </div>
      </div>
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать показ header от времени суток

Автор raduga

Ответов: 33
Просмотров: 39244
Последний ответ 19.01.2014, 01:35:26
от Beer
Как сделать, чтобы контактная информация отображалась над меню или рядом с ним?

Автор bugaooga

Ответов: 1
Просмотров: 5036
Последний ответ 25.10.2013, 20:54:31
от artel-st
Как сделать чтобы определенный модуль был только на одной странице

Автор alexS

Ответов: 25
Просмотров: 21410
Последний ответ 05.06.2013, 00:46:16
от puserfill
Как сделать смену картинки при выборе разных пунктах меню

Автор raduga

Ответов: 17
Просмотров: 26607
Последний ответ 16.01.2013, 14:19:27
от zavarov
Как сделать поля/отступы для изображений в контенте?

Автор Andrew

Ответов: 6
Просмотров: 11492
Последний ответ 22.07.2012, 22:08:49
от Taatshi