2024-10-27

Blog, 블로그 게시물과 사이드바 사이에 경계선을 만드는 코드

 

블로그 게시물과 사이드바 사이에 경계선을 만드는 코드


 

아래 그림의 화살표처럼 경계선을 나타냅니다.

 

 

 

삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다.

게시물 사이드바  "오른쪽 "인 경우

 .fauxcolumn-right-outer .fauxcolumn-inner {  
   border-left: 2px solid #999999!important;  
 }  


'px'로 선의 굵기를 조정할 수 있습니다.


'#999999'라고 적혀있는 부분엔 자신이 원하는 색상의 코드를 적어줍니다.


 

 

사이드바가 왼쪽에 있는 경우엔 아래의 코드를 삽입해줍니다.

게시물 사이드바  "왼쪽 "인 경우

 .fauxcolumn-left-outer .fauxcolumn-inner {  
   border-right: 2px solid #999999!important;  
 }  


.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

.main-inner .column-left-inner {
    margin-right: $(content.padding);  
}

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
  margin-right: $(content.padding);
  border-right: 0px solid #999999!important;  
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

.main-inner .column-left-inner {
  margin-left: -30px;
  margin-top: -13px;  
}
.main-inner .column-right-inner {

}

/* Posts
----------------------------------------------- */
h3.post-title {
  margin-top: 20px;
}

h3.post-title a {
  font: $(post.title.font);

댓글 없음:

댓글 쓰기

Copyright 2024 - . | Jessica | All Rights Reserved.