WordPress.org

Support

Support » Themes and Templates » [Resolved] text inside the circle

[Resolved] text inside the circle

  • elmariel

    @elmariel

    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

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

    @anevins

    Forum moderator

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

    elmariel

    @elmariel

    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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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

    elmariel

    @elmariel

    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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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.

    elmariel

    @elmariel

    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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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 🙂

    elmariel

    @elmariel

    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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] text inside the circle’ is closed to new replies.