This website can use cookies to improve the user experience

This website can use cookies to improve the user experience and to provide certain services and functions to users. Cookies contain small amounts of information (such as login information and user preferences) and will be stored on your device.

Enable All Cookies Privacy Policy

How to use a custom template


avatar
dizzy 4
From: -
How to use a custom template

Is there any way to use your own template? Lets say it's a template you bought from a template shop and now you want to replace your default template. This task seems imposable to me.

Changing it in the admin is a waste of time. How would I even know where all the files are and which files to change. With a new template there will be a new stylesheet. Div tags will be in different places, styles will have different names etc etc.

This is the problem with all these scripts like contentteller. The design and layout is ALWAYS imposable to change unless you are an expert.

If I was an expert, I would not be using someone else's script. Face with Rolling Eyes

Notice

This topic is archived. New comments cannot be posted and votes cannot be cast.

Responses to this topic


1 Re: How to use a custom template
avatar
0
From: -
My wordpress makes use of custom post templates. I'm now trying to create a custom comments template as well.
I noticed that the comments template is called via this function <?php comments_template( '', true ); ?>
I checked in my functions.php and comments.php but don't see the function being declared anywhere. Can someone please advise on how to go about introducing a custom comments template?
1 Re: How to use a custom template
avatar
Editor
0
From: -
Actually, it isn’t difficult once you understand how the template system works. I know it is a bit confusing first.

Basically, there are only three important elements needed to create a new style:
1) The most important element: the CSS stylesheet
2) The header template: site_header.
3) The footer template: site_footer

You can edit the CSS stylesheet directly under Templates => Manage Styles => Edit => “here to edit the cascade style sheet (CSS) directly”. The site_header/site_footer templates can be changed under Templates => Manage Templates => Edit => Site => Edit => site_header or site_footer => Edit.

The first step to create a new theme is changing the CSS. You can also port a different stylesheet to Contentteller. The trick is to rename the elements to the Contentteller element names.

For example, here a code snippet from another CSS template:

h1 {

margin: 0 0 .5em 0;
padding: 0;
font-size: 1.8em;
line-height: 1.1em;
letter-spacing: -1px;
color: #57191E;
}

p {
font-size: 1em;
line-height: 1.7em;
letter-spacing: 0;
padding: 0;
margin: 0 0 1em 0;
}


This CSS will be used in HTML like this:

<h1>Title</h1>

<p>This is just an example text</p>


A Contentteller port of the same CSS would look like:

 .mainpage h1, .altmainpage h1 {

margin: 0 0 .5em 0;
padding: 0;
font-size: 1.8em;
line-height: 1.1em;
letter-spacing: -1px;
color: #57191E;
}

.mainpage .content, .altmainpage .content {
font-size: 1em;
line-height: 1.7em;
letter-spacing: 0;
padding: 0;
margin: 0 0 1em 0;
}


As you see one difference is that Contentteller is using two separate containers (.mainpage, .altmainpage) for the middle content section. Another one is <div class=”content”>Text</div> instead of <p>Text</p>.

The final step to porting a layout to Contentteller are changing both site_header and site_footer templates. Both templates contain the main part of the layout.

I think it is the best you download a few of the themes that are available in the  themes and styles forum and compare them against their original CSS template. The original CSS templates are usual linked in each post.

Notice

This topic is archived. New comments cannot be posted and votes cannot be cast.