CODEWITHSUNDEEP
blogspot
Alex K
Alex K

Reputation: 11

Can't make changes in blogspot template

I am trying to make changes in my blogspot template which was downloaded from Internet.

When for example I try to change color of title, I can't do it or some other changes.

How do I do the following:

  1. I change color for example
  2. Apply to blog.

But it doesn't works after, there is no any changes, please help me with this situation.

Upvotes: 0

Views: 7079

Answers (1)

Loop
Loop

Reputation: 355

For your first problem, when you click "Edit HTML" and no code shows up: it's a glitch in the Blogger.com interface. It happens to me every once in while too, ever since they changed ("upgraded") the way the editor functions. Simply refresh the page or click on the "Preview template" button and once that loads, then click back to the "Edit template" button.

Once the coding appears, search for (to search for it, hold Ctrl on your keyboard and press F, then copy and paste this code in the search box):

   $(post.title.text.color)

If you don't find that code, it's because it's not coded within your custom template. This code allows you to easly change the post title color from the "Blogger Template Designer" page. Without the above code, the option to change your post title color from the user-friendly page will not work.

To enable this option: from your "Edit template" page search and find: 

    </b:skin>

ABOVE the "/b:skin" paste this code:

h3.post-title, h4 {
font: $(post.title.font);
color: $(post.title.text.color);
}

h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}

This will enable you to change the color of the post title and the font of the post title, from the Custom Designer page of Blogger.

If you want the other options in the Custom Designer page to work, you have to add other similar codes into other areas of your template. For example, to change the default text color and font of the whole blog from the Designer page, the code below must be in your template:

    body {
    font: $(body.font);
    color: $(body.text.color);
    }

There are a whole list of other varibles that must be added in order to get ALL the functions available from the Designer page on Blogger. To get fimilar with these codes, I suggest you create a new blog with a stadard Blogger template and open the "Edit HTML" template page. From there, on the top of the codes, one of the first things you should see is:

    /* Variable definitions
    ====================

These are the variables that enable the Custom Designer page to work.

The code for each varibile will be listed in that section and will always look similar, starting with the "$" symbol followed by descriptive words like:

    $(widget.border.color)

It doesn't take much to start to see the pattern. And the "selector=" will always tell you what needs to be placed ABOVE the "/b:skin". For exmaple, for the widget border color, mentioned above, you will see this similar code: 

     <Group description="Date Header" selector=".main-inner .widget h2.date-header, .main-inner .widget h2.date-header span">
 <Variable name="date.font" description="Font" type="font"
     default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
 <Variable name="date.text.color" description="Text Color" type="color" default="#666666" value="#cccccc"/>
 <Variable name="date.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="#cccccc"/>

And where you see the code:

    selector=".main-inner .widget h2.date-header, .main-inner .widget h2.date-header span">

...is how you know to form your code ABOVE the "/b:skin". Hence:

    .main-inner .widget h2.date-header, .main-inner .widget h2.date-header span {
$(widget.border.color)
}

Of course, you can put the varible anywhere you want and when you change the color of that selector, from the Custom Designer page, it will change all the corresponding areas. You can even place the widget border color in the post title if you wanted and the post title will always match the widget borer color.

It's nice to be able to use the Custom Designer page but once you get used to the coding, it's not needed. You can simply change the code directly within the "Edit HTML" template page by putting the color code you want in the section you want it in. For example, search and find (within the /b:skin):

     .post-title {

And remove the variable code and replace it with the color you want:

    .post-title {
    color: blue;
    }

Or use: http://www.colorpicker.com/ to find the HEX code for the exact color and place it as your post title: 

    .post-title {
    color: #E01B5D;
    }

Hope that helps.

Upvotes: 5

Related Questions