다모앙 스타일 변경 CSS ver05
오또브레

Lv.1 오또브레 (203.♡.182.239)

2024년 5월 4일 PM 04:05 · 수정됨(19:42)

조회 850 공감 0


일주일 간 다모앙이 많이 바뀌어서 버전 4 스타일은 깨지는 부분이 많아서 수정하였습니다.

우측상단의 회원박스 부분은 변화가 많아 배경색 및 순서변경은 제외하였습니다.


게시판에서 

광고, 게시판명, 게시글, 검색, 페이지 순으로 처음부터 의도하였으나, 여러가지 문제가 발생하여

광고, 게시판명, 검색, 게시글, 페이지 순으로 오리지널과 광고, 게시판명만 순서를 바꾸었습니다.


그러면서 알게 된 것이 있는데,

소모임, 커뮤니티 목록있는 2개의 페이지에만 헤드 배너 광고가 없습니다. 

그런 이유로 게시판명이 2개의 페이지에서만 문제가 발생합니다.

광고가 붙으면 문제는 해결될 것 같고요....


이번 버전에는 모바일 스타일을 따로 분리하였습니다.

게시판 목록 내리다보면, 우측메뉴가 하단에 붙어 매우 긴데, 그냥 날려버렸습니다.

메뉴를 사용하고자 하는 분은 상단 헤더의 메뉴를 이용해야합니다.


그리고,

간혹 다크모드에서 어두운 색 글자로 보이는 글들이 있어서

강제로 글자를 밝게 보이도록 수정하였습니다.


* Stylebot과 같은 커스텀 css를 적용할 수 있는 플러그인에서만, 그리고 다크모드에서만 작동합니다.


--------------------------------------------------------------------------

.bg-body {background-color: rgb(17 17 17) !important;}
.site-footer-wrap .mb-4 {display:none;}
footer.site-footer-wrap.bg-body-tertiary.py-4 {padding: 0.5rem 0 !important;}
.site-footer-wrap .py-4 {padding-top: 0.5rem !important;padding-bottom: 0.5rem !important;}
.site-footer-wrap .lh-lg {line-height: 1.5 !important;}
.site-footer-wrap .mb-3 {margin-bottom: 0rem !important;}
li.list-group-item:nth-child(even) {background-color:#181b1c;}
.mb-4 p span {color: #fff !important;}

@media (min-width: 992px) {
#sidebar-site-menu .nav-item {padding: 10px 0 0 0 !important;border-bottom: 1px dotted #373737;border-radius: 0;}
.nav-item i.bi-clipboard.nav-icon {display: none;}
.sticky-top .row.gx-2 {margin-top: 20px;}
.my-2 span.small {display: none;}
.nav-item.nav-link {margin: -20px 0 0 63px !important;border-bottom: none !important;}
.bo_list_wrap.px-3.py-2.border-top {position: absolute !important;bottom: -26px;left: auto;right: auto;}
ul.pagination.pagination-sm.justify-content-center {margin-top: 56px !important;}
.page-title.p-3.pt-4.mb-3 {position: absolute !important;top: 198px !important;padding: 20px !important;background: #052950 !important;width: 869px !important; margin: 20px 0 0 0 !important;}
.d-flex.gap-2.align-items-center.px-3.mb-2 {margin-top:100px;}
.alert.alert-light.mb-4.mx-3.mx-sm-0 {padding: 0;margin-bottom: 70px !important;}
.bg-body-secondary {--bs-bg-opacity: 1 !important;background-color: rgb(31 74 120) !important;}
article#bo_v {background: #212529;margin-top: 86px;}
.rounded-circle {border-radius: 10% !important;}
.lh-base {line-height: 3.5 !important;}
.my-2 {margin-top: 0 rem !important;margin-bottom: 0.5rem !important;}
a.sv_member.ellipsis-1 {margin-top: -20px;}
div#bo_list_wrap {margin-top: 37px;}
}
@media (max-width: 992px) {
.order-2.col-md-4 {width: 100% !important;display: none;}
.site-footer-wrap .mb-3 {font-size: 0.8rem;}
.na-menu .nav-item {padding: 10px 0 0 0 !important;border-bottom: 1px dotted #373737;border-radius: 0; }
.na-menu .nav-icon {display:none;}
.page-title {background: #1c3d5e;}
}




댓글 (4)

  • L

    loveMom Lv.1

    24.05.04 · 211.♡.206.115

    {emo:damoang-emo-007.gif:50}
  • Jaekky

    Jaekky Lv.1

    24.05.04 · 106.♡.197.245

    오옷...감사합니다. 이것도 적용하러...슝~~
    {emo:damoang-emo-008.gif:50}
  • Jaekky

    Jaekky Lv.1

    24.05.04 · 106.♡.197.245

    오또브레님...적용해보니 깔끔합니다. 특히 푸터가 정리된것 같아 보기 너무 좋네요.
    [https://s3.damoang.net/data/editor/2405/comment_1785054709_TAwIrkfm_38acf7956af6a6a3b3da77efdb44456b7b653a63.jpg]
  • 오또브레

    오또브레 Lv.1 → Jaekky 작성자

    24.05.04 · 118.♡.4.182

    {emo:onion-002.gif:50}{emo:damoang-emo-011.gif:50}

댓글을 작성하려면 이 필요합니다.