How to control with CSS the design of your elements in Wordpress ?

Customize the layout in Wordpress can be a nightmare. Especially if you use some template. In this article I share a solution for a padding issue but it can be applied to any property to get the exact design you need

Use identifiers in the section element

I realized that every time I was publishing the page with my template the classes of all of the DIVs where changing randomly following the schema “kc-css-RANDOM_NUMBER”. So it is impossible to access this elements directly.

The solution is following:

1. Add an “ID” to the top element in the content (Section ID).

Add an ID to the section

Inspecting the HTML you’ll see that the section has an id element added to it.

<section id=”divider-bar”>

2. Once you have your top element with an ID, you need to know how many levels in the hierarchy is the ELEMENT you want to access. In my case these are the elements until the real content is displayed:

SECTION > CONTAINER > WRAP_COLUMNS > COLUMN

So in the custom CSS I use the CSS selector “>” to go deeper in the hierarchy and modifify the padding of the DIV containing the content elements:

#id-identifier > div > div > div {
padding:0px !important;
}

Deleting the padding just in one place

In my concrete case I had the problem that a horizontal Bar was not going to the edges of the screen. It looked specially bad in the mobile version of the layout.

Padding left and right is added by defaut

For this website I am using King Content Pro which came with my template. Even if I set the container with Full width it does not change anything in the layout. There is a left and right padding to the container element which you can see in green in the previous image (inspecting the with Chrome) .

As you can see in the code I applied the ID to the section as described earlier in this article:

This is the HTML for the Section “Divider Bar”

If we look at the code, we see that the content is encapsulated within a SECTION and a ROW and COLUMN.

To overwrite the style of the elements you will need to personalize the Appearance (Appearance > Personalize).

On the last entry on the menu you can add custom CSS code.

Here we can add the code to overwrite the padding of my element.

#divider-bar > div > div > div {
padding:0px !important;
}

This is the code I am using to hack the padding of the element for the HR bar.

Divider-bar is the ID of the section, which you can define as you can see in this example clicking on Section settings and entering the name in the “Section ID” field.

From the top Section element with the ID we can then go down with the arrow “>” to select the child element with CSS.

Explanation of the CSS code:

#divider-bar > child is DIV with class “kc-row-container” > child is DIV with class “kc-wrap-columns” > child is DIV with class “kc-elm”

I hope that this hack helps you adapt wordpress to your needs.