Getting to Know Your Theme (Part 1): Using Safari to Find Your Theme’s Style Sheet

Our themes are build on style sheets–and you can find yours! shows how here in this post in their support files.   But what next?  This post will take a look at theme’s style sheet to investigate how to work WITH your theme, rather than against it, in developing new style options

Finding Your Theme’s CSS Stylesheet Using Safari

The instructions from the WordPress help file were slightly dated, but nevertheless, pretty easy: I used the Safari instructions provided but there was more to it than these instructions provided–they are a bit dated.  So here’s a walkthrough for this, below.  I’m not fond of Safari as a browser–but it by the far the easiest browser to use for this particular task!

Open up Safari.   Find the top left “ribbon.”

Screen Shot 2018-03-31 at 11.40.10 AM

Open the Preferences Tab.

Screen Shot 2018-03-31 at 11.40.54 AM.png

See the “Show Develop menu in menu bar” check box?  Check it.  Like so:

Screen Shot 2018-03-31 at 11.41.03 AM.png

At the top ribbon, you’ll see a new DEVELOP option.

Screen Shot 2018-03-31 at 11.41.17 AM

Open up your blog’s home page in Safari. The choose the Develop tab in the ribbon.

Screen Shot 2018-03-31 at 11.48.25 AM.png

Yes, lots of confusing and potentially horrible mistakes here! 😀  Not to worry.  We just want to Show Page Source.   It’s number ten from the top.  You’ll get a split screen with your blog at the top, and all of the resources used in the document.  If the screen doesn’t open to the Resources tab, then choose it so you can see the little file folder icons in the left column.

Screen Shot 2018-03-31 at 11.49.26 AM.png

Screen Shot 2018-03-31 at 11.50.01 AM.png

Down there at the bottom, you’ll see Stylesheets.   Click on the folder and the large “canvas” screen at the right of it will suddenly just say STYLESHEETS in big letters.  (Don’t worry, we’re nearly there).  Click on the Stylesheet folder and look DOWN at the new options.  See! There are MANY style sheets in the typical WordPress theme.

Screen Shot 2018-03-31 at 11.50.37 AM.png

Choose Styles.CSS

Today we’re going to consider the MAIN stylesheet for the theme, called styles.css.

Screen Shot 2018-03-31 at 11.50.48 AM.png

Here you have a look at it, but we can also click again and get the stylesheet itself in a window that we can browse — or DOWNLOAD for easier study!  I’ve cut off part of the screen so you can see it in the space provided below.  And here it is.

Screen Shot 2018-03-31 at 11.51.04 AM.png

I saved the file under a new name so I could investigate it a bit more carefully.   There’s a lot here! Much of it is about navigation and other details that we don’t want to mess with. After all, our interest is in getting great control over designing text and other content-focused aspects of our blog.

A great theme like the Entrepreneur makes this easy with lots of “comments” at the top of the document about where it gets all of its piece parts from to create this style sheet — and providing the handy table of contents for the different elements that make up this style. 

Future Plans: Learning How to Make Effective “Additional” CSS for Text Styling in a WordPress Theme

I plan to use this style sheet to learn for myself (and teach as I go along) how to better manipulate this style sheet for a few stylistic choices.

I’m wondering if I can do things like make the column size of my blog a little bigger, create a gallery of featured posts at the BOTTOM of pages,  styling texts like drop caps and creating floating images and other cool things–stuff that SHOULD be simple CSS tricks — but currently not very do-able, since I have to fight the theme in order to do this–without breaking anything.

More soon. Have a great day!  ~ Lola

 Additional Notes on Other Browsers

Chrome has an “inspect element” feature that Chrome users on PCs can use–but I couldn’t get it to work well on a Mac. I’m not sure if it allows you this kind of access to the whole (very long) spreadsheet, though. The DevTools option in Chrome is horrifically hard to work with — not intuitive at ALL and definitely not for self-teaching beginners, my key audience (and ME!). I haven’t tried the Firefox options yet. If there is sufficient demand for it, I’ll give her a go. 🙂 Let me know in the comments.

Author: Lola

Recovering academic, real-life, honest to cornflakes anthropologist (Ph.D. and fieldwork and everything), tech-head and social media researcher.

One thought on “Getting to Know Your Theme (Part 1): Using Safari to Find Your Theme’s Style Sheet

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.