Community Forums › Forums › Archived Forums › Design Tips and Tricks › Style only one h2 element? Genesis Grid Loop
- This topic has 6 replies, 2 voices, and was last updated 11 years, 8 months ago by
rfmeier.
-
AuthorPosts
-
June 3, 2013 at 10:07 am #43848
Brenners
MemberWebsite: 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.comJune 3, 2013 at 10:16 am #43849rfmeier
MemberHello,
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.
June 3, 2013 at 10:27 am #43850Brenners
MemberHere'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.
June 3, 2013 at 10:39 am #43852rfmeier
MemberTry 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.
June 3, 2013 at 10:49 am #43853rfmeier
MemberHello,
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.
June 3, 2013 at 12:53 pm #43892Brenners
MemberThank you. Thank you. Thank you. 🙂 Perfect.
June 3, 2013 at 1:05 pm #43897rfmeier
Member -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.