A few little code tips

There is a lot that can be done to fine tune your theme with careful application of some CSS styles.  You don’t need to be a CSS expert to know enough just to make small changes and we will basically be cutting and pasting code snippets to get the job done.

The beginner tips I’ll show you are just for minor tweaks, we’ll be just hiding and slightly augmenting a few elements I would not recommend that beginners make any structural changes, as you can potentially break your theme.

We will be using the plugin Lazyest Stylesheet (yes that’s the way they spell it) which adds a basic css stylesheet so that any styles entered on through this plugin will override the theme’s css. This plugin offers a quick solution but if you are interested in pursuing extensive changes to your themes style I would recommend looking into creating a child-theme. Child-themes require a bit more coding know-how and are beyond the scope of this beginner class.

We will be hiding the Search Bar in the header and the credit tag at the bottom.

CSS is simply a way to change the appearance of all the parts of you website. All these ‘parts’ have their own names and we refer to them as elements. We have actually already been dealing with element tags in our Visual Editor, whenever we highlight text and then select a Heading for it we are assigning that text an attribute of an “H” tag. Similarly when ever we write with no styling involved we are creating text within a paragraph or “p” tag.  There is a wide array of these tags used in any given website. These which are actually HTML tags, but for the sake of this lesson we will be looking at how CSS tells the HTML how to display. In addition to these HTML tags most elements of a website are also assigned “IDs” and “classes.” These are determined by the web developer who wrote the theme and differ from one theme to another but the idea is that they provide further level of identifying a specific element of your page that you want to change with CSS.

We will be using the Inspect Element function of Firefox to look under the hood and see the elements, IDs and classes of out Twenty-Eleven theme.

This post has already been read 1529 times!