Using custom CSS with the Astra theme...

We can do some pretty cool things utilizing CSS in wordpress.

Hand touching CSS inscription, new technology concept

Today’s post might be a bit shorter than the last 2 because there aren’t as many steps. I am going to teach you how to use CSS in combination with the Astra theme to customize some pesky options within the Astra theme that may be interfering with your builds. We will learn how to customize the sidebar and a few other things today as well as getting the astra theme installed if you haven’t done so already. 

Let's start with getting the Astra theme.

astra

To do this, while inside WordPress click on appearance and then themes. At the top of the screen click the add new button. Search for Astra. Install and activate it. I’ll provide a screenshot of what to look for in the scrolling image in this section. Mine is already installed but that is what the theme should look like in the search display. It will ask you if you want started templates. I recommend getting them. They will come in handy when building sites as they provide full site template that are quick and easy to edit. This trick you will learn today will make things better because you will be able to customize the theme more than what is able to be done without CSS. 

These pictures will show you examples of 2 different sites with the CSS off and on. I will write on each picture which one is off and which one is on. 1 website is my website and the other a mock realty website I am making.  Pay attention to the sidebar of the website on these images. Also the background on the realty website.

You will notice my backgroud is colored on my website. That is because I styled everything in Elementor and the WordPress back end. But I am also showing you how to color the background of the sidebar here too. Also notice the search bar on my website is white. with the stylings off. We will be taking care of that as well as the comments box section. I will show 2 pictures of that below. 

CSS is a coding language used to style HTML elements. We are going to take advantage of that to take care of a few pesky things that could be interfering with your website build on WordPress using the Astra theme.

Applying the CSS.

Getting to the CSS Options.

First you will want to navigate to appearance and then customize within your wordpress backend once you have the Astra theme installed. I will put 2 screenshots in this section to show you what to look for. The image labelled #1 will be what to look for and #2 will be what it looks like once you are there. Keep in mind yours won't look exactly like mine as I have a page built on mine.

Applying the code.

Once you are in the appearance backend click where it says additional CSS. I will provide an image of what to look for here and what it looks like with the options open and some CSS in there. It should be all the way at the bottom of the list of available options. In the next section I will provide the code and explain what it does.

Here I will provide you with the CSS code in 1 for the 2 sites in 1 block of text. As well as explain what everything does in the code in the other block. I will be changing all of the colors to red in this code so you will have to go in and edit the code to your desired colors.

The Code.

The CSS code.

REALTY CSS
#secondary{
margin-top: 520px;
padding-top: 50px;
background: red;
}

#top-banner-section{
width: 100vw;
}

SARGE STUDIOS CSS

#secondary{
margin-top: 10px;
padding-top: 100px;
padding-right: 25px;
background: red;
margin-bottom: -10px;
border: none;
}

.ast-right-sidebar #secondary {
border-left-color: red;
}

.widget_search .search-form .search-field{
background: none;
color: red;
border-color: red;
}
#comment{
background: none;
color: red;
border-color: red;
}

#author{
background: none;
color: red;
border-color: red;
}

#email{
background: none;
color: red;
border-color: red;
}

#url{
background: none;
color: red;
border-color: red;
}

.single .post-navigation {
margin: 0;
padding: 2em 0 0;
border-top: 1px solid red;
}

.comments-area {
border-top: 1px solid red;
margin-top: 2em;
}

My Explanation

In the realty section and the Sarge studios section, the block of code under #secondary{} is the styling for the sidebar. In the Realty section, The #top-banner-section{} is the styling that allows the top banner section to be full screen width.

Onto the Sarge studios code now.  The section of code under .ast-right-sidebar #secondary{} styles the left border of the side bar. the #comment, #author, #email, & #url{} blocks of code all style the text entry boxes within the comments section. Finally the .single .post-navigation & .comments-area{} sections style the borders within the comments sections.

The End...

I hope you enjoyed my blog post on adding custom CSS to the Astra theme in WordPress! If you found it useful please let me know! I would like to thank my web dev teacher for helping me figure out some of the styling elements. The #top-banner-section{} element in particular. Because the sidebar occupies that portion of the website, when you style it (for example add a top margin to push it down) the area above has no background. To fix this we had to select the section we wanted to be full width and use CSS to make it full width. The 100vw property stands for 100% viewport width which means it will be 100% width on any device.  As always if you have any suggestions on ways for me to improve my content please feel free to let me know in the comments below as constructive criticism is always welcome. Thank you for showing interest in my tutorials blog.

Cheers…

Leave a Comment

Your email address will not be published. Required fields are marked *