Circles in Pages

  • Resolved elotroalex

    (@elotroalex)


    11 years, 8 months ago

    Hi,

    Thanks again for a great theme!

    Atm, I’m trying to get circles in pages that are populated by posts according to specific categories. I created a child-theme which includes the following template: 

    <?php
/*
Template Name: People
*/
get_header();
?>

<div id="primary" class="content-area">
  <div id="content" class="site-content" role="main">

  <?php
  the_post();

  $args = array(
	'category_name' => 'people',
  );

  $list_of_posts = new WP_Query( $args );
    while ( $list_of_posts->have_posts() ): $list_of_posts->the_post();
    get_template_part( 'content', 'home' );

  endwhile;
  ?>

  </div><!-- #content .site-content -->
</div><!-- #primary .content-area -->

<?php get_sidebar(); ?>
<?php get_footer();

    My page I have set up with this template is here.

    I’ve compared the generated hmtl in the homepage and this page and for the life of me, I can’t see why the thumbnails are not being turned into circles. Stumped.

    I browsed through the posts here to see if anyone else had tried to do this and I couldn’t judge from the headings.

Viewing 7 replies - 1 through 7 (of 7 total)

  • I’m attempting to have my own child theme’s style.css. I’ve indicated that the and have inserted my name as the author, but still can’t seem to get the process right. I’d higly appreciate any advice. I’m using the twenty eleven theme.

    Thanks,

    @mendy – please start a new thread with your question – this thread is about a different theme and different question entirely. You can start a twentyeleven thread here:

    https://www.ads-software.com/support/theme/twentyeleven

    EDIT – just so you have it right away, here’s the information about making a child theme: https://codex.www.ads-software.com/Child_Themes

    Thread Starter elotroalex

    (@elotroalex)

    The solution to my earlier question is to add the .page class as a parent to the CSS tweaks, which I was not doing.

    Now if I could only figure out how to change the CSS for current-menu-item…

    elotro, I am trying to have the same kind of setup you are using for your website but I am a little confused as to how you made the .page class a parent to the CSS tweaks. Could you break down what modification you made to the original theme to make this work?

    Thread Starter elotroalex

    (@elotroalex)

    assassin,

    here’s the relevant CSS for the circles in the pages. I should point out that I still need to fix how this works for Firefox where the circles disappear.

    /* CIRCLES IN PAGES */

.page .type-post {
	background: transparent;
	position: relative;
	width: 180px;
	height: 180px;
	padding: 10px 10px 34px 10px;

}
.page .hentry a {
	display: block;
	width: 100%;
	height: 100%;
	z-index: 10;
}

.page .hentry a .attachment-post-thumbnail {
	border-radius: 180px;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-webkit-filter: grayscale(1); /* Older versions of webkit */
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%); /* IE 10 */
	filter: gray; /* IE 9 */
	filter: url('inc/desaturate.svg#greyscale'); /* Firefox */
	opacity: .8;
	-webkit-opacity: .8;
	-moz-opacity: .8;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.page .hentry a:hover img {
	border-radius: 180px;
	filter: none;
	-webkit-filter: none;
	-moz-filter: none;
	-o-filter: none;
	-ms-filter: none;
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	width: 100%;
	height: 100%;
}

    Thanks for the help Elotro, since my main browser is Firefox that disappearing icon thing was driving me insane, however I fixed it with a really easy edit.

    filter: url('inc/desaturate.svg#greyscale'); /* Firefox */

    is a reference to the file desaturate.svg which is contained in the inc directory which is inside of the spun theme directory.

    Since we have been using child themes, this path was no longer valid because we did not copy the inc directory into the child theme’s directory.

    So this can be easily fixed either by copying the inc directory into the child theme, or by changing your path name in the code to reference the correct location, like so:

    filter: url('../spun/inc/desaturate.svg#greyscale'); /* Firefox */

    Hope this helps!

    Thread Starter elotroalex

    (@elotroalex)

    Sweet! Thanks, Assassin. You just saved me some time pulling my hairs.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Circles in Pages’ is closed to new replies.