WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] text inside the circle (9 posts)

  1. elmariel
    Member
    Posted 10 months ago #

    Hi,
    I'm new to the wordpress and I do not know php ant other languages. I am trying to insert text under circles or inside the circles (in standard fonts) - I supposed that I used all the solutions which were mentioned earlier in previous posts however nothing works for me. For example this one works great-
    http://wordpress.org/support/topic/solution-for-printing-title-of-post-over-images-in-homepage?replies=1
    however there is one disadvantage: my circles were multiplied - and I do not know how to repair it.

    I would be very thankful if somebody will be able to help me with inserting text under circles (I prefer that) or inside circle (if under circle is not possible :)

    Thanks a lot

  2. Andrew
    Forum Moderator
    Posted 10 months ago #

    The text is already inside circles, what do you mean?

  3. elmariel
    Member
    Posted 10 months ago #

    Hi,
    thank you for your quick response:)

    The text is alredy in two circles which do not have picture inside. My website is http://www.wylotkinawarszawe.pl
    I would like to insert text also to the circles with pictures (in the same style as it is inside the left and right circle without picture).

    OR

    even more preferable (I do not know if it is feasible) - to add text below the circles with pictures only (in the same style as it is inside the left and right circle without picture).

    best
    Mateusz

  4. Andrew
    Forum Moderator
    Posted 10 months ago #

    I would like to insert text also to the circles with pictures (in the same style as it is inside the left and right circle without picture).

    Try following Stage 1 and Stage 2 of this guide: http://wordpress.org/support/topic/put-test-inside-images-on-home-page

  5. elmariel
    Member
    Posted 10 months ago #

    Thank you once again. I think that I followed all the steps from the guideline and it is almost perfect :)

    It is a little strange that before I emptied my cache in a browser the text was below circles with pictures and inside the circles without pictures. What was missing was that fonts were different than in the first and the last circle and the text was not in the middle (under the circle) - it was a little bit moved to the left. Beside this I think that it looked very good and better than all text in circle - after empting the cache the text moved to the centre of circles - but in hardly visible. Could you help me please and show me how to insert text (in this style) under the circles with pictures only? Because it looks better and is more visible than all the text inside the circles.
    Sorry for my confusion of the case :)

    best
    Mateusz

  6. Andrew
    Forum Moderator
    Posted 10 months ago #

    In your Child Theme style.css file replace this:

    .blog .hentry span.hometitle {
     width: 100%;
     position: absolute;
     top: 73px;
     display: table-cell;
    
     font-family: Baskerville, "Playfair Display", "Times New Roman", serif;
     font-size: 32px;
     font-size: 3.2rem;
     font-style: italic;
     text-shadow: 0 0 10px #fff;
     text-align: center;
    
     line-height: 1.2;
     vertical-align: middle;
     word-wrap: break-word;
     color: #111;
    
     overflow: hidden;
    
     transition: background .4s ease-in-out;
     -webkit-transition: background .4s ease-in-out;
     -moz-transition: background .4s ease-in-out;
     -o-transition: background .4s ease-in-out;
     -ms-transition: background .4s ease-in-out;
    }

    With this:

    .blog .hentry span.hometitle {
     width: 100%;
     top: 73px;
     display: table-cell;
    
     font-family: Baskerville, "Playfair Display", "Times New Roman", serif;
     font-size: 32px;
     font-size: 3.2rem;
     font-style: italic;
     text-shadow: 0 0 10px #fff;
     text-align: center;
    
     line-height: 1.2;
     vertical-align: middle;
     word-wrap: break-word;
     color: #111;
    
     overflow: hidden;
    
     transition: background .4s ease-in-out;
     -webkit-transition: background .4s ease-in-out;
     -moz-transition: background .4s ease-in-out;
     -o-transition: background .4s ease-in-out;
     -ms-transition: background .4s ease-in-out;
    }

    But the text is going to be cut off when the screen resizes smaller.

  7. elmariel
    Member
    Posted 10 months ago #

    Thanks a lot for your help. You are right. I changed the website using your previous code :) it is more operatable. I changed color of text and shadow. I have last question - how to make transition in circles with picture. If I'm not mistaken previously the colour of the circles changed into grey when you put a cursor in it. Thank you once again for your help.

    best
    Mateusz

  8. Andrew
    Forum Moderator
    Posted 10 months ago #

    Hi Mateusz, could you create a new thread for that question? It helps people searching for solutions in the future, if one issue is discussed per thread.

    Thanks :)

  9. elmariel
    Member
    Posted 10 months ago #

    Hi Andrew,
    Thank you, you are right - I will create a new thread for this. Once again many thanks for your priceless help.

    best :)
    Mateusz

Reply

You must log in to post.

About this Theme

About this Topic