Category Archives: Ideas

Ideas

Pixgraphy Theme Content Margins

Leave a comment

There is a 70 px top margin on every single post or content showed on the screen followed by a smaller gap between the post title and the post content. Both of them can be adjusted in the style.css file

edit the following settings:

Content Top margin. I figured out i like it at about 3-4 px… no more.

}

/* 18.0 Content
================================================== */
#content, .search #content {
padding: 70px 0 30px;
}
#main ul {
list-style-type: disc;
}
#main ol {
list-style-type: decimal;
Space between the right slider and the content body as well as the slider width in percentage. I reduced them both a little.
/* 19.0 Sidebars
================================================== */
#secondary {
float: left;
padding-left: 15px;
width: 25%;
}/* 20.0 Post
================================================== */
.entry-header {
padding-bottom: 10px;
Padding between the title and the content. For my taste, reduced half way.
/* 24.0 Pages
================================================== */
/* —– Page Title —– */
.page-header {
padding: 0 0 30px;
position: relative;
overflow: hidden;
}
.error-404 .page-header {
padding: 15px 20px 50px;
margin-top: 0px;
background-color: #fddbdd;
}
Margin above the main menu in the top header. Reduced to 10 for my usage

/* 15.0 Header Section
================================================== */
.top-header {
display: none;
}
/* —– Top Header Bar —– */
.top-header {
background-color: #484848;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: #fff;
text-align: center;
z-index: 999;
}
.top-header .widget_contact {
font-size: 12px;
float: left;
margin-bottom: 0;
margin-top: 10px;
padding: 6px 0 7px;
width: 30%;
}
.top-header .widget_contact ul li {
float: left;
margin-right: 15px;
padding: 2px 0;
}
.top-header .widget_contact ul li a {
color: #fff;
}
.top-header .widget_contact ul li a:hover {
color: #ff3838;
}
.sld-plus .top-header {
background-color: inherit !important;
background-image: none !important;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
#sticky_header {
background-color: #1d1d1d;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-moz-transition: all 500ms ease-out 0s;
-o-transition: all 500ms ease-out 0s;
-webkit-transition: all 500ms ease-out 0s;
transition: all 500ms ease-out 0s;
width: 100%;
z-index: 999;
}
.is-sticky #sticky_header {
background-color: rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 767px) {
.is-sticky #sticky_header {
background-color: #1d1d1d;
}
}
/* —– Header Widget Title —– */
.top-header .widget-title {
display: none;
}

/* —– Header Image —– */
.header-image {
width: 100%;
height: auto;
}
Margin above and under the site description in the top header, useful if you put no site title and use the description field as a greeting message. Reduced to 15px for my usage

/* 11.0 Logo-Name-Slogan
================================================== */
#site-branding {
margin: 0 auto;
padding: 30px 0;
text-align: center;
width: 40%;
}
#site-logo {
display: block;
margin: 0 auto;
}
#site-title {
font-size: 40px;
font-weight: normal;
line-height: 48px;
padding: 10px 0;
Main post content text color. Reduce to 333, 222,111 or 000 for even darker text.

/* 2.0 Typography
================================================== */
body,
button,
input,
select,
textarea {
 color: #444;
font: 400 13px/21px ‘Merriweather’, sans-serif;
word-wrap: break-word;
overflow-x: hidden;
}

/* —– #Headings  —– */
h1, h2, h3, h4, h5, h6 {
color: #333;
Site info copyright text color, 666 makes it just a little darker

/* —– Site Info —– */
.site-info {
padding: 20px 0px 15px;
background-color: #f4f4f4;
font-size: 14px;
line-height: 22px;
text-align: center;
background-position: center center;
background-size: cover;

}
.site-info #site-branding {
padding-bottom: 0;
}
.site-info #site-branding img {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
padding: 5px;
}
.site-info #site-title {
font-size: 36px;
font-weight: normal;
line-height: 44px;
padding: 10px 0 15px;
}
.site-info .social-links {
float: none;
margin-bottom: 15px;
text-align: center;
}
.site-info .social-links ul {
display: inline-block;
}
.site-info .social-links ul li {
margin-top: 10px;
display: inline-block;
}
.site-info .social-links ul li a {
border: 1px solid #666;
color: #666;
}
.site-info .social-links ul li a:hover {
border-color: transparent;
}
.site-info .copyright {
color: #666;
font-size: 12px;
line-height: 20px;
padding-top: 15px;
text-align: center;
}
.site-info #site-title a,
.site-info .copyright a {
color: #666;
}
Spacing at the right of the page, increase by 5% increment to stretch the content part so the gap on the right goes low.

LEFT MARGIN can be added for when the resolution is low. in this case, the content text is aligned full left leaving no gap at all between the screen border and the text. Value must be given in percentage, and each percent you add to the margin, should be substracted to the width as shown below. Must totalize a 100% with the slider width as shown above, set at 25%.

/* 18.0 Content
================================================== */
#content, .search #content {
padding: 4px 0 30px;
}
#main ul {
list-style-type: disc;
}
#main ol {
list-style-type: decimal;
}
#main ol ol {
list-style: upper-alpha;
}
#main ol ol ol {
list-style: lower-roman;
}
#main ol ol ol ol {
list-style: lower-alpha;
}
#primary {
float: left;
        width: 73%;
        margin-left: 2%;
}
Centering the article title with the body left line,

edit the padding like this, adjust the percentage of the last value.

/* 24.0 Pages
================================================== */
/* —– Page Title —– */
.page-header {
 padding: 0 0 0 2%;
Right widget sidebar title adjustment for smaller text, single line on lower resolution

#secondary .widget-title {
background: #ffffff;
display: block;
font-size: 15px;
font-weight: 600;
    left: 20%;
    padding: 0 2%;
position: absolute;
text-align: center;
text-transform: uppercase;
top: -1px;
Header menu, contact information adjustments, slightly bigger text and moved 2% from the left border of the screen to align with the rest of the blog on low resolutions. position adjusted upwards with -2px.

.top-header .widget_contact {
font-size: 13px;
float: left;
margin-bottom: 0;
margin-top: -2px;
padding: 10px 2% 0px;
width: 40%;
Better contrast on white text over white image on animated tile homepage and categories

.post-container .entry-header .entry-meta a:hover,
#post_masonry .has-post-thumbnail .entry-title a:hover,
#post_masonry .post-container .entry-header .entry-meta a:hover,
#post_masonry .has-post-thumbnail .entry-header .entry-meta a i:hover {
color: #ff3838;
}
#post_masonry .has-post-thumbnail .entry-header {
background: rgba(0, 0, 0, 0) linear-gradient(to top, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0) 100%);
bottom: -50px;
color: #fff;
display: block;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
padding: 10px 20px 0;
position: absolute;