반응형

2024/07 15

[오딧세이스킨] 홈 리스트의 카테고리 글자 및 배경색 변경

글 리스트의 title, summary, thumbnail의 크기를 변경하였더니 카테고리의 글자가 작고 배경색이 같아 카테고리 표시가 잘 보이질 않습니다. 그래서 글자의 크기보다는 배경색등을 넣어 표시나게 하도록 하겠습니다. [목차] 오딧세이 스킨 리스트의 카테고리 글자 및 배경색 수정하기 1. CSS코드  배경색 수정.area-cover-thumbnail .box-cover-title { height: 50px; margin-left: -10px; margin-right: -10px; background-color: #697c8b; margin-bottom: 28px;}높이를 50px로 설정했으며좌우 공백이 있어 꽉채우기 위해 -10px의 margin을 주었습니다.배경색은 #697c8b로..

지식창고 2024.07.29

[오딧세이스킨] 탑메뉴에 현재위치 표시

탑메뉴에 현재의 위치를 표시하려고 합니다. 오딧세이스킨을 사용하고 있으며, 블로그관리의 메뉴를 사용하고 있습니다. 메뉴명과 카테고리명이 같습니다. [목차] 오딧세이스킨의 탑네비메뉴에 현재위치 표시하기1. CSS코드 수정(PC)이것저것 손대서 이제 라인번호가 맞는지도 모르겠습니다. .header .tt_category .category_list>li:hover>a:after,.header .topnavmenu>ul>li:hover>a:after,.header .topnavmenu>ul>li>a.active:after { content: ''; position: absolute; top: 16px; left: 0; bottom: -1px; width: 100%; heig..

지식창고 2024.07.28

[오딧세이스킨] 목록 수정하기

티스토리 오딧세이 스킨을 사용중이며, 너무 작아 가독서이 떨어지는 듯하여 리스트의 제목과, 요약, 썸네일 등을 수정하여 좀 더 보기 편하게 해보겠습니다. [목차] 오딧세이스킨 목록 수정하기 1. 아래공백, 라인삽입.article-type-common { width: 100%; padding-bottom: 20px; border-bottom: 1px solid #efefef; }아래 공백을 20px를 주고 1px의 선을 주어 아래리스트와 구분하도록 했습니다. 2. 제목 title 크기변경.article-type- .title,.article-type-thumbnail .title { margin-bottom: 5px; font-size: 1.25em; color:#07d; font-weigh..

지식창고 2024.07.28

[오딧세이스킨] 본문폭 넓히기

2단으로 사용하다보니 본문 폭이 너무 작습니다. 참고 블로그는 티스토리의 블로그관리와 비슷하게 만들고 있습니다. 그래서 티스토리의 블로그와 같은 본문 폭을 바꾸어 봅니다.[목차]오딧세이스킨 본문폭 넓히기1. 전체 CSS 수정오딧세이는 가로 max 1020px로 되어 있습니다. 그러는 반면에 티스토리의 블로그관리 페이지는 1150px로 되어 있습니다.css에서 ctrl + f 키로 1020px를 1150px로 바꾸면 됩니다.총8개 뜹니다. 2. 2단사용 본문 CSS수정area-main 입니다. 700px로 되어 있습니다.왼쪽은 max-width: 800px 로 수정하였습니다.오른쪽 사이드는 310px로 수정하였습니다.총 가로가 1150이므로왼쪽 본문의 area-main은 800px, 오른쪽 310px로 사..

지식창고 2024.07.28

[오딧세이스킨] 상위 이미지 없애기

오딧세이 스킨은 글보기에서 아래처럼 자동으로 탑메뉴아래 이미지와 제목, 날짜 등이 들어가는 000d이 있습니다. 이미지가 확대되고, 자리를 너무많이 차지하여 이미지를 없애고 제목과 카테고리를 다르게 해보겠습니다.[목차] 오딧세이 스킨 글보기의 상위 이미지 없애는 방법 1. 상위이미지 CSS글보긱의 CSS는 "area-view"로 정의 되어 있습니다. 이중에서 상위 썸네일과 제목 부분에 해당하는 부분은 "article-header"입니다.2740번줄에 있네요. (전에 수정한 부분이 있어서 정확하지는 않습니다.)article-header : 썸네일 이미지 들어가는 자리article-header:before : 썸네일 이미지 어둡게 하는 자리ariticle-header .box-meta : category, ..

지식창고 2024.07.27

[오딧세이스킨] 탑메뉴 고정

탑메뉴 고정은 스크롤을 아래로 내려도 탑메뉴가 고정되어 따라 내려오는 것을 탑메뉴고정이라고 합니다. 오딧세이 스킨의 탑메뉴를 고정하는 방법에 대해 알아보겠습니다.[목차] 오딧세이스킨 탑메뉴 고정1. 데스크탑에서의 메뉴 고정CSS 692번줄.header {  position: fixed;  width: 100%;  border-bottom: 1px solid #efefef;  z-index: 10;  transition: top 0.2s ease-in-out;  background: #fff;}position 만 바뀌어도 되나 background가 투명이라서 헤더가 본문의 글과 겹칩니다. 흰색의 배경색을 넣어 주었습니다.이제 여기서 문제가 됩니다.헤더 메뉴가 본문위에 올라가 겹쳐있습니다.이 문제는 탑메뉴가..

지식창고 2024.07.27

[구글시트] 구글캘린더 동기화 4. 시간경과후 자동동기화

구글시트에 작성된 일정을 구글캘린더와 동기화를 2가지로 해보았습니다. 시트에 일정을 직접입력하는 경우 데스크탑이면, 버튼이 유리하고, 모바일환경이 많으면 정해놓은 시간이 경과 하면 자동으로 일정이 동기화 되도록 하는 것이 답인것 같습니다. 구글시트 구글캘린더 일정시간이 지나면 자동 동기화(모바일환경)[목차] 1. AppScript 만들기function onEdit(e) { var sheet = e.source.getActiveSheet(); if (sheet.getName() === '구글캘린더') { createTrigger(); }}function createTrigger() { // 현재 설정된 모든 시간 기반 트리거 삭제 var triggers = ScriptApp.getProjec..

구글시트/Sheets 2024.07.24

[구글시트] 구글캘린더 동기화 3. 자동동기화

구글시트에 작성된 일정을 구글캘린더에 자동으로 동기화 하는 AppScript 코드입니다. 데이터가 AppSheet로 입력되기 때문에 한번에 입력되어 자동 동기화를 할 수 있습니다.  구글시트 구글캘린더 자동 동기화  목차   1. AppScript 만들기 2. 권한검토 3. 트리거만들기위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. AppScript 만들기function syncToCalendar() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var calSheet = ss.getSheetByName("구글캘린더"); var lastRow = calSheet.getLastRow(); for (var i = 2; i 구글캘린더ID는 본인의..

구글시트/Sheets 2024.07.24

[구글시트]구글캘린더 동기화 2. 버튼 동기화

구글캘린더와 동기화를 AppScript로 자동동기화 하였으나 문제가 발생하였습니다. 수기로 직접 시트에 입력하는 경우 전체를 입력하기도 전에 구글캘린더에 동기화가 됩니다. 그래서 시트에 입력을 다 하고, 버튼을 누르면, 동기화가 되도록 AppScript 코드를 만듭니다. 구글시트를 구글캘린더와 동기화 하는 방법 02. 버튼으로 동기화 하기  목차   1. AppScript 만들기 2. 권한검토3. 구글시트 메뉴버튼 4. 단점   위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. AppScript 만들기구글시트의 확장프로그램 ▶ App Script 를 클릭합니다.function syncToCalendar() { var ss = SpreadsheetApp.getActiveSpreadsheet(); ..

구글시트/Sheets 2024.07.24

[구글시트] 구글캘린더 동기화 1.

구글시트에 작성된 일정을 구글캘린더와 동기화하는 방법에 대해 포스팅을 했는데, 에러가 많아서 좀 더 간결하게 코드를 수정해 보았습니다. 구글시트를 구글캘린더와 동기화 하는 방법 1.   목차   1. 구글시트 만들기 2. 데이터시트에서 데이터 불러오기 3. 구글캘린더 만들기 위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 구글시트 만들기구글캘린더와 동기화하기 위한 구글시트를 만듭니다. 저는 별도로 시트를 만들어서 가져오는 방식으로 만들었습니다.데이터 시트 작성 ▶  캘린더와 동기화할 시트에 자동으로 가져오기 ▶ 캘린더와 동기화데이터 시트에 새 데이터를 작성하면, 캘린더에 표기할 내용만 따로 캘린더와 동기화할 시트에 자동으로 가져와서 캘린더와 동기화 하는 것입니다.캘린더에 동기화할 시트에 바로 작..

구글시트/Sheets 2024.07.24
반응형