WordPress.org

Forums

Spun
[resolved] Problems with images behind text in circles (22 posts)

  1. WeasePR
    Member
    Posted 1 year ago #

    Andrew wrote this brilliant guide here on how to do this:
    http://wordpress.org/support/topic/put-test-inside-images-on-home-page?replies=2#post-4458376

    Problem is - on the circles with more text its moving down a line so looks a bit strange:
    http://weaselpr.com/sitefiles/site.png

    my site is not live and running with a landing page so I can't just direct you there - hence the screen shot

    Any ideas will be most grateful!

  2. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    You'd need to apply some JavaScript to do the following:

    //If circles have images & text
    
      //Get the height of the text
    
      //Get the height of the 'article' element
    
      //Take away the height of the text from the height of the 'article' element
    
      //Then halve that value (probably won't be this simple)
    
      //Re-apply a CSS 'top' style to the text (the anchor tag) and give it that value
    
      //Re-do that in a Window resize event.
  3. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Let us know if you can link to a website that has the text inside the circles (with images) so that recommending these changes will be a lot easier - at the moment that's a huge barrier to those who want to help.

  4. WeasePR
    Member
    Posted 1 year ago #

    Found this site on another thread:
    http://idwithoutcolors.com/

    same problem as mine on this one... Circles with text that takes up more than one line aren't centering vertically.. Also you are losing the bottom of the letter "g"

  5. WeasePR
    Member
    Posted 1 year ago #

    where should I put the Java Script? In my child theme style sheet at the bottom?

  6. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Testing
    Can you add install this plugin http://wordpress.org/plugins/css-javascript-toolbox/ and then to its JavaScript-adding-bit (I don't know where, haven't used it) add this:

    centerTitlesInCircles();
    
    jQuery(window).resize(function(){
     centerTitlesInCircles();
    });
    
    function centerTitlesInCircles() {
    
     jQuery('article').each(function(){
    
      if ( jQuery(this).children('.hometitle') ) {
    
       var circle_height = jQuery(this).height();
       var title_height  = jQuery(this).find('.hometitle').height();
    
       jQuery(this).find('.hometitle').css('top', ( circle_height - title_height ) / 2 + 'px');
    
      }
    
     });
    
    }
  7. ellp
    Member
    Posted 1 year ago #

    Hmmm did you use a CSS reset?

    * { margin:0 0; padding: 0 0;}
  8. WeasePR
    Member
    Posted 1 year ago #

    Thanks Andrew - I will try that

  9. WeasePR
    Member
    Posted 1 year ago #

    ellp - where should enter that code? In my style sheet?

  10. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    @WeasePR, You don't need to add that what @ellp recommended. Spun already uses resets: http://themes.svn.wordpress.org/spun/1.07/style.css

  11. ellp
    Member
    Posted 1 year ago #

    WeaserPr, Andrew is right. Sorry I didn't see the css :/

  12. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Also you are losing the bottom of the letter "g"

    Increase the line-height to 1.2em by adding this to your Child Theme stylesheet:

    .blog .hentry span.hometitle { line-height: 1.2em; }
  13. WeasePR
    Member
    Posted 1 year ago #

    Thank you Andrew you are a legend - will try all this now and let you know how I get on

  14. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    @WeasePR, I updated the guide which should resolve this issue:
    http://wordpress.org/support/topic/put-test-inside-images-on-home-page?replies=2#post-4458376

  15. WeasePR
    Member
    Posted 1 year ago #

    Hi Andrew - I've gone back to the guide.. But step 3 is causing problems:

    "Once you have done that, edit the content-home.php file from your Child Theme directory. Replace all of its contents with the code from this PasteBin page http://pastebin.com/uxnyhDWx ;"

    I'm using the code from the link and pasting into content-home.php but its making the site do this: http://i197.photobucket.com/albums/aa262/cheekyweasel/ScreenShot2013-08-12at133349_zpsd8b046dd.png

    Is that the wrong code on the link perhaps?

    Thanks again

  16. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Uh oh looks like I got the pastebin links mixed up - 1 sec

  17. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    I haven't access to the correct code at the moment, so I can't update PasteBin with the right code, but it (stage 1 step 3) should be the same as before. I didn't update the 'content-home.php' file.

  18. WeasePR
    Member
    Posted 1 year ago #

    Ahh yeah sorry Andrew I'd deleted that earlier code as I was trying out another option that Caroline had posted! No rush for this though

  19. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Okay, stage 1 step 3 should work now. Sorry about that.

  20. WeasePR
    Member
    Posted 1 year ago #

    Thanks so much Andrew - I repeat.. You are a legend!

  21. WeasePR
    Member
    Posted 1 year ago #

    Andrew - what can I remove from code to make text got back to white?

  22. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    Find this style from Stage 1 step 4:

    color: #111;

    And change it to:

    color: #000;

    http://www.w3schools.com/cssref/css_colornames.asp

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic