Adding a space and Saving CSS Changes

  • Unknown's avatar
    allymarkotich · Member ·

    I am attempting to make a few small changes to the Chateau theme. I’d like to delete the tilda and move the tagline to the next line. When I double click and choose Inspect element, I am able to delete the tilda, but then, the change does not save. I also have not figured out how to add a break and move the tagline to the next line. Help!
    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    shawnajroberts · Member ·

    Hi there! Can you tell me the code you’ve tried that isn’t working?

    For reference, here are some very helpful posts that will help you customize your site with CSS:

    If CSS is new to you, here’s a site we built for Press Publish that will help you hit the ground running with the basics:

    https://cssworkshop.wordpress.com/

  • Unknown's avatar
    allymarkotich · Member ·

    This is the code I put into CSS Revision:

    <h2 id=”site-description”>
    a quest for creativity and wonder and the divine in the every day
    </h2>

  • Unknown's avatar
    shawnajroberts · Member ·

    Thanks! You’ll need to format your CSS correctly in order for our system to display it on your site. Since “site-description” is an id, you’ll use a hash sign (#) in front of it like this:

    #site-description

    Then, any changes you want to make to the site description happen within curly brackets right after it:

    #site-description {
//your changes go here!
}

    Now, since the tilda is included in the HTML of your site:

    <h2 id="site-description">~ a quest for creativity, wonder and the divine in the every day</h2>

    This means that the theme is adding this tilda through PHP and not through CSS. You won’t be able to remove this character via CSS.

    However, if you want to drop the site description down to a new line, you can do this by changing the display formatting. For this piece of CSS, you’re going to need to use this selector:

    #main-title #site-description

    This is a more specific selector that just “#site-description” which means that it will target the part of the site we want to change more specifically and will affect fewer other elements of the page.

    We’re going to add the curly brackets again, and then the specific CSS we want to change:

    #main-title #site-description {
display: block;
}

    Hope this helps clarify how CSS works! Let me know if you have any questions!

  • Unknown's avatar
    allymarkotich · Member ·

    Thank you! That was helpful. Can I get rid of the date or make it smaller on blog posts or is that also part of PHP?

  • Unknown's avatar
    shawnajroberts · Member ·

    Those are definitely things we can change! The inspector makes a pretty good rule of thumb for the line between changes you can and can’t make. If you have to make the change on the left side, in the HTML, and you can’t affect it by making a change in the right pane, in the CSS, then you won’t be able to change it on your site using custom CSS.

    Let’s walk through the steps to find the correct selector and CSS elements we want to change. :)

    First, I’ll right click on the post date that you want to change and select “Inspect Element”. I can see that the entire post date is in an HTML p tag with the class “post-date”:

    <p class="post-date">
		<strong>06</strong>
		<em>Wednesday</em>
		<span>May 2015</span>
</p>

    Now, let’s resize the “06”. Select that second line of code in the left pane of the inspector. This will display all of the CSS styles for that section of the page on the right. This going to be the one we want to change:

    .wf-active .post-date strong {
  font-size: 4.61em;
  font-weight: 100;
}

    You may not be familiar with the unit ’em’. It’s basically a scaled font size. Generally, most of your page will be 1em. If you’re interested in learning more about it, you can find some info by googling it.

    So, the 06 is 4.61 times the size of your standard font. Let’s try bumping that down to 2.61 by adding this to the CSS pane in your Customizer:

    .wf-active .post-date strong {
  font-size: 2.61em;
}

    You can change the font to whatever you want, so experiment until you find a size you like.

    You’ll probably also want to change the font size for “Wednesday”. Give it a try walking through the steps I outlined above. :)

  • The topic ‘Adding a space and Saving CSS Changes’ is closed to new replies.