Theme customization 1

Create a Stylish Site: Best Practices to Customize your site with CSS

On 18/07/2018

Having an original and beautiful web page is crucial to provide Internet users and visitors of your website a more enjoyable experience and have returning visitors.

Upon applying the Blogger template or any other template suggested in the manager, you’ll be able to customize it completely, thanks to the CSS styles.

A simple customization format will not cover all the intricate graphic aspects of your web page.
If you want more advanced customization options, you need to write some rules in CSS.

In this blog post, we will stick to the basic principles to follow in order to complement correctly the existing CSS styles with those you are going to add, and keep the Responsive web design logic just as it must be.

Important: We won’t be trying to teach you CSS from scratch here; there are many other web pages that do a great job of explaining it!
In fact, you’ll find many resources on the internet that will allow you to easily acquire the basic skills of this powerful and indispensable programming language, whenever you want to give your page a personalized layout.

Where should I write custom CSS styles?

In the manager we suggest two ways of adding your CSS styles, you will find them in Settings > Design > Personalize:

At the top of the personalization form, click on Expert-CSS : there you can edit the style sheet created by the emyspot Web Designer.
This style sheet utilizes the parameters defined in the personalization form (text color, links, etc.).
Under the personalization form, in the Add or edit theme CSS(advanced users) section: the new CSS styles that you add to the site will be implemented after the elements that have already been written in the style sheet created by the emyspot Web Designer.
Since the styles are added at the end of the template style sheet, there may be some contradictions in comparison to the existing style.
Also, you can add CSS from Settings > Global settings > Editable zones.
The styles added to this area will also be loaded up at the end of the template style sheet.

Each of these methods has certain advantages and disadvantages

Choosing Expert-CSS provides the advantage of being able to completely control the style sheet used to edit your page’s layout. Therefore, you can modify the existing CSS or delete some styles.
The disadvantage is that once this style sheet has been edited, you will not be able to benefit from the possible modifications and suggestions proposed by the emyspot Web Designer.
Also, if you want to modify a color for example, you will have to specify a hexadecimal code (e.g., #ffffff for white). You will no longer be able to choose it from the customization form.
This solution is designed for users who already have a reasonable knowledge of CSS and who want to have total control of the appearance of the site.
On the contrary, choosing to add CSS from the Add or edit theme CSS(advanced users) selection does allow you to continue benefiting from the possible modifications of the template style sheet.
The disadvantage is that to modify an existing style, you must rewrite it, which will increase the weight of the style sheet and consequently, the loading time. Take advantage of this method if your CSS knowledge is limited and you still want to benefit from possible graphical improvements.

Whatever the solution you choose, try to write all your pages CSS styles always on the same area; this facilitates its access and its maintenance.

CSS Styles and Responsive Design

We are starting out from the principle that your site is Responsive; you have applied a template based on CSS Frameworks Bootstrap (version 2) or EMS Framework.

The Break Points

What do we call Break Points (interruption points) in Web Design?

The guiding principle of a Responsive website is that it can be adapted to all screen formats, whatever their size.
Thanks to CSS, we can modify the appearance of an element based on the size of the screen.

Here is an example of the main resolutions evaluated in CSS to define on which type of screen a webpage is displayed.

Screen Width	Terminal Type
> = 1200 px	widescreen, portable and desktop
> = 980 px	Tablets like the iPad in horizontal position
> = 768 px	Tablets in vertical position
<= 480 px	Devices with small screens, such as smartphones in a horizontal position
<= 320 px	Devices with small screens, such as smartphones in an upright position

Therefore, a breakpoint is a limit from which we apply CSS styles.
In this table, the breakpoint limit is expressed in pixels, but it can also be expressed by other units of measurement, for example, vw, rem, etc.

Since your page is Responsive, before writing a CSS style ask yourself this important question: Which type of screen will be affected by this style?
If your answer is not “All Screens,” you will have to adapt your CSS style to a predefined screen type.

It’s better to stick with the concept that CSS styles are designed for a default screen width.
All CSS styles that have not been adapted to this size should obviously appear in the appropriate @mediaquery.

Mobile First website, yes or no?

Before continuing, it is important that you ask yourself a second question that will help you prioritize your CSS styles: Am I going to create my site’s CSS primarily for mobile terminals? In other words, is my website is going to be created for Mobile First?

How can I know if the CSS of my page is Mobile First?

With emyspot, it's very simple:

All the templates based on the CSS Bootstrap V2 framework (you will recognize them from the Bootstrap suffix) are not Mobile First.
All the templates based on the CSS EMS Framework design (you will recognize them from the EMS Framework suffix) are Mobile First.

The design and content must be adapted to any circumstance, whether on a large screen or a small one.
Keep this crucial design aspect in your mind as you customize your page with CSS!

design personalize responsive

In Website design

New theme : A modern design for your website

On 02/10/2017

Blogger is a new responsive theme that, like the Smart theme, is based on the EMS Framework, specially designed for emyspot.

It is thus optimized to be displayed optimally on any type of screen, from smartphone to the desktop. It is also "mobile first", ie optimized for a default display on mobile terminal, while ensuring optimal compatibility with all existing resolutions.

In Web marketing

We have new share buttons!

On 18/08/2016

We have new share buttons! As you know, share buttons are one of these free plugins available on your manager. We care about the interactivity of your website so we made them more modern and more visible to encourage sharing and stuff! See how they look: