Hi peterlaz,
The CSS below should get you started. Your these is automatically adding bottom margin to the image, so setting that to zero will reduce the space a bit. They you can also slim down the padding surrounding the entry content. The top padding is currently set to 40px.
.featuredpage .aligncenter {
margin-bottom: 0;
}
.featuredpage .entry-content {
padding-top: 30px;
}
Hope this help, let me know if you have any further questions.
Nick
Thanks Nick. The CSS helped to remove the blank space above the content. However the image to seems have a padding/margin below it too. How can I remove the blank space below the image?
Thanks once again for the cool plugin and prompt support.
I have more or less settled on the padding and margin issues. I realized that the CSS settings also affect the default genesis featured page. Therefore I have qualified the selector settings with the section ID. Here is the CSS settings that I am using.
#featured-page-advanced-2 .widget-wrap .widget-title
{
background: black;
color: white;
display: block;
}
#featured-page-advanced-2 .widget-wrap .entry-content
{
background: #f0b71c;
color: black;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
text-align: left;
}
I have one issue with the above settings. It seems the background color of widget-title is being overwritten by the background color settings of the entry-content. How can I set the background color of the widget-title and entry-content independently?
Another issue that I am facing is the CSS settings on the READ MORE call to action button. How can I set the focus setting to reverse the colors? The theme settings is not doing it by default.
Please ignore the earlier post. I have cleaned up the codes. Here is the latest status.
I have more or less settled on the padding and margin issues. There is one more issue though. When I place the cursor on the more-link, the focus settings does not the reverse the color. The theme settings is not doing it by default. How can I implement that in my CSS settings? Here is the CSS codes that I am using for the more-link.
.featuredpage .more-link
{
display: block;
width: 60%;
margin: 0 auto;
padding: 10px;
font-family: ‘Titillium Web’, sans-serif;
font-size: 20px;
text-align: center;
text-transform: uppercase;
color: #FFF;
background: #000;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
Thank you very much.
Hi peterlaz,
I apologize, for the delay. I was on vacation for the holiday weekend. You will need to us the :hover CSS selector. So something like:
.featuredpage .more-link:hover {
color: black;
background: red;
}
Obviously change the colors to match your theme. Let me know if this works for you.
Works like a charm.
Thank you very much. Much appreciated.
Glad it worked for you, marking this as resolved. Let me know if you have any further questions.
Nick
