css design Wordpress

5 Quick CSS Hacks to Drastically Change The Look Of Your WordPress Site

In case you are new to WordPress, you may get annoyed with the shortage to edit sure issues about the best way your website seems to be immediately via the editor.

But there’s one “secret” weapon that extra skilled developers use to easily change every factor on a WordPress website: CSS.

On this tutorial, we shortly cover the basics of what CSS is, how to change CSS in your WordPress and eventually, present you 5 quick CSS hacks you should use to pimp your WordPress website.

What Is CSS?

CSS or Cascading Fashion Sheets, is likely one of the normal coding languages used for the online.

The distinctive thing about CSS is that it in contrast to most languages, it’s not about features or what happens behind the scenes, it’s a method information for an additional coding language; HTML.

HTML tells the browser WHAT ought to be displayed, and CSS tells you HOW that should LOOK.

It’s proper there within the identify.

It’s referred to as Cascading STYLE Sheets, in any case.

In WordPress, most templates use universal types that apply to all pages or posts (or perhaps totally different web page templates), which signifies that in case you are not careful, changing some CSS for one page, may also change the look of every web page on your website.

CSS types gadgets based mostly on sort of item (like a div container, an img image, or an iFrame) or courses or IDs set in the HTML code itself.

Courses are names or monikers we will goal by starting with . (like .header-title).

We target IDs in CSS by beginning with #.

We will additionally furhter slender our concentrating on, by concentrating on solely parts which were preceded by other parts.

For instance, a h1 header that’s preceded by a “.header” aspect.

.header h1

This helps us do slender edits and never edit every single aspect of it’s variety on our WordPress website.

With the HTML code above, we will target the div component with simply div. But this can goal every div factor on each page on our website:


Or we will goal the ID, which can target that specific div aspect on every page on your website:


Lastly, we will qualify that by only modifying the Main div component on a selected website, by adding the postid-1 class in entrance.

.postid-1 #main

This can be a primary breakdown of how CSS works in the context of a WordPress website.

For many who need extra information, you’ll be able to learn & study extra about CSS at W3Schools or Code Academy totally free.

How To Edit CSS In WordPress

If in case you have a fair remotely current model of WP put in in your website (and you need to, for safety reasons, learn extra on that right here) , you possibly can add custom CSS by means of the WordPress customizer.

WordPress CustomizerAdditional CSS in The WordPress Customizer

Since you are overwriting, and never modifying the bottom code itself, there are additional steps. You’ll have to set values you don’t, that already exist within the theme’s stylesheet, to zero.

For instance, if you would like to add margins to your header, but don’t the borders in your theme, it’s not sufficient to simple write:

margin: 20px 20px 15px 20px;

You have got to additionally set the border-width to zero to overwrite the prevailing code.

margin: 20px 20px 15px 20px;

Notice: Responsive Themes & Media Queries

Because it’s 2019 and smartphones now make up a lot more than half of all website visits, each trendy Theme is responsive.

Which means it modifications the proportions & look of the location based mostly on what measurement the browser/gadget that’s visiting the location is using.

Responsive themes often accomplish this with something referred to as a CSS media question.

A media query is a qualifier in CSS to that decides when the type must be applied to html.

The commonest form of media query is ones that qualify based mostly on the pixel width of the browser the location is displayed in, and appears like this:

@media (min-width: 768px) …

If you’d like to edit solely the best way something seems to be on pill or desktop, you want to do a number of issues.

First you need search by way of the type.css file of your theme to find the relevant media queries.

Then you definitely make an similar media question in the customized CSS field within the WordPress customizer.

And eventually, add the modifications that you want to make contained in the brackets of the media query.

@media (min-width: 768px)

The above code on a Bootstrap based mostly responsive design would only change the header font measurement on Tablets, and no different units.

(If your theme is predicated on Bootstrap, or has a mobile-first design, the media queries will embrace min-width, and also you don’t want to use media queries to edit the cellular format.)

1. Improve/Lower Margins

Let’s say that you simply assume that there is an excessive amount of or not enough white area in a sure space in your theme on a certain gadget.

That is the case for me with the Twenty Seventeen theme.

I feel there’s method too much white area above the actual physique content, so I would like to take away it.

First I inspect the white area with the chrome inspector, and discover out the place the padding/margin is coming from.

Twenty Seventeen WordPress Theme CSS Padding

And then I examine it to find out what courses/ID I can goal to change. (Ctrl + Shift + C in Google Chrome)

This specific aspect is affected by media queries, so I want to be sure to add them to my custom CSS, and target the units I would like to change.

I’m pleased to just change the look on desktops, so I add a media query for min-width 48em, and regulate the padding down to 2 em.

@media display and (min-width: 48em)
padding: 2em zero zero;

And enter that into the customizer and replace.

Twenty Seventeen WordPress Theme New CSS Padding

And you may instantly see the outcomes. Much less white area above the primary content of the weblog.

(One more reason the additonal CSS perform in the customizer is the superior method to add CSS, is the real-time previews you get on your code edits.)

2. Type Individual Headers

The second straightforward hack to utterly change the look of your website is to type your headers in another way.

Again, the Twenty Seventeen theme has quite boring headers, let’s take a look at how we will spice them up a bit bit.

The first step, again, is to inspect the header using Google Chrome Developer tools.

Hover over the headers you need to change, and you may shortly see which courses and types apply to them.

We see right here that the courses in query are “.single-post .entry-title”. The courses in grey concentrating on the same code will not be lively on this web page, and may be ignored, until you need to apply these modifications to each single posts and pages.

A quite simple change we will make, is altering the color of the header & growing font measurement & weight.

.single-post .entry-title

This can give the header much more impression. (Specifically, only the headers for single submit pages. The headers on the blog web page or single pages will remain unchanged.)

Since there are media queries in the theme, we’d like to overwrite them in the same approach.

(In the event you adopted the previous step, you possibly can add it to the same question.)

Bigger Better Title Header CSS in WordPress Twenty Seventeen Theme

You may as well edit the header in different methods, reminiscent of including a borders above and under (or simply under).

border-top: strong 2px blue;
border-bottom: strong 2px blue;

The purpose the borders cowl the whole section and not simply the world the text occupies, is that the h1 is about to act as a “block” factor.

To solely comply with the textual content, we’d like to set the it to the “inline-block” property.

Which means the component doesn’t mechanically occupy the whole width of the dad or mum container.

WordPress Theme Header Edited With CSS To Add Thick Border Below

We will also easily change the font through the use of the “font-family” property.

Editing WordPress Theme Header On Single Post With CSS

These modifications have been all made to the entry-header of single submit pages solely.

If you’d like to apply modifications much less or more broadly, you can also make use of .class or #id qualifiers.

For example, if we add “.postid-1” in entrance, these modifications only apply to the whats up world publish web page.

3. Create A Full Display Header (Hero Header)

Twenty Seventeen truly comes with a hero header for the house page. But Twenty Nineteen, and lots of others don’t.

This is how one can create a full display (hero) header utilizing solely CSS.

Examine the header and discover the relevant courses & media queries.

Now we’d like to improve the header measurement so that it will increase to 100% of the height and width.

peak: 100vh;
width: 100%;

Now that we have now a full display header, we add a background picture.

background-image: url(“http://yoursite.com/wordpress/wp-content/uploads/folder/img.jpg”);

After which we’d like to format the picture so it doesn’t get stretched out or repeated.

When you select a big enough image, you need to add the next code:

background-attachment: fastened;
background-position: middle;

Then we simply want to repair the header in the direction of the underside of the mother or father factor, and change the header & description text shade to white so it’s easier to see.


.site-branding .site-title a, .site-branding .site-description

4. Remove Sidebar/Header & Create A Full-Width Touchdown Web page

If you’d like to create a touchdown page with no sidebar or header, there’s a fast hack you can do in CSS.

By setting the show property to none, we will shortly expunge the content material.

First we’d like to examine the sidebar area to discover the courses & IDs.

Then we simply goal the ids secondary/main or the courses, take away secondary, and set main width to 100%.

.has-sidebar:not(.error404) #main

.has-sidebar #secondary

Notice: Twenty seventeen has page templates that permits for removing sidebars and checks for the sidebar, which is why the qualifying class is “has.sidebar”, and in addition checks if it’s error404 web page.

In other themes, you won’t need qualifying code to achieve the full-width end result.

(Word: Hiding content with the CSS “display:none” is dangerous apply in search engine marketing. When you run a business based mostly on natural search visitors to your website, it is best to create a page template with no sidebar as an alternative of using a CSS hack.
The following pointers are meant for shortly making a landing web page that you’ll ship visitors to utilizing advertising, not search engine optimization.)

5. Full-Width Photographs / Iframes / Containers

A whole lot of themes set max-widths for photographs, iframes & totally different containers in pixels.

In all probability to keep the format that was initially meant even on unusually giant screens. Additionally to not give too much focus to pictures or iFrames.

However this will typically damage the design you want to make in your website.

With a bit little bit of pointless area left over on the proper or left of your highlighted photographs or videos.

img, iframe

With this easy command replicated throughout the required media queries, your job is completed.

It is possible for you to to display full-width video, banners, headers and different content material without problem.

Bonus: Add Your Own Courses Inside Posts/Pages To Spice Things Up On

Once you start getting extra acquainted with CSS, you’ll be able to edit the html parts inside posts & pages.

You can do this by going into the code editor, and not the visual one, and adding courses or ids and then styling them yourself.

is a simple component to work with, the place you’ll be able to break up boring, plain previous sentences and create design parts to use in your posts.

What modifications have you made to your website with CSS?

Please let us know within the comments.

Related Posts