Home 게시판 커뮤니티 Q&A 워드프레스 테마 수정 중에 질문이 있습니다.

1 voice, 0개 답변
  • Avatar of shibanshiban
    Participant
    @shiban
    #26446

    [테마 링크]

    워드프레스에 입문한 지 얼마 안 되는 유저 입니다..ㅠㅠ

    홈페이지에 지금 위의 테마를 깔아 쓰고 있는데요,

    데모 페이지를 보면 아시겠지만 디자인이 양 페이지를 펼친 책 같은 컨셉으로 돼 있어서

    페이지를 만들거나 글을 쓰면 반드시 내용이 두 쪽으로 분할이 되게 되어 있습니다.

    디자인이 맘에 들어서 계속 쓰고는 싶습니다만..

    길이 너무 길어질 경우나 크기가 큰 사진이 많은 포스팅엔

    가로가 짧게 두개로 문단 나눠지듯 하는 프레임이 불편합니다.

    가급적이면 페이지나 글에 따라 두 쪽으로 분할하지 못하게 하고 싶은데

    일일이 설정 불가능하다면 페이지 전체만이라도요..

    데모 페이지 INDEX 메뉴만 한 페이지 3파트로 분할 한 것 보면

    한 페이지당 글을 나눌 파트를 바꾸는 게 가능한 것 같은데..

    테마의 구체적으로 어느 부분을 손대면 좋은 건가요?

    기초적인 정도의 css와 html에 대한 지식은 갖추고 있습니다.

    힌트를 주시면 공부하고 테마를 수정해보려고 합니다.

    그리고 가능하시면 하나 더 질문입니다.

    지금 저 테마에 이 포럼처럼 웹폰트를 전체적으로 적용하려면

    어떻게 해야 되나요?

    설명이 길어질 것 같으시면

    관련된 링크라도 첨부해주시면 감사하겠습니다. _ _)

    구글 폰트 플러그인이니 여러가지 깔아서 해봤는데

    전체적으로 적용이 되지 않았습니다..

    답변해 주시면 정말로 많은 도움이 될 것 같습니다.

    감사합니다..ㅠㅠ

    .aligncenter,

    .bypostauthor,
    .sticky,
    .wp-caption-text,
    .gallery-caption,
    .wp-caption {}

    * {padding: 0; margin: 0; line-height: 1.9em;}

    /* —–BODY STUFF—– */
    body {height:auto; width:auto; padding: 0 50px; font: 12px/18px serif; color:#fff; background: #fff;}
    #mesh {position: fixed; top: 0; left: 0; width: 100%; z-index: -1; background: url(images/bg.png) repeat;}

    /* —–A TAG STUFF—– */
    a {text-decoration:none; color:#5378b3;}
    a:hover {text-decoration:none; color: #000;}

    p {font-size: 12px;}

    #loading {width:100px; height:75px; overflow: hidden; line-height: 110px; position:absolute; top:35%; left:50%; margin: 0 0 0 -50px; background: url(images/loading.gif) no-repeat center top; text-align: center; color:#aaa; font-size: 10px; font-family: sans-serif; text-transform: uppercase;}

    /* —–H TAG STUFF—– */
    h1,h2,h3, h4, h5, h6 {color: #333; font-weight: normal;}
    h1,h1 a,h1 a:visited,
    h2,h2 a,h2 a:visited,
    h3,h3 a,h3 a:visited,
    h4,h4 a,h4 a:visited,
    h5,h5 a,h5 a:visited,
    h6,h6 a,h6 a:visited {text-decoration:none; color: #333;}
    h1 a:hover,
    h2 a:hover,
    h3 a:hover,
    h4 a:hover,
    h5 a:hover,
    h6 a:hover {text-decoration:none; color: #000;}

    /*—-MAIN WIDTH—*/
    #page {max-width: 960px; margin: 35px auto 50px; position: relative;}
    body.blog #page,
    body.archive #page {max-width: 1100px;}

    /*———HEADER STUFF———–*/
    #header {position: relative; width: 100%; z-index: 200;}
    #logo {margin: 25px 0 0; display: inline-block; position: relative; z-index: 20;}
    #logo img {display: block;}

    #sideToggle {width: 40px; height: 45px; display: block; position: absolute; right: 0; bottom: 0; background: #fff; color: #333; text-align: center; line-height: 40px; cursor: pointer; font-weight: bold;}

    /* —–PAGE STUFF—– */
    #content {background: #fff; color: #555; position: relative; width: 100%}
    #main {padding:5.2083333333333336% /*50px / 960px*/; position: relative;}

    /*——–FOOTER STUFF——–*/
    #footer {clear:both; width: 100%; position: relative; z-index: 3;}
    #footer #copyright {font-size: 10px; line-height: 45px; font-family: sans-serif;}
    #footer #copyright a {color: #fff; border-bottom: 1px dotted #fff;}
    #footer #copyright a:hover {text-decoration: none; border-bottom-style: solid;}

    #backTop {width: 40px; height: 45px; background:#fff url(images/back_top.jpg) no-repeat center center; cursor: pointer; display: none; float: left; margin-right: 13px;}

    /*—FOOTER SOCIAL ICONS—*/
    #socialStuff {float: right; line-height: 45px; height: 45px; position: relative; padding:0 0 0 10px;}

    .socialicon {width: 18px; height: 18px; float: right; background-image: url(images/social.png); margin: 13px 0 0 10px; border: none !important; z-index: 1; position: relative;}
    .socialicon:hover {border: none !important;}
    #youtubeIcon {background-position: 0px 0px;}
    #vimeoIcon {background-position: -18px 0px; }
    #twitterIcon {background-position: -36px 0px; }
    #skypeIcon {background-position: -54px 0px; }
    #rssIcon {background-position: -72px 0px; }
    #myspaceIcon {background-position: -90px 0px; }
    #facebookIcon {background-position: -108px 0px; }
    #flickrIcon {background-position: -126px 0px; }
    #linkedinIcon {background-position: -144px 0px; }

    #youtubeIcon:hover {background-position: 0px -18px;}
    #vimeoIcon:hover {background-position: -18px -18px; }
    #twitterIcon:hover {background-position: -36px -18px; }
    #skypeIcon:hover {background-position: -54px -18px; }
    #rssIcon:hover {background-position: -72px -18px; }
    #myspaceIcon:hover {background-position: -90px -18px; }
    #facebookIcon:hover {background-position: -108px -18px; }
    #flickrIcon:hover {background-position: -126px -18px; }
    #linkedinIcon:hover {background-position: -144px -18px; }

    /*——-MAIN NAVIGATION STUFF——–*/
    #navigation {text-align: right; position: absolute; z-index: 10; height: 45px; left: 0; right: 55px; bottom: 0;}
    #dropmenu {list-style:none; position:relative; width:100%; z-index: 400;}
    #dropmenu li {list-style:none; position:relative; display: inline-block;}
    #dropmenu li:hover {background: #333; background: rgba(0,0,0,.6)}
    #dropmenu li a { display: block; color: #fff; font-family: sans-serif; font-size: 10px; text-transform: uppercase; padding:0 15px; line-height: 45px; height: 45px;}
    #dropmenu li a:hover {text-decoration: none;}
    #dropmenu li ul {
    list-style:none;
    display:none;
    position:absolute;
    width:180px;
    padding:10px;
    z-index:300;
    top:45px;
    right: -1px;
    background: #333; background: rgba(0,0,0,.9);
    border: 1px solid #fff;
    border-width: 0 1px 1px;
    }
    #dropmenu li ul li {position:relative; z-index: 2; display: block; text-align: left;}
    #dropmenu li ul li a {line-height: 35px; text-transform: none; height: 35px;}
    #dropmenu li ul li a:hover {background: #222; color: #fff;}
    #dropmenu li ul li ul {position:absolute;top:-10px; right:180px; border-width: 1px;}
    #dropmenu li ul li ul:before {border-width: 1px;}
    #dropmenu li:hover ul ul,
    #dropmenu li:hover ul ul ul,
    #dropmenu li:hover ul ul ul ul {display:none;}
    #dropmenu li:hover ul,
    #dropmenu li li:hover ul,
    #dropmenu li li li:hover ul,
    #dropmenu li li li li:hover ul {display:block;}
    #dropmenu li.current-menu-item,
    #dropmenu li.current-menu-ancestor {border-bottom: 5px solid #333;}

    #selectMenu {padding: 5px; display: none; position: absolute; z-index: 10; left: 10px; bottom: 10px;}

    /* —-TOOL TIP STYLE—– */
    .itooltip {
    display:none;
    font-size: 12px;
    color: #fff;
    z-index: 10000000;
    position:absolute;
    background: #000;
    padding: 5px 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-border-radius-topleft: 0;
    -webkit-border-radius-top-left: 0;
    border-radius-topleft: 0;
    border:1px solid #fff;
    }

    /* —–SEARCH STUFF—– */
    #searchform.headerSearch {position: absolute; bottom: 0px; left: 40px; right:0px; width: auto; border-left:1px solid #ddd; border-bottom:1px solid #ddd;}
    #searchform {background: #fafafa; border:none; width: 100%; height: 44px;}
    #searchform #s {width:73.07692307692308%; padding:0 10px; height: 44px; line-height: 44px; margin: 0; font-size: 10px; background: none; border: none; }
    #searchform #searchsubmit {cursor: pointer; padding:14px 0 10px 15px; float: left;}
    #searchform #searchsubmit:hover {text-decoration: none;}

    /* —–POST AND ENTRY STUFF—– */
    .listing .post {margin: 0 0 30px;}
    .post, .entry {text-align: justify; width: 100%;}
    .post h2.posttitle ,
    .entrytitle,
    .post h2.posttitle a,
    .entrytitle a {text-align: center; line-height: 1.2em; font-size: 20px;}
    .postInfo {font-size: 12px; text-align: center; font-style: italic; margin:5px 0 15px;}
    body.page .entrytitle,
    body.single .postInfo {margin-bottom: 35px;}

    #theEnd {text-align: center; font-size: 32px; padding-top: 15%;}
    body.search-no-results #theEnd {display: none;}

    .entry p:first-child:first-letter
    {
    font-size:330%;
    float: left;
    margin:10px 10px 0 0;
    }

    .readMore {text-align: center; font-size: 12px; margin-top: 20px;}

    #entryContainer {position: relative;}
    .entry{font-size: 12px;}
    .entry ol,.entry ul {margin:0 0 15px 15px; padding: 0; font-size: 12px;}
    .entry li {padding:0 0 0 5px; list-style-position:outside; line-height: 1.5em;}
    .entry p {margin: 0 0 15px;}
    .details {font-size: 12px; margin-bottom: 35px;}
    .entry h1, .entry h2, .entry h3, .entry h4,.entry h5,.entry h6 {}

    a[rel~=”prev”],
    a[rel~=”next”] {position: absolute; top: 200px; width: 25px; height: 50px; overflow: hidden; background-image: url(images/arrows.png);}
    a[rel~=”prev”] {right: -25px; background-position: right center;}
    a[rel~=”next”] {left: -25px; background-position: left center;}

    #relatedTitle {text-align: center; margin-top: 40px;}
    #related {list-style: none;}
    #related li {
    width: 20%;
    float: left;
    text-align: center;
    font-size: 12px;
    }
    #related img {
    width: 100%;
    }

    /*—ZOOM STUFF—*/
    #zoom {width: 8px; height: 8px; border: 5px solid #fff; background-image: url(images/zoom.gif); background-position: top left; cursor: pointer; margin: -15px auto 30px; position: relative;}
    #zoom.zoomed {background-position: top right;}
    #zoomInfo {
    font-size:10px;
    font-family: sans-serif;
    color:#fff;
    width:80px;
    margin-left: -40px;
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    padding:7px 0;
    text-align:center;
    background: #333;
    }
    #zoomInfo:after {
    content:””;
    display:block;
    position:absolute;
    bottom:-7px;
    z-index: 1000;
    left:50%;
    margin-left: -8px;
    width:0;
    border-width:8px 8px 0;
    border-style:solid;
    border-color:#333 transparent;
    }

    .entry .postinate {font-size: 12px; margin-top: 30px; text-align: right;}
    .entry .postinate span {display:inline-block; padding:0 4px;}
    .entry .postinate > span {border-bottom: 1px dotted #333;}

    #tagList {

    }
    #tagList h2 {border-bottom: 1px solid #aaa; text-align: center;}
    #tagList ul {list-style: none; margin:0 0 30px 0;}
    #tagList li {padding-left: 0;}
    #tagList li:hover {background: #fdfdfd}
    #tagList li span {float: right; color: #999;}
    #tagList li a {color: #333; display: block; border-bottom: 1px dashed #eee; padding: 5px 5px 5px 0;}
    #tagList li a:hover {color: #5378b3;}

    /*— POST THUMBNAIL STUFF —*/
    a.thumbLink,
    #featuredImage {display: block; text-align:center; margin-bottom: 20px;}

    /*—-MAX WIDTH 100% STUFF—*/
    img.attachment-post-thumbnail,
    .entry img,
    #featuredImage img,
    iframe,
    #sidebar ul li.widget img,
    object {max-width: 100%;}

    /*——-BLOG PAGE NAVIGATION STUFF———-*/
    div.pagenav {position: absolute; top: 200px; width: 25px; height: 50px; overflow: hidden;}
    div.pagenav a {display: block; width: 25px; height: 50px; overflow: hidden; background-image: url(images/arrows.png); text-indent: -999px;}

    #nextpage {right: -25px;}
    #nextpage a {background-position: right center;}

    #backpage {left: -25px;}
    #backpage a {background-position: left center;}

    /*—–SIDEBAR STUFF—-*/
    #closeSidebar {width: 40px; height: 45px; background:#fff url(images/back_top.jpg) no-repeat center center; position: absolute; bottom: 0; left: 0; cursor: pointer;}
    #sidebar {
    font-family: sans-serif;
    background: #333;
    background: rgba(0,0,0,.5);
    color: #ddd;
    width: 100%;
    overflow: hidden;
    display: none;
    position: relative;
    border-top: 1px solid #fff;
    padding-bottom: 45px;
    }
    #sidebar a {color: #fff;}
    #sidebar a:hover {background: #000; padding: 8px; margin:-8px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    #sidebar ul li.widget {list-style: none; font-size: 12px; width: 22.91633333333333%; padding: 5.2083333333333336%; float: left;}
    #sidebar ul li.widget p {margin-bottom: 10px;}
    #sidebar ul li.widget h2.widgettitle {color: #ddd; margin-bottom: 8px; font-size: 10px; text-transform: uppercase;}
    #sidebar ul li.widget ul li {list-style-type:disc; list-style-position: outside; margin-left: 15px; margin-bottom: 5px;}
    #sidebar ul li.widget ul li ul li {padding: 0 0 0 15px; list-style-type:disc; list-style-position: inside;}

    /* —–COMMENT STUFF—– */
    #commentToggle {margin: 60px 0 0; line-height: 1em; cursor: pointer;

    background: none;
    color: #333;
    font-size: 12px;
    text-align: center;
    text-transform: none;
    background: #fafafa;
    }
    #commentToggle:hover {background: #f5f5f5; }
    #commentToggle a {color: #4c4c4c; display: inline-block; padding: 10px 15px;}
    #commentToggle a:hover {text-decoration: none;}
    #toggleComments {display: none; margin-top: 40px;}
    #commentOpen {float: right;}
    #commentClose {display: none; float: right;}

    #commentsection {max-width: 500px; font-size: 12px; margin: 0 auto; }
    .commentlist {width: 100%; list-style:none; }
    h3#comments {margin:40px auto 20px; text-align: center; font-size: 16px;}
    .commentlist li,#commentform input,#commentform textarea {font:.9em ‘Lucida Grande’, Verdana, Arial, Sans-Serif;}
    .commentlist li {font-weight:bold;list-style:none; padding:15px 0; font-size:12px;}
    .commentlist li img.avatar {float:left;border:1px solid #ccc; background:#eee;margin:5px 15px 0 0; padding:3px;}
    .commentlist p {font-weight:normal; text-transform:none;margin:10px 0; font-size: 11px;}
    .commentlist .pingback p {margin:10px 5px 10px;}
    #commentform p {margin:5px 0;}
    .commentmetadata {font-weight:normal;display:block; font-size:10px; color:#333; border-bottom: 1px solid #eee; padding-bottom: 10px; font-family: serif}
    .comment-author {font-family: serif; font-size: 14px; font-weight: normal; line-height: 1em;}
    .commentlist {text-align:justify;padding:0 0 40px;}
    .nocomments {text-align:center;}
    #recentcomments li {}
    .alt {}
    ul.children {padding-left: 30px; border-left: 1px dashed #eee;}
    .reply {text-align: right; font-size: 11px; margin:-5px 0 10px; font-weight: normal; font-style: italic}

    /*—FORM STUFF—*/
    input[type=”text”],input[type=”password”], textarea {border: 1px solid #ddd; background: #fafafa;}

    input[type=”text”],input[type=”password”] {padding: 5px; max-width:170px; width: 70%; margin:0 3px 8px 0;}
    textarea {padding: 4px; max-width:540px; width: 95%; font-family: sans-serif; font-size: 12px;}
    #commentform input[type=”submit”],
    input[type=”submit”] {cursor: pointer; background: #5378B3; color: #fff; border: none; display: block; padding: 5px 10px;}
    #commentform input[type=”submit”]:hover,
    input[type=”submit”]:hover {background: #333}

    #sidebar input, #sidebar textarea {padding:3px}
    #sidebar input[type=”submit”]{cursor:pointer;}

    /* —–UNIVERSAL STUFF—– */
    code {font:1.1em ‘Courier New’, Courier, Fixed;}
    acronym,abbr,span.caps {font-size:.9em;letter-spacing:.07em;cursor:help;}
    p img {max-width:100%;}
    img.centered,
    img.aligncenter {display:block;margin:0 auto;}
    img.alignright {display:inline;margin:0 0 20px 20px;}
    img.alignleft {display:inline;margin:0 20px 20px 0;}
    .alignright {float:right;}
    .alignleft {float:left;}
    acronym.abbr {border-bottom:1px dashed #999;}
    blockquote {padding-left:20px;margin:15px;}
    blockquote cite {display:block;margin:5px 0 0;}
    .center {text-align:center;}
    hr {display:none;}
    a img {border:none;}
    img#wpstats {width:0;height:0;border:none;overflow:hidden;}
    #hideme {visibility:hidden;}
    .hidden {visibility: hidden; display: none;}
    .rssSummary {padding-bottom:15px;}
    .clear {clear: both;}
    p.clear {height:1px; width:1px; }
    .hide {display: none;}

    /* —–CALENDAR STUFF—– */
    #wp-calendar {empty-cells:show;width:100%;margin:10px auto 0;}
    #wp-calendar #prev a,#wp-calendar #next a {font-size:9pt;}
    #wp-calendar #next a {padding-right:10px;text-align:right;}
    #wp-calendar #prev a {padding-left:10px;text-align:left;}
    #wp-calendar a {text-decoration:none;display:block;}
    #wp-calendar caption {text-align:center;width:100%; margin-bottom: 5px;}
    #wp-calendar th {font-style:normal;text-transform:capitalize;}
    #wp-calendar td {text-align:center;padding:3px 0;}

    /*—-TAG CLOUD WIDGET STUFF——-*/
    #sidebar .widget_tag_cloud a {
    font-size: 11px !important;
    display: block;
    background: #5378b3;
    float: left;
    padding: 2px 8px;
    margin: 0 3px 3px 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    #sidebar .widget_tag_cloud a:hover {background: #000; padding: 2px 8px; margin: 0 3px 3px 0;}
    #sidebar .widget_tag_cloud:after {
    content: “.”;
    display: block;
    height: 0;
    clear: left;
    visibility: hidden;
    }

    /*—–GALLERY STUFF——*/
    .gallery img.attachment-thumbnail {border: 1px solid #ccc !important;}

    /*—THIS IS AN IE7 FIX—*/
    #logo,
    #dropmenu li,
    .entry .postinate span,
    #commentToggle a {zoom: 1;*display:inline;}

    /*—MEDIA QUERY STUFF FOR DIFFERENT SIZED SCREENS—*/
    /*—COMMENTS AFTER EACH QUERY ARE NEEDED FOR IE TO WORK—*/
    @media screen and (max-width:480px) {
    body{padding: 0 25px; padding: 0;}
    #page {margin: 0 auto;}
    #selectMenu {left: 10px !important}
    div.pagenav {position: relative; width: auto; height: auto; top: auto;}
    div.pagenav a {display: block; width: auto; height: auto; overflow: hidden; background-image: none; text-indent:0;}
    #loading {top:5%;}

    #nextpage {right: auto;}
    #nextpage a {background-position: right center;}

    #backpage {left: auto;}
    #backpage a {background-position: left center;}

    a[rel~=”prev”],a[rel~=”next”] {display: none;}

    }/*/mediaquery*/

    @media screen and (max-width:800px) {
    #selectMenu {display: block; left: 0;}
    #navigation {display: none;}
    #footer #copyright {
    clear: both;
    display: block;
    text-align: center;
    line-height: 80px;
    }
    }/*/mediaquery*/

    @media screen and (max-width:860px) {
    #main {padding: 10%;}
    #logo {margin: 0 auto; padding: 25px 0 40px; text-align: center; display: block; z-index: 0;}
    #logo img {display: inline;}
    #navigation {text-align: left;}
    #dropmenu li ul li ul {left:180px;}
    #dropmenu li ul {left: -1px;}
    #dropmenu li a {font-size: 10px; padding:0 10px; }
    .post h2.posttitle ,
    .entrytitle {font-size: 16px; }
    .entry .postinate {text-align: center; }
    #sidebar ul li.widget {padding: 25px; float: none; width: auto;}
    }/*/mediaquery*/

    @media screen and (min-width:860px) {
    #tagList h2 {text-align: left;}
    .entry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 60px;
    -webkit-column-gap: 60px;
    column-gap:60px;
    -moz-column-rule: 1px dashed #eee;
    -webkit-column-rule: 1px dashed #eee;
    column-rule: 1px dashed #eee;
    }
    body.blog #main,
    body.archive #main,
    body.search #main {
    padding-left: 0;
    padding-right: 0;
    border: 1px solid #fff;
    border-width: 1px 0;
    background: #fff url(images/book_bg.jpg) repeat-y center 0;
    }
    body.blog .post,
    body.archive .post,
    body.search .post {width: 32.45614035087719%; float: left; padding:0 8.771929824561403%}
    }/*/mediaquery*/

1 글 보임 - 1에서 1 까지 (총 1 중에서)
  • 답변은 로그인 후 가능합니다.