Home 게시판 커뮤니티 Q&A 입문한지 하루되는 워드프레스 초보에요… 달력 위젯 수정 도와

10개 답변, 3 voices Last updated by Avatar of 082net082net 15 years, 4 months 전
  • Avatar of nayabinnayabin
    Participant
    @nayabin
    #3757

    친절하신 답변 감사드립니다.

    실제로 그냥 캘린더의 html 소스보기를 해서 css를 수정했습니다.
    #wp-calendar {
    empty-cells: show;
    margin: 0px auto 0;
    width: 100%;
    font:normal 1em Tahoma;
    font-size:.9em;
    }
    #wp-calendar a {
    display: block;
    }
    #wp-calendar caption {

    padding-bottom:.6em;
    text-align: center;
    font-weight: bold;
    }
    #wp-calendar th,
    #wp-calendar td {
    padding:.25em 0;
    }
    #wp-calendar th {
    font-weight:normal;
    }
    #wp-calendar td {
    text-align:center;
    }
    #wp-calendar #today {
    font-weight:bold;
    color:#fe3614;
    }
    #wp-calendar #today a {
    font-weight:bold;
    color:#fe3614;
    }

    http://nayabin.maru.net

    한가지 더 궁금한게..

    일요일에 빨간색 글씨를 추가하고 싶은데..

    제가 질문을 제대로 하는건지는 모르겠지만..

    php가 html로 생성될때 id="sun" 이런식의 태그가 생기게 하려면 어떻게 해야할까요?

    Avatar of nayabinnayabin
    Participant
    @nayabin
    #3758

    안녕하세요~

    xe를 쓰다가 이번에 워드프레스로 넘어오게 됫습니다.

    xe에서는.. css랑 html 파일을 제가 직접 만져서…

    이러저리 디자인도 바꾸고 했는데요..

    워드프레스는 어떻게 해야할지를 모르겠네요…

    어디서 무슨 파일을 찾아서 수정을 해야 하는지 도와주세요..

    Avatar of nayabinnayabin
    Participant
    @nayabin
    #3763

    안녕하세요~

    xe를 쓰다가 이번에 워드프레스로 넘어오게 됫습니다.

    xe에서는.. css랑 html 파일을 제가 직접 만져서…

    이러저리 디자인도 바꾸고 했는데요..

    워드프레스는 어떻게 해야할지를 모르겠네요…

    어디서 무슨 파일을 찾아서 수정을 해야 하는지 도와주세요..

    Avatar of 연가시연가시
    Participant
    @연가시
    #3759

    /wp-content/themes 에 가시면 현재 설치된 테마가 있습니다. 기본은 default 고요.

    기본적인 구조는 아래의 문서를 참고하세요.
    http://codex.wordpress.org/Theme_Development

    Avatar of 연가시연가시
    Participant
    @연가시
    #3764

    /wp-content/themes 에 가시면 현재 설치된 테마가 있습니다. 기본은 default 고요.

    기본적인 구조는 아래의 문서를 참고하세요.
    http://codex.wordpress.org/Theme_Development

    Avatar of 082net082net
    Keymaster
    @082net
    #3760

    텍스트 위젯같은 경우는 원하는 내용을 위젯 내용에 그냥 적으면 되지만…
    달력 위젯의 경우는 기본적으로 워드프레스 함수를 사용하기 때문에 수정하는게 쉽지는 않습니다.

    위젯의 어떤 부분을 수정하고 싶느냐에 따라서 답변이 달라질텐데요…

    1. 디자인/외관을 바꾸고 싶다면 위젯이 아닌 테마의 CSS내용을 추가/수정해야 하구요,

    2. 어떤 기능적인 부분이나 표현방식을 바꾸고 싶으시다면, 달력(calendar) 위젯 플러그인을 몇가지 찾아서 설치해 보시고 맘에 드는것을 사용하시는게 좋습니다.

    Avatar of 082net
    Facebook 사용자 모임 그룹 도 함께 운영되고 있으며, 격 주로 미트업과 스터디를 진행하고 있으니 관심 있으신 분들의 많은 참여 바랍니다 🙂
    Avatar of 082net082net
    Keymaster
    @082net
    #3765

    텍스트 위젯같은 경우는 원하는 내용을 위젯 내용에 그냥 적으면 되지만…
    달력 위젯의 경우는 기본적으로 워드프레스 함수를 사용하기 때문에 수정하는게 쉽지는 않습니다.

    위젯의 어떤 부분을 수정하고 싶느냐에 따라서 답변이 달라질텐데요…

    1. 디자인/외관을 바꾸고 싶다면 위젯이 아닌 테마의 CSS내용을 추가/수정해야 하구요,

    2. 어떤 기능적인 부분이나 표현방식을 바꾸고 싶으시다면, 달력(calendar) 위젯 플러그인을 몇가지 찾아서 설치해 보시고 맘에 드는것을 사용하시는게 좋습니다.

    Avatar of 082net
    Facebook 사용자 모임 그룹 도 함께 운영되고 있으며, 격 주로 미트업과 스터디를 진행하고 있으니 관심 있으신 분들의 많은 참여 바랍니다 🙂
    Avatar of nayabinnayabin
    Participant
    @nayabin
    #3761

    /* calendar */
    #calendar table {
    margin: 0px auto;
    }
    #calendar td {
    padding: 0px 4px;
    }

    테마 css 파일 중에 calendar 관련된 부분이 이쪽인거 같은데요.

    이미지도 삽입하고 색도 바꾸고…

    테이블의 외관을 바꾸고 싶은데..

    실제 코드를 볼수가 없으니… 난감하네요.

    Avatar of nayabinnayabin
    Participant
    @nayabin
    #3766

    /* calendar */
    #calendar table {
    margin: 0px auto;
    }
    #calendar td {
    padding: 0px 4px;
    }

    테마 css 파일 중에 calendar 관련된 부분이 이쪽인거 같은데요.

    이미지도 삽입하고 색도 바꾸고…

    테이블의 외관을 바꾸고 싶은데..

    실제 코드를 볼수가 없으니… 난감하네요.

    Avatar of 082net082net
    Keymaster
    @082net
    #3762

    아.. 이미지 삽입… 이나 색바꾸기 등은 CSS로도 해결이 가능하긴 합니다.

    실제 코드를 볼 수 없어서 난감하다고 하셨지만, 사실 달력 출력 함수 자체를 보면 아마도 더욱 더 난감해 지실겁니다(PHP, MySQL에 익숙치 않으시다면). 차라리 달력이 있는 페이지의 소스보기를 하여 달력 부분을 찾아서 html구조를 대충 파악해 보시는게 이해하기도 쉽고, CSS 스타일을 지정하는데 도움이 됩니다.

    참고로 사용중인 테마에서는 #calendar table 로 CSS 스타일이 지정되어 있다고 하셨지만, 기본(default) 테마를 비롯해서 대부분의 테마에서는 #wp-calendar 로 CSS 스타일을 지정해 놓은것이 대부분입니다. 이 글에서는 말씀하신대로 ‘#calendar table’ 을 기준으로 설명해 볼께요.

    달력 전체에 배경이미지를 넣으려면 #calendar 에 background 를 지정해주면 되고, 달력 테이블에 지정하려면 #calendar table 에 지정해 주면 됩니다. 달력 테이블을 예로 들자면…

    calendar_bg.jpg 가 원하는 배경이미지 이고 css 파일이 이는 위치의 하위 폴더 images 에 업로드 해 두었다고 가정하겠습니다.

    #calendar table {
    background-color: #fff;/* 배경색 지정 */
    background-image: url('images/calendar_bg.jpg');/* 배경이미지 */
    background-position: left top;/* 배경이미지 위치 */
    background-repeat: no-repeat;/* 배경이미지 반복 */
    }

    배경설정에 대한 참고: http://www.w3schools.com/css/css_background.asp

    일반적인 글이 등록되지 않은 날의 글자색은

    #calendar table td {
    color: blue;
    }

    글이 등록된 날짜에대한 글씨색은

    #calendar table td a {
    color: red;
    }

    요일에 대한 글자색은

    #calendar table thead td {
    color: black;
    }

    이전달, 다음달의 링크 글자색은

    #calendar #prev a, #calendar #next a {
    color: silver;
    }

    링크 색깔 지정에 대한 참고 내용: http://www.w3schools.com/Css/pr_pseudo_link.asp

    달력의 테두리나 선을 지정하려면

    #calendar table td {
    border: 1px solid #000;
    }

    border 로 지정하지 않고 border-left, border-right, border-bottom, border-top 등으로 나눠서 두께나 색깔등을 지정해도 되겠지요.

    border 참고 내용: http://www.w3schools.com/css/css_border.asp

    CSS에 대해서 이곳에서 모두 설명드리기는 힘들겠네요. 우선은 테마의 CSS에서 달력 스타일 설정 부분을 찾아서 위에 적어드린 예제들을 참고해서 원하는 값으로 입력하시기 바랍니다.

    잘 이해가 안되신다면 wp-content/themes/default/sytle.css 파일(기본테마의 스타일)을 열어서, #wp-calendar 로 검색해서 어떤식으로 스타일을 지정해 두었는지를 참고해보시고 이렇게 저렇게 수정해서 어떻게 변화하는지를 확인해 보세요.

    Avatar of 082net
    Facebook 사용자 모임 그룹 도 함께 운영되고 있으며, 격 주로 미트업과 스터디를 진행하고 있으니 관심 있으신 분들의 많은 참여 바랍니다 🙂
    Avatar of 082net082net
    Keymaster
    @082net
    #3767

    아.. 이미지 삽입… 이나 색바꾸기 등은 CSS로도 해결이 가능하긴 합니다.

    실제 코드를 볼 수 없어서 난감하다고 하셨지만, 사실 달력 출력 함수 자체를 보면 아마도 더욱 더 난감해 지실겁니다(PHP, MySQL에 익숙치 않으시다면). 차라리 달력이 있는 페이지의 소스보기를 하여 달력 부분을 찾아서 html구조를 대충 파악해 보시는게 이해하기도 쉽고, CSS 스타일을 지정하는데 도움이 됩니다.

    참고로 사용중인 테마에서는 #calendar table 로 CSS 스타일이 지정되어 있다고 하셨지만, 기본(default) 테마를 비롯해서 대부분의 테마에서는 #wp-calendar 로 CSS 스타일을 지정해 놓은것이 대부분입니다. 이 글에서는 말씀하신대로 ‘#calendar table’ 을 기준으로 설명해 볼께요.

    달력 전체에 배경이미지를 넣으려면 #calendar 에 background 를 지정해주면 되고, 달력 테이블에 지정하려면 #calendar table 에 지정해 주면 됩니다. 달력 테이블을 예로 들자면…

    calendar_bg.jpg 가 원하는 배경이미지 이고 css 파일이 이는 위치의 하위 폴더 images 에 업로드 해 두었다고 가정하겠습니다.

    #calendar table {
    background-color: #fff;/* 배경색 지정 */
    background-image: url('images/calendar_bg.jpg');/* 배경이미지 */
    background-position: left top;/* 배경이미지 위치 */
    background-repeat: no-repeat;/* 배경이미지 반복 */
    }

    배경설정에 대한 참고: http://www.w3schools.com/css/css_background.asp

    일반적인 글이 등록되지 않은 날의 글자색은

    #calendar table td {
    color: blue;
    }

    글이 등록된 날짜에대한 글씨색은

    #calendar table td a {
    color: red;
    }

    요일에 대한 글자색은

    #calendar table thead td {
    color: black;
    }

    이전달, 다음달의 링크 글자색은

    #calendar #prev a, #calendar #next a {
    color: silver;
    }

    링크 색깔 지정에 대한 참고 내용: http://www.w3schools.com/Css/pr_pseudo_link.asp

    달력의 테두리나 선을 지정하려면

    #calendar table td {
    border: 1px solid #000;
    }

    border 로 지정하지 않고 border-left, border-right, border-bottom, border-top 등으로 나눠서 두께나 색깔등을 지정해도 되겠지요.

    border 참고 내용: http://www.w3schools.com/css/css_border.asp

    CSS에 대해서 이곳에서 모두 설명드리기는 힘들겠네요. 우선은 테마의 CSS에서 달력 스타일 설정 부분을 찾아서 위에 적어드린 예제들을 참고해서 원하는 값으로 입력하시기 바랍니다.

    잘 이해가 안되신다면 wp-content/themes/default/sytle.css 파일(기본테마의 스타일)을 열어서, #wp-calendar 로 검색해서 어떤식으로 스타일을 지정해 두었는지를 참고해보시고 이렇게 저렇게 수정해서 어떻게 변화하는지를 확인해 보세요.

    Avatar of 082net
    Facebook 사용자 모임 그룹 도 함께 운영되고 있으며, 격 주로 미트업과 스터디를 진행하고 있으니 관심 있으신 분들의 많은 참여 바랍니다 🙂
11 글 보임 - 1에서 11 까지 (총 11 중에서)
  • 답변은 로그인 후 가능합니다.