Step 1. Take your old theme's measurements 

Write down the important measurements of your old theme. These measurements will be needed to make your site's new responsive theme look just like your old, non-responsive one.

Measurements you should take down include:

• Site width
  
• Header height and width [If using a header image]
• Title text font, color, size, line height, font-weight, etc
• Paragraph text font, color, size, line height, font-weight, etc
• Link color and hover color

---

Step 2. choose a responsive theme

Now you'll need to choose one of Weebly's responsive themes that best reflects the structure of your current, non-responsive theme. Look for similarities such as navigation location, site width, etc.

Weebly's current responsive themes include:

• UNITE
• Saucy
• REDUX
• BRADLEY
• Venue
• SUPERSET
• SQUARED
• HIGHLIGHTER

---

Step 3. Customize [Desktop version]

This is the hardest, longest (i.e., 2+ days), and most grueling step of this tutorial, and where a decent knowledge of HTML and CSS are absolutely needed.

This step can't provide you with specific instructions because the responsive theme you're attempting to make look like your old, non-responsive theme will require probably 99.9% different CSS styling.

Begin by clicking on "Design" at the top and then "Edit HTML/CSS" on the left. In the "main-style.css" file, start by changing your site's width and the CSS coding for text (e.g., "h2", "p", and "a"). You may also need to change the font by clicking on "Design" and then clicking "Change Fonts".

Then proceed to change the colors of your site's header, main content, background, or import the background file(s) of your old, non-responsive theme.

As you continue to make your new responsive theme look like your old, non-responsive one, occasionally reduce the size of the browser, or visit MobileTest to see how your site is looking in not just desktop browsers, but tablet and mobile devices as well.

---

Step 4. Customize [Tablet and Mobile version]

Once you're content with how your new responsive, desktop theme came out, you may likely need to customize the tablet and mobile versions.

Weebly's responsive themes use 3 responsive stylings a.k.a. 2 "@media" queries [tablet and mobile version] and 1 standard style coding [desktop version].

To change the styling of your tablet and mobile versions, you'll need to use the "@media" queries usually located towards the bottom of the "main-style.css" file.

An "@media" query tells the browser being used to apply the CSS styling within its brackets, "@media screen (max-width:991px) { CSS }".

Again, as mentioned in the previous step, reduce the size of your browser to activate the tablet and mobile versions of your Weebly site. Then use the "Inspect Element" feature by right-clicking on the area you wish to edit to help you identify CSS codes.

Once you've found the CSS code you need to edit for your tablet or mobile version, change it in its respective "@media" query, or you may need to add it.

Always start with tablet styling first, then move to mobile styling if need be. This is because the styling being applied affects in one direction - tablet to mobile, not mobile to tablet.

---

You're done! Publish your site to see your site's new responsive theme!

---

comments powered by Disqus