Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Spectral
#1
Uploaded to Extend:
http://get-simple.info/extend/theme/spectral/1059/

Working Demo and info site:
http://www.gs.cyberpress.biz/spectral/

This is a straight conversion of the html5up free template Spectral to a fully working GetSimple Theme.

The Landing Page
To use the optional splash homepage go to your index page under the Pages tab and select the template landing.php. To set it up properly you will need to take a look at the file itself either in the GetSimple Backend under the Theme tab or use ftp and your favourite text editor.

In the Banner section you will see the html for the red button and the scroll-down arrow. edit it as required.

The subsequent sections of the page are all included as individual files so you can easily exclude the parts you don't want here by commenting out the php include tags.

Landing Page Content
The main Content (the green area) is edited through the back end. Content in other sections can be edited in a variety of ways. Simplest is to simply edit the html in the inc.php files themselves. To make them editable through the back end you can use Components, set up a page within a page, or integrate a plugin. The second section for instance could be used to show latest news posts through the News Manager (updated) plugin with it's NM Addons add-on.

Tagline Sub-Headings
Each page has a Page Title and also a sub-heading. The sub-heading uses the tagline component by default. To give different pages different taglines make components named 'tagline-slug'. See the wiki if you don't know what a slug is. The component can be blank if you don't want to use this feature.

The Banner Image
Change the banner image by changing the file named banner.jpg in the theme's images folder. If you need different banners for different pages.... that can be done but ask on the forum.

Good Luck!
Reply
#2
Uploaded v1.1 to fix some issues and make some improvements:
  • Default template layout goes mobile properly now
  • Ready for Custom Title plugin - just install the plugin, no need to edit the template
  • css classes for landing page now conditional by landing template not index slug
  • Favicon working - std GS favicon in theme/spectral/images
  • jquery call moved to head section as required by I18N Gallery plugin
All tested and displayed on the demo site http://www.gs.cyberpress.biz/spectral/
Reply
#3
Great theme!
Reply
#4
https://html5up.net/forty

Can you make this type of menu into the Getsimple theme?
Reply
#5
(2016-09-13, 21:59:47)kazu2015 Wrote: https://html5up.net/forty

Can you make this type of menu into the Getsimple theme?

Those javascript menus are often very easy to include. 
Reply
#6
(2016-09-13, 22:51:07)Timbow Wrote:
(2016-09-13, 21:59:47)kazu2015 Wrote: https://html5up.net/forty

Can you make this type of menu into the Getsimple theme?

Those javascript menus are often very easy to include. 

Great I will check your code
Reply
#7
(2016-09-06, 00:46:18)Timbow Wrote: If you need different banners for different pages.... that can be done but ask on the forum.

Fantastic theme. News Manager was easy to implement right where you said. How can I get different banners for different pages?
Reply
#8
The banner image is a background image defined in the main css. Be aware the landing page background has its own css and in both cases they have transparent gradient overlays making the image darkish which you may or may not want to keep. The templates have <body id="page-slug" > (eg if your page has the slug "contact" or "about-us" then the body has that html id) so we can use that to style individual pages.

So open the main css, find  line 3630, this declaration:
Code:
    #main > header {
        padding: 12em 0 10em 0 ;
        background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
        background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
        background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
        background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner.jpg");
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
    }

and below it or at the end of the file or even in the head section of the template paste what you want different for your specific page, something like this:
Code:
    #page-slug #main > header {
        background-image:  url("../../images/something.jpg");
    }

I am away and can't test it but I think that will work. You get the idea anyway I am sure.
Reply
#9
Can you make the right side bar to the left?
Reply
#10
I want you to explain of this structure of the theme.
Reply
#11
http://npo2020.php.xdomain.jp/b/

I wrote this somewhere but I didn't find so I'm going to rewrite.

Almost done.
Reply
#12
I saw kazu2015's post (in another thread) requesting a template.php with a left sidebar.

Timbow, Would exchanging the #sidebar with the content work properly? Or would that cause problems for the mobile layout?
Reply
#13
(2016-11-04, 11:25:45)kazu2015 Wrote: I want you to explain of this structure of the theme.

I don't think you understand. I didn't design the theme, I didn't write the markup or css. I just converted the free website template to a GS theme. If you want to adapt it further you are free to do so but you will have to examine for yourself how it works. I can't just answer your questions because it is not my work.
Reply
#14
(2016-11-04, 22:56:29)Raeven Wrote: I saw kazu2015's  post (in another thread) requesting a template.php with a left sidebar.

Timbow, Would exchanging the #sidebar with the content  work properly? Or would that cause problems for the mobile layout?

I think you can just swap them round in template.php, put the sidebar div before the content. You are right that the sidebar will then display above the main content when it is stacked for mobile. With bootstrap you would fix that with a 'push' class but I would have to read the manual for this other grid to confirm and to find the equivalent. 
Reply
#15
Sorry for all the things. I was confused.
Reply
#16
Hi!

Can the theme handle language versions with I18N plugin?

Thank you
Reply
#17
(2016-12-21, 01:48:17)bgpress Wrote: Can the theme handle language versions with I18N plugin?
I don't see why not. But I have never made a multi-language site. try it. Let us know.
Reply
#18
Multi language works great! I need a little help with css.
I need to put language selector on top of pages. But when i include a custom block in the head_nav.inc.php the positioning does not work.

<div>
<p><h6><a href="<?php echo htmlspecialchars(return_i18n_setlang_url('en')); ?>">ENG</a> | <a href="<?php echo htmlspecialchars(return_i18n_setlang_url('de')); ?>">GER</a></h6></p>
</div>

Any help appriciated. I will be glad if this shows up in the middle top of every page.
Reply
#19
(2016-12-21, 18:45:27)bgpress Wrote: Multi language works great! I need a little help with css.
I need to put language selector on top of pages. But when i include a custom block in the head_nav.inc.php the positioning does not work.

<div>
       <p><h6><a href="<?php echo htmlspecialchars(return_i18n_setlang_url('en')); ?>">ENG</a> | <a href="<?php echo htmlspecialchars(return_i18n_setlang_url('de')); ?>">GER</a></h6></p>
</div>

Any help appriciated. I will be glad if this shows up in the middle top of every page.

I can't look today. But I would like to include css for I18N in the theme.
Reply
#20
Hi! No problem. Solved, I simply added a fixed div with the necessary tags.

(2016-12-21, 21:59:04)Timbow Wrote:
(2016-12-21, 18:45:27)bgpress Wrote: Multi language works great! I need a little help with css.
I need to put language selector on top of pages. But when i include a custom block in the head_nav.inc.php the positioning does not work.

<div>
       <p><h6><a href="<?php echo htmlspecialchars(return_i18n_setlang_url('en')); ?>">ENG</a> | <a href="<?php echo htmlspecialchars(return_i18n_setlang_url('de')); ?>">GER</a></h6></p>
</div>

Any help appriciated. I will be glad if this shows up in the middle top of every page.

I can't look today. But I would like to include css for I18N in the theme.
Reply
#21
is it something I can add to the theme? to make it multi-language ready?
Reply
#22
I installed the i18n-language-menu-ex plugin. This plugin adds a "langer" tags to the main.css in a wrong way.
I modified the main.css, so it can display the buttons (or links) to select the appropriate language.
I must work on this a little bit, to keep the responsive features.

(2016-12-22, 05:36:10)Timbow Wrote: is it something I can add to the theme? to make it multi-language ready?
Reply
#23
Hello

Could the theme developer message me privately please?

Kind regards
Reply
#24
(2017-08-25, 22:13:59)intelex Wrote: Hello

Could the theme developer message me privately please?

Kind regards

Only if there is good reason for it. It's much preferable for the benefit of the GetSimple project to discuss issues in public on this forum but send me a PM if you wish.  Also in this case I am not really the 'developer' - I just took a free html template and made it into a GS Theme
Reply
#25
I am trying to put a widget into the sidebar and tried in main column, but the tick buttons on the widget dont display in this theme. Is there any conflicting code that makes it not work in this theme, it works in other themes!!!

http://www.uphillmedia.org/
Reply




Users browsing this thread: 1 Guest(s)