Jump to content
zoter21

Стили уведомлений

Recommended Posts

Мужики помогите, как нормально стилизовать то что на скрине, тоесть чтобы уведомление ровно справо выводилось? не могу найти не в js не понимаю не style.css там только хеадм посик, но это другая история)) помогите пожалуйста)

post-215-0-67740700-1435491113_thumb.jpg

Share this post


Link to post
Share on other sites

Мужики помогите, как нормально стилизовать то что на скрине, тоесть чтобы уведомление ровно справо выводилось? не могу найти не в js не понимаю не style.css там только хеадм посик, но это другая история)) помогите пожалуйста)

Тут без css никак. Покажу опять на примере моей моб. версии:

            <div class="sidebar_menu">
                <div class="menu_feed">
                    <a href="/news{news-link}" onClick="Page.Go(this.href); return false" id="news_link">
                        <div class="menu_1"><p>Новости</p><div id="new_news">{new-news}</div></div>
                    </a>
                </div>
                <div class="menu_feed">
                    <a href="/news/notifications" onClick="Page.Go(this.href); return false">
                        <div class="menu_2"><p>Ответы</p></div>
                    </a>
                </div>
                <div class="menu_feed">
                    <a href="/messages" onClick="Page.Go(this.href); return false">
                        <div class="menu_3"><p>Сообщения</p><div id="new_msg">{msg}</div></div>
                    </a>
                </div>

....
              
            </div>

Предположим это меню из main.tpl, где: <div id="new_news">{new-news}</div>, <div id="new_msg">{msg}</div>, <div id="new_requests">{demands}</div>, <div id="new_groups">{new_groups}</div>, <div id="new_photos">{new_photos}</div>, <div id="new_support">{new-support}</div> - это как-раз наши выводы этих уведомлений. Сам источник это index.php (в корне), не долго "рывшись" можно обнаружить вывод этих самых выводов, покажу на одном из них:

<div class=\"headm_newac\" style=\"margin-left:18px\">{$CacheNews}</div>

Вот тебе и весь {new-news}. А дальше дело за css и тем самым .headm_newac

.headm_newac{float:right;background:#7a7e87;margin-top:9px;margin-right:10px;padding:3px 10px;border-radius:10px;font-size:11px;color:#fff;}

Я думаю ничего сложного, немного логики и знаний css и можно с позиционировать все элементы. Как? Все просто, достаточно создать класс с фиксированной шириной (.menu_feed) и запихать в него ссылку с картинкой в одну сторону (.menu_1) и вот это уведомление в другую ({new-news}), вот и всё по сути... В голове провернуть сложно, по этому ксс верхнего меню предоставлю:

.sidebar_menu{width:100%;height:420px;margin-top:15px;border-bottom:solid 1px #1c2127;border-top:solid 1px #373c42;}
.menu_feed{width:280px;height:40px;border-top:solid 1px #1c2127;border-bottom:solid 1px #373c42;}
.menu_feed a {width:280px;height:40px;text-decoration:none;}
.menu_1 p,.menu_2 p,.menu_3 p,.menu_4 p,.menu_5 p,.menu_6 p,.menu_7 p,.menu_8 p,.menu_9 p,.menu_10 p {font-size:15px;margin-left:40px;margin-top:10px;
position:absolute;}
.menu_1 {width:280px;height:40px;background:#252932;background-image:url("../images/menu/1.png");background-position: left center;
background-repeat:no-repeat;color:#9fa3ac;}

Итог:

4688da612d.png

  • Upvote 1

Share this post


Link to post
Share on other sites

Иосиф Сталин все верно сказал, посмотри какой класс стоит у тебя на выводе "+1" и подкоректируй стили, так же не забудь что там +1 , +2, +3 . . . +n количество, что бы когда было +10, +11 . . . +nn было ровно. Ну я думаю ты меня понял.

Share this post


Link to post
Share on other sites

Иосиф Сталин все верно сказал, посмотри какой класс стоит у тебя на выводе "+1" и подкоректируй стили, так же не забудь что там +1 , +2, +3 . . . +n количество, что бы когда было +10, +11 . . . +nn было ровно. Ну я думаю ты меня понял.

Если не задаст ширину на этот класс, а только padding к примеру (как указано на примере выше), то, по сути количество n будет не важно, ибо будет авторасширение класса, хоть 10-n, хоть 100...

2d5e5b97dd.png4dcd89d9f1.png692f814b75.png

 

Share this post


Link to post
Share on other sites

нифига не понял это во - 1,а во-2 меню то devisa, но баганое сори... при каждом переходе выдает ошибку в логах))) хз почему, и сразу скажу, тому кто на лицензии 2.0 объяснит все подробно кину 50 рубчиков, а если уж очень подробно сотку (только вебмани)

Share this post


Link to post
Share on other sites

нифига не понял это во - 1,а во-2 меню то devisa, но баганое сори... при каждом переходе выдает ошибку в логах))) хз почему, и сразу скажу, тому кто на лицензии 2.0 объяснит все подробно кину 50 рубчиков, а если уж очень подробно сотку (только вебмани)

 

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

Share this post


Link to post
Share on other sites

 

нифига не понял это во - 1,а во-2 меню то devisa, но баганое сори... при каждом переходе выдает ошибку в логах))) хз почему, и сразу скажу, тому кто на лицензии 2.0 объяснит все подробно кину 50 рубчиков, а если уж очень подробно сотку (только вебмани)

 

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

 

дк а что не посказать по русски на примере какой стиль сделать и куда вписать?

Share this post


Link to post
Share on other sites

 

 

нифига не понял это во - 1,а во-2 меню то devisa, но баганое сори... при каждом переходе выдает ошибку в логах))) хз почему, и сразу скажу, тому кто на лицензии 2.0 объяснит все подробно кину 50 рубчиков, а если уж очень подробно сотку (только вебмани)

 

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

 

дк а что не посказать по русски на примере какой стиль сделать и куда вписать?

 

Если так подсказывать, то, какой толк? Дело будет, когда ты сам поймёшь что нужно сделать, какой стиль и куда добавить. А если так спрашивать, то, за одним таким вопросом последует следующий и следующий...

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×