Hello,
I would like to make the first thumbnail, in the "recent news feed widget" larger than the rest of them.
Basically i want this display (http://imgur.com/YS9WJ42) on the home page (http://imgur.com/zbuKZ4p).
The first picture is from a category page, while the first one is the homepage. Since all the sections on the homepage are created using widgets, I do not know how to achieve this. Since, none of the widgets coming with the theme have this functionality.
Could you please help me with this? or please let me know if it is possible in the first place.
Thank you in advance.
Website: http://trendsonline.dk
Hi,
At the moment, Our theme does not support this feature. I sent and notified our technical team about your question. We will discuss about it.
Regards,
I see, thank you for your quick response.
In the meantime would there be a "quick" workaround, in order to have this piece of functionality? For example creating a widget that can extract the article, like in the category pages? Or not really ?
Thank you for your time.
Hi Alex. Maybe it is help for you. Look at this article http://www.designwall.com/question/dw-focus-headline-on-new-theme/
Hi @Alex,
To resolve this issue, you can add the following code to the style.css file:
@media (min-width: 980px ) {
.home #primary .widget .tab-content .dw_focus_recents_posts .item:nth-of-type(1) {
width: 65% !important;
background: #fff;
height: 270px;
margin-top: 0;
padding-top: 20px;
margin-left: 0 !important;
}
.home #primary .widget .tab-content .dw_focus_recents_posts .item:nth-of-type(1) .entry- thumbnail .entry-title {
position: absolute;
background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGDYDAAAuAC0lXSlKAAAAABJRU5ErkJggg==") repeat scroll 0% 0%;
bottom: -10px;
display: block;
width: 100%;
padding: 20px 10px 20px !important;
box-sizing: border-box;
}
.home #primary .widget .tab-content .dw_focus_recents_posts .item:nth-of-type(1) .entry-thumbnail .entry-title a {
color: #fff;
font-size: 24px;
}
.dw_focus_recents_posts {
background: transparent url("assets/img/dot-ddd.gif") repeat-y scroll 32.5% 0px;
position: relative !important;
border-bottom: 1px solid #ddd !important;
}
.home #primary .tab-pane.dw_focus_recents_posts::before {
background: none;
}
.home #primary .widget .tab-content .dw_focus_recents_posts .item {
border-bottom: 1px solid #ddd;
height: 250px;
}
.home #primary .tab-pane.dw_focus_recents_posts .entry-title {
padding: 10px 0 0;
}
.home #primary .widget .tab-content .dw_focus_recents_posts .item:nth-of-type(3) {
clear: left;
margin-left: 0;
}
.home #primary .widget .tab-content .dw_focus_recents_posts .item:nth-of-type(9) {
margin-left: 0;
}
.home #primary .widget .tab-content .dw_focus_recents_posts .item:nth-of-type(6) {
margin-left: 0;
}
.home #primary .widget .tab-content .dw_focus_recents_posts .item:nth-of-type(3n+1) {
clear: right !important;
margin-left: 37px;
}
}
Finally, you need Choose an image size is Large
see the screenshot: http://prntscr.com/8uch3w
Hope this helps !
First of all, I would like to thank you for going out of your way to help me. The customer support on this site has been amazing.
I have tried the code provided and it almost works. I have tried myself to "play" a bit with the css code but with no result. As you can see if you access http://trendsonline.staging.wpengine.com
Any ideas what causes the issue ?
Thank you once again for your help so far!
Please send me username & password of your site (via private answer) I will check and help you resolve it.
Regards,
I have helped you resolve this issue, you can check your site now.
Regards,
Amazing! Thank you so much for your support 😀
Please login or Register to submit your answer