Support » Theme: Spun » Problems with images behind text in circles

Viewing 15 replies - 1 through 15 (of 21 total)
  • Moderator Andrew Nevins

    (@anevins)

    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.

    Moderator Andrew Nevins

    (@anevins)

    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.

    WeasePR

    (@weasepr)

    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”

    WeasePR

    (@weasepr)

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

    Moderator Andrew Nevins

    (@anevins)

    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');
    
      }
    
     });
    
    }

    ellp

    (@ellp)

    Hmmm did you use a CSS reset?

    * { margin:0 0; padding: 0 0;}
    WeasePR

    (@weasepr)

    Thanks Andrew – I will try that

    WeasePR

    (@weasepr)

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

    Moderator Andrew Nevins

    (@anevins)

    @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

    ellp

    (@ellp)

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

    Moderator Andrew Nevins

    (@anevins)

    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; }

    WeasePR

    (@weasepr)

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

    Moderator Andrew Nevins

    (@anevins)

    WeasePR

    (@weasepr)

    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

    Moderator Andrew Nevins

    (@anevins)

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

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Problems with images behind text in circles’ is closed to new replies.