Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Different layout / themes on each page
#1
Hello there,

I searched it but seems like I couldn't find anything.

The point I wonder is if it's possible to have each page with its own css?

I mean, think that I've got 5 pages (home - about us - services - gallery - contact) and they have got different parts, like a sidebar on right, a slider part just under header part etc..Some pages have these parts and some dont.. So, when I built my websites with html I can build up different Css for each page even and it prevents the confusion / disorder.

Is that possible with GetSimple? If yes, how can I achieve this?

I tried creating 5 themes for my 5 pages but in admin area you can activate just 1 theme. And when you try to edit the pages you can just assign the "default" template.
Reply
#2
(2012-12-12, 20:40:40)demir Wrote: Hello there,

I searched it but seems like I couldn't find anything.

The point I wonder is if it's possible to have each page with its own css?

I mean, think that I've got 5 pages (home - about us - services - gallery - contact) and they have got different parts, like a sidebar on right, a slider part just under header part etc..Some pages have these parts and some dont.. So, when I built my websites with html I can build up different Css for each page even and it prevents the confusion / disorder.

Is that possible with GetSimple? If yes, how can I achieve this?

I tried creating 5 themes for my 5 pages but in admin area you can activate just 1 theme. And when you try to edit the pages you can just assign the "default" template.

The method in GS is that within a theme you have a different 'template' for a different page layout - the template being the php file which returns the html for your page, not the css. All themes have a default 'template.php' and you would add 'nosidebar.php', 'twocolumn.php', 'pagewithslider.php' as you like and then assign the template to a page in Pages - Edit Page - PAGE OPTIONS.

The css file is linked to the template in the <head> of the template just as per normal html so you can have different css files for different pages or just one for the whole site; or one for screen, one for handheld and one for print. My advice would be one css for the whole site and include the right page elements in each template.
Reply
#3
Hello Timbow, thank you for your reply.

But when I get inside of Pages - Edit Page - PAGE OPTIONS and try to change the Page Template it shows only Default Template options. I mean, I cannot choose any other template that I created before.
Reply
#4
(2012-12-13, 00:23:21)demir Wrote: But when I get inside of Pages - Edit Page - PAGE OPTIONS and try to change the Page Template it shows only Default Template options. I mean, I cannot choose any other template that I created before.

any filename.php in the folder theme/themename should show up as a template in PAGE OPTIONS . Check the file is there, check it isn't capitalised (aboutus.PHP won't work!), and refresh the admin page in your browser.

If you go to 'Theme' then 'Edit Theme' the right hand drop-down should show you the list of files in the active theme folder so you can edit them. Is your template file there?
Reply
#5
In Page Options it doesn't show theme names. As I said it only shows Default Template when I click PAGE OPTIONS and try to change the Page Template. I can only see themes in admin area under Theme and Edit Theme parts.

What do you mean by filename.php ?

For example in my default Innovation Theme there are these files/folders:
assets - folder
images - folder

footer.inc.php
functions.php
header.inc.php
sidebar.inc.php
style.css
template.php

BTW As a newbie on GetSimple I have tried to copy a theme to change its parts with my current html codes. Like Header parts to header.inc.php etc.. But I could not get any result. Is it a good way to edit a theme? Because I dont know php and I cant write a GetSimple theme from scratch?
Reply
#6
Let's start from the beginning. If you are using the Innovation theme and you want to make pages without the sidebar, this is how:

Make a copy of the file theme/innovation/template.php , call it nosidebar.php and save it alongside template.php in the same folder.
Open nosidebar.php in your text editor and delete lines 36 and 37 which read
<!-- include the sidebar template -->
<?php include('sidebar.inc.php'); ?>
Save your changes.
Now when you are editing or creating pages you will have in PAGE OPTIONS under Page Template a choice of Default Template or nosidebar.php which will give you a page with no sidebar.

(2012-12-13, 01:20:41)demir Wrote: BTW As a newbie on GetSimple I have tried to copy a theme to change its parts with my current html codes. Like Header parts to header.inc.php etc.. But I could not get any result. Is it a good way to edit a theme? Because I dont know php and I cant write a GetSimple theme from scratch?

If you know basic html and css you will find you can without any difficulty make GS themes. You will quickly become familiar with the few snippets of php you will need to copy and paste. Very enjoyable it is too.

The Innovation theme is a little bit unecessarily complicated. I would start with the ugly old Cardinal theme which is very simple, having all the html in a single template.php file instead of having it split up into different .inc.php files as you saw in the Innovation folder.

Good luck!
Reply
#7
What I do instead of attaching extra style sheets is create the template php file since most of them re use the same containers I just assign classes to the containers for each php template then just define it all out in one css file. I love this CMS since I finally dug in and worked out how templating functions. I dont usually change a lot between templates but having page type specific side bar info has proved highly valuable or being able to define the CSS for some of those Rogue plugins that like to take it upon its self to alter CSS styling.
Reply
#8
(2012-12-13, 03:38:18)bhwebco Wrote: What I do instead of attaching extra style sheets is create the template php file since most of them re use the same containers I just assign classes to the containers for each php template then just define it all out in one css file. I love this CMS since I finally dug in and worked out how templating functions. I dont usually change a lot between templates but having page type specific side bar info has proved highly valuable or being able to define the CSS for some of those Rogue plugins that like to take it upon its self to alter CSS styling.

You are right I think to have only one css. the whole point of a css is that you can change the style for the whole site with one edit, once in one place.
Reply
#9
Thanks for the replies guys.

I hadn't tried the Cardinal Theme until you suggessted it to me and now see that it's as easy as you said Timbow. I have started to work on the Cardinal Theme, which is easier, not complicated as Innovation and I am now hoping to learn GetSimple by playing with it / editing it.

And about using one css: You're both right, but it has been a bad habit of mine because of these "differences" and willing of not keeping this one css huge (as mb).
Reply
#10
I used the Cardinal theme for editing before. I think the Acidmind theme is easier for editing. Especially css file has better structure.
http://get-simple.info/extend/theme/acidmind/454/
Look at this:

Cardinal css:

Code:
#content code {border:1px dotted #ececec;padding:2px;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;}
#content pre code {line-height:17px;padding:15px;border:1px dotted #ececec;font-family: Consolas, Monaco, "Courier New", Courier, monospace;font-size: 12px;background:#f9f9f9;color:#000;margin-bottom:22px;display:block;}

#content .page-text img {margin:0 0 20px 0;border:1px solid #1a1a1a;}

#sidebar {width:300px;float:right;border:1px solid #ccc;background:#f6f6f6;margin-bottom:50px;}

.section {padding:30px 20px 20px 20px;text-align:left;}
.section p, .section ul, .section ol {line-height:20px;margin:0 0 20px 0;}
.section ul, .section ol {margin-left:20px;}
.section ul ul, .section ol ul, .section ul ol, .section ol ol {
    margin:0 0 0 20px;
}

Acidmind css:

Code:
#content .page-text blockquote, .section blockquote {
line-height:19px;
font-size:14px;
color:#666;
font-style:italic;
border-left:2px solid #666;
margin:0 0 22px 20px;
padding:0 0 0 15px;
}

#content code, .section code, #content pre code, .section pre code {
border:1px dotted #666;
font-family:Consolas, Monaco, "Courier New", Courier, monospace;
font-size:12px;
}

#content code, .section code {
padding:2px;
}

#content pre code, .section pre code {
line-height:17px;
margin-bottom:22px;
display:block;
padding:10px;
}

Also, Yourtheme might be a good starting point:

http://get-simple.info/extend/theme/yourtheme/509/
Reply
#11
I am going to take your advice and try another 'Boiler Plate' theme. I always learn something working with someone else's code.

The Cardinal theme is famously missing an important declaration in the <head> of the template. It's also a bit out of date now being all fixed width and sizes in pixels, but simple and easy to understand.

Maybe we should remind the dev team to put the charset thing in when they upload v 3.2.0. Or maybe we should suggest a new simple default theme as an easy boilerplate.
Reply
#12
(2012-12-14, 21:52:00)Timbow Wrote: I am going to take your advice and try another 'Boiler Plate' theme. I always learn something working with someone else's code.

The Cardinal theme is famously missing an important declaration in the <head> of the template. It's also a bit out of date now being all fixed width and sizes in pixels, but simple and easy to understand.

Maybe we should remind the dev team to put the charset thing in when they upload v 3.2.0. Or maybe we should suggest a new simple default theme as an easy boilerplate.

With things leaning more and more towards HTML5 the charset isnt really even paid much attention to, its really stripped down and optimized so eventually most templates wont even have that declaration present.

All that will be declared is <!DOCTYPE html> and that will be about the end of the header. Even meta tags are slowly being phased into something different than they were such as using them to determine mobile compatability etc.

Im planning out an HTML5 boilerplate template dividing things in to php includes but keeping overall things very slim and basic I will probably have it finished by the end of this week, was just going to keep it for my own purposes but will go ahead and upload so that I can say I made a contribution lol.
Reply




Users browsing this thread: 2 Guest(s)