add "circles" to other pages

Well, I don’t know about Michael solution, but wilmcclung was referring to the css code I suggested ( which is what he used, if you look at his source). That solves the contemporary expansion of all blocks. Explanation: In the core css a round-div (in an article selector) is expanded also when you hover on an article (see post lists behavior). So the problem was that as soon as you entered the article (container of all “circles” in wilmcclung case), all circles were expanded.
The css above just overrides the article .round-div expansion on article hover leaving unchanged the expansion on the single widget hover (.widget-front.hover .round-div).

So if you want to use this post, consider that.

@d4z_c0nf
Good Morning Sunshine,
I am still working on placing the slider on the archive page, however I am really interested in your hack so that I can have circles on the PAGES as opposed a the POSTS on archive pages.
Deird ??

Guys, this is getting a bit messy. If you need support and this is not your topic (i.e. you aren’t rollerh4) then could you create your own thread here: https://www.ads-software.com/support/theme/customizr#postform

@immelting :D.
Well my hack was to show featured pages also in non-home pages. I just used customizr hooks and some php code, since I didn’t want to do add circles in articles (like wilmcclung does), but you don’t need that.
What you want is have pages as lists of posts, maybe this could help you:
https://www.ads-software.com/support/topic/certain-category-posts-on-a-certain-page?replies=8

This adds posts of a certain category under the page content, page which has to use that template. Consider that I reset the custom query (wp_reset_query()) before comments and navigation, that’s ’cause I “wanted” to have comments for the page. But if you want to have posts navigation, then you don’t need that, or at least you can put that reset after do_action('__after_loop');.
Hope this helps.

@wilmcclung

Could you please explain me how did you added these circles ? That’s what I want to do, except I want to add them to another page, other than the home page. Which file should I edit to add them ?

@roller
You don’t need to edit any php files. I right clicked and chose inspect element to view the html on the circles. This was basically the same as what Michael posted above but here is my actual code that was used on my site. All you need to do is click edit a page and insert the code in the text editor, not the visual editor.
First the css:

<style>
article.hover .round-div{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
</style>

And here is the html for the circle:

<div class="container marketing">

<div class="row widget-area" role="complementary"><div class="span4 fp-one1">
<div class="widget-front">
<div class="thumb-wrapper "><a class="round-div" href="https://www.duplex-pump.com/gardner-denver" title="Gardner Denver"></a><img width="270" height="250" src="https://www.duplex-pump.com/wp-content/uploads/2014/03/54086-001-e1394308679935.jpg" class="attachment-medium wp-post-image" alt="wand" /></div><h2>Gardner Denver</h2><p class="fp-text-one">Blah blah blah</p><a class="btn btn-primary fp-button" href="https://www.duplex-pump.com/gardner-denver" title="Gardner Denver">See All</a>
</div><!-- /.widget-front -->

</div><div class="span4 fp-two">
<div class="widget-front">
<div class="thumb-wrapper "><a class="round-div" href="https://www.duplex-pump.com/gaso" title="Gaso"></a><img width="270" height="250" src="https://www.duplex-pump.com/wp-content/uploads/2014/03/55839-003-e1394309463927.jpg" class="attachment-medium wp-post-image" alt="plus" /></div><h2>Gaso</h2><p class="fp-text-two">blah blah blah</p><a class="btn btn-primary fp-button" href="https://www.duplex-pump.com/gaso" title="Gaso">See All ?</a>
</div><!-- /.widget-front -->

</div><div class="span4 fp-three">
<div class="widget-front">
<div class="thumb-wrapper "><a class="round-div" href="https://www.duplex-pump.com/wheatley" title="Wheatley"></a><img width="270" height="250" src="https://www.duplex-pump.com/wp-content/uploads/2014/03/56185-001-e1394311900416.jpg" class="attachment-medium wp-post-image" alt="html5" /></div><h2>Wheatley</h2><p class="fp-text-three">blah blah blah</p><a class="btn btn-primary fp-button" href="https://www.duplex-pump.com/wheatley" title="Wheatley">See All</a>
</div><!-- /.widget-front -->

</div></div>
</div><!-- .container -->

So I’m not sure how sure how well you parse html so if this is confusing let me know. You’ll see i used<div class=”span4″> This is part of the bootstrap layout. Since bootstrap uses a 12 space grid having span 4 means that you will have three items centered in the grid, if you only have two items you can use span6.

Use:

.page article.hover .round-div{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}

in order to don’t lose the transform effect when hovering on an article in posts lists.

@wilmcclung

OK I decided to just use another class named “circular-image pic” instead of “round div”, so my html is like that

<div class="container marketing">

<div class="row widget-area" role="complementary"><div class="span4 fp-one">
<div class="widget-front">
<div class="thumb-wrapper "><div class="circular-image pic"><a href="?p=269" title="First Name"></a><img width="270" height="250" src="https://placebopharm.gr/wp-content/uploads/2014/03/sec_43f560e06b7d8551cd371c62d344bff2.jpg" class="attachment-medium wp-post-image" alt="photo" /></div><h2>First Name</h2><p class="fp-text-one">Blah blah blah</p><a class="btn btn-primary fp-button" href="https://www.google.com" title="First Name">See All</a>
</div>

</div><div class="span4 fp-two">
<div class="widget-front">
<div class="thumb-wrapper "><div class="circular-image pic"><a href="?page_id=188" title="Second"></a><img width="270" height="250" src="https://placebopharm.gr/wp-content/uploads/2014/03/sec_43f560e06b7d8551cd371c62d344bff2.jpg" class="attachment-medium wp-post-image" alt="plus" /></div><h2>Second</h2><p class="fp-text-two">blah blah blah</p><a class="btn btn-primary fp-button" href="https://www.google.com" title="Second">See All ?</a>
</div>

</div><div class="span4 fp-three">
<div class="widget-front">
<div class="thumb-wrapper "><div class="circular-image pic"><a href="?page_id=188" title="3rd"></a><img width="270" height="250" src="https://placebopharm.gr/wp-content/uploads/2014/03/sec_43f560e06b7d8551cd371c62d344bff2.jpg" class="attachment-medium wp-post-image" alt="html5" /></div><h2>3rd</h2><p class="fp-text-three">blah blah blah</p><a class="btn btn-primary fp-button" href="https://www.google.com" title="3rd">See All</a>
</div>

</div></div>
</div>

Hovering is fine (I have included that at style.css) and the first of the 3 images is fine too. However the last 2 images, are not next to the first, but they are under it, and in addition they have lost the original shape that the class demands.. there is the link

https://placebopharm.gr/?page_id=76

Thanks in advance for your time

You didn’t close the divs in the right way. E.g
</div><div class="span4 fp-two">
make it
</div></div><div class="span4 fp-two">

Same thing with the fp-three part.
But.. is this what you want to achieve? Don’t know..

Thank you..! that’s what I wanted.

Good, so it’s solved ??

Hi there, I have really found this post useful. I have looked and rechecked, there is a post above talking about closing the </divs>. Can anyone see where I have missed it? I still have them aligned vertically down the page not 3 across, it’s span4 so should be 3 accross the page .

Thanks in advance to whomever spend the time

[ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]

<style>
article.hover .round-div{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1)
}
</style>

<div class="container marketing">

<div class="row widget-area" role="complementary"><div class="span4 fp-one">
<div class="widget-front">
<div class="thumb-wrapper "><a href="https://www.hands2heart.com.au" title="Importance Of Touch"></a><img width="270" height="250" src="https://www.hands2heart.com.au/wp-content/uploads/2013/05/77278606.jpg" class="attachment-medium wp-post-image" alt="wand" /></div><h2>Importance Of Touch</h2><p class="fp-text-one">Read More</p><a href="https://www.hands2heart.com.au" title="Importance Of Touch">See All</a>
</div><!-- /.widget-front -->

</div><div class="span4 fp-two">
<div class="widget-front">
<div class="thumb-wrapper "><a href="https://www.hands2heart.com.au" title="5 Languages Of Love"></a><img width="270" height="250" src="https://www.hands2heart.com.au/wp-content/uploads/2013/05/168707881.jpg" class="attachment-medium wp-post-image" alt="plus" /></div><h2>5 Languages Of Love</h2><p class="fp-text-two">Read More</p><a href="https://www.hands2heart.com.au" title="5 Languages Of Love">Read More</a>
</div><!-- /.widget-front -->

</div><div class="span4 fp-three">
<div class="widget-front">
<div class="thumb-wrapper "><a href="https://www.hands2heart.com.au" title="Wheatley"></a><img width="270" height="250" src="https://www.hands2heart.com.au/wp-content/uploads/2013/05/121201649.jpg" class="attachment-medium wp-post-image" alt="html5" /></div><h2>Getting Started</h2><p class="fp-text-three">Read More</p><a href="https://www.hands2heart.com.au" title="Getting Started">See All</a>
</div></div><!-- /.widget-front -->

</div></div><!-- .container -->

@benwezza Per the forum welcome please post your own topic.

https://www.ads-software.com/support/theme/customizr#postform

It’s the best way to get support for your problem.

Sorry the question i am asking is in relation to this post so isn’t it the correct spot to ask? Haven’t used the forum before but seems wrong to re-post a topic that is already answered. i am just having an issue with what they have posted and need help on it.

No sorry it will never be the correct spot because www.ads-software.com forums work on the concept that;
You should create your own thread to discuss your own issues (and retrieve your own support).