Blog/Website tips

Make your blog theme unique

When I started creating my blog, I worked localhost before I actually upload it on the server, buy a domain and get it launched on the internet. There is one reason I did that. I wanted to have a unique blog theme!

Luckily nowadays there are easier ways to create a good looking website using CMS (Content Management Systems)such as Joomla, WordPress, Drupal and much more, plus there are tons of themes that can make any website ready to launch!

hw-to-make-your-blog-theme-unique

To be honest, I love CMS because it is a lot easier than creating a website from scratch if you know how to code, but there is only ONE  thing I do not like that much: Many of us are using the exact same themes. In this article, I will show you how to easily personalize your blog theme without coding knowledge.

Some of you may already know the tips I m going to show you, but I wanted to share them with people who had no idea how to modify faster their theme without coding knowledge,and with people who were lost in the stylesheet.css and HTML files, resulting in hiring a web developer to finally personalize and achieve having a unique blog theme.

Note: This post does NOT contain any affiliate links. The links I am sharing are from tools I already use and like.

Let’s begin!


You will need:

  • A web browser with an open tab of your website
  • A text editor, I am using Notepad++ which is FREE, and helpful for developers and any kind of end user.
  • If you are using WordPress like me, keep your site’s dashboard open in your browser’s tab

Locate the element you want to modify – “Inspect” browser’s tool

Let’s say you want to modify the “About me” section of your website. In this example, I will add a border around this section of the site.

  • Move your mouse on the exact element of your site that you want to modify.
  • Right click > Inspect Element

This will open a sidebar with the HTML and the Stylesheet of your page as you can see in the picture below.

 

Edit your blog's themeEdit your blog's theme

 

When you are moving your mouse on the HTML code (left side of this section), different elements of your web page are selected. Move your mouse through the code until you have selected the element you wish to modify. In this example is the “About” section.

Find your “div”

Usually, each section of your website is contained into a “div”. Imagine a “div” as a box that contains information. Our menu-bar, for example, is a separate “div”. The post is inside another “div”, the footer in a different “div”, social media widget and so on. Once you select the correct “div” of your element, move your mouse to the right side of the Inspect Tool. There you can view the CSS of your page, which is as you probably already know the style of your page.

Edit your blog's theme

Experiment ! Trial and error

I wanted to see how the page will look like if I add the border around the “about” section. To do that, I added two lines of code under the “.widget {“.

I added 2 properties  that create a border.

“border-style” and “border-width” with values”solid”for “border-style” and 2px as the value of the “border-width”. For more options and information please refer to W3Schools.

Edit your blog's theme      Edit your blog's theme

 

Modifying existing color of element

As you can see in the second image above, a dark gray border is set around my “about me” section.  Since I wanted the border to have the same color of my widget buttons I had to change the RBG color. I added “border-color” property and the RBG number of the color that I like. An Eyedropper extension in your browser may be handy if you do not remember the RBG numbers of your website colors.

Edit your blog's theme

You can experiment with more options, for example, you can add space between the border and your text. You can always find useful examples of code in W3Schools.

To have your results applied on your actual website, since “Inspect tool” is only for demonstration, you have to update the CSS of your blog/website.

Apply your changes

  • Open the WP dashboard, or you can download your stylesheet.css file from your server where you can update it locally.
  • In WordPress dashboard navigate to Appearence> Editor and select from the right side the file you want to update. It must be .css.
  • Click on the form that contains the existing CSS code.
  • Select all (Ctrl+A) and Copy (Ctrl+C) the code.
  • Open your text editor, make sure it is empty, and Paste (Ctrl+V) the code.
  • DON’T FORGET to BACKUP your existing CSS at this point!
  • If you are using Notepad++ > Menu bar> Language > find CSS (This is an optional step but you may find it handy for easier editing)
  • In your text editor, (Ctrl+F) paste “.widget {” or the corresponding piece of code above or below the area that you want to update.
  • Once you find in your stylesheet.css this code, copy-paste or write the same code you wrote and worked for you on “Inspect tool” of your browser.
  • Navigate to WP Dashboard> Appearence> Editor, select all the existing CSS code and paste the updated code. Click “Update file” and you are done.
  • Refresh your website and check if you are satisfied with the result. If not, upload the backup code into your server, or paste it in the editor in WordPress.

Edit your blog's theme  Edit your blog's theme

This was only one example. With this technique, you can edit easier different parts of your site/blog. You can change your menu bar color, change fonts of certain areas of your site, change the color of your social icons, and the color that will appear during mouse hover over these icons.

If you are interested in learning HTML-CSS…

Take a look at Code Academy ! There you can take tutorials online, and you learn to actually type your code! You can learn in a fun way! Check it out.

Thank you for visiting this site!

Feel free to ask me any questions, I will be happy to answer!

 

Nefeli

 

 

 

Previous Story
Next Story

You Might Also Like

  • Howdy! Do you use Twitter? I’d like to follow you if that would be okay.
    I’m definitely enjoying your blog and look forward to new updates.

    • Nefeli

      Hello! 🙂 I am not using twitter, I m using Instagram instead. Thanks a lot for your kind words! 🙂

  • Hello, i think that i saw you visited my blog so i came to “return the favor”.I am trying to find things to improve my web site!I suppose its
    ok to use some of your ideas!!

  • Nefeli

    Hi! For sure it is totally fine! I guess we are all visiting the web to find “how to” in order to make a more beautiful website, so I guess any new idea and tips are totally welcome from everyone! 🙂

%d bloggers like this: