Alex Selejan
asked 8 years ago

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

5 Answers
DominicStaff
answered 8 years ago

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,

Alex Selejan
answered 8 years ago

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.

wptrinfo
replied 8 years ago

Hi Alex. Maybe it is help for you. Look at this article http://www.designwall.com/question/dw-focus-headline-on-new-theme/

DominicStaff
answered 8 years ago

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 !

Alex Selejan
answered 8 years ago

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!

dominic Staff
replied 8 years ago

Please send me username & password of your site (via private answer) I will check and help you resolve it.
Regards,

DominicStaff
answered 8 years ago

I have helped you resolve this issue, you can check your site now.
Regards,

selejanalex
replied 8 years ago

Amazing! Thank you so much for your support 😀

Powered by DW Question & Answer Pro