WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] some change on css child theme in homepage (17 posts)

  1. gfr77
    Member
    Posted 1 year ago #

    I have my CSS on a child Theme, and now i want to change a little bit the apparience of de homepage.

    I want to:

    1. Is it possible to change the dimensions of the circles?

    2. I want to put only 3 circles for line is it possible?

    3. Is it possible to put the name of the post in the center of the circle?

    Thanks a lot

    I´m very happy with this theme

    Eloy

  2. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    1) Yes, you can do this by setting the width and height values to your desired dimensions on the .hentry selector in your stylesheet.

    2) Yes, read more about how to do this here:
    http://wordpress.org/support/topic/edit-amount-of-circles-in-a-row?replies=2

    3) Yes, read more about how to do this here:
    http://wordpress.org/support/topic/show-post-title-over-images-during-rollover?replies=10

  3. gfr77
    Member
    Posted 1 year ago #

    Thanks,
    I've some question about number 1
    I need to modify style.css?

    In style.css i have some lines when apear .hentry can you help me?

    Thanks a lot!!

  4. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    You would add to your child theme's style.css:

    .hentry {
     width: ###px;
     height: ###px;
    }

    Replacing ### with the desired width and height.

  5. gfr77
    Member
    Posted 1 year ago #

    Thanks a lot!

    I ultimately learn ;)

    How meny pixels are in the Spun theme?

  6. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    You can find that info in the theme's style.css -- check for the .hentry selector.

  7. gfr77
    Member
    Posted 1 year ago #

    Thanks Caroline,
    My questions number 1 and 2 are now resolved thanks a lot!

    But i have some problems to put the post-title in front of the image.

    I modify the content-home.php, this is the code that i introduce:
    $thumb = get_the_post_thumbnail( $post->ID, 'post-thumbnail', array( 'title' => esc_attr( get_the_title() ) ) ) . '<span class="no-thumbnail">' . get_the_title() . '</span>';

    Now all the content-home.php

    <?php
    /**
     * @package Spun
     * @since Spun 1.0
     */
    
    /*
     * Get the post thumbnail; if one does not exist, try to get the first attached image.
     * If no images exist, let's print the post title instead.
     */
    
    global $post;
    $postclass = '';
    
    if ( '' != get_the_post_thumbnail() ) {
    	/* $thumb = get_the_post_thumbnail( $post->ID, 'post-thumbnail', array( 'title' => esc_attr( get_the_title() ) ) ); */
            	$thumb = get_the_post_thumbnail( $post->ID, 'post-thumbnail', array( 'title' => esc_attr( get_the_title() ) ) ) . '<span class="no-thumbnail">' . get_the_title() . '</span>';
    }
    else {
    	$args = array(
    				'post_type' => 'attachment',
    				'numberposts' => 1,
    				'post_status' => null,
    				'post_mime_type' => 'image',
    				'post_parent' => $post->ID,
    			);
    
    	$first_attachment = get_children( $args );
    
    	if ( $first_attachment ) {
    		foreach ( $first_attachment as $attachment ) {
    			$thumb = wp_get_attachment_image( $attachment->ID, 'post-thumbnail', false, array( 'title' => esc_attr( get_the_title() ) ) );
    		}
    	}
    	else {
    		$thumb = '<span class="no-thumbnail">' . get_the_title() . '</span>';
    		$postclass = 'no-thumbnail';
    	}
    }
    ?>
    
    <article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
    	<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php echo $thumb; ?></a>
    </article><!-- #post-<?php the_ID(); ?> -->

    But the home page not change, the name is not in front of the circle, what i'm doing wrong?

    Thanks

  8. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    If you always want the title to appear, I'd try adding it to the last part where the article is printed:

    <article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
    	<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php echo $thumb; ?><?php the_title(); ?></a>
    </article><!-- #post-<?php the_ID(); ?> -->

    Then remove this line to avoid duplication in the event no post thumb is assigned:

    $thumb = '<span class="no-thumbnail">' . get_the_title() . '</span>';

    Then adjust the title's position and appearance with CSS. You may need to set a high z-index so it appears layered over the image.

  9. gfr77
    Member
    Posted 1 year ago #

    Thanks Caroline,

    This code:

    <article id="post-<?php the_ID(); ?>" <?php post_class( $postclass ); ?>>
    	<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php echo $thumb; ?><?php the_title(); ?></a>
    </article><!-- #post-<?php the_ID(); ?> -->

    It's work very good, but i don't now how to chenge in css the font-style, size, and position of this title in the circle.

    Thanks a lot

  10. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    I recommend checking out the CSS resources here, and downloading an add-on like Firebug for troubleshooting if you haven't already.

    I don't provide basic CSS support, but others may jump in if you can be more specific about what you want the title to look like.

    Good luck!

  11. new013
    Member
    Posted 1 year ago #

    Thanks for this thread!! The code you provided works better for me then the other thread (before the titles were showing up in different areas, now they are all nicely tucked under the circle). I am excited to get styling them in CSS (already have a working child theme/style sheet) but as I am not familiar with PHP (I'm trying to learn though!) I'm not sure how to choose a selector from your code to use in the CSS to target the titles and style them? Do I need to add a class/id somewhere? Could someone please point me in the right direction??

    Thank you to anyone who tries to help me :)

    And thank you @Caroline Moore for such a great theme! We started with plans to just use it for our blog and now want to redo our whole site with it!! It's wonderful!

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    I'm not sure how to choose a selector from your code to use in the CSS to target the titles and style them?

    Firebug exposes these selectors for you. You almost never need to add classes and IDs, it's already in the code for you to utilise.

    For example, here are the selectors exposed from Google Chrome's built-in developer tools; [screenshot].

  13. new013
    Member
    Posted 1 year ago #

    Thanks Andrew! I appreciate your prompt reply. I have been using safari's inspector to find selectors but maybe it's not the best choice? I'll download firebug right now but with Safari I can't seem to find the right selector to use to target the titles...

    Here's the URL if you have a chance to take a look

    Am I missing something? I will download firebug now though and maybe that will work better? Thanks for the suggestion.

    Let me know if you think there is something I'm missing!!

    Thanks again!! I really appreciate your help!

  14. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    It looks like you need to wrap the title in a span with a specific class so you can style it, yes.

  15. new013
    Member
    Posted 1 year ago #

    Thanks Caroline. I appreciate your help!! I'm sorry if this is rather basic but I've been playing with it for quite a while now and although I could isolate the title with a span & class i am still having trouble getting it to move where I want it (overlay on the image). I know you don't provide CSS support but do you have any suggestions about where the best spot to put the span is? i.e. where in the code?

    I'm working on learning PHP so I have a better understanding of these things! If was just HTML I would know how to do it but I get a little lost with the PHP :)

    Thanks again for you help! I really do appreciate it!

  16. new013
    Member
    Posted 1 year ago #

    Also, if I delete

    $thumb = '<span class="no-thumbnail">' . get_the_title() . '</span>';

    as you suggested above then it changes the titles on the circles without images (one can't be seen at all and another just shows part of it)...Am I missing something or perhaps once I get the span working I can position those titles the same way as the ones with images?

    Thanks!

  17. new013
    Member
    Posted 1 year ago #

    In case anyone is following this thread...I posted a question similar to this (with the above code suggested earlier in this thread) on another forum and Andrew Nevins was kind enough to help me with a solution so I thought I would share it here in case other people have the same issue.

    I still have to play around with it to see if I can get it to only display on hover but I am very happy to finally have something that's working to show the title!

    Here's the link to the previous post.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.