- 0
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо.
-
Question
morohon
Здравствуйте, уважаемые форумчане. Кто может помочь увеличить размер цифр вот в этих часах:
http://www.morohon.pusku.com/new_panel/clock/
Нужно чтобы они были во весь размер фона. Если не трудно, пожалуйста, помогите...
Вот код часов:
<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <style type="text/css"> #clock{ width:500px; border-radius: 6px; } #clock .display{ text-align: center; padding: 50px 10px 10px; border-radius:6px; position:absolute; height: 110px; width:500px; } /*------------------------- Light color theme --------------------------*/ #clock.light{ background-color:#ffffffs; color:#272e38; } #clock.light:after{ box-shadow:0 4px 10px rgba(0,0,0,0.15); } #clock.light .digits div span{ background-color:#272e38; border-color:#272e38; } #clock.light .digits div.dots:before, #clock.light .digits div.dots:after{ background-color:#272e38; } #clock.light .display{ background-color:#dddddd; box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa; } /*------------------------- Dark color theme --------------------------*/ #clock.dark{ background-color:#272e38; color:#cacaca; } #clock.dark:after{ box-shadow:0 4px 10px rgba(0,0,0,0.3); } #clock.dark .digits div span{ background-color:#cacaca; border-color:#cacaca; } #clock.dark .alarm{ background:url('../img/alarm_dark.jpg'); } #clock.dark .display{ background-color:#0f1620; box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642; } #clock.dark .digits div.dots:before, #clock.dark .digits div.dots:after{ background-color:#cacaca; } /*------------------------- The Digits --------------------------*/ #clock .digits div{ text-align:left; position:relative; width: 28px; height:50px; display:inline-block; margin:0 4px; } #clock .digits div span{ opacity:0; position:absolute; -webkit-transition:0.25s; -moz-transition:0.25s; transition:0.25s; } #clock .digits div span:before, #clock .digits div span:after{ content:''; position:absolute; width:0; height:0; border:5px solid transparent; } #clock .digits .d1{ height:5px;width:16px;top:0;left:6px;} #clock .digits .d1:before{ border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;} #clock .digits .d1:after{ border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;} #clock .digits .d2{ height:5px;width:16px;top:24px;left:6px;} #clock .digits .d2:before{ border-width:3px 4px 2px;border-right-color:inherit;left:-8px;} #clock .digits .d2:after{ border-width:3px 4px 2px;border-left-color:inherit;right:-8px;} #clock .digits .d3{ height:5px;width:16px;top:48px;left:6px;} #clock .digits .d3:before{ border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;} #clock .digits .d3:after{ border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;} #clock .digits .d4{ width:5px;height:14px;top:7px;left:0;} #clock .digits .d4:before{ border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;} #clock .digits .d4:after{ border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;} #clock .digits .d5{ width:5px;height:14px;top:7px;right:0;} #clock .digits .d5:before{ border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;} #clock .digits .d5:after{ border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;} #clock .digits .d6{ width:5px;height:14px;top:32px;left:0;} #clock .digits .d6:before{ border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;} #clock .digits .d6:after{ border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;} #clock .digits .d7{ width:5px;height:14px;top:32px;right:0;} #clock .digits .d7:before{ border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;} #clock .digits .d7:after{ border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;} /* 1 */ #clock .digits div.one .d5, #clock .digits div.one .d7{ opacity:1; } /* 2 */ #clock .digits div.two .d1, #clock .digits div.two .d5, #clock .digits div.two .d2, #clock .digits div.two .d6, #clock .digits div.two .d3{ opacity:1; } /* 3 */ #clock .digits div.three .d1, #clock .digits div.three .d5, #clock .digits div.three .d2, #clock .digits div.three .d7, #clock .digits div.three .d3{ opacity:1; } /* 4 */ #clock .digits div.four .d5, #clock .digits div.four .d2, #clock .digits div.four .d4, #clock .digits div.four .d7{ opacity:1; } /* 5 */ #clock .digits div.five .d1, #clock .digits div.five .d2, #clock .digits div.five .d4, #clock .digits div.five .d3, #clock .digits div.five .d7{ opacity:1; } /* 6 */ #clock .digits div.six .d1, #clock .digits div.six .d2, #clock .digits div.six .d4, #clock .digits div.six .d3, #clock .digits div.six .d6, #clock .digits div.six .d7{ opacity:1; } /* 7 */ #clock .digits div.seven .d1, #clock .digits div.seven .d5, #clock .digits div.seven .d7{ opacity:1; } /* 8 */ #clock .digits div.eight .d1, #clock .digits div.eight .d2, #clock .digits div.eight .d3, #clock .digits div.eight .d4, #clock .digits div.eight .d5, #clock .digits div.eight .d6, #clock .digits div.eight .d7{ opacity:1; } /* 9 */ #clock .digits div.nine .d1, #clock .digits div.nine .d2, #clock .digits div.nine .d3, #clock .digits div.nine .d4, #clock .digits div.nine .d5, #clock .digits div.nine .d7{ opacity:1; } /* 0 */ #clock .digits div.zero .d1, #clock .digits div.zero .d3, #clock .digits div.zero .d4, #clock .digits div.zero .d5, #clock .digits div.zero .d6, #clock .digits div.zero .d7{ opacity:1; } /* The dots */ #clock .digits div.dots{ width:5px; } #clock .digits div.dots:before, #clock .digits div.dots:after{ width:5px; height:5px; content:''; position:absolute; left:0; top:14px; } #clock .digits div.dots:after{ top:34px; } </style> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script> <script src="assets/js/script.js"></script> </head> <body> <div id="clock" class="light"> <div class="display" > <div class="digits"></div> </div> </div> </body></html>Edited by morohonLink to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.