intechverse.com
TRENDING
  • Security
  • Security
No Result
View All Result
  • How To
  • Article
  • Contact us
  • About us
  • How To
  • Article
  • Contact us
  • About us
No Result
View All Result
intechverse.com
No Result
View All Result
Home Article

Best Custom CSS codes for your blog

Amardeep Pawar by Amardeep Pawar
September 7, 2020
in Article
23
best CSS codes feature image
Share on FacebookShare on Twitter

Have you ever wonder how the looks and feels of your blog are different from others despite using the same theme? This is simply because of Custom CSS Codes, Before straight away providing the codes let me briefly explain what is CSS.

CSS stands for Cascading Style Sheets which is nothing but simple designing language to add styling and functionality to your HTML page and make it more presentable. CSS allows you to store styling information like colors and layout separate from your HTML. Although you can save CSS as inline internally or externally, That we will discuss later in the article.

For Better understanding assume CSS as some kind of computer dress code. Like, you can change your clothes easily, the same would be with your Website with the help of CSS. You can easily separate CSS from HTML file, so that the dress code is easy to find and easy to modify.

What's inside

  • what are the advantages of CSS
  • Types of CSS
  • Methods to add Custom CSS in WordPress site
    • With the help of Theme Customizer
    • With the help of plugins
  • How to add Custom CSS in blogger
  • Best Custom CSS codes for your site
    • Add Shadows to the Images
    • Change the shapes of the images
    • Change background colors of headers(h1,h2,h3,h4)
    • Before and after Selectors using Custom CSS
    • Changing the Color Scheme of Widgets
    • Disable right click and stop others from copying using CSS codes
    • Add Avatar image with Custom CSS
  • Summarizing

what are the advantages of CSS

  • Saves lots of time
  • Fast Web Page Loading Time
  • Maintaining and Updating CSS code is easy
  • Lots of formatting options than HTML
  • Style Sheets are Lightweight
  • SEO benefits
  • Easily present different styles to different viewers
  • Good accessibility

Types of CSS

Inline style sheets are always the most common and easiest way to add styles like colors, alignments, and background to your Web Pages. Simply add the code right where you need them. Here in the example, different styling like color and alignment are provided for header (h1) and paragraph (p) tags in the same line.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:green;text-align:left;">Type one inline CSS</h1>
<p style="color:red;">Inline styles sheets are the easiest way to add styling like colors and background to your Web Page. You just need to add the code right where you need them.</p>

</body>
</html>

Internal style sheets are placed at the top of each web page document.<style> element is placed in the head section of each page. These are easy to find in the HTML document and you can easily override an external style sheet with the help of an Internal style sheet

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: #B284BE;
}

h1 {
  color: #B284BE;
  margin-left: 20px;
} 
</style>
</head>
<body>

<h1>internal css</h1>
<p>Everything you need to know about internal CSS.</p>

</body>
</html>

External style sheets are separate files form HTML documents that contain only CSS instructions. (The style sheets are saved with the file extension .css). When you add an external style sheet to your web page then the page’s look and feel will be controlled by these CSS codes.

You have to call the External CSS in the head section of the HTML document. Calling could be done as below

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Methods to add Custom CSS in WordPress site

Every time you need to change the style and looks of your site, rather than doing anything silly with your theme codes, you could give a try to custom CSS. With the help of CSS, you can entirely change the feel and the look of your site whether on Blogger or WordPress.

Also read: How to install WordPress locally

By using Custom CSS you can avoid interacting with complex codes of your WordPress theme There are basically two ways to add additional style sheets into your WordPress site.

With the help of Theme Customizer

This is an inbuilt feature since WordPress version 4.7. One of the easiest ways only if you know how to code or you have CSS codes to paste. You just need to go to the theme Customizer and paste those codes. One massive advantage adding CSS in Theme Customizer is, you can see live changes in the preview window

Appearance >>> Customize >>> Additional CSS

With the help of plugins

This is a very easy way to add customs CSS to your WordPress site. You just need to install the plugins, although finding a good plugin to do this kind of tough job. That’s why I have shortlisted a few plugins to help select.

Simple Custom CSS is An easy-to-use WordPress Plugin to add custom CSS styles that override Plugin and Theme default styles.

  • Customizer Control (live preview)
  • Useful Code Syntax Highlighter
  • Code linting (error checking)
  • No configuration needed
  • Simple interface built on native WordPress UI
  • Supports PHP 7.2
  • No complicated database queries
  • Thorough documentation
  • Allows Administrator access on WP Networks (Multisite)

CSS Hero is a very powerful tool to easily customize the look of your site, with an easy and intuitive point and click interface. It would definitely impress your audience. It helps both pro and average users to customize their site like never before. A few of its Powerful features are like instant gradient generation, intelligent color palette, easy user interface.

custom CSS hero

One major advantage of adding CSS using plugins is, CSS code stayed forever with you till you manually delete those or delete the plugin. But if you are adding Custome CSS through Customize >> Additional CSS then there is always the risk of losing you Custome CSS with the theme change or even with updating the theme

How to add Custom CSS in blogger

  • Go to the Theme section
  • Click the Customize on your selected theme
  • Click on Advanced option
  • Scroll Down
  • Click on Add CSS option and see the live changes in the preview box below

Best Custom CSS codes for your site

Now it’s time to provide you some CSS snippets. These are simple codes, you just need to paste these codes into your site and then boom! you can see drastic changes in your site.

Add Shadows to the Images

Simple plain images on any website look dull and boring. But with this Custome CSS, you can easily change images from boring to eye-catching. this CSS code simply add Shadows to images in your blog post. #C0C0C0 in the below Custome CSS code is the color, you can put any color in here, I suggest any dark color like grey or black would be nice.

.post img {
border:1px solid #C0C0C0;
box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
-khtml-box-shadow: 10px 10px 5px #ccc;
}

Change the shapes of the images

Few updates back WordPress only allows rectangle shape images, but now you can easily change the image style from rectangle shape to circle shape. The only issue you could face is, sometimes you need to images in other circle shape variants like egg or oval shape

Custom CSS

Simply edit below CSS according to your needs, Change the radius percentage from 0-100%.

.circle-image {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
}

You should only provoke CSS code for the image which you want to show in circle shape, to do so just call the circle-image class for that specific images in the HTML edit mode.

Change background colors of headers(h1,h2,h3,h4)

By default, WordPress doesn’t allow you to change the background color. if you think they allow you to change colors then you might be mistaken by header font color with headers background colors. go check out, there is a provision to change the background color of the paragraph but not the headers

To do so, just copy the CSS code below and paste it additional CSS. Although working of this CSS is highly dependent on your theme.

Code is a very simple one-line yet very effective, you don’t even need to copy the code, just type in.

header
{
    background-color:#F6370E;
}

h2 {
  color: #68EB60;
}
h3 {
  color: red;
}
p {
  color: blue;
}

Before and after Selectors using Custom CSS

Before & After Selector is used when you want to add some text Before or After the header or paragraph. These selectors are simply used to draw the attention of users. you could change colors of the text according to your theme style.

h:before { 
    content: "Attention:have a look>> ";
    color:red;
}
p:after{ 
    content: " -Read more… ";
    color: green;
}

Changing the Color Scheme of Widgets

Sometimes changing colors of the widgets like their body color and tittle color gets tricky, easiest is way is to use the Custom CSS Codes.

In CSS simply call widget and Widget tittle to change the colors. You could even redefine the other properties of the widget like height, width, font family.

.widget {
  background: red;
}
.widget-title {
  background-color: blue;
}

Disable right click and stop others from copying using CSS codes

Sometimes you need to save your content from getting stolen, to do so just paste this code in your additional CSS customizer.

With the help of this CSS, no one could select and copy the text content from your website. But it would only save you from naive content thieves, advanced or even a person with basic knowledge of web developing could stile copy your content via inspect element

body {
	-youbkit-touch-callout: none; 
	-youbkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;							 
}
  • user-select is well-defined property of CSS, if set to none, it disables the selection of the content
  • youbkit-touch-callout is for iOS Safari
  • youbkit-user-select is for Chrome 6.0+, Safari 3.1+, Edge & Opera 15+
  • moz-user-select is for Firefox
  • ms-user-select is for IE 10+ and Edge
  • user-select is Non-prefixed version, it is currently supported by Chrome and Opera browsers

Add Avatar image with Custom CSS

Most of the themes happen to include the Writer’s bio(about the author) at the end of the article. but if you have chosen and finalize the theme which doesn’t include the “about the author” section, then you could create your own with the help of Custom CSS

One major advantage is, you can include Avatar with author information wherever you want in the article.

You can directly upload a new image or just provide the URL link of the image. To find the URL of the images, go to the media library. Name the class as Avatar which will be called in CSS.

<img src="image" alt="Avatar bio" class="avatar">

In the below CSS, define the height and width as you wish, Border-radius property is used to add round corners to the rectangle shape image and make it perfectly round.

.avatar {
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

Summarizing

I have only covered the basics of CSS and a few Custome CSS codes, which could enhance the looks and feel or your site. I will keep updating this article with more tips and tricks on CSS, its functionality, CSS selectors, a combination of CSS and Javascript, and Web development. but If you want to learn from the basics of CSS and Web Developing then Visit my friend’s blog Technical blog. She has provided everything that you need to know about Web development like HTML, ADVANCE CSS, and Javascript.

ShareTweet
Load WordPress Sites in as fast as 37ms!
Previous Post

Deal Bluehost is offering heavy discount on hosting

Next Post

Facebook Avatars: How to create your personalized Facebook Avatar

Related Posts

AMD Ryzen 5000 Series The best processors for Desktop
Article

AMD Ryzen 5000 Series: The best processors for Desktop

November 9, 2020
Honeygain app detailed review
Article

Honeygain app detailed review:Earn money now

November 11, 2020
Best Processor for Mobile
Article

Best Processor for Mobile that actually suits you

October 11, 2020
online live code learning white hat jr
Article

White hat jr online code learning platform for kids

September 7, 2020
free high quality do follow backlinks
Article

20+ easiest ways to get free high-quality do-follow backlinks

August 27, 2020
google people card
Article

Now your introduction in your mobile “google people card”

September 2, 2020
Next Post
facebook avatars feature image

Facebook Avatars: How to create your personalized Facebook Avatar

Comments 23

  1. Anthony Garland says:
    5 months ago

    I must confess that I love this post. I’ve scheduled to go through it one more time.

    Reply
  2. Pingback: Why Flash is dying, the future of online small games html5 | Intechverse
  3. Pingback: Best ever Blogspot SEO tips for Blogger(complete guide) | Intechverse
  4. Deepak says:
    6 months ago

    Very informative

    Reply
  5. Sneharika Sharma says:
    6 months ago

    Authentic Information

    Reply
  6. Ashish says:
    6 months ago

    Informative keep sharing like this type of posts it really heps to understand.

    Reply
  7. ruchi says:
    6 months ago

    Very informative as always

    Reply
    • Archana says:
      6 months ago

      All your articles are very useful

      Reply
  8. axro says:
    6 months ago

    thanks for sharing. i will use this in the future

    Reply
  9. Ruchi says:
    6 months ago

    Good information

    Reply
  10. Hareem Gul says:
    7 months ago

    Informative

    Reply
  11. Alisha Rahim says:
    7 months ago

    Very helpful and informative.

    Reply
  12. Harpreet singh says:
    7 months ago

    Really helpful information for beginner in blogging field👍

    Reply
  13. Amrit says:
    7 months ago

    wow you give us significant knowledge thanks veer
    I really like it keep it up 👍👍👍

    Reply
  14. Tooba Liaqat says:
    7 months ago

    Thanks for sharing your knowledge

    Reply
  15. Raman says:
    7 months ago

    Great source of knowledge.. really a very informative article . It is very helpful.. thanks for sharing this article with us

    Reply
  16. Parminder Singh says:
    7 months ago

    Thanks for this knowledge

    Reply
  17. Gurjant singh says:
    7 months ago

    Nyc work

    Reply
  18. Mahi says:
    7 months ago

    Informative and interesting..

    Reply
  19. Harsimran singh says:
    7 months ago

    wow perfect i love it and i will share it with friend

    Reply
  20. Lucine says:
    7 months ago

    This is very helpful for those who are new in the blogging field and don’t have much knowledge of WordPress.

    Reply
  21. Tanu says:
    7 months ago

    Realy good artiicle

    Reply
    • Arsh says:
      7 months ago

      good nd informative article

      Reply

Leave a Reply Cancel reply

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

I agree to the Terms & Conditions and

No Result
View All Result

Recommended

next-gen images feature

What are next-gen formats, How to use Webp in WordPress

September 7, 2020
online live code learning white hat jr

White hat jr online code learning platform for kids

September 7, 2020
bluehost hosting discouny

Deal Bluehost is offering heavy discount on hosting

November 11, 2020
best CSS codes feature image

Best Custom CSS codes for your blog

September 7, 2020
free high quality do follow backlinks

20+ easiest ways to get free high-quality do-follow backlinks

August 27, 2020
windows can not be installed on this disk feature

Fix Windows can not be installed to this disk.

July 28, 2020

Recent Posts

  • AMD Ryzen 5000 Series: The best processors for Desktop October 10, 2020
  • Honeygain app detailed review:Earn money now October 2, 2020
  • Best Processor for Mobile that actually suits you September 17, 2020
  • White hat jr online code learning platform for kids September 5, 2020
  • 20+ easiest ways to get free high-quality do-follow backlinks August 27, 2020

Categories

  • Article (13)
  • Deal (1)
  • How To (8)
  • Technology (4)
  • Home
  • About Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions
  • Site map

intechverse.com
Get to know about trending technologies, tips and tricks, How to's on Intechverse.com
© 2020 Intechverse.com

No Result
View All Result
  • How To
  • Article
  • Contact us
  • About us

© 2020 intechverse.com

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our I Agree