WordPress.org

Ready to get started?Download WordPress

Forums

Spun
[resolved] Re titles in circles (10 posts)

  1. ra_ra
    Member
    Posted 1 year ago #

    Following the Andrew's instruction on this post, I was able to successfully displayed the titles in circles - thank you, Andrew.

    My question is, is it at all possible to

    - change the font/size of those titles
    - the title(s) to appear only when hovered

    What I'm trying to achieve, if possible, is all the circles show only images (unless I choose particular circle(s) to have no image and only title), but when visitors hover over the circle, the title will appear so that they know what that circle would link to, if that make sense.

    The site is this

    Thanks for your help in advance.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    - change the font/size of those titles

    Sure, you see this style that you've now got in your Child Theme style.css file:

    .blog .hentry span.hometitle {
         position: absolute;
         top: 73px;
         width: 100%;
         text-align: center;
         position: absolute;
         top: 73px;
         width: 100%;
         text-align: center;
         color: #fafafa;
         display: table-cell;
         font-family: Baskerville, "Playfair Display", "Times New Roman", serif;
         font-size: 32px;
         font-size: 3.2rem;
         font-style: italic;
         line-height: 32px;
         overflow: hidden;
         text-align: center;
         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;
         vertical-align: middle;
         word-wrap: break-word;
    }

    If you want to change the font size try adjusting the "3.2rem" numerical value and keep the "rem" part.

    Changing the actual font family may be more difficult, unless the font is commonly available across platforms.

  3. ra_ra
    Member
    Posted 1 year ago #

    Thanks Andrew for your reply and advice.

    Since you kindly showed me where to edit the size, I was also able to figure out where I could edit other things (font, color, position etc) as well and made them work - thanks.

    Just one thing though - this only applied to the ones with the images.
    I was hoping to leave some of the circle without images but just titles to break things up a bit.

    Is there a way to apply this change to the ones without images as well?

    And since there was no advice re my second question, am I right to assume that it cannot be done?

    Thanks for your help. Cheers

  4. ra_ra
    Member
    Posted 1 year ago #

    Andrew,

    I've further investigated/studied the style sheet and was able to figure out editing the ones without images.

    If you (or anyone) could advise me re the second question would be appreciated though.

    Cheers

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    And since there was no advice re my second question, am I right to assume that it cannot be done?

    No, it can be done in CSS. No advice was given on my part because I like to address one issue at a time.

    Could you make the titles again? I can't see them anymore on your images.

  6. ra_ra
    Member
    Posted 1 year ago #

    Fair enough. I've re-applied the setting for the titles.

    Sorry the test site has been changing constantly at the moment as we've been working on different things all day.

    Thanks again for your help.

  7. ra_ra
    Member
    Posted 1 year ago #

    Just to update - the titles (with the images) are shown within the circles on the top page, but on other pages (eg. if you go to "latest news" or "stage" under "S+C+V", the title "post test 1"appears outside of the circle.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    To hide the titles until hover:

    .blog .hentry span.hometitle {
     left: -9999em;
    }
    
    .blog .hentry a:hover span.hometitle {
     left: 0;
    }
  9. ra_ra
    Member
    Posted 1 year ago #

    Thanks Andrew.

    It works the magic on top page, but other not on other pages.
    For example, if you go to the "latest news", "stage" or "voice", all the circles with images show the title underneath the circle.

    I have cleared the cache of course, and tried both on firefox and chrome - same results.

    Any ideas?

  10. ra_ra
    Member
    Posted 1 year ago #

    Hi Andrew,

    We've redone the setting to remove those ones outside of the circles and also decided not to have the titles for now as it is causing a bit too much delay to go forward with setting up the site.
    We still would love to achieve the effect if we can in the future, so we'll keep trying to figure this out, but for now we'll close the topic.

    Thank you for all your help though, we'll definitely keep your advice and try again later.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags