[FAQ] Шаблон форума, CSS и html, где что "ковырять"

[VeloLida]

Татьяна5
Я пока вот сюда на кривую ссылку установила: http://yustas.besaba.com/
Вроде сейчас ещё почитала форум, нашла про уголки что-то, удалила кое какую строчку в файле overall_header.html
В итоге два уголка которые наползали на фотку на скриншоте, они теперь исчезли. Но два уголка верхних с лева и права в шапке на той же картинке, как видите остались. Я бы их тоже убрать хочу, но не знаю как. (
Ну и вопрос с логотипом актуален, хочу сдвинуть его чуть левее, на уровне с картинкой шапки.
Спасибо если что за помощь вам!
Потом каогда всё разберусь-научусь, буду уже на домен правильный выкладывать и настраивать форум по человечески. Но пока ещё куча вопросов......( дай бог за зиму разберусь. )

[Пчелкин]

Ну Firebug. Англовская раскладка долго выуживается... ленивый я... сам себя ненавижу за это...

[VeloLida]

Так не пойдет... Лучше бы вы расписали что и где и как сделали

Так я ничего особо ещё не сделала. Стандартно взяла стиль prosilver и пытаюсь научиться всё в нём менять.
Вот тут на форуме была статья добавить собственной изображение в шапку: http://www.phpbbguru.net/kb/styling/pro ... ge-header/
Ну я и добавила. Ну и следом начала думать как теперь у этой шапки убрать уголки, но что бы они остались во всё остальном форуме. То есть убрать только из шапки. НУ и с логотипом вопрос. как его опустить ниже я просто нашла строку с логотипом в коде и поставила перед ней <br>
Но логотип вних сколько мне надо сдвинулся, но вот он не прижат к левому краю, а имеет некий зазор, а его мне не надо. Как убрать этот зазор, где куда залезть, что сделать. (

[Татьяна5]

два уголка верхних

Код: Выделить всё

<span class="corners-top"><span></span></span>

в том же файле (первое вхождение)

Ну и вопрос с логотипом актуален, хочу сдвинуть его чуть левее, на уровне с картинкой шапки

В классе .headerbar убрать padding: 0 5px;

Добавлено спустя 3 минуты 29 секунд:

НУ и с логотипом вопрос. как его опустить ниже

Можно в css добавить

Код: Выделить всё

#site-description img {
    margin-top: 50px;
}

50 - отступ сверху в пикселях

[VeloLida]

Татьяна5
Таня вы золото!!! У меня всё получилось. )) Скажите, я смогу время от времени в процессе продвижения оформления форума, спрашивать как и чего покрутить? Не сильно вам в напряг? Я обещаю сначала в поиске поискать готовый ответ, вдруг ранее обсуждалось, но с этим бывают проблемы, либо не нахожу, либо там люди как вы сильно прдвинуты и общаются сложным для меня языком, типа кидают две три фразы и человек который не знает что это, трудно понимает. Мне надо как для новичка, конкретно в какой фаил, под каким именем на сервере, в какой папке залезть... в какой строчке поменять. ) Вот вы объяснили и всё я поняла быстро.
Пока буду разукрашивать дальше, но уже попутно на перспективу задам ещё вопросик:
Я вот эту шапку вставила путём просто вставки фотки-картинки. А смогу ли я туда вставить не фотку картинку, а слайдер?
То есть как сделать сам слайдер я уже примерно научилась, заливала на сервер все нужные файлы и т.д. и т.п. в итоге у меня потом получался сам код слайдера, который нужно вставлять в нужное место на какой либо сайт и оно работало.
Ну так вот вопрос! Если я в это место, где на форуме вставлена просто картинка, а в данном случае это находится в файле colours.css, в строке

Код: Выделить всё

.headerbar {
	
	background-image: url("{T_THEME_PATH}/images/33757859a231.jpg");
	
}

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

[Татьяна5]

Или это так не сработает и надо как-то по другому?

Не так. Не путайте css и html. css - оформление, html - разметка страницы. В css фон тогда убрать вообще, в шаблоне добавить слайдер, а логотип поверх слайдера, скорей всего, придётся абсолютным позиционированием (position: absolute;) размещать

[VeloLida]

Татьяна5
Татьяна спасибо ещё раз за подсказки. Я тут продолжаю свои дилетантские опыты на экспериментальной конструкции форума и решила замарочиться и кое-что реализовать, если можете подсказать пошагово где ковырять и что поменять, буду благодарна!
Итак цель такая, я уже почитала ваш форум и сделала ширину своего тестового форума резиновую, но не на всю ширину страницы, а выставила что бы оно расширялось до определённого предела в процентах типа как тут на этом форуме сейчас.

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

Ну так вот я уже с горем пополам разобралась со слайдером, наверника накосячила с кодом, потому как не разбираюсь и вырезала-пилила его методом тыка, каждый раз проверяя что вышло... залила всё это на сервер и на тестовый форум в самый верх в файле overall_header.html сразу после первого увиденного <head> вставила код слайдера. Соответственно слайдер появился в самом верху форума на всю ширину браузера.
Код этого слайдера у меня получился вот такой ( кстати если вам не трудно, посмотрите и может я там в этом коде лишних строчек на оставляла, просто кромсала и вырезала его из плохо понятных мне примеров и делала всё на угад. Но не суть, оно работает.

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="http://prokat-lida.by/NIVO-SLIDER/css/nivo-slider.css" type="text/css" media="screen" />
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Nivo Slider Demo</title>
    <link rel="stylesheet" href="http://yustas.besaba.com/styles/prosilver/slayder/css/nivo-slider.css" type="text/css" media="screen" />
</head>
<body>
    <div id="wrapper">

        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                
		<img src="http://prokat-lida.by/IMAGE/velokatSLIDE1.jpg"  alt="" />
		<img src="http://prokat-lida.by/IMAGE/velokatSLIDE3.jpg"  alt="" />
		
                <img src="http://prokat-lida.by/IMAGE/velokatSLIDE2.jpg"  alt="" data-transition="sliceUpDownLeft" />
                

                
            </div>

        </div>

    </div>
    <script type="text/javascript" src="http://yustas.besaba.com/styles/prosilver/slayder/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://yustas.besaba.com/styles/prosilver/slayder/js/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</body>
</html>

В итоге что мне теперь надо. Нужно убрать вообще с форума картинку джипег, там где под логотипом. и вставить туда этот слайдер. В итоге должно получится шапка со слайдером. Ну и логотип должен оказаться поверх слайдера на своём месте потом.

1) Скажите в какой фаил от форума мне залезть?
2) Какие строчки убрать вообще, так как они уже не актуальны, типа фон шапки и видимо логотип. Где и как?
3) Ну и в конечном итоге между чем и чем, в какое именно место вставить тот самый код от моего слайдера, что бы он появился там в шапке?
4) И последнее как по новому потом вернуть картинку логотипа на место.

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

Помогите пожалуйста добрый человек! ) Всё это колдую тут пока: http://yustas.besaba.com
Само собой код слайдера с верху страницы который сейчас для примера воткнут я уберу потом. Можно для примера самому пробовать мышкой сужать окно браузера и видно что слайдер сам тоже сужается как надо, в этом вся и идея привязать его к резиновому шаблону.

[angst66]

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

Резиновый форум только в процентах

[VeloLida]

angst66
Мммм не очень поняла о чём вы хотели написать. Что резиновый форум в процентах? Он уже и так резиновый и как бы да, в процентах и что с того. Вопрос и тема же вообще сильно о другом. ) Про то как вставить код слайдера в шапку вместо той картинки что сейчас там стоит. Если вы о чём то о другом о не моём вопросе, то извиняюсь. )

[ВладимирТ]

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

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

Вот я делал, что Вы хотите, на одном из своих форумов: http://vborovsk.ru/index.php (у слайдера длинная задержка смены изображений)

[VeloLida]

ВладимирТ
Ну что-то вроде того, только показать показали, а рассказать не рассказали. ))
У меня-то вопрос простой. Слайдер уже есть и я же его вон сверху форума уже воткнула, ради примера. http://yustas.besaba.com
Если мышкой окно-браузер сдвигать-уменьшать, имитируя уменьшения разрешение экрана, то и слайдер уменьшается. Пускай бы он был внутри в шапке всегда отцентрованный так сказать.
Вопрос как мне этот код который я для примера воткнула в верх форума, воткнуть именно туда где фотка-шапка сейчас находится. Не на всю ширину браузера, а именно туда в шапку внутрь. Если знаете, то подскажите пожалуйста куда зайти, что удалить и что вписать.

[ВладимирТ]

Не на всю ширину браузера, а именно туда в шапку внутрь.

Вот когда он попадет в шапку, тогда чудеса и начнутся

Рассказать просто так на память трудно, поскольку делал несколько месяцев назад, отложилось только одно, крови он выпил много, пока не вписался как надо.
Что сделать проще всего, открыть в браузере код моей страницы и просто повторить то же самое. Что дальше будет не понятно, то подскажу, заодно повторить CSS и пропорции изображений.
А можете еще один мой сайт посмотреть, ссылка под моей аватарой, там столько металлолома слайдеров, ставьте любой по аналогии

[Пчелкин]

и каким-то образом вставить туда слайдер

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

[ВладимирТ]

А просто нормальной картинки с залитым фоном под края этой картинки мало?

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

[Пчелкин]

Есть и такое - Изменение Хедера (шапки форума)