Park Louis | Change the Background Color of the Content Area

The code below is how you change the content area of the layout Park Louis, it needs to be added in the Edit Head Section.

Original Content Area:

After the changes:

Code:

/**THE CODE STARTS HERE**/
<style>

#content_area {
background-color: red!important;
}

</style>
/**THE CODE ENDS HERE**/

Note: Just change the value "red" to any color you want.

Read More

Park Louisa | Changing Sidebar Background Color

Below is the code on how to change the sidebar background color of the layout Park Louisa. You have to add the code below in the Edit Head Section for it to work.

Original Sidebar:

After the changes:

Code:

/**CODE STARTS HERE**/
<style>
body.diyfeSidebarLeft .diyw .diywebSecondary {
    background-color: red!important;
}
</style>
/**CODE ENDS HERE**/

NOTE: Just change the value "red" to any color you want.

Read More

How to access the Edit Head Section?

The Edit Head Section is located under Settings, please refer to the screenshot below:

click the image to enlarge

A box will show up after you click the tool, the box is where you add your own custom codes such as CSS, Javascripts, Meta tags and so on.

Read More

Park Louisa | Changing Website Background

The background of this layout can easily be changed using the STYLE tool located at the right hand side of the website builder under the tab BACKGROUND. For further assistance you can contact the 1&1 Technical Support Team via phone, email, or chat.

If in any case you are having issues in using the Style tool, you can use the code below to force the layout to change its background:

For tiled image background:

<style>

.body {

    background-attachment: fixed!important;

    background-image: url("PUT YOUR IMAGE URL HERE")!important;

    background-position: center!important;

    background-repeat: repeat!important;
    background-size: auto auto!important;

}

</style>

For full image background:

<style>

.body {

    background-attachment: fixed!important;

    background-image: url("PUT YOUR IMAGE URL HERE")!important;

    background-position: center!important;

    background-repeat: repeat!important;

    background-size: cover!important;

}

</style>

 You have to add the code in the Edit Head Section which is under Settings located at the right hand side of the website builder in order to work.

Read More

Park Louisa | Change Navigation or Menu Font Color

Steps on how to change only the navigation or menu color of the layout Park Louisa:

Preview:

Magenta Font color

Red Font color

Blue Font color

1. Click Settings located at the right hand side of your website builder.

2. Click Edit Head Section.

3. Copy the code below and paste it on the Edit Head Section box:

/**CODE STARTS HERE**/
<style>
.diyw .diyfeCA .diyfeCA .diyfeCA .diyfeCA .diyfeCA2 .mainNav1 a, .diyw .diyfeCA .diyfeCA .diyfeCA .diyfeCA2 .mainNav1 a, .diyw .diyfeCA .diyfeCA .diyfeCA2 .mainNav1 a, .diyw .diyfeCA .diyfeCA2 .mainNav1 a, .diyw .diyfeCA2 .mainNav1 a {
color: red!important;
}
</style>
/**CODE ENDS HERE**/

4. Looking at the code above, I highlighted the line (in blue) that you need to change. Just change the value of color from RED to any color you want.

5. Click Save button and Done

Tip:

You can also use hexadecimal color values such as #FF0000, #CC0066 and so on to change the font color of your navigation. Just access the link below and then pick any color you want then copy the hexadecimal value of that color and replace the value RED with the hexadecimal value so the code should look like this:

/**CODE STARTS HERE**/
<style>
.diyw .diyfeCA .diyfeCA .diyfeCA .diyfeCA .diyfeCA2 .mainNav1 a, .diyw .diyfeCA .diyfeCA .diyfeCA .diyfeCA2 .mainNav1 a, .diyw .diyfeCA .diyfeCA .diyfeCA2 .mainNav1 a, .diyw .diyfeCA .diyfeCA2 .mainNav1 a, .diyw .diyfeCA2 .mainNav1 a {
color: #CC0066!important;
}
</style>
/**CODE ENDS HERE**/

Save the changes and done.

Hexadecimal Color Choices:
http://www.w3schools.com/tags/ref_colorpicker.asp

Read More