Изменение фона joomla – Как на Joomla меняется фон сайта? Какие шаблоны (их путь) отвечают за изменение цвета и вообще внешнего вида фона?

Как редактировать шаблон сайта на движке Joomla

Навряд ли вас, как вебмастера, устроят стандартные параметры скачанного шаблона. Наверняка вы захотите изменить какие-то элементы макета, поменять его структуру, редактировать стиль оформления и многое другое. Настройка шаблона — это те азы, которыми должен владеть любой сайтостроитель. Все когда-то с этого начинали, и вам тоже стоит научиться. После прочтения данной статьи вы будете знать, как изменить шаблон Joomla, насколько это просто делать и как быстро редактировать макет.

Как установить шаблон на сайт

Для начала нужно разобраться с инсталляцией темы оформления на ресурс. Это основное действие, которое вы должны уметь осуществлять даже с закрытыми глазами. Установка шаблона в Джумла — очень простой навык, которым грех не владеть.

Для начала вам нужно загрузить на диск компьютера файл шаблона. Обычно, в каталогах распространяют архивированные файлы макетов, и если вы нашли zip или tar.gz, то это хорошо. Движок Joomla тем и славится, что им очень легко управлять. Буквально за считанные минуты вы сможете изменить оболочку сайта, переодев его в другой шаблон.

Для изменения темы оформления ресурса вам необходимо пройти в «Менеджер расширений». Далее вам предстоит нажать «Загрузить файл пакета» и отыскать архив шаблона на компьютере. После загрузки нажмите на кнопку активации установки макета — тема постепенно начнет инсталлироваться. Либо если вы не скачивали файл на компьютер, то можете вписать URL в специальное поле и движок сам загрузит и установит шаблон на сайт.

Еще один вариант установки шаблона, который используют не так часто, как предыдущий — это загрузка распакованного шаблона сразу на хостинг при помощи FTP-менеджера. Главное в этом деле — это не ошибиться с папкой, куда вы отправляете дистрибутивы шаблона. Если поместите в неправильную директиву, то макет не появится в менеджере шаблонов, а может и нарушит работу некоторых составляющих сайта. Вам необходимо найти папку templates и внутри нее создать каталог для данного шаблона. Затем перейдите в админку в «Менеджер расширений» и нажмите на «Поиск» — движок отыщет загруженный вами шаблон на хостинге.

Как редактировать внешний вид шаблона в Joomla

После установки шаблона сайта можно перейти к самому интересному — вам предстоит его отредактировать под свои потребности.

Настройка макета — это интересное занятие, которое обязательно вас втянет в себя с головой, вот увидите!

Но для начала вам нужно разобраться, что к чему, и данное руководство в этом поможет.

Дело в том, что шаблоны Джумла состоят из блочной системы, впрочем, как и макеты многих других движков. Это удобно и легко для освоения, и в этом вам необходимо разобраться. Иногда настройка макета доступна прямо из админки. Такое бывает редко и в основном только в случае, если вы установили на сайт платный макет. В иных же случаях вам придется иметь дело напрямую с кодом шаблона. Не стоит этого боятся, как уже говорилось, — у современных макетов простая блочная система. Чтобы редактировать какой-то элемент, вам лишь нужно найти соответствующий блок в коде всего макета.

К счастью, поиск необходимых элементов в шаблоне не придется вести вручную. Настройка макета значительно облегчится, если вы будете использовать специальный браузер. Под словом «специальный» имеется ввиду такой браузер, при помощи которого можно просматривать код страницы в целом и отдельных элементов. Примером такого браузера является Гугл Хром. Чтобы увидеть, в каком месте кода находится конкретный элемент, вам нужно лишь навести мышкой на него, нажать правую кнопку и выбрать пункт «Просмотр кода элемента». После этого браузер откроет выбранную часть кода, и вы сможете увидеть нужный вам блок.

Далее, чтобы поменять настройки блока, вам необходимо отредактировать его при помощи специального редактора. Для этого можете установить популярный Notepad++, либо же использовать стандартные возможности своей операционной системы, к примеру, легендарный Блокнот. Вам необходимо будет загрузить весь код внешнего оформления шаблона в блокнот. Затем нажмите Ctrl+F — включится «Поиск». Найдите ту часть кода, какую высветил вам браузер при нажатии на код элемента. А затем откорректируйте нужные вам данные.

Если вы не понимаете, что нужно редактировать, тогда вам придется посвятить несколько вечеров чтению тематических статей по написанию CSS. Либо просмотрите в Интернете видео — их сейчас хватает. Главное, что вы должны понять — это какой тег, за что отвечает. Некоторые составляющие легко осмыслить, зная элементарный английский. К примеру, тот же цвет в CSS обозначается, как color. До этого не сложно дойти собственными умозаключениями.

Путем редактирования CSS вы сможете изменить большинство элементов на сайте, начиная от логотипа и заканчивая его шириной. Вы сможете даже изменить фоновое изображение. Для этого вам нужно будет добавить новую картинку в папку images, а также прописать в коде путь к ней на хостинге.

Кроме того, большую пользу окажут различные расширения, которые вы установите на сайт. Именно от набора плагинов, модулей и компонентов зависит то, каким будет ваш ресурс. При помощи CSS вы сможете изменить лишь элементарные настройки, но не сумеете добавить новый функционал на площадку. Зато с компонентом вы сможете изменить основную часть страницы, а с модулями добавить функциональные блоки для различных целей. А плагины улучшат работу самого сайта, а также позволят вам вставлять всяческие функции прямо посреди контента.

Вам остается лишь определить, каким должен быть ваш сайт, а затем найти подходящие инструменты для реализации этой затеи!

Похожие статьи

В джумле поменять фон. Редактируем footer (футер) Joomla. Изменение цвета текста и ссылок

Главная роль футера - это подольше задержать посетителя на Вашем сайте. И если посетитель найдёт здесь ссылку на сторонний ресурс, то большая вероятность, что посетитель покинет Ваш сайт. После установки нового шаблона Joomla на сайт мы сразу же обнаруживаем в футере копирайт – ссылку на разработчика, а также информацию на каком фреймворке работает данный шаблон.
В этом уроке мы рассмотрим как убрать ненужную нам информацию из футера, а также займемся оформлением футера (footer) .

Информацию об авторских правах используемом программном обеспечении можно отключить в "Менеджере модулей". Откройте меню "Расширения"→ "Менеджер модулей"
В Менеджере модулей через фильтр "Выбор позиции" находим модуль "footer".


Входим в настройки модуля и обнаруживаем две верхние строчки из футера:

Built with HTML5 and CSS3
Copyright © 2014 YOOtheme


Информацию, помещенную в модуле "Произвольного HTML-кода" в позиции "footer", вы можете заменить на свою.


Сохраним внесенные изменения и обновим страницу сайта. Итак, наш Copyright появился, а установленный по умолчанию исчез.
Но у нас остаётся без изменений нижняя строчка в футере: – ссылка на базе какого фреймворка сделан данный шаблон.
Посмотрим как его убрать. Воспользуемся расширением для Firefox Mozilla и проанализируем эту надпись.


Открываем вводим ссылку: "href="http://www.yootheme.com">Warp Theme Framework" для поиска и видим, что она находится в шаблоне в файле config.php. Переходим к файлу по директории: Z:\home\localhost\www\ваш_сайт\templates\ваш_шаблон\warp\config.php


С помощью текстового редактора Notepad++ открываем файл config.php , и в форму поиска вводим скопированную ссылку: href="http://www.yootheme.com">Warp Theme Framework



Закомментируйте строку:

// "branding" => "Powered by Warp Theme Framework" и сохраните изменения. После обновления страницы сайта нижняя строчка в футере: "Powered by Warp Theme Framework" исчезнет. Если вы решите после слова "branding" => написать свой бренд на русском языке, то не забудьте поменять кодировку на "Кодировать в UTF-8 (без BOM)."
В футере можно добавить коротенькое меню , вдруг ваш пользователь дочитав страницу сайта до конца заинтересуется какой-нибудь темой. И напоследок, давайте сделаем легкий бэкграунд для футера. Для этого снова воспользуемся расширением и проанализируем сам футер.


В случае с бесплатным шаблоном от студии YooTheme никакого цветового оформления для футера не предусмотрено. В нашем случае за оформление CSS-стилей отвечает файл theme.css , а путь к нему можно увидеть после наведения курсора на название файла в правом верхнем углу (смотрите скриншот выше). Для оформления светло-серого фона для футера можно добавить в файл theme.css внутри класса, отвечающего за оформление футера следующую строку: background: none repeat scroll 0 0 #EEEEEE;


Итак, сегодня мы с вами научились убирать копирайты из футера, оформлять футер по своему усмотрению, а также задавать футеру свой фон.

Если стать оказалась вам полезной буду благодарен за лайк.

В этом уроке мы редактируем footer (футер) Joomla и убираем «Работает на Joomla» .

После установки Joomla в footer (футер) имеется надпись Работает на Joomla!® (Powered by Joomla!®) . Рассмотрим как это все дело убрать. Воспользуемся дополнением Firebug для Firefox и проанализируем эту надпись.

Открываем Total Commander вводим ссылку для поиска и видим, что она находится в шаблоне в файле index.php.

С помощью программы Notepad++ открываем данный файл, жмем Ctrl + F и в форму поиска вводим скопированную ссылку.

тогда footer (футер) будет у нас чистый, ну или редактируем надпись под себя.

ВАЖНО! Если вы отредактировали надпись на русском языке, то прежде чем сохранится поставьте кодировку «Кодировать в UTF-8 (без BOM).

Теперь давайте рассмотрим как убрать или отредактировать надпись в footer (футер) 2013 joomla. Все права защищены. Joomla! - бесплатное программное обеспечение, распространяемое по лицензии GNU General Public License .

Но если вы хотите отредактировать его под себя, то это можно сделать отредактировав файл en-GB.mod_ footer.ini, а если у вас русифицированная Joomla то ru-RU.mod_footer.ini находящиеся в корне сайта (language > en-GB или ru-RU соответственно). Не забывайте про кодировку «Кодировать в UTF-8 (без BOM)».

При установке клубных шаблонов Joomla или установке шаблона Joomla 2.5 из быстрого старта «QuickStart» зачастую необходимо убрать ссылки на сайт разработчика. В большинстве случаев в настройках шаблона имеется возможность скрытия логотипа производителя, но а если нет, то работаем по принципу убирания из footer (футер) надписи

Работает на Joomla!® (Powered by Joomla!®) и убираем ссылки на сайты разработчика, если это необходимо.

Вспомнился один случай, когда нужно было убрат

Изменение цвета фона фиксированного стиля шаблона «Protostar» в Joomla 3

Изменение цвета фона фиксированного стиля шаблона «Protostar» в Joomla 3

Сразу заострю внимание на том, что всё, ниже изложенное касается стилей шаблона «Protostar» при положении переключателя «Тип контейнера» в положении «Резиновый» (горит красная кнопка). В этой статье рассмотрим, как поменять фон сайта, работающего на CMS Joomla с шаблоном «Protostar» с помощью админки, без изменений исходного кода шаблона и его стилей CSS.

Вкладка «Дополнительные параметры» стиля шаблона Protostar

Первым делом нужно открыть список стилей шаблонов в админке Joomla и выбрать стили шаблона Protostar.

Нас интересует вкладка «

Дополнительные параметры». Напомню, что положении переключателя «Тип контейнера» в должен быть в положении «Резиновый» (активна красная кнопка):

Вкладка «Дополнительные параметры» стиля шаблона Protostar

Значение по умолчанию поля «Цвет фона» параметров шаблона Protostar

Значение по умолчанию поля «Цвет фона» параметров шаблона Protostar автоматически выставлено #f4f6f7. Даже если его удалить, то после сохранения изменений, это значение автоматически восстановится.

С этим значение цвета фона шаблон сайта выглядит так:

Значение по умолчанию поля «Цвет фона» параметров шаблона Protostar

Изменение цвета фона фиксированного стиля шаблона «Protostar»

Поменяем значение цвета фона с помощью клавиатуры вписав код цвета или с помощью мышки инструментом пипетка, выбрав цвет из палитры, которая включается если кликнуть по квадратику в начале поля «Цвет фона».

После изменения значения цвета фона, чтобы увидеть изменения в шаблоне, нужно сохранить настройки с помощью одной из кнопок сохранения, расположенных в верхнем ряду кнопок управления «Менеджера шаблонов»:

Изменение цвета фона фиксированного стиля шаблона «Protostar»

Новый вид дизайна с изменённым цвета фона шаблона Protostar

После того, как изменения в настройках шаблона сохранены, нужно перезагрузить (или открыть) страницу сайта. Изменения в цвете шаблона очевидны:

Новый вид дизайна с изменённым цвета фона шаблона Protostar

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Помогите изменить цвет фона в шаблоне

Товарищи, помогите пожалуйста разобраться, надо поменять цвет фона в шаблоне, сейчас он сероватый вот тут можно посмотреть http://arthome.kiev.ua.preview.ihc.ru/ а надо сделать что бы был белый, никак не могу понять где его вписать вот код файла template_css.css
Заранее спасибо!

/*--------------------------------------------------------------
# Coolfoto - June 2009 (for Joomla 1.5)
# Copyright (C) 2007-2009 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website:
# Support:
---------------------------------------------------------------*/

/* universal set of reset styles
---------------------------------------------------------------*/
html,body,div,span,applet,object,iframe,caption,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,h2,h3,h4,h5,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,dl,dt,dd,ol,ul,li,fieldset,form,label,legend {vertical-align: baseline;font-size: 100%;outline: 0;padding: 0;margin: 0;border: 0;}
/* remember to define focus styles! */
:focus {outline: 0;}
body {background: white;line-height: 1;color: black;}
ol,ul {list-style: none;}
/* tables still need cellspacing="0" in the markup */
table{border-collapse: separate;border-spacing: 0;}
caption,th,td {font-weight: normal;}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before,blockquote:after,q:before,q:after {content: "";}
blockquote,q {quotes: "" "";}
/* ||| the end |||*/
/* ||| set of clearing floats |||*/
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
.clr {font-size : 1px;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clear {clear: both;}
/* End hide from IE-mac */
/* ------------------------ the end ----------------------------*/
html {
height:100%;
margin-bottom:1px;
border-bottom:1px solid #ffffff;
}
body {
margin:0;
padding:0;
font-size:12px;
font-family:Arial , Verdana, sans-serif;
line-height: 150%;
}
/* Basic link styles
---------------------------------------------------------------*/
a{
outline:none;
cursor:pointer;
}
a:link,
a:visited,
a:active{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
/* Basic image style
----------------------------------------------------------------*/
img{
border:none;
text-decoration:none;
}
/* Basic lists styles
----------------------------------------------------------------*/
ul{
padding:0 6px 6px 6px;
margin:0 12px;
}
ul ul{
padding-bottom:0px;
}
ul li{
padding-left:4px;
line-height:100%;
margin:5px 0;
}
ul li a{
text-decoration: none;
}
ol li{
line-height:170%;
}
dl#system-message dd ul li{
border: none !important;
}
/* Basic heading styles
-----------------------------------------------------------------*/
th {
padding:4px;
text-align:left;
}
h2 { font-size:200%; }
h3 { font-size:175%; }
h4 { font-size:150%; }
h5 { font-size:125%; }
h5 { font-size:115%; }
p, pre, blockquote, h2, h3, h4, h5, h5, h6{
margin:1em 0;
padding:0;
}
/* Basic form styles
-----------------------------------------------------------------*/
fieldset{
border:none;
padding:5px 0;
}
fieldset a{
font-weight:bold;
}
input, select, button{
font-size:11px;
font-weight:normal;
}
/* Basic HR-line style
-----------------------------------------------------------------*/
hr {
border-right: 0;
border-left: 0;
border-bottom: 0;
height: 1px;
}
/* Basic positioning classes
-----------------------------------------------------------------*/
.clearfix{ clear: both; }
.lf { float: left; }
.rf { float: right; }
/* Logo
------------------------------------------------------------*/
a#logo,
a#logo_styled {
float:left;
display:block;
margin-top: 11px;
}
a#logo_styled{
/*
Here you can change width or height of your logo
if you've disabled option "logo as image"
*/
width: 195px;
height: 43px;
}
/* Basic wrapper styles
-----------------------------------------------------------------*/
div#wrapper_header1{
overflow: hidden;
}
div#wrapper_header2{
overflow: hidden;
}
div#wrapper_header3{
overflow: hidden;
}
div#wrapper_main{
width:100%;
margin:0 auto;
padding-bottom:20px;
position:relative;
font:normal 12px Arial, Verdana, sans-serif; /* Basic font size: 12px, line-height: 15px */
}
/*menu*/
div#menu_center{
width: 980px;
margin:0 auto;
}
div#wrapper_menu{
width:100%;
height:79px;
display:block;
margin-bottom:-10px;
z-index:1000;
left:0;
position:absolute;
}
div#horiz-menu{
margin:13px -15px 0 0;
display:block;
float:right;
line-height: 79px;
font-weight: bold;
font-size: 11px;
}
div#horiz-menu ul.menu li.level1:first-child{
background:none;
}
div#wrapper_menu ul li:hover li,
div#wrapper_menu ul li:hover li a,
div#wrapper_menu ul li:hover li span{
height: 30px;
display:block;
line-height: 30px;
}
/*buttons*/
div#buttons{
width:auto;
float:left;
margin-top: 25px;
font-size: 10px;
}
span#login_btn,
span#register_btn{
padding-right:13px;
height:19px;
display:block;
float:left;
margin-left: 5px;
}
span#login_btn a,
span#register_btn a{
padding-left:13px;
display:block;
height:19px;
line-height:19px;
}

/*header*/
div#wrapper_header{
margin:0 auto;
width:980px;
padding:80px 0 20px 0;
}
div#header1{
float: left;
margin-top: 20px;
}
div#header2{
float: right;
margin-top: 20px;
}
div#header3{
float: left;
}
div#header4{
float: right;
}
div#header_modules1{
margin-top:20px;
}
div#header_modules2{
margin-top:25px;
}
div#breadcrumb{
height: 45px;
}
/*content*/
div#wrapper_content{
width:980px;
margin:0 auto 15px auto;
}
div#right{
float:right;
margin: 25px 0 0 10px;
}
div#left{
float:left;
margin: 25px 10px 0 0;
}
div#inset{
float:left;
margin: 25px 0 0 10px;
}
div#component{
float:left;
margin: 25px 0 0 0;
}
/*bottom*/
div#bottom_center{
margin: 0 auto;
padding-top:20px;
width: 980px;
overflow:hidden;
}
/*bottom bar*/
div#bottom_bar{
height:88px;
margin-bottom:-10px;
}
div#bottom_bar_center{
height:60px;
padding-top: 28px;
margin:0 auto;
width:980px;
}
div#social_icons{
float:right;
}
div#social_icons a{
float:right;
display:block;
width:32px;
height:32px;
margin-left:9px;
}
/*footer*/
div#wrapper_footer{
margin-top:10px;
min-height:38px;
}

/* set the width of user modules
-------------------------------------------------------------------*/

.us_width-20,
.us_width-25,
.us_width-33,
.us_width-50{
display:block;
float:left;
}
.us_width-20{ width:20%; }
.us_width-25{ width:25%; }
.us_width-33{ width:33%; }
.us_width-50{ width:50%; }
.us_width-100{ width:100%; }

/*
Suffixes
------------------------------
Available suffixes:
* _color
* _clear
* _menu
* _text
* _bg (only in wrapper_header)
*/
div.moduletable,
div.moduletable_clear,
div.moduletable_menu,
div.moduletable_text,
div.moduletable_color{
padding-bottom:10px;
}
div.moduletable h4,
div.moduletable_clear h4,
div.moduletable_menu h4,
div.moduletable_text h4,
div.moduletable_color h4{
margin:0 0 15px 10px;
height:45px;
width:auto;
line-height: 45px;
text-indent: 14px;
font-weight: normal;
font-size:14px;
}
div.moduletable .moduletable_content,
div.moduletable_clear .moduletable_content,
div.moduletable_menu .moduletable_content,
div.moduletable_text .moduletable_content,
div.moduletable_color .moduletable_content{
margin:0 0 0 10px;
font-size: 12px;
}
.us_width-100 .moduletable_content{
margin: 0!important;
}
div.us_width-20:first-child .moduletable_content,
div.us_width-25:first-child .moduletable_content,
div.us_width-33:first-child .moduletable_content,
div.us_width-50:first-child .moduletable_content,
div.us_width-100:first-child .moduletable_content,
div.module_wrap .moduletable_content,
div#left .moduletable_content,
div#right .moduletable_content,
div#inset .moduletable_content{
margin: 0;
}
div.us_width-20:first-child h4,
div.us_width-25:first-child h4,
div.us_width-33:first-child h4,
div.us_width-50:first-child h4,
div.us_width-100:first-child h4,
div.module_wrap h4,
div#left h4,
div#right h4,
div#inset h4{
margin: 0 0 15px 0;
}
div.moduletable_clear{
background: none;
border:0;
padding:0;
}

/* header */

div#wrapper_header div.moduletable h4,
div#wrapper_header div.moduletable_bg h4,
div#wrapper_header div.moduletable_clear h4,
div#wrapper_header div.moduletable_menu h4{
font-size: 16px;
font-weight: bold;
height: 24px;
line-height:24px;
margin: 0;
text-indent:0;
background:none;
}
div#wrapper_header div.moduletable .moduletable_content,
div#wrapper_header div.moduletable_bg .moduletable_content,
div#wrapper_header div.moduletable_clear .moduletable_content,
div#wrapper_header div.moduletable_menu .moduletable_content{
margin:10px 0 0 0;
background:none;
}
div#wrapper_header div.moduletable_bg .moduletable_content{
padding: 5px;
}
div#wrapper_header ul{
margin:0;
padding:0;
}
div#wrapper_header ul li{
line-height:22px;
padding-left: 30px;
}
div#wrapper_header ul.menu{
padding:0;
margin:0;
list-style-type:none;
}
div#wrapper_header ul.menu li,
div#wrapper_header ul.menu li a{
padding:0;
font-size:12px;
line-height: 24px;
background:none;
text-decoration:none;
}
div#wrapper_header ul.menu li:first-child{
border-top:none;
}
div#wrapper_header ul.menu li a{
border-top:none;
}
div#wrapper_header ul.menu li{
padding-left:26px;
}
div#wrapper_header ul.menu ul li{
padding-left: 20px;
}
div#wrapper_header ul.menu li:hover,
div#wrapper_header ul.menu li a:hover{
text-decoration:none;
}
/* wrapper content */
/* lists */
/* standard */
div#wrapper_bottom div.moduletable_content ul,
div#wrapper_content div.moduletable_content ul{
margin:0;
padding:0;
}
div#wrapper_content div.moduletable_content ul li{
margin:0;
padding:0;
min-height:38px;
line-height:38px;
padding-left:16px;
}
div#wrapper_bottom div.moduletable_content ul li:first-child,
div#wrapper_content div.moduletable_content ul li:first-child{
border-top:none;
}
/*bottom list*/
div#wrapper_bottom div.moduletable_content ul li{
margin:0;
padding:0;
min-height:38px;
line-height:38px;
padding-left:16px;
}
/*mainbody list*/
div#mainbody_wrapper ul li{
padding-left:16px;
}

/* Search module */

div.search {
width:auto;
float:left;
}
div.search input#mod_search_searchword{
width: 208px;
height: 21px;
font-size: 11px;
padding:6px 0 0 5px;
}

/* Restrictions
---------------------------------------------------------------*/

/* --- Header --- */
/*search module*/
div#wrapper_header div.search input#mod_search_searchword{
border:none;
display:block;
float:left;
width: 375px;
height:36px;
padding:10px 0 0 12px;
font-size:20px;
}
div#wrapper_header div.search input.button{
height:46px;
width:55px;
margin-left: 12px;
text-indent:-999em;
display:block;
float:left;
}

/* --- Bottom --- */

div#wrapper_bottom div.moduletable h4,
div#wrapper_bottom div.moduletable_text h4,
div#wrapper_bottom div.moduletable_clear h4,
div#wrapper_bottom div.moduletable_menu h4{
font-size: 14px;
font-weight: normal;
height: 24px;
line-height:24px;
text-indent:0;
background:none;
}

/* --- Bottom bar --- */
div#search_bottom{
float:left;
line-height:32px;
color:#999;
width:auto;
}
div#search_bottom .moduletable_content{
margin: 0;
}

/* --- Footer --- */

div#footer_menu{
float:left;
width: auto;
margin: 2px 0 0 -23px;
}
div#footer_menu ul li{
background:none;
display: inline;
padding:7px;
}
div#footer_center{
width: 980px;
margin: 0 auto;
padding-top: 12px;
font-size:11px;
min-height:26px;
}
div#stylearea,
div#informations{
float: right;
width: auto;
}
div#informations{
margin-right:20px;
}
/* System messages */
#system-message{
margin-top:25px;
}
#system-message dt.error{
display:none;
background-image:none!important;
padding:0!important;
}
#system-message dd{
font-weight:bold;
margin:0;
text-indent:30px;
background-image:none!important;
padding:0!important;
}
#system-message dd.error ul{
margin-bottom:0;
}
dl#system-message ul{
margin:0;
}
#system-message dd ul{
list-style-type:none;
margin-bottom:10px;
padding:10px;
}
/*joomla classes*/
h2.componentheading,
.componentheading{
line-height:45px;
margin-bottom:10px;
font-size:14px;
text-indent:14px;
font-weight:normal!important;
height:45px!important;
}

 

Изменение цвета фона в редакторе контента Joomla - adm-info.ru

Итак сегодня хочу поделиться одной проблемой. Это будет полезно тем, кто в целях экономии времени использует для создания шаблонов программу Artisteer.

Создавая шаблон в программе Artisteer, при использовании в качестве цвета background сайта тёмные цвета иногда возникает проблема редактирования сайта в визуальном редакторе контента в Joomla, т.к. в нём текст может оказаться таким же темным как и основной фон дизайна сайта. Данный цвет указывается в стиле тега BODY в файле template.css текущего шаблона или в edior.css или в editor_content.css в зависимости от настроек визуального редактора.

В большинстве визуальных редакторах в настройках плагина есть возможность указания специального файла стилей CSS по выбору пользователя.
Большинство современных визуальных редакторов для Joomla, в первую очередь, пытаются подключить файл из директории CSS текущего шаблона с именем editor_content.css или edior.css, а если он отсутствует, то основной CSS-файл шаблона template_css.css или template.css.
Поэтому, если в шаблоне сайта фон задан отличным от белого цветом и в редакторе данный цвет или рисунок background мешает, необходимо сделать следующее:

1. Выяснить в настройках плагина визуального редактора какой именно файл используется редактором;

2. Если визуальный редактор использует CSS файл template_css.css или template.css, необходимо изменить настройки плагина для подключения файла editor_content.css или edior.css в зависимости от типа визуального редактора название файла может меняться или создать свой собственный CSS файл и указать его как основной для подключения визуальным редактором;

3. В созданном CSS файле устанавливаем параметры тега BODY:

body{

margin:0px;

passing:0px;

background: #FFFFFF none;

4. После этого в визуальных редакторах фон станет белым, независимо от цвета фона страниц вашего шаблона.

Удачи!

на Ваш сайт.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *