Break site title to second line or replace with bigger logo

Home Forums Automattic Bon Vivant Break site title to second line or replace with bigger logo

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #162631 Resolve

    Surfer Joe’s Pub & Grill
    Member

    I’ve been trying to research the answer on this for a couple of days now and hoping someone can help out with the site I’m working on, http://www.surferjoescb.com.

    Because the site tile is so long, it’s broken on to two lines, but not in the way I want it to. I would like to have “Surfer Joe’s” on one line just the way it is with regards to font size and color, and then on the second line have “Pub & Grill” reduced in size to about 72px and the font color changed to #96f7e5. Both lines centered.

    The only other option I can think of is to replace the site title with my logo that contains the name. The only problem with that is I would need to make the logo larger than what’s currently allowed by the theme in order to clearly see the text.

    I’m hoping someone much smarter than I can figure this out for me. I sure would appreciate the assistance.

    Thanks

    #162634

    Kathryn P.
    Happiness Engineer

    I would like to have “Surfer Joe’s” on one line just the way it is with regards to font size and color, and then on the second line have “Pub & Grill” reduced in size to about 72px and the font color changed to #96f7e5. Both lines centered.

    Hi there, I can’t think of a way to accomplish this, since there isn’t a way to either designate a specific point for a line break within the site title, nor is it possible to use two different colours.

    The only other option I can think of is to replace the site title with my logo that contains the name.

    That is a certainly a good workaround, if you can keep the text legible in the graphic.

    Another option would be to reduce the size of the site title so it all fits on one line. Something like this:

    .site-title {
      font-size: 95px;
      padding-bottom: 20px;
    }

    Here’s what it would look like:

    Surfer Joe s Pub Grill your local place for QUALITY Fresh Food and Good People Located on A1a in crescent beach FL

    You could also wrap it in a media query so it only applies to larger screens:

    @media only screen and ( min-width: 960px ) {
    
      .site-title {
        font-size: 95px;
        padding-bottom: 20px;
      }
    }

    Let me know if you have any other questions!

    #162635

    Surfer Joe’s Pub & Grill
    Member

    Thanks so much for the assistance. That at least provides us with some additional options.

    If we decide to go the logo route, is there a way to increase the allowable logo size in order for it to be large enough to see the text? An example of the size we need is contained in the first post on the front page. This would probably be our preferred option if possible.

    Thank you

    #162657

    Kathryn P.
    Happiness Engineer

    Since the site logo is sized using a function in the theme files, there isn’t a good way to increase its size while retaining image quality.

    To see what I mean, you could try adding this custom CSS:

    .site-logo {
         max-height: 294px;
         width: 300px;
    }
    

    …but I wouldn’t recommend it, as the image will turn fuzzy.

    I did notice that the maximum site logo size for Bon Vivant is 940px wide by 235px high. You could try reformatting the logo/text in a graphics program into something within those dimensions and see how that looks.

    #162662

    Surfer Joe’s Pub & Grill
    Member

    Thank you

    #162664

    Kathryn P.
    Happiness Engineer

    My pleasure. I’m going to mark this thread as resolved but feel free to start a new one if you need anything else.

    #163774

    Surfer Joe’s Pub & Grill
    Member

    Hello. I’m not sure if this is allowed but we are the new owners and we would like to make a change to the added “reservation” text box. Is it possible to do this way?

    Thank you.

    Kimberly

    #163775

    Kathryn P.
    Happiness Engineer

    Kimberly – this thread is already resolved. Could you please start a new thread and explain what you would like to do in more detail so we can better assist? Thanks.

    Visit:
    https://theme-support.wordpress.com/forum/automattic/bon-vivant

    …and scroll down to post your question.

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Break site title to second line or replace with bigger logo’ is closed to new replies.