Using complex themes / templates

Post Reply
oldteacher
Posts: 8
Joined: Fri Oct 30, 2015 4:09 pm

Using complex themes / templates

Post by oldteacher »

Hi.

Was reading how to create a theme on the documentation page. Pretty straight forward and made a simple one. But Wanting to try one that is bit more complex and hoping for some input. Matter of fact if I can get all this figured out be more than happy to share some them with the community.

Here is example header code for one of my HTML5 pages I wish to convert:

Code: Select all

<!DOCTYPE html>
<html dir="ltr">
<head>
    
	<script>
    var themeHasJQuery = !!window.jQuery;
</script>
<script type="text/javascript" src="./assets/js/jquery.js"></script>
<script>
    window._$ = jQuery.noConflict(themeHasJQuery);
</script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/bootstrap.css" media="screen" />
<script type="text/javascript" src="./assets/js/bootstrap.min.js"></script>
<link class="" href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic&subset=latin' rel='stylesheet' type='text/css'>
<script src="./assets/js/CloudZoom.js"></script>
	
    <title>Home Page</title>
	<link rel="stylesheet" href="./assets/css/style.css">
	<script src="./assets/js/script.js"></script>
    <meta charset="utf-8">

    <!--[if lte IE 9]>
    <link rel="stylesheet" href="./assets/css/style.ie.css">
    <script src="./assets/js/script.ie.js"></script>
    <![endif]-->

 <meta name="keywords" content="HTML, CSS, JavaScript">

 <style>a {
  transition: color 250ms linear;
}
</style>
</head>
Could anyone give me little insight if I can even convert a page like this into a theme?

Much appreciated and thanks in advance for tips/advise.
hajo
Posts: 16
Joined: Wed Jan 06, 2016 12:37 pm

Re: Using complex themes / templates

Post by hajo »

oldteacher wrote:how to create a theme .. made a simple one.
Here is example header code for one of my HTML5 pages I wish to convert:

Code: Select all

<html dir="ltr">
<head> ..
<link rel="stylesheet" href="./assets/css/bootstrap.css" media="screen" />
<link class="" href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic&subset=latin' rel='stylesheet' type='text/css'>
.. </head>
Could anyone give me little insight if I can even convert a page like this into a theme?
That's just some boilerplate - what are you trying to do on your page ?
To see how to use google-fonts, look into the stilla-theme.
oldteacher
Posts: 8
Joined: Fri Oct 30, 2015 4:09 pm

Re: Using complex themes / templates

Post by oldteacher »

hajo wrote:
oldteacher wrote:how to create a theme .. made a simple one.
Here is example header code for one of my HTML5 pages I wish to convert:

Code: Select all

<html dir="ltr">
<head> ..
<link rel="stylesheet" href="./assets/css/bootstrap.css" media="screen" />
<link class="" href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic&subset=latin' rel='stylesheet' type='text/css'>
.. </head>
Could anyone give me little insight if I can even convert a page like this into a theme?
That's just some boilerplate - what are you trying to do on your page ?
To see how to use google-fonts, look into the stilla-theme.
Sorry for late reply, not getting any kind of notifications from board...

Yes, it is just a boilerplate.

My issue is figuring out how to use paths correctly (to scripts and assets). Google fonts is not an issue.

Got some more reading to do but was hoping for a more in-depth tutorial on creating themes.

Thanks for your input!
hajo
Posts: 16
Joined: Wed Jan 06, 2016 12:37 pm

Re: Using complex themes / templates

Post by hajo »

oldteacher wrote:was hoping for a more in-depth tutorial on creating themes.
That's a bit much to expect from this forum ;)

Google something like "how to create css template", and you get lots of links, e.g.
* http://www.selectdigitals.com/Documents ... s/template - Create Your Own HTML and CSS Templates
* http://www.icms.info/website-howto/css-tutorial - CSS Tutorial - How to create template
* http://www.w3schools.com/css/ - CSS Tutorial
...

Also, lots of free templates to be found.

But understanding a given template/style, and making them work
with a specific CMS (e.g. this WonderCMS) is still another matter...

I suggest to pick a theme that mostly does what you want,
then make little changes (colors, fonts, size/positions).
oldteacher
Posts: 8
Joined: Fri Oct 30, 2015 4:09 pm

Re: Using complex themes / templates

Post by oldteacher »

Very good advice hajo.

Got someone with much more knowledge than myself to help with this classroom project. Converting bootstrap (and HTML5) is throwing my head in loops but that does not take much:) Fairly competent with css but for some reason WonderCMS templating is not something grasping at the moment, maybe I will soon have one of those "got it" moments.

Thanks again for advice.
hajo wrote:
oldteacher wrote:was hoping for a more in-depth tutorial on creating themes.
That's a bit much to expect from this forum ;)

Google something like "how to create css template", and you get lots of links, e.g.
* http://www.selectdigitals.com/Documents ... s/template - Create Your Own HTML and CSS Templates
* http://www.icms.info/website-howto/css-tutorial - CSS Tutorial - How to create template
* http://www.w3schools.com/css/ - CSS Tutorial
...

Also, lots of free templates to be found.

But understanding a given template/style, and making them work
with a specific CMS (e.g. this WonderCMS) is still another matter...

I suggest to pick a theme that mostly does what you want,
then make little changes (colors, fonts, size/positions).
Post Reply