Need help? Check out our Support site, then


Site Title Customization

  1. theinnerground
    Member

    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.

  2. 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;
    }
  3. theinnerground
    Member

    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

  4. theinnerground
    Member

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

  5. 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/

  6. 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/

  7. theinnerground
    Member

    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

  8. 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;
    	}
    }
  9. 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/

  10. theinnerground
    Member

    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

  11. 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.

  12. theinnerground
    Member

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

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

  14. 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!

  15. 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;
    }
  16. theinnerground
    Member

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

  17. theinnerground
    Member

    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.

  18. 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?

  19. theinnerground
    Member

    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.

  20. 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!).

  21. theinnerground
    Member

    Ooh, sorry. I thought you might have to click the link from the homepage in order to see the problem - it is why I didn't add the link before.

    I tried this and you can see on the home page now:
    http://theinnerground.com
    It skewed the menu more. When I am in the customize view it looks ok, but when I leave the css view, it skews.

    What about just closing the space between the title and 'by kate madsen' so that the top of the 't' almost touches the title? Is it possible?

    I will try to explain better the problem in the next entry.

    Thank you!

  22. What about just closing the space between the title and 'by kate madsen' so that the top of the 't' almost touches the title? Is it possible?

    Hmm. Find this in your custom CSS:

    .site-description:after

    And add a rule to adjust the margin:

    margin-top: -20px;

    Change the number until it moves to the location you want.

    That will affect the spacing between "the innerground" and "by kate madsen"

    When you view your site, keep in mind it's flexible too. So others (including me) may not see the exact same spacing as you depending on their display size. Try adjusting the browser width on your computer to different sizes to see what I mean.

  23. theinnerground
    Member

    Hello,
    Now nothing is saving in my css customization. It changes it then it erases nearly everything once I close.
    I am really almost fed up with wordpress. I just moved and need to get my site up, so I can send my info to people. There must be a way to lock the format so that it keeps a proper alignment with the screen size.
    Now I see even the title size changes in the notebook and iphone view also.
    Do you have any other recommendations? I am about to ask for a refund and have someone else design the site, so it looks as I wish it to.
    I am not sure why the css is not saving now. I also am not sure why the arrows on the side bar go out of alignment when I change pages.
    Thank you for helping. The space change worked successfully.

  24. theinnerground
    Member

    Ok, I switched to Google Chrome. The alignment looks ok here, but wordpress is not saving my customizations. Is thre anyone to contact regarding this? My upgrade is still active and there aren't any problems on my end.

    The only thing left is how to adjust the site title for the phone view - it grows to the large size again and I want to keep the size standard as a logo.

    Thank you. Sorry for these troubles.

  25. Customizations not saving sounds like a problem you shouldn't be running into. For good measure, I just tested saving CSS in Chrome 33 and Safari 7.0.2 on a Mac as well as Internet Explorer 9 on Windows 7, and CSS always saved for me. Can you tell me what browser and browser version you're using so I can make sure to test that one too?

    Sometimes if the CSS you're trying to save isn't correctly formatted, it won't save. Can you post the exact CSS you were trying to save so I can take a look?

    Another thing you can do is try testing a simple change such as this one to see if saving works:

    p { color: #333; }

    What exactly happens when you save CSS? Do you see any errors?

    About the spacing, sorry you're frustrated! It sounds like you might not have been aware of how responsive design works before you started in with CSS customizations, and you happened to pick a theme with stretchy widths for some of the major areas like the sidebar. Most of the newer WordPress.com themes that get added have a responsive design, and that means it adjusts automatically based on different screen sizes. It's really good to be aware of that when you customize because if you're not careful, you can break the layout in the smaller views without realizing. That's why we added previews for mobile and tablet sizes in the Appearance > Customize section, to help you see those things more easily so you can have the best site possible

    Hang in there! Once you get it setup how you like, you should be set. :)

    The only thing left is how to adjust the site title for the phone view

    I suggested putting the rule to adjust the site title size in the media query for "min-width: 769px" before because usually the theme makes a good decision about the alignment of things on mobile views. But if you don't wan to limit a change to just a certain screen size, you don't have to leave it in the media query.

    In your current custom CSS, find this rule:

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

    Delete it, then re-add it to the bottom of the editor so it's not inside any of the @media blocks. That will work to make sure the site title (the innerground) is 20px in every screen size.

    When it comes to alignment of the "by kate madsen" text, keep in mind that web pages get displayed in all different sizes and devices, and it can look different in some—I think what you have so far looks really great in all the previews! However, if you really want it to be like a logo, then another route could be to just make it a logo instead of text. It would look exactly the same in every view that way.

    Here's an example of replacing the site title in the Studio theme with a logo using custom CSS. I used the WordPress logo for this example. To use a different image, you would just swap out the url() value with an image URL after you upload the logo to your media library and then adjust the height and width to match your logo.

    .site-title a {
    	text-align: left;
    	text-indent: -9999px;
    	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) center no-repeat;
    	display: block;
    	margin: 0 auto;
    	width: 176px;
    	height: 145px;
    }
  26. @theinnerground, hello :) just checking back in to make sure all the Custom Design tools are working properly for you on http://theinnerground.com/

    Let me know if you still need help!

  27. theinnerground
    Member

    I did get the css to save again. I may have made a mistake in the text when I was trying before - I think this is what happened.

    The alignment is still skewed on my computer, but not as badly as before. I am not able to download the updated version of the operating system because my computer doesn't have the storage space - this was a solution someone suggested for solving this problem - well I am less worried because it seems others aren't seeing the skewed menu when they view the site.

    I haven't had time to try the adjustment for the phone view or to save the title as a logo, but this weekend I will work on it again.
    Thank you for all your help and patience with me. I am very grateful!

  28. I'll keep an eye out for another reply from you about the phone view and logo idea. I would love to help you get it sorted!!

  29. theinnerground
    Member

    Ok! I finally was able to work on this again. I changed the site title for the tablet and phone view and it is perfect now.
    I decided not to do a logo for the time being. I think it looks pretty good as it is right now.
    I have one last question regarding the phone view. Is it possible to switch the phone view to show the 'portfolio' template, but only for phone view, not for the others? I like how it is with the slideshow now, but on the phone view, I think the photo is too small. This isn't urgent, but would be nice if it is possible.
    Thank you for all your help and patience with me. You really have helped me a lot and do an amazing job explaining; so in the future maybe I won't have so many questions!

  30. Is it possible to switch the phone view to show the 'portfolio' template, but only for phone view, not for the others?

    I'm afraid there isn't a way to change the view completely like that. Sorry I don't have a better answer on this one!

    If it helps, I like how the mobile view looks. It's clean and simple, and that appeals to me. And the slideshow doesn't look too small to me.

Topic Closed

This topic has been closed to new replies.

About this Topic