how to easily customize your blog's design—background, widths, layout, and more.
 |
| A little bunny holding dandlion seeds is designing her blog❣ |
Hi, you Radiant Guys!✨
I am really happy to see you again. In the previous post, we looked at the main configuration of the theme "Dynamic Views." There, we learned some terms such as header, header bar, and page, and also looked at the sidebar and gadgets in the page area. I also mentioned that knowing the meaning of these terms has the advantage of being easier to access when you want to change your Blog design.
Today, I'd like to share my small story about changing the design of how I want to. Yes! I'd like to talk about the background, widths, layout, and advanced areas through customization (i.e., the Theme Designer) within the theme "Dynamic Views".
As you know, I have installed the theme "Dynamic Views" from Blogger (i.e., Bloggerspot) and preset the sidebar view mode as the default setting among its various view modes. I hope you enjoy the following with me.
• Background
• Adjust widths
• Layout
• Advanced
| Open ''Theme Designer''
The Theme "Dynamic Views" has an area called the “Theme Designer.” It plays a vital role in helping with design changes related to background, width adjustment, layout, and advanced settings. Let's open it:
• Select the "Theme" tab from the left-hand menu of the dashboard.
 |
| [Image: The "theme" tab on the dashboard] |
• Right-click on the letters "CUSTOMISE."
 |
[Image: The "CUSTOMISE" tab on the theme screen] |
• There are 4 sub tabs after the "CUSTOMISE" tab.
 |
[Image: 4 sub tabs in the theme designer] |
• This place where the four tabs are gathered is called "Theme Designer."
• The functions of the "Adjust Widths" and "Layout" tabs are not currently applicable in this theme "Dynamic Views".
￨ Background
There are two ways to choose a background image for your blog. You can insert an image provided by Google Blogger or upload the desired image from your computer. A more detailed explanation follows below:
⎖ Method 1. Insert an image from Google Blogger
• Select "Background."
 |
| [Image: The Background tab in the theme designer] |
• Click anywhere on the Background image box.
 |
[Image: The Background image box in the theme designer] |
• Select a category on the left side of the "Select Background Image" window.
→ ①
• Select an image you like on the right.
→ ②
• Click the "Done".
→ ③
 |
[Image: The "Select background image" window] |
⎖ Method 2. Upload the desired image from your computer
• In the window for "Select Background Image", click "Upload Image."
 |
[Image: The "Upload Image" in the "Select Background Image"] |
• Click the "Select Image" to upload an image from your computer.
 |
[Image: "SELECT IMAGE" in"Select background image"] |
🎯 TIP
An image can be uploaded as a JPG, PNG, or GIF file within 3MB (i.e., megabytes). It is recommended that the image for the full background is 1800×1600 px (i.e., pixels) or higher.
• Click "Done."
 |
[Image: The "DONE" botton in the window for "Select background image"] |
⎖ 3. How to arrange a background image
The "Alignment" section only appears on the screen if you use a background image uploaded from your computer. In other words, if you insert a background image provided by Google Blogger, it will not appear on the screen.
• Select the location of the background image to the top left.
→ ①
• Choose the "Don't tile"
→ ②
I don't prefer the alignment of "Tile" because when I select the "tile", the background image distractedly looks like a bunch of tiles on a wall in the header—I don't like it.
 |
[Image: The alignment options in the Background tab] |
• Inactivate the "Scroll with page."
 |
[Image: The "Scroll with page" option in the Background tab] |
- After changing any customization settings, a.l.w.a.y.s. click the "Save" in the bottom right corner of the screen to be applied to the whole blog.
 |
[Image: The "Save (floppy disc-shaped)" icon] |
The reason I inactivated the "Scroll with page" is as follows: When your number of posts is small, it does not make a problem, but when your number of posts is getting larger, it's getting to a problem. Every time the scroll bar is used, as the background images appear in a tile pattern, the screen goes crazy—I don't like this.
⎖ 4. How to Set the Main Colour theme
When you select a color from the color selection window, the selected color is set as the color of the sidebar, the nickname, and the labels, and the header bar is automatically filled with a darker color that pairs well with that color.
• Click the "Main colour theme" box.
 |
[Image: The "Main colour theme" box in the Background tab] |
• Select a color in the "colour selection" window or If you don't find the colour you want, click the "+" sign at the bottom.
 |
| [Image: Selecting color with a palette] |
 |
[Image: Finding a colour via the + sign in the Background tab] |
There are two ways to choose color in the new color selection window: one is to move the color slide bar to select a serial color and to mouse-click the correct color. The other is to determine by entering an exact hexadecimal color value.
• Move the color slide bar to choose the color you want.
• Mouse-click the correct color on the upper box.
• Then click "Save."
 |
| [Image: The "Select colour" section in the color panel] |
⎖ 5. Saving Theme or Resetting
• When you are satisfied with the Background settings you've made so far, click the "Save" button at the bottom right corner of the screen.
 |
[Image: The "Save" button in the theme designer] |
• When you'd like to reset the background and color to the theme default, click the "Reset background and color to theme default" in the Background tab.
 |
[Image: The "Reset background and colour to theme default" tab in the main colour theme window] |
• Click the "Save" at the bottom right to complete all the setting changes.
￨ Adjust Widths
The width for the body content specifies a size that is helpful for readability and structural stability. However, in the theme "Dynamic Views", the "Adjust Widths" feature is not working correctly now. I look forward to an update from Google on this issue very soon.
￨ Layout
As with the "Adjust Widths" feature, the "Layout" feature is not currently functioning in the theme "Dynamic Views."
￨ Advanced
If you click on the Advanced tab, you will see the following 9 items:
• Header
• Header Bar
• Links
• Blog Title
• Blog Description
• Post Title
• Date Ribbon
• Add CSS
⎖ 1. Page
You can set the Font, Text Colour, and Background Colour in the "Page" section. You can change the color of the sidebar from the Background Colour box. You can also choose from 7 default fonts to 96 web fonts in the Font box.
 |
[Image: Setting Font, Text Colour, and Background Colour in the Page section of the Advanced tab] |
🎯 TIP
⎖ 2. Header
You can change the background color of the header in the submenu "header" of the Advanced tab by changing transparency, choosing or adding a color.
⎖ 3. Header Bar
 |
[Image: The Header Bar section in the Advanced tab] |
If you don't like the color you selected and want to go back to the previous settings, and if your settings haven't been saved, click the "Clear unsaved changes" at the bottom right or the "Clear advanced changes to Header Bar" in the bottom of the Header Bar submenu.
 |
[Image: The "Clear unsaved changes" icon] |
 |
| [Image: The tab for "Clear advanced changes to Header Bar" in the Advanced tab] |
• Click the "Save" icon at the bottom right of the screen to apply to the whole blog after choosing the color you want.
 |
[Image: The "SAVE" icon in the theme designer window] |
⎖ 4. Links
In the "Links" tab, you can change the link text, link color, color when you hover the mouse over the link, and color of visited links. There is also a clear button if you don't like the changes.
⎖ 5. Blog Title
In the "Blog Title" tab, you can change the font and color of the blog title. There is also a clear button if you don't like the changes in the "Links".
⎖ 6. Blog Description
In the "Blog Description", you can change the font and color of the blog description. There is also a clear button if you don't like the changes like in the "Blog Title".
⎖ 7. Post Title
In the "Post Title", you can change the font and color of the post title. There is also a clear button if you don't like the changes.
⎖ 8. Date Ribbon
You can change the color of the date ribbon that shows the posting date on your page and the color that appears when you hover your mouse over it. There is also a clear button if you don't like the changes.
⎖ 9. Add CSS
The free theme "Dynamic Views" from Google Blogger has many incredible advantages, but it also has its limitations. Therefore, I am confident that if you have the ability to use CSS code and utilize it, you will be able to develop a much better blog. For this reason, I am also recently taking a basic HTML and CSS course.
Entering code in the CSS addition section below allows for various detailed design changes (e.g., line height, font size, etc.).
 |
[Image: The "Add CSS" section in the Advanced tab] |
Don't forget to click the "Save" button at the bottom right of the screen to save all the design changes.
• To exit the customization window, click the arrow pointing right at the top left.
 |
| [Image: The Arrow to exit from the theme designer] |
Congratulations!
I finally understood how to make design changes with the "Theme Designer" of the theme "Dynamic Views". I confirmed that the "Theme Designer" is divided mainly into four areas, including Background Colour, Adjust Widths, Layout, and Advanced, and that each area has several sub-items responsible for various design properties.
I wonder if you all understood today’s content well. Even if there are some difficult parts, I hope that you will become a high-level blog designer if you follow the instructions step by step.
In the next post, I'd like to talk to you about editing an image of the header and finding your CSS in Dynamic Views. I hope This post is helpful to you, Radiant Guys. Take care and see you soon!
Posted by Ayul
