위젯 제목에 라인 반영하기
관련링크
본문
안녕하세요
나리야빌더+심플A 스키을 사용하고 있습니다.
사진과 같이
위젯 라인제목 부분에
- 위아래 라인
- 그레이 색상 반영
- 위젯이 3개만 반영되면서 가로폭 넓게 반영
하려고 하는데요~
/www/theme/Simple-A/css 에 있는 theme.css 파일에서
190라인에 있는 h3.h3 { padding:0; margin:0; font-weight:bold; } 부분을 만져보고 공부하다가
잘안되서
border: 1px solid black; border-radius:50px; 를 덧붙여보니
라인이 아니라 사진2처럼 타원형이 반영 되었는데요
어떻게 수정해야 위에 3가지를 반영할 수 있을까요?
관련된 내용으로 계속 검색해봐도
생각보다 어렵네요~
답변 4
위아래 줄은 border-top:1px #AAAAAA solid;border-bottom:1px #AAAAAA solid;
회색 백그라운드는 background-color:#DDDDDD;
3등분(상위 object가 100%라는 가정하에)은 width:33%;
자세한 설명 너무 감사합니다.
알려주신 내용으로 수정을 해봤습니다.
상단과 하단에 라인이 바로 적용 되었습니다 (감사합니다)
다만 이상하게도
백그라운드 회색 반영과
3등분 (33%) 수정한 부분이 반영이 안되는 문제가 생겼습니다.
혹시 이 부분은 제가 어떤걸 잘못한건지 알 수 있을까요?
/********************************************************
■ Widget
********************************************************/
h3.h3 { padding:0; margin:0; font-weight:bold; border-top:1px #AAAAAA solid;border-bottom:1px #AAAAAA solid;}
hr.hr::before { width:33%; height:1px; content: ""; position:absolute; left:0; bottom:1px; line-height:1px; background-color:#DDDDDD; }
위젯 라인은 적용 되었습니다~
해당 페이지 링크를 줘보세요.
전체 구조가 어떻게 되어 있는지 모르는 상태에서는 절대 몰라요.
그리고 지금 그날이오면님의 질문은 질문이 아니라 그냥 만들어 달라는거예요.
역시 생각보다 엄청 복잡한 내용 이었네요 ㅠㅠ
해당 홈페이지 주소 링크는 https://allfire119.com/ 이고요
해당 파일 소스는 https://codepen.io/jjjn2283/pen/rNYWWRY 이긴합니다.
그냥 만들어 달라는 의미로 전달되었다면 초로보써 표현을 잘못한것 같습니다.
좀더 공부하면서 알아가 보겠습니다.
스킨을 반영하면 바로 적용이 될줄알았는데 라인을 붙이는 일에서만 며칠째 진도가 안나가니 상당히 어렵네요~
답변 감사합니다.
/* 위젯 타이틀 라인 숨기기 */
hr.hr { display:none; }
</style>
<div class="nt-container px-0 px-sm-4 px-xl-0 pt-4">
<div class="row na-row">
<!-- 메인 영역 -->
<div class="col-md-12 na-col">
<div class="row na-row">
<div class="col-lg-6 na-col">
요기를 아래처럼 바꾸면 3등분됩니다.
/* 위젯 타이틀 라인 숨기기 */
hr.hr { display:none; }
</style>
<div class="nt-container px-0 px-sm-4 px-xl-0 pt-4">
<div class="row na-row">
<!-- 메인 영역 -->
<div class="col-md-12 na-col">
<div class="row na-row">
<div class="col-lg-4 na-col">
<div class="col-lg-6 na-col"> 를 <div class="col-lg-4 na-col"> 로 바꾸면 됩니다.
