Адаптация шаблонов к Альто версии 1.1 — пошаговая инструкция

Эту статью подготовил Андрей (aka andreyv), поэтому все лучи добра за нее — ему.

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

В качестве примера взят шаблон Start-kit для версии 1.0 и на каждом шаге в него вносятся изменения, связанные с тем или иным функционалом движка. И при этом Андрей не просто описывает, какие правки вносятся и почему, но еще и демонстрирует их, фиксируя каждый этап в отдельном гит-репозитории:
https://github.com/andrey-v/start-kit-old/commits

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

В общем, на мой взгляд, отличная работа и прекрасное пособие для тех, кто занимается версткой под Альто.

Заголовки кликабельны и ведут на соответствующие этапы репоизитория

Читать дальше →

Переезд с Альто 1.0.х на версию 1.1.х и адаптация шаблонов (минимальный вариант)


Я обещал написать статью о переезде с Альто 1.0 на версию 1.1. Но долго с этим тянул, т.к. ломал голову, как максимально упростить этот процесс. Собственно, в этом переезде есть две особенности:

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

2) Изменился механизм загрузки изображений и добавился функционал, который повлек за собой изменения в шаблонах. Поэтому, если вы используете какие-то свои шаблоны или старые шаблоны от LS, то для корректной их работы потребуется их адаптировать.

Читать дальше →

Как изменить внешний вид кнопки загрузки фото

нужно изменить внешний вид кнопки загрузки фото http://www.imageup.ru/img286/1923320/knopka.png.html сделав вместо блока 1 (на рисунке) кнопку вида 2

UPDATE
в общем рано я радовался. внешний вид кнопки я переделал, но не меняется цвет текста, размер и шрифт.
что я понял:
сама кнопка формируется динамически в ../lib/external/swfupload.js

// Private: getFlashHTML generates the object tag needed to embed the flash in to the document
SWFUpload.prototype.getFlashHTML = function () {
	// Flash Satay object syntax: http://www.alistapart.com/articles/flashsatay
	return ['<object id="', this.movieName, '" type="application/x-shockwave-flash" data="', this.settings.flash_url, '" width="', this.settings.button_width, '" height="', this.settings.button_height, '" class="swfupload"><param name="wmode" value="opaque"></param>',
				'',
				'<param name="movie" value="', this.settings.flash_url, '"></param>',
				'<param name="quality" value="high"></param>',
				'<param name="menu" value="false"></param>',
				'<param name="allowScriptAccess" value="always"></param>',
				'<param name="flashvars" value="' + this.getFlashVars() + '"></param>',
				'</object>'].join("");
};


поэтому если написать для нее class=«swfupload» в button.css то внешний вид поменяется.

текст кнопки задается в main.js вот здесь


			// Button Settings
			button_placeholder_id : "start-upload",
			button_width: 122,
			button_height: 30,
			button_text : '<span class="swfupload-text">'+ls.lang.get('topic_photoset_upload_choose')+'</span>',
			button_text_style : '.swfupload-text { color: #fff; font-size: 14px; }',
			button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
			button_text_left_padding: 6,
			button_text_top_padding: 3,
			button_cursor: SWFUpload.CURSOR.HAND,


как видно текст обернут в span, а так же есть параметр button_text_style в который нужно прописать стиль для span. однако почему то не работает. я пробовал убирать span вообще и прописывать стили текста в класс swfupload но результата тоже нет. если кто то сможет поделиться решением пробемы буду очень благодарен

1 изображение

Показать ещё фото 

Кастомизация шаблона Start Kit

Приветствую, уважаемое сообщество!

Давно слежу за развитием проекта, дождался выхода релиза и вот взялся его пощупать руками. Решил начать с пробы возможного перевода с WP на Alto небольшого сайта-визитки, принадлежащего знакомому, но не все пошло как хотелось бы — столкнулся с трудностями .

Читать дальше →

Работа с css- и js-файлами - дополнительные возможности для разработчиков шаблонов и плагинов

В продолжении к статье Файлы js и css, а также прочие asset'ы – тонкости и нюансы работы с ними в Альто хочу рассказать о некоторых дополнительных возможностях по работе с css- и js-файлами, которые будут полезны тем, кто разрабатывает собственные шаблоны и плагины для Alto CMS.

Читать дальше →

Список страниц для разработки дизайна типового скина

Решил составить список страниц, которые необходимо разработать при создании нового дизайна для движка. Перечень получился, доложу я вам, неслабый, аж сам удивился. Делал я этот список не с нуля, когда-то давно LeX подобный списочек выкладывал. И я, опираясь на него, подготовил свой, с учетом всех изменений и дополнений, прошедших с того времени, ну и с учетом своего опыта, конечно.

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

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

Читать дальше →

Модальные окна – общаемся с пользователем красиво (часть 2)

В первой части я рассказал про «шаблонные» модальные окна. Т.е. такие, для которых создаются отдельные файлы-шаблоны. И сложность и навороченность этих окон может быть безграничной.

Но нередко для общения с пользователем нужны совсем простые диалоговые окна – просто вывести какое-то сообщение с единственной кнопкой «Ок», которое он не сможет не заметить, или запросить у него подтверждение какого-либо действия.

Часто на сайтах для таких целей используют системные функции alert(), confirm() и prompt(). Примерно вот так:
<a href="site.com/delete/all/" onclick="return confirm('Вы уверены?');">Удалить все!</a>

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

Читать дальше →

Модальные окна – общаемся с пользователем красиво (часть 1)

Статья рассчитана на тех, кто знает, что такое «модальные окна» и зачем они нужны, и занимается разработкой шаблонов или просто проектирует интерфейс и придумывает дизайн для сайта на Alto CMS.

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

Читать дальше →

Типовая структура шаблонов для Alto CMS

Эта статья написана в продолжение статьи Базовый скин (шаблон) для Alto CMS, рассчитана на тех, кто проектирует и верстает шаблоны для Alto CMS.

Работа над скином start-kit движется, и уже забрезжил на горизонте финальный огонек. Что сделано за это время:
1) Более-менее «устаканилась» структура папок и именование файлов (об этом и пойдет, в основном, речь в этой статье).
2) Удалось избавится от множества лишних файлов и js-скриптов.
3) Чуть больше стало настроек самого скина: верхний баннер стал виджетом, логотип и главное меню можно менять в настройках, не трогая шаблоны.

Кого интересует то, что в итоге получается, скин можно скачать здесь. Кому интересны детали, ход разработки и/или если есть желание обсудить, тех прошу под кат.

Читать дальше →