Site Title Customization

  • Author
    Posts
  • #1677475

    Hello,
    I am using the ‘Studio’ premium theme, but I have a css question.

    For my site title, I need to add a third line right below the subtitle (an urban healing center). I need to add: by kate madsen – in a script font. Is it possible to do this using css?
    http://www.theinnerground.com

    Thank you!

    The blog I need help with is theinnerground.com.

    #1677594

    You can use the “content” property to add plain text using CSS. Here is an example that will add text below the tagline (or site description) in the Studio theme:

    .site-description:after {
    	content: "by kate madsen";
    	display: block;
    }
    #1677600

    Thank you! You have helped me so much on here!
    Now, is it possible to change it to a cursive font (like a signature) and move it to the right of the line instead of the left?
    http://www.theinnerground.com

    #1677601

    Also is it possible to close the space between the title and subtitle a bit?

    #1677617

    Try adding “font-family: cursive;” to the “.site-description:after” block.

    It will select the viewer’s default cursive font (every computer could have different fonts installed). You could add other font names to the list, but the viewer’s computer would need to have them installed in order to see them. You can find out more about font stacks at:
    http://coding.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/

    #1677618

    Also is it possible to close the space between the title and subtitle a bit?

    Try this:

    .site-title {
    	margin-bottom: 0;
    }

    You might also like:
    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    #1677622

    Almost perfect! Is it possible to move the cursive font to the right instead of the left?
    And is it possible to make the cursive font bigger?

    If I wish to use FF Market font in italics instead of cursive…do I just put ‘ffmarket’ in place of ‘cursive’ in the prior addition?
    Thanks again,
    Kate
    http://www.theinnerground.com

    #1677640

    Almost perfect! Is it possible to move the cursive font to the right instead of the left?
    And is it possible to make the cursive font bigger?

    In the rule for “.site-description:after” add this:

    font-size: 1.5em;

    And adjust the 1.5em value as needed.

    With regard to moving “by kate madsen” to the right, I think that would look odd at small device widths such as on iPad and iPhones, so I would recommend using a media query to limit the alignment only to large screens. Here’s how:

    @media only screen and (min-width: 769px) {
    	.site-description:after {
    		float: right;
    	}
    }
    #1677641

    If I wish to use FF Market font in italics instead of cursive…do I just put ‘ffmarket’ in place of ‘cursive’ in the prior addition?

    FF Market is a web font, ant it is one of the custom fonts options available in the WordPress.com Custom Design upgrade. That means it only gets loaded with the web page on the front end if you have selected it as one of the fonts on the Appearance > Customize > Fonts page or if you have that font installed locally on your computer. You could add custom CSS to put “FF Market” into the font stack, but if you did it that way then only people who have the “FF Market” font installed on their computer would be able to see it working.

    Because of that, I would recommend using a font stack with some fonts that are likely already installed on viewers’ computers. Here is an example:

    font-family: Palatino, Baskerville, ‘Times New Roman’, Times, cursive, serif;
    	font-style: italic;

    This page has a good explanation about how font stacks work:
    http://web.archive.org/web/20131010010610/http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

    #1677646

    Thank you! This worked perfectly. I will change the font to a more common one soon. But I still have anther question (sorry!):
    When the screen is wide (like desktop size), the studio theme changes the gallery view to 2 columns + increases the size of the site title. Is it possible to limit this change and keep the gallery as 3 columns? It is ok if it switches for the ipad or iphone, but not for the smaller laptop. Also, is it possible to limit the site title to the original size? It puts ‘the’ and ‘innerground’ on separate lines and looks v bad.
    Thank you again!
    Kate
    http://www.theinnerground.com

    #1677647

    When the screen is wide (like desktop size), the studio theme changes the gallery view to 2 columns + increases the size of the site title. Is it possible to limit this change and keep the gallery as 3 columns?

    This theme actually has several rules in place around setting the home page gallery column sizes. Here is what I see when I look at the theme’s style.css file:

    @media only screen and (min-width: 769px) and (max-width: 1020px) {
      .no-touch #gallery ul li {
        width: 50%;
      }
    }
    @media only screen and (min-width: 1021px) and (max-width: 1270px) {
      .no-touch #gallery ul li {
        width: 50%;
      }
    }
    .lt-ie9 #gallery ul li {
      width: 50%;
    }
    @media only screen and (min-width: 1271px) {
      .no-touch #gallery ul li {
        width: 33%;
      }
    }
    @media only screen and (max-width: 768px) {
      #gallery ul li {
        width: 50%;
      }
    }
    @media only screen and (max-device-width: 99999px) {
      .touch #gallery ul li {
        width: 50%;
      }
    }

    That’s kind of a lot. :) If you look at the rule with 1271px in it, you can see that’s the one that switches from 2 columns (50%) to 3 columns (33%). So you could override that rule by copying just the one you want to change and then replacing the 50% with 33%. I think this is the one you want:

    @media only screen and (min-width: 768px) {
      .no-touch #gallery ul li {
        width: 33%;
      }
    }

    Change the 768px value to the width where you want the 3 columns to start appearing.

    Also, is it possible to limit the site title to the original size? It puts ‘the’ and ‘innerground’ on separate lines and looks v bad.

    You can add in new rules to the other media query you added before. For example, find the block that stats with “@media only screen and (min-width: 769px)” and add this before the last curly bracket “}”

    .site-branding .site-title {
    		font-size: 20px;
    	}

    Adjust the 20px value until the title shows at the size you want.

    Aside: I meant to put “text-align” instead of “float” in the media query example I posted before (I tested both and copied the wrong one). Try changing it because I think it will make the alignment work a bit better in this context.

    #1677656

    Thank you! It all worked!
    I am very grateful!

    #1677698

    Wonderful! I love how your “by kate madsen” text turned out. It looks great!

    #1677734

    Hello again,
    Well, I have another problem and I am posting here because it relates to this title/font style/font size topic. You have also been the most helpful in solving all my troubles (thank you!).

    The title suddenly got very big yesterday when I was working. I didn’t change anything in the css, but now – as you will see – ‘the’ and ‘innerground’ are on separate lines and it pushes the entire menu down so that the arrows don’t line up and the social icons are in the way of the ‘links’ tab. How do I resolve this? Is there a way to avoid these layout mishaps using wordpress – I see it happens often to people and I must finish my site very soon.
    Thank you for any help!

    #1677735

    Hi there, I see this in your CSS right now:

    .site-branding .site-title {
        font-size: 20px;
    }

    Change the selector at the top so it looks like this:

    .site-branding .site-title a {
        font-size: 20px;
    }
    #1677736

    Thank you!! It worked! Thank you again so much!

    #1677737

    Oh…however the menu is still out of alignment. Something happened that created more space for the title and pushed the menu down. Also there is too much space between the title and subtitle ‘by kate madsen’.

    This wasn’t an issue until all of a sudden yesterday, I am not sure what happened…it looked perfect before.
    Thank you again for helping.

    #1677738

    Hi theinnerground, I’m just catching up to this again now. I checked http://theinnerground.com/ and I don’t see too much space between the title and the subtitle ‘by kate madsen’. Are you still having trouble?

    #1677739

    Hi,
    Thank you again for all your help. I am sorry to keep having questions.

    So, there was less space before the layout suddenly changed. It doesn’t look bad on the initial page, but if you click one of the links such as mission from the homepage, the alignment goes out of whack still (you can see in the arrows). This is because something happened that created more space between the title and ‘by kate madsen’ and added more space to the entire header/title area. So, is it possible to close the gap a bit more and create a smaller header area?

    I hope that made sense. Sorry again for all the trouble.

    #1677740

    It always help to include a link with every question! I checked http://theinnerground.com/mission/ but the spacing between ‘by kate madsen’ and ‘About’ in the left menu looks the same to me on that page and the home page. I still might not be looking at the right thing!

    However, to shorten the spacing below ‘by kate madsen’ and above ‘About’ on the left side of the site, this might do the trick:

    .no-touch .site-branding {
    	padding-bottom: 10px;
    }

    Test it out, and if you’re still having trouble, maybe try describing the spacing again for me (sorry if I’m not getting it!).

The topic ‘Site Title Customization’ is closed to new replies.