-
2014/07/02 6:22 오후 #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*/ -
AuthorPosts
- 답변은 로그인 후 가능합니다.