CSS for Typo Theme

  • Unknown's avatar
    austinheadrick · Member ·

    Hello,

    I’m using the Typo theme, and I would like to try to make a few changes with CSS.

    First, I was hoping to move the “Recent Posts” widget to the right side of the page rather than the bottom.

    Secondly, want to hide the page title on some of the pages.

    Also, is there a place I should be aware of for future reference when I’m looking for CSS code for WP themes?

    Thanks!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, on responsive designed themes, such as Typo that adjust to the width of the screen/window the site is being viewed on, moving widgets from the footer up to the left or right of the content comes with all sorts of problems. We have to use position: absolute to do that, and that means that the widget basically floats free of all other page elements, so on narrower screens or windows, the widget may end up overlapping onto the content.

    On the page titles, we can use the unique page id CSS class that is defined in the opening HTML body tag for the page to target specific pages. The following would be for your about page. 

    .page-id-2 .entry-title {
    display: none;
}

    You can use the web inspector built into your browser to view the CSS and source code for a page. In the HTML section on the left, you will see something that starts out like this near the top
    <body class="page page-id-2 page-template-default...
    You can see the unique page id there (page-id-2). Since it is a CSS class, in the CSS you would precede it with a period ( . )

    Also, is there a place I should be aware of for future reference when I’m looking for CSS code for WP themes?

    CSS is theme specific, so there really isn’t a place with all the code. Get acquainted with your web inspector. Once you do, you will find it an invaluable tool when doing custom CSS.

    You can also search the CSS forum, but do remember that CSS is theme specific, so you may not be able to find exactly what you are looking for.

    Also, as you are learning, if you have questions or can’t find something, post here in the CSS forum and staff or one of our volunteers will be happy to help.

  • Unknown's avatar
    austinheadrick · Member ·

    This is very helpful. Thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘CSS for Typo Theme’ is closed to new replies.