Skip to main content

5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand Out

By

Changing Background Color

To change the background of your website, you first have to get familiar with the styling of the theme. Is the background color simply under body, or is it built into its own frame?
Some themes are not as intuitive as others, so if the one you are currently using is intelligible, you might want to change to a different theme before you start editing. (The one I'm using in the example is the free Catchbox Theme and a very common starting theme is twentyeleven.)
bgcolor
With most non full-width themes, the background color is simply under body. And overruling it is quite simple.
You can use the W3Schools HTML color picker to get your colors, or install a Chrome extension, aFirefox plugin, or a WordPress plugin to speed things along when you're editing on the go.
I chose a deep teal background color: #477C67:
newbgcolor
If this code snippet does not change the background color of your blog, it is likely that it utilizes stylized empty containers to fill the background.
If you want to set an image as the background, first upload the picture. Make sure it is high resolution otherwise it won't look very good.  Then copy the URL. You only need the part after the blog, so if you uploaded the file via WordPress, then the path should look something like this: "wp-content/uploads/2014/01/IMAGE.jpg"
The finished result should look something like this:
bgimage
The cool thing is that the picture remains static even when you scroll down through the page. For great photos that you are free to use without giving credit (although it is probably welcome), you can visit unsplash.com.

Improving Readability

smalltext
Sometimes you stumble across a great theme. It looks awesome, but there's just one problem. The font is small and grey so it's almost unreadable. But don't worry, you can change this in one simple step.
Add this short snippet of code to the custom CSS, and it will fix the problem. (Put it after the code about the background if you changed yours.)
smalltextfixed
A good size for the standard font of your website or blog is 14-16 pixels. Avoid the 12 pixels that were mandatory on, say, school reports, as your main goal isn't to save paper. You want your content to breathe, and to make it more readable. If you feel like the standard font of your theme looks  unprofessional, you can add this line:
Making the whole thing look like this:

Changing the Look of Links

If you want to change the color of the links, you can do this quite easily. All you have to do is to use the parameter for links in css "a" and then change the color to what you want.
I decided to go for a red (#BA2323) and it ended up looking like this.
coloredlinks
There are a couple of more options for how you want to style your links. For example, you can decide how you want the link to react when someone hovers over it. The most common is underline, but you could make it change its primary color or background color.
For example, changing the text into gray, and changing the background color into the usual text color. Then you can change the style of visited links. Most commonly there's a change of color, but you can use any of the previous changes as well.

Changing the Look of Headlines

The headline of a post is typically in an h1 element, and the sub-headline used within posts is typically in an h2 element (although this is something you choose yourself when creating a post). But if your theme specifically styles the color of post titles, changing the style of h1 tags won't help. So you have to find out whether or not the theme you use does this.
You can check whether or not your theme uses a specific style for post titles by opening the page source and searching (press Control-F) for "post title".  If the results show "<h1 style="some-style"></h1>" then you don't style h1, you have to provide styling in the "some-style" attribute.
Alternatively, if you're going to be making several changes, you could install a browser extension that shows you the CSS style of the selected text. It will typically be "entry-title" as that is the standard for WordPress development.
To do this, go to the Editor under the Appearance menu. and search for "some-style". As I mentioned, that style is usually "entry-title". Then see which lines you need to override. Sometimes, there is a style specifically for the linked title so you might have to change that as well. This shows up as "h1 a {" or "some-style a {".
To edit the color and size of my headline, I would have to add these lines:
I chose a light blue (#5CBDBD).
headline
Please note that I'm using quite glaring colors to make it obvious what changes I've made to the theme. You probably want to be a little more subtle and find a better color scheme.
If you want to edit the style of headlines that you use in your content, then instead of .some-style, you open with h1{} or h2{} or h3{}.

Rounding and Flattening Corners

If there are any pesky corners that you feel that should be rounded, or some that have been rounded off too much, here's a quick fix.
Locate the container in question's style in the original stylesheet. (Open the original stylesheet inside the WordPress dashboard, or in a text file and then search for some text that is unique to the container you want to edit. Or you can use a plugin.) Widgets are usually under .widget, and the post container is usually under content.
The code to use here is:
If you want to override a current curved corner and turn it flat, simply set the size to 0. If you want to see how curves look for a particular container, start out with 5 and see how that looks.
Generally, you could search the page if you want to edit the corners of the entire page. You can generally find the content container by searching for .hentry if you want to edit the corners of the content. You might have to edit the header and the footer separately. Or find the widget by searching for widget.

Changing the Color Scheme of Widgets

One of the easiest ways to set up a cool color scheme for your widgets is to have a different background color for the widget itself that the widget title. You do this by identifying the style class of the widget title. (If you don't remember how, copy the title of a widget and search for it in the page source. In the h1caption around the title, the class is revealed.)
It tends to be simply widget-title. And if you want to change the background color of the widget itself, find the style for the widget, which is usually under .widget.  Then you pick a color and add this code to your custom css or child theme:
widgetcolorscheme
I chose orange and teal for no particular reason. As you can see, if there is no title, it doesn't include the title part of the color scheme, so if you want consistency you should add titles to all of your widgets.

Labels:

Comments

Post a Comment

share your thoughts ....

Popular posts from this blog

12 Tips to Maintain a Virus Free Computer

By
1. Email is one of the common ways by which your computer can catch a virus . So it is always recommended to stay away from SPAM. Open only those emails that has it’s origin from a trusted source such as those which comes from your contact list. If you are using your own private email host (other than gmail, yahoo, hotmail etc.) " then it is highly recommended that you use a good anti-spam software. And finally NEVER click on any links in the emails that comes from untrusted sources. 2. USB thumb/pen drives is another common way by which viruses spread rapidly." So it is always a good habit to perform a virus scan before copying any data onto your computer. NEVER double-click the pen drive to open it. Instead right-click on it and select the option “open”. This is a safe way to open a pen drive. 3. Be careful about using MS Outlook. Outlook is more susceptible to worms than other e-mail programs, unless you have efficient Anti-Virus programs running. Use Pegasus ...
Post a Comment
Read more

Streamlining Java Web Application Deployment with React WAR Generator

By
In the ever-evolving world of web development, managing builds and deployments can often be cumbersome and error-prone. Today, we're excited to introduce a tool designed to simplify and streamline this process: the React WAR Generator . What is the React WAR Generator? The React WAR Generator is a Python-based tool that automates the creation of WAR (Web Application Archive) files for Java web applications. It caters specifically to frontend projects built with React or similar frameworks, making it easier to package and deploy your web applications to a Tomcat server. Key Features Profile-Based Builds : With support for multiple profiles ( dev , test , prod , default ), you can build your application according to different environments and configurations. Version File Generation : Optionally generate a version file that integrates versioning information directly into your TypeScript files, ensuring your build versions are always up-to-date. Tomcat Deployment : Simplify your deploy...
Post a Comment
Read more

How to Protect an Email Account from being Hacked

By
If this is the case, then what is the reason for many people to lose their accounts? The answer is very simple. They don’t know how to protect themselves from being hacked! In fact most of the people who lose their email accounts are not the victims of hacking but the victims of Trapping. They lose their passwords not because they are hacked by some expert hackers but they are fooled to such an extent that they themselves give away their password. Are you confused? If so continue reading and you’ll come to know… Now I’ll mention some of the most commonly used online scams which fool people and make them lose their passwords. I’ll also mention how to protect your email account from these scams. 1 . WEBSITE SPOOFING =Website spoofing is the act of creating a website, with the intention of misleading the readers. The website will be created by a different person or organisation (Other than the original) especially for the purposes of cheating. Normally, the website...
Post a Comment
Read more

how to Send a Confirmation Email Upon Form Submission-Woofoo

By
When someone successfully submits an entry, you can automatically send them a confirmation email to let them know. You can customize the email to include any follow-up info you'd like, and you can choose to include a copy of their entry in the email as well. To set up confirmation emails in Form Settings: Log in and go to  Forms . Hover over  Edit  next to the form you want to edit. Choose  Edit form . Click the  Form Settings  tab. Under Confirmation Options, select  Send Confirmation Email to User . From the  Send To  dropdown, select an Email field from your form. We'll send the confirmation email to the email address the person filling out your form entered into this field. If the dropdown says "No Email Fields Found", add an  Email  field to your form. In the  Reply To  textbox, enter the reply-to email—if someone replies to their confirmation email, this is the email address that their reply will be s...
Post a Comment
Read more

How to Use Google for Hacking

By
Google serves almost 80 percent of all the search queries on the Internet, proving itself as the most popular search engine. However, Google makes it possible to reach not only the publicly available information resources, but also gives access to some of the most confidential information that should never have been revealed. In this post, you will find the information on how to use Google for exploiting security vulnerabilities that exists within many websites. The following are some of the ways to use Google for hacking : 1. Using Google to Hack Security Cameras: There exists many security cameras that are used for monitoring places like parking lots, college campus, road traffic etc. With Google, it is possible to hack these cameras so that you can view the images captured by them in real time. For this, all you have to do is just use the following search query in Google. Type in the Google search box exactly as given below and hit enter: inurl:”viewerframe?m...
Post a Comment
Read more

python program to Print Starting Series OF Indian Mobile Number for a State or operator or both

By
import requests import urllib.request import time from bs4 import BeautifulSoup as bs import re url = ' https://en.wikipedia.org/wiki/Mobile_telephone_numbering_in_India' state_to_extract = "UE" #if set to None all state is considered telecom_to_extracted = None #if set to none all operator from particular city is extracted response = requests . get(url) print (response) soup = bs(response . text, "html.parser" ) one_a_tag = soup . findAll( 'tr' )[ 35 :] lst = [] for k in one_a_tag: s = k . findAll( 'td' ) limit = len (s) i = 0 while True : if i == limit: break no = s[i] . text i += 1 if i == limit: break operator = s[i] . text i += 1 if i == limit: break state = s[i] . text i += 1 if i == limit: break res = f "{no} {operator} {state}" if state_to_extract is None : if telecom_to_extracted is None : lst . append(no) elif telecom_to_e...
2 comments
Read more

Solution of shortcut virus on pen drive thumb drive ,memory card ,hard disk

By
If you did not format your flash drive, then check whether the files are not in  hidden mode. Follow the following steps.  Step 1:  Click on the below link and download the file "AutorunExterminator"  http://en.kioskea.net/download/download-11613-autorun-exterminator   Extract it --> Double-click on "AutorunExterminator" --> Plug your flash drive now.  This will remove the autorun.inf files from your flash drive and also from drives.  Step 2:  Click on "Start" -->Run --> type cmd and click on OK.  Here I assume your flash drive letter as G:  Enter this command.  attrib -h -r -s /s /d g:\*.*  You can copy the above command --> Right-click in the Command Prompt and  paste it.  Note : Don't forget to replace the letter g with your flash drive letter.  Now press "Enter".  Now check for your files in Flash Drive.  Step 3:  After that, download the Malwarebytes' Anti-Malware from the belo...
Post a Comment
Read more

How to Hack an Ethernet ADSL Router

By
Every router comes with a  username  and  password  using which it is possible to gain access to the router settings and configure the device. The vulnerability actually lies in the  Default username  and  password  that comes with the factory settings. Usually the routers come preconfigured from the Internet Service provider and hence the users do not bother to change the password later. This makes it possible for the attackers to gain unauthorized access to the router and modify its settings using a common set of default usernames and passwords. Here is how you can do it. Before you proceed, you need the following tool in the process: Angry IP Scanner Hacking the ADSL Router: Here is a detailed information on how to exploit the vulnerability of an ADSL router: Go to  whatismyipaddress.com . Once the page is loaded, you will find your IP address. Note it down. Open Angry IP Sca...
Post a Comment
Read more

just more way to disable autorun.inf

By
Auto run.Inf this is a instruction file associated with the Auto run function. It is a simple text configuration file that instructs the OS (operating system) which executable to start which icon to use which additional menu commands to make available etc Auto run.inf must be located in the root directory of a volume.That is CD,DVD,of Floppy Disk or Pen drive. It is mainly used by the manufacturer on what actions to taken when their CD-ROM when it is inserted. In OS, when autorun.inf is enabled (Normally by default it is enabled ) then by inserting the Cd or DVD the content of the medium is automatically executed. This is to avoid the user intervention and help the low level knowledge of computer literacy people. But Virus programmer taken this as advantage and make virus instruction in autorun.inf text file. TYPICAL AUTORUN.INF A typical autorun.inf file looks like below. [autorun] open=setup.exe icon=setup.exe,0 label=GameProgram SIMPLE METHOD NOT TO GET INFECTED BY AUTORUN.INF:...
Post a Comment
Read more