WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. WeasePR
    Member
    Posted 11 months 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
    Posted 11 months 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
    Posted 11 months 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 11 months 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 11 months ago #

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

  6. Andrew
    Forum Moderator
    Posted 11 months 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 11 months ago #

    Hmmm did you use a CSS reset?

    * { margin:0 0; padding: 0 0;}
  8. WeasePR
    Member
    Posted 11 months ago #

    Thanks Andrew - I will try that

  9. WeasePR
    Member
    Posted 11 months ago #

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

  10. Andrew
    Forum Moderator
    Posted 11 months 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 11 months ago #

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

  12. Andrew
    Forum Moderator
    Posted 11 months 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 11 months 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
    Posted 11 months 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 11 months 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
    Posted 11 months ago #

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

  17. Andrew
    Forum Moderator
    Posted 11 months 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 11 months 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
    Posted 11 months ago #

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

  20. WeasePR
    Member
    Posted 11 months ago #

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

  21. WeasePR
    Member
    Posted 11 months ago #

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

  22. Andrew
    Forum Moderator
    Posted 11 months 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

Reply

You must log in to post.

About this Theme

About this Topic