Search the Support Center

How to modify Jimdo templates with CSS

Jimdo templates are designed to give a clean, modern, and consistent look to a website. The template library is constantly growing and tries to include new trends as they appear. However, there are times when you can't find the exact template that you want for your site. In these cases, you may want to make small tweaks to a template in order to change the size of components or even hide them all together.


In this tutorial we will explore the basic methodology for inspecting the existing code for a Jimdo website and overwriting some settings using snippets of custom CSS code.  Every template in Jimdo is slightly different, so the exact code in this tutorial may not work for all websites.  However, the techniques to make changes are the same, and these instructions should provide you with a great starting point for customizing the CSS code in your Jimdo website.

 

Note:

It is possible to "break" your website when you add custom code. If you see undesirable effects from your code, you can always delete any snippets you added to undo the changes you made. In a worst-case scenario, you can contact Jimdo support to clear out all the code in the Settings->Edit Head area.

To make custom changes to a Jimdo template, you have to be able to read and understand a bit of HTML and CSS code. There is no need to be an expert, but you should understand some of the basic concepts. Teaching these is beyond the scope of this tutorial, however there are lots of great resources on the web for learning HTML and CSS for free.  We recommend visiting Codeacademy to take their HTML/CSS Basics course. This free online course should take about 7 hours to complete, but it will be very helpful for anyone working on websites in any capacity.


Before we get started, there is one more recommendation when it comes to your choice of web browser. I highly recommend using Google Chrome as it has easy-to-access development tools that we will be using to explore sites and test changes before making them within Jimdo. It's also the browser that works best with the Jimdo editor.

 

Original website using Rome template

Desired changes to the template


With all that out of the way, let's explore how to make some changes to a Jimdo template. I'm going to start by modifying my test website which is using the Rome template. By default this template has a large "hero" image area at the top, a fixed top bar that holds a logo and navigation bar, and a breadcrumb trail (the green box on the left side). I'm going to demonstrate how to make several changes to this template by following the same steps each time.


There are four things that I'd like to change on this template. We're going to start by adding more space between the logo and the navigation menu. Then we'll make the hero image area shorter, hide the breadcrumb trail, and finally, make the top bar scroll with the page instead of staying fixed.  Seeing how we make these changes should give you a good sense of how to do something similar on your own website.

 

Changing spacing

Let's start by adding space between the logo and the navigation. Remember that these are the steps when using Google Chrome; they would be slightly different using different browsers and may require additional tools to do the inspections and testing.

 

1. Inspect the part of the website that we want to change

 

Open the website in View mode. I like to start with my website in Edit mode, then scroll down to the "view" link and right-click on it to open it in a second tab. This way I have quick access to both View and Edit modes, and I can easily switch back-and-forth between the two.


In View mode, right click on the middle of the hero area and select "Inspect Element." This will open the Developer Tools in Chrome.  Let's take a moment to explain the different parts of the Developer Tools environment and how it works.


There are a number of tabs that we will mostly be ignoring. If you ever accidentally click any, you can go back to the view you want by clicking "Elements" on the left and "Styles" on the right. 


The screen is divided into three panels. The top panel is the live website. We can make changes to code in the Developer Tools below and they will immediately be visible in the top panel. Remember that any changes you make are only visible to you in your browser—you're not changing your actual website yet. But, the changes we test here will help us know what to do when we change the code on our Jimdo websites. 

 

The bottom left panel (the "Elements" tab) is the source code. It is essentially the same thing that you would see if you right-clicked on your page and selected "View Source."  The only difference is that each of the tags in the HTML are collapsed and display a small triangle next to them. Clicking a triangle will expand the nested tags and content within it. You can open and close tags as necessary.  Also, moving your mouse over the code of the tags will highlight the corresponding element in the Live Website panel. This is very helpful and will allow you to identify exactly which block of text we need to modify.  

 

As you move up and down the different divs, sections, paragraphs, and more, you will see there are often many elements nested inside one another.  Using elements to "wrap" other elements is a common layout method.  Sometimes you will need to make changes directly to the element you want to change, and sometimes it will work better if you modify the container of that element.


Finally, the panel in the bottom right (the "Styles" tab) is the CSS code for the element highlighted in the Source Code panel. If you scroll down through the Styles Area, you will see all the styles affecting the element and where they come from. Many of these are styles applied to the element type and some are from different classes that are associated with the element.


If you scroll all the way to the bottom of the CSS panel, you will see a graphical representation of the element with pixel dimensions. This Styles Diagram is one of the most useful pieces of information within all of developer mode. It will show you not only the dimensions of the element itself, but will also display the amount of pixels of padding, border, and margins. You'll notice that the different colors in this diagram correspond to the overlay colors in the Live Website panel that you see when you mouse over different items in the Source Code panel. It is all connected. 


Note:

In CSS, every element has a width and a height of the actual object, although sometimes these are determined by percentages and will change if you resize the browser window. Outside of the element but sharing the same background is the padding. Next, the border encloses all of that. Finally, the space between the border and other elements is called the margin. The border, padding, and margin can all have different dimensions on the top, bottom, left, or right.

Okay—so let's start by hovering over different lines in the Source Code panel. As you go up and down you will see colored overlays appear in the Live Website panel. When you find the area you want to change, click on the triangle to see the contents. Keep opening tag sets until you find the exact ones you want to change.


2. Identify the object, id, or class name of the item you want to change

 

In my example, I open a div with an id of "cc-inner" and then open another called "wrap." I keep opening more until I find a div with a class of "logo."  If I select this row in the source code and scroll to the bottom of the Styles Area, I can see the Styles Diagram. In my example the element has a width of 300 and a height of 144. There are no margins, but there is a top padding of 10 pixels.  

 

3. Test changing a CSS attribute

 

Now that I have targeted an element to modify, I can try making some changes in the Developer Tools. There are several different ways to do this. Normally I click directly on the values in the Styles Diagram, or you can click on the style attributes near the top of the CSS panel and change them. You can also type directly into the Styles Area near the top of the CSS panel to try out different blocks of code.


For this example, I want to add 100 pixels of space to the right side of my logo, between the logo and the navigation menu. To do this, I'm going to scroll down to the Styles Diagram in the CSS panel and double-click on the dash in the margins area on the right side. Then I'm going to type 100 and hit the enter key and see what happens.

 

At this point, I see the changes on the Live Website panel. In the Source Code panel, I see a CSS block highlighted in blue. This contains the code I will need when I change style attributes on my actual Jimdo website. We'll take the code that comes after style=". In this case that's margin-right: 100px; 

 

4. Return to your Jimdo website's Edit mode and add code to Settings->Edit Head

 

This is great, but no one else can see this change on my website yet. So now I just need to add it to my Jimdo website. To do this, I need to return to the tab where I have Edit mode open. Now go to Settings ->Edit Head and paste in the following code:


<style>

.logo { margin-right: 100px; }

</style>


Where did I get this particular code from? The .logo is the "identifier," the way to indicate the div class that I want to apply this change to (you can see that in the highlighted portion above where it says div class="logo"). The margin-right: 100 px; is the style attribute that I want to change. 


If you already have other styles in the Edit Head area, simply put the line that starts with .logo in between the existing set of <style> tags.  


Now save the code. You will notice that the Jimdo system will slightly modify the code to make it better written, you can ignore those added tags, but don't delete them as they will just come back. They will not affect what we are doing.

 

Note:

There are three ways to add an identifer in CSS. You can put the html element type, like "div" in there to apply it to all divs. Or you can apply an attribute to a unique id with the # symbol, like #wrap. Finally, you can apply a style attribute to all elements with a particular class associated with them, using a period before the name, like .logo. 

5. Refresh website in View mode to see if the changes are correct

 

Once the code is saved, switch back to View mode and refresh the page. If you still have the Developer Tools open, you can click on the "x" in the top right of the panels to close it and view your site normally again. You should see the new space between the logo and the navigation.

 

6. Tweak code until desired results are achieved

 

If you decide that you want more or less space, simply change the pixel amount in the code you've placed in Edit Head (you could change it from 100px to 80px, for example). Remember that any changes you make have other consequences. Adding space next to the logo means that there is now less horizontal space for the navigation menu. This could make your links break to a second line or stick out further than they should to the right. So be careful. If you want to undo a change, you can delete the line of CSS in Edit Head and save again.


So now that we have successfully tweaked the template once and have a methodology to make changes, let's go through the process a few more times.


Hint:

If your code was entered correctly but is not working, there is a way to force the change to happen. Try replacing the semi-colon at the end of the line of CSS with !important;. This would make the full line look something like this:

 

.logo { margin-right: 100px !important; }

Shrinking the header area

The Rome template has a very large "hero" image area. This can make for a very striking first impression, however, on a laptop, the image takes up nearly the entire screen. Let's use what we just learned to make the image shorter and pull up the content beneath it by using the same steps we did for the last example.


1. Inspect the part of the website that we want to change

 

The hero image that is shown at the top is actually a large background image that sits behind your content area. A "cutout" in the content area allows you to see the image. So changing the size of this cutout will change the amount of the image that you see. As I move through the Source Code panel, I see the brown-ish gold overlay cover the entire hero area when I hover over the line that says <div class="container content-options-box cc-content-parent">.  

 

2. Identify the object, id, or class name of the item you want to change

 

Looking in the CSS panel, I can see that there is a top margin set to be 741 pixels. This is the cutout.

 

3. Test changing a CSS attribute

 

By making the 741 pixels number smaller in the Styles Diagram at the bottom of the CSS panel, I see the body content area rise up on the page. It is important to note that the number isn't the height of the image. It is actually the height of the visible part of the image with the top bar (with the logo and navigation) covered. So you may need to do some trial and error to get it right. I decide to change the setting to be 500 pixels. This will move my body content up by 271 pixels. 

 

4. Log into the Jimdo website and add code to Settings->Edit Head

 

Looking at the CSS panel closer, I see that the exact item that had the margin-top set to 741pixels was the container class, so this will be what we change.  I can see in the Source Code panel what the new change should look like:  "margin-top: 500px;".

 

So if I add this line to the code that I already had in place in the Edit Head area, it will look like this:


<style type="text/css">

/*<![CDATA[*/


.logo { margin-right: 100px; }

.container { margin-top: 500px; }


/*]]>*/

</style>

 

5. Refresh website in View mode to see if the changes are correct

 

6. Tweak code until desired results are achieved

 

And now we've got two spacing issues solved.  Let's move onto a another common request—hiding portions of the website.


Hiding the breadcrumb trail

Although I personally like the breadcrumb trail on Rome, it's a good example of how to hide a portion of a template. Breadcrumb trails are a string of links that tell a visitor what page you are on and what the parent pages are. So on a simple site like my test one, they are not overly helpful; however, if you have a more complex website with lots of sub-pages, or even a third-level of navigation, they can be very valuable. Breadcrumb trails are available on a few templates in Jimdo and vary from template to template. On Rome, the breadcrumb trail has a colored background and appears on top of the hero image at the top of the content area.


Let's see how we can use our same technique to add some custom code to make this disappear.

 

1. Inspect the part of the website that we want to change

 

2. Identify the object, id, or class name of the item you want to change


Looking through the lines in the Source Code panel, I find one that seems to display the entire breadcrumb trail. It has a class name that says "breadcrumb-wrapper", so that seems like the right one.

 

3. Test changing a CSS attribute


Unlike the first two examples where we simply modified an existing value, this time, we're going to need to insert a small bit of code. Don't worry, it is still very easy and it's a technique you should learn if you want to do this more often. To hide any element on a page, we can add the style "display: none;".


I'm going to test this by clicking in the .breadcrumb-wrapper section of the CSS panel.  This will give me a cursor prompt and then I can type directly into that area and add new lines. I add "display:none;" and the results are immediate. The breadcrumb is now gone.

 

4. Log into the Jimdo website and add code to Settings->Edit Head


To make this effective on our actual website, we add that line of CSS to the growing list of styles in our Edit Head area:


<style type="text/css">

/*<![CDATA[*/


     .logo { margin-right: 100px; }

     .container { margin-top: 500px; }

     .breadcrumb-wrapper { display: none; }


/*]]>*/

</style>


5. Refresh website in View mode to see if the changes are correct

6. Tweak code until desired results are achieved


We see that this change also moves up our content a bit below the image. If we need to add that space in again, we can do this by adding a Spacing element using the Jimdo tools.  Or you can now use your new CSS skills to move it back down again.

 

Make the top bar scroll with the page

For a final example in this tutorial, I'd like to make a change to a way the page scrolls. Right now, when a visitor scrolls down on this website, the top bar with the logo and navigation stays in place and the content moves below it. This "fixed navigation" is a great feature that lets someone have access to the navigation no matter where they are on a long page of the site.  However, there might be instances where you want this bar to scroll up like it does on most websites.  To do this, we need to change the "position" attribute of that element of the website.


1. Inspect the part of the website that we want to change

 

2. Identify the object, id, or class name of the item you want to change


Finding the right thing to change is pretty easy. There is a div with a class called "navigation-colors" that I find by hovering over the lines in the Source Code panel. We can see that this div has a position of "fixed," which seems to accurately describe what happens to it when we scroll.  

 

3. Test changing a CSS attribute


To undo the "fixed" state, we just need to change it to the default position state instead. The word that we need to use is "relative."  By clicking on the word "fixed" and changing it to "relative," we see the behavior change that we are hoping for.


4. Log into the Jimdo website and add code to Settings->Edit Head


We add this new change to our Edit Head area and the final block of code looks like this:

 

<style type="text/css">

/*<![CDATA[*/


    .logo { margin-right: 100px; }

    .container { margin-top: 500px; }

    .breadcrumb-wrapper { display:none; }

    .navigation-colors { position:relative; }    


/*]]>*/

</style>


5. Refresh website in View mode to see if the changes are correct

 

6. Tweak code until desired results are achieved


Final Thoughts

Customizing websites is a complicated process and you can go much deeper than what we explored in this tutorial. If you would like more information, check out the other advanced tutorials, especially the one about setting different backgrounds for different pages of your website.  Even if you are not interested in that particular task, the techniques it shows, combined with what you learned in this tutorial, will allow you to make any of these changes for just one specific page of your website!


As a closing thought, do not get discouraged about all the different codes, attributes, and settings out there. No one has all of this stuff memorized, not even professionals. I regularly search Google for the right CSS code to make the types of changes that I am after. Just focus on the basics and remember that if something ever breaks your website, simply delete that line of code or contact Jimdo Support to have them purge your Edit Head section.