Starter CSS file to start coding your own website

Here is a simple CSS file that you can use for a website:

/* Add a black background color to the body */

body {

  background-color: black;

}

/* Add a green text color to the heading */

h1 {

  color: green;

}

/* Add a red text color to the paragraph */

p {

  color: red;

}

/* Add a blue border to the image */

img {

  border: 2px solid blue;

}

/* Add some padding to the div element */

div {

  padding: 20px;

}

This CSS file adds a black background color to the body, a green color to the heading, a red color to the paragraph, a blue border to the image, and some padding to the div element. You can use this as a starting point and customize it to suit your needs. 

Read More

Adding CSS to your email with Protonmail

ProtonMail is a secure email service that allows you to customize the appearance of your email messages using CSS (Cascading Style Sheets). Here's how you can add CSS to your ProtonMail email messages:

Create a new email message or reply to an existing one.

Click on the "HTML" button in the toolbar at the bottom of the email composition window.

This will switch the email composition window to HTML mode. You can then add your CSS code to the email message by enclosing it in <style> tags.

For example, you can add the following CSS code to change the color of the email text:

<style>

  body {

    color: red;

  }

</style>

Once you have added your CSS code, you can switch back to the normal email composition view by clicking on the "HTML" button again.

When you send the email, the CSS styles will be applied to the email message.

Note: Keep in mind that not all email clients support CSS, so the styles you apply may not be displayed correctly in all email clients. It's always a good idea to test your email messages in different email clients to ensure that they are displayed correctly.

Read More

How to add custom CSS to your DIVI theme

With DIVI by Elegant Themes, you can use custom CSS to customize the appearance and layout of your DIVI site.

To add custom CSS to your DIVI site, you can do the following:

Go to the DIVI theme options page in your WordPress dashboard and click on the "Custom CSS" tab.

Add your custom CSS code to the text area provided.

Click the "Save Changes" button to apply your changes.

Alternatively, you can also add custom CSS to your DIVI site by creating a child theme and adding your custom CSS to the child theme's style.css file. This is a good practice because it allows you to make customizations to your site without modifying the parent theme's files, which makes it easier to update the parent theme in the future.

If you need help with customizing your DIVI site, you can refer to the DIVI documentation or seek help from the DIVI community.

Read More

CSS hacks that you can use for Internet Explorer

To target Internet Explorer (IE) versions 6 and below, you can use the * html hack:

* html {

  /* Your IE-specific styles go here */

}

To target only IE7, you can use the *+html hack:

*+html {

  /* Your IE7-specific styles go here */

}

To target only IE8, you can use the \9 hack:

.some-class {

  color: blue;

  /* All other browsers */

  color: red \9;

  /* IE8 and below */

}

To target only IE9, you can use the @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) hack:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

  /* Your IE9-specific styles go here */

}

Note: These CSS hacks are specific to Internet Explorer and are not supported by other browsers. It's generally better to use feature detection and use modern, standards-compliant techniques instead of relying on hacks like these. 

Read More

Hide Google Invisible reCAPTCHA Badge with CSS

The correct way to hide the Badge is to use opacity. Using things like display: none and visibility: hidden breaks reCAPTCHA.

.grecaptcha-badge { opacity:0 }

Read More

Make the DIVI phone and email text in header bigger

 You can adjust the header phone and email text with this custom CSS:

#top-header #et-info-phone, 

#top-header #et-info-email, 

#top-header .et-social-icon a { 

    font-size:130% 

}

Read More

How to replace the Google loading gear in Blogger's Dynamic View template

Go to Dashboard - Template - Customize - Template Designer - Advanced - Add CSS - paste the following code (and customize the code as needed) - Press enter after the last character of the last line } - Apply to Blog. 

Enter this below code the custom CSS of the blogger template.

.blogger-gear, .overview-sspe {

background-image: url('https://blogger.googleusercontent.com/img/a/AVvXsEgXYJz_NXvZ-Ahaeg49ULvBtWITPEE4ENqyZ0PMw3Kc0ymnV8C3EafXZ6mprPwN3NyZ8hHnH9205IvqiP7DXQ2PtJuICHDCYFnTzy5O-4AmSbTtS6chK1EQjSj5V8hbiXbknE4J4hmaRQUVBtpJk243SOrG-hiBbmgu0CUIB6pxmzhJyJeukq10EpUKng=s196') !important;

height: 196px !important;

width: 196px !important;

This code has been programmed to add a penguin. Replace the image to suit. 

}

Read More