Style CSS alternative options

Hi,

Thanks for the comments. Am glad to know you like the plugin.

Have you tried the inbuilt styles that you can turn on under Custom Styles?

Thanks for the reply. Yes the inbuilt styles were tested as well. Unfortunately they are very cool, but unfortunately they do not fit to the site design ?? That is why I’m looking for the possibility of making it as here https://gyazo.com/d6de99cef0b9bb03cb4557e02a8aab88
Currently the block looks like here — https://gyazo.com/3e67a69a13546c138eca1e0f24b0e9e4

I would highly appricaite your help.

Can you tell me what the source of the first image is? I can study the CSS there to see what it is.

sorry, I’m not sure that I get properly what you mean by the source of the first image, but if you meant the url, here it is — https://freesmi.by/wp-content/uploads/2015/03/slide_3-60×60.jpg

The widget itself you may find in the buttom part of the right sidebar on this page — https://freesmi.by/category/katastrofy

Sorry, I should have been clearer. Where do I find the html / css code used in https://gyazo.com/d6de99cef0b9bb03cb4557e02a8aab88

Can you try the code at: https://github.com/ajaydsouza/top-10/blob/master/css/default-style.css

But, customise it by removing all the shadow and corners. This would be the first step of tweaking

-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;

and

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	box-shadow: 0 1px 2px rgba(0,0,0,.4);
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;

Hello,

Thanks a lot for the explanation. It really helps. Unfortunately I don’t know css source for this widget block https://gyazo.com/d6de99cef0b9bb03cb4557e02a8aab88 as it is advertisement block and goes directly from partner’s system

Regarding the TOP 10 widget block, I have left the following code:

img.tptn_thumb {
	width:60px !important;
	height:60px !important;
	float:left;
	clear:left;
	padding:3px !important;
	margin-right: 5px !important;
}

.tptn_posts_daily ul li, .tptn_posts ul li {
	clear:both;
	list-style:none;
	margin-bottom:15px;
	display:block;
	background: none;
	padding:0 !important;
}

Now it looks in this way — https://gyazo.com/da1a0d4926fe090989660af69628f772 Your directions helped to make the block very similar to this one https://gyazo.com/d6de99cef0b9bb03cb4557e02a8aab88

Can you also please advice how I may remove lines below the title and make this distance between images bigger https://gyazo.com/5b904448186f9696dac89de815e0c938 to make it similar to this reference https://gyazo.com/d6de99cef0b9bb03cb4557e02a8aab88

Thanks,
Denis.

For .tptn_posts_daily ul li, add this:

border-bottom: none !important;
  min-height: 80px !important;

You can modify the 80px as per your desire.

For removing lines below title:

.tptn_posts_daily a {
  text-decoration: none:
}

THat is very helpful. Thank a lot for your help! Really appreciate it!

Have a great Friday!

You’re welcome ??