# 142: Обликовање модула форума - ЦСС-трикови

Anonim

Дуж десне стране форума налази се низ модула. „Модули“ визуелно, „Модули“ дословно у коду и „Модули“ по томе што је садржај који они чине сродна група, одвојена / различита од садржаја у другим модулима.

Први који погледамо је модул Категорије. Ванилла Форум их дословно ставља у директоријум назван „модули“, што је лепо. Овај, као што претпостављате, је „цатегориес.пхп“.

Налазимо место на којем се наслов објављује, дајемо му класу и започињемо са обликовањем. Само додајемо малу доњу маргину како је прикладно за овај наслов, али не сваку

тамо.

Затим пређите на обликовање самог контејнера. Модули обично имају назив класе „Кутија“ унутар Ванилла форума. Наш модул ХТМЛ класе је „модул“. Могли бисмо започети борбу проналажења сваког појединог модула у ванили и додавања сопствене наставе. Неких дана се борим с тим изазовом, а понекад кажем „Радите паметније, а не више.“ Данас ћемо радити паметније. У Сасс-у ћемо направити селектор резерви, који има стилове модула, али без поновног креирања наше постојеће .moduleкласе.

%fake-module ( background: white; padding: $padding; clear: both; box-shadow: 0 0 5px rgba(black, 0.2); margin: 0 0 $padding 0; position: relative; )

Бирачи резервираних места уопште не издају ниједан ЦСС. Али они могу бити @extend-ед. Тако сада можемо само да направимо да све кутије у стилу ваниле имају наш модул.

.Box ( @extend %fake-module; )

Сазнајемо да whiteSmokeје то сјајна боја.

У ознаци коју нам Ванилла даје за листу категорија, она нам даје „активну“ класу, тако да можемо мало променити стил и учинити очигледним у којој је категорији корисник (будући да је овај модул на пуно страница, почетних страница и странице са категоријама).

Наилазимо на ситницу у којој коришћење - $ променљива није функционисало како треба, уместо тога морали смо да урадимо - # ($ променљива). Само једна од оних ствари о Сасс или Руби или било чему другом.

Отприлике у 10:30 објашњавам теорију како функционишу ЦСС троуглови. Размишљамо о коришћењу троугла са леве стране активне класе, како то одликују наши жичани оквири.

Завршавамо постављањем броја нити удесно да бисмо корисницима дали осећај колика је категорија.