- This topic has 6 replies, 2 voices, and was last updated 9 years, 8 months ago by
.
-
Posts
-
Website: http://recoveredidentity.com
Theme: Genesis Minimum
I am using the Genesis grid loop on my homepage. I want to style the padding on the grid loop all the way to the left without adjusting the padding of my blog titles on the blog page. The reason: I am using a "fancy" post info circle on the blog pages that is to the left of the blog title. However, I have removed the post info from the homepage grid loop. So I want to bump the grid loop titles to the left to fill in the empty spot where the post info would be if it were there.
Both titles are styled with the h2 tag. I did find a spot (in the headlines portion of the style sheet) where I could style the font size for the grid loop titles separate from the blog titles. I tried adding padding to it, but it didn't change anything.
.genesis-grid h2 a,
.genesis-grid h2 a:hover {
font-size: 20px;
padding: 0 0 0 0px;
}Any help would be appreciated.
http://recoveredidentity.comHello,
Try using this rul;
#content .genesis-grid h2 { padding-left: 0; }I was able to change it live and chrome and it removed the padding for the grid titles.
I hope this helps.
Here's the section of code that I inserted it into. I still got no results.
/* Post Info / Meta
------------------------------------------------------------ */
.post-info,
.post-meta {
clear: both;
text-transform: uppercase;
}
/*.post-info {
background-color: #ededed;
font-size: 14px;
color: #3e3e3e;
border-bottom: 10px solid #345282;
padding: 0 0 10px 0;
margin: 0 0 0px 0;*/
}
.genesis-grid .post-info {
margin: 0 0 0px;
}
.post-meta {
font-size: 12px;
color: #15428b;
border-top: 1px solid #15428b;
background-color: #FAFAFA;
padding: 0;
}
.post-info a,
.post-info a:visited,
.post-meta a,
.post-meta a:visited {
color: #15428b; /*#999;*/
font-weight: normal;
}
.post-info a:hover,
.post-meta a:hover {
color: #3e3e3e;
}
/**added for fancy post info**/
.post-info {
/*border-bottom: 1px solid #15428b;*/
font-family: Georgia, sans-serif;
font-size: 12px;
font-style: italic;
margin: 0 0 0px;
padding: 0px 0 -10px 60px;
}
.post-info .time {
border-radius: 50%;
background: #15428b;
height: 50px;
}
.post-info .time,
.post-info .time span {
color: #fff;
display: block;
text-align: center;
width: 50px;
}
.post-info .time {
left: 0px;
position: absolute;
top: 0px;
}
.post-info .day {
/*background: none*/
font-size: 20px;
font-weight: bold;
height: 20px;
line-height: 1.3333em;
}
.post-info .month {
/*background: #15428b;*/
height: 20px;
line-height: 2; /*1.33333;*/
text-transform: uppercase;
}
#content .genesis-grid h2 {
padding-left: 0;
}
#content .post {
position: relative;
}
#content .post h1 {
margin-left: 60px;
}
#content .post h2 {
font-size: 18px;
/*background-color: #ededed;*/
/*border: 1px solid #15428b;*/
padding: 10px 0 10px 55px; /*60px;*/
margin: 0 0 0; /*10px 10px 0 60px;*/
}
Here's the section of code where I inserted it. I still got no results.
Try appending it to the end of the style.css file. Or if you want, in the grid section if one exists. It really shouldn't matter.
Hello,
I apologize, I made a mistake on my last post. I didn't notice/read your previous post.
I would append the css to the end of the style.css file. It looks like it is being overrode by the #content .post h2 rule because the override is after it within the css.
Let me know if this helps.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.