Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Spectral
#26
Yes, the theme has its own css for radio buttons which is conflicting with your css from actionnetwork.org. The magic of F12 reveals, in main.css, line 1754
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
...
}

It might be sufficient just to comment out those declarations
Reply
#27
(2017-08-28, 00:54:21)Timbow Wrote: It might be sufficient just to comment out those declarations

Worked like a charm. Thank you very much. I'm just a newb doing a lot of copy and pasting. But am learning! Thanks again!!
Reply
#28
If I may ask another question. Can the I18N gallery replace the header image with a scrolling gallery? If so, what page would I put the code?
Reply
#29
The header image is written as a background to the header div, not an inline image, so you can't just replace it with a slideshow.

If I wanted that result I would make a new page template and include the js scrolling gallery of choice off the net in the header rather than using a GS plugin. If you really need to configure the gallery through the back end there are a couple of ways to set that up - just inserting images as components, for example.
Reply
#30
(2017-08-28, 07:28:58)Timbow Wrote: The header image is written as a background to the header div, not an inline image, so you can't just replace it with a slideshow.

If I wanted that result I would make a new page template and include the js scrolling gallery of choice off the net in the header rather than using a GS plugin. If you really need to configure the gallery through the back end there are a couple of ways to set that up - just inserting images as components, for example.

Thanks for the info, i appreciate it
Reply
#31
Hello Timbow,

At the moment it seems to be the case that few templates have more than one menu level, but I would like to ask: Is it possible to give the theme at least a second menu level?

Cheers!
Reply
#32
(2017-09-12, 18:13:17)flynn Wrote:  Is it possible to give the theme at least a second menu level?

It wouldn't be hard to do. You would use the I18N Navigation plugin. Then you need to decide how you want to display the second level sub-pages. Alter the css to indent them in the menu, or list them on the parent page with button links or any number of alternatives. I can't do it for you though.
Reply
#33
(2017-09-12, 19:41:59)Timbow Wrote: It wouldn't be hard to do. You would use the I18N Navigation plugin. Then you need to decide how you want to display the second level sub-pages. Alter the css to indent them in the menu, or list them on the parent page with button links or any number of alternatives. I can't do it for you though.

That was my great hope Blush . But your explanation is no less helpful, thank you.

Cheers!!
Reply
#34
(2016-10-06, 01:04:48)Timbow Wrote: 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.
Hi, i try this but sadly it didn't work - i would be very happy if i could style individual headerimages for my pages. 
If you have any other suggestions pls. let me know. best l5
Reply
#35
http://www.gs.cyberpress.biz/spectral/gallery/

now has a different background image. Chrome seems to be caching pages and not showing changes, and I am puzzled by the old prefixed declarations but it's working. I just copied and pasted the whole lot with #gallery in front of it and the image url changed in each line.
Reply
#36
(2017-12-30, 09:32:02)Timbow Wrote: http://www.gs.cyberpress.biz/spectral/gallery/

now has a different background image. Chrome seems to be caching pages and not showing changes, and I am puzzled by the old prefixed declarations but it's working. I just copied and pasted the whole lot with #gallery in front of it and the image url changed in each line.

Thank you so much - now it works!!! Best l5

#cta .inner .actions {
-moz-order: 2;
-webkit-order: 2;
-ms-order: 2;
order: 2;
width: 30%;
}
#page1 #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/something.jpg");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/something.jpg");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/something.jpg");
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/something.jpg");
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;}


#page2 #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/test.jpg");
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/test.jpg");
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/test.jpg");
background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/test.jpg");
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;}
}

@media screen and (max-width: 980px) {
Reply
#37
@Timbow
Could Spectral be made to work for a single page site, maybe with Carlos's One Page Code?
Reply
#38
idk. But if you know what blocks of content you want you can just manually insert anchors and content into your index page and write the menu as well.
Reply
#39
I have a problem with the main site, the two.inc.php which seems to be designed for latest posts etc.
I like the alignment of picture: Right, then left, then right again etc.

I now would like to actually hyperlink the images and text to the apropriate Sites.
I tried this by inserting "<a href=/index.php?id=SiteXYZ/"

But when i do this, it destroys the alignment mentioned above.
With four pictures, two are on the right, and two on the left.
If i delete the href part, all is back to normal.

Any ideas? I am a Beginner in this and thought it would be simple.

My code is:
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
/****************************************************
*
* @File: two.inc.php
* @Package: Spectral theme for GetSimple CMS
* @Action: Could be Latest Posts or Permanent Info
*
*****************************************************/
?>
        <section id="two" class="wrapper alt style2">
</section>                  
                   <section class="spotlight">
<div class="image"><a href=/index.php?id=ch4/><img src="<?php get_theme_url(); ?>/images/radl.JPG" alt="" /></div><div class="content">
<h2>4-Test<br />
</h2>
<p>Chi Test4</p>
</div>
</section>
</section>
                    <section class="spotlight">
<div class="image"><a href=/index.php?id=test3/><img src="<?php get_theme_url(); ?>/images/test3.jpg" alt="" /></div><div class="content">
<h2>3-Test3<br />
</h2>
<p>Test3</p>
</div>
</section>

    <section class="spotlight">
  <div class="image"><a href=/index.php?id=2/><img src="<?php get_theme_url(); ?>/images/test2.jpg" alt="" /></div><div class="content">
<h2>2-Test2<br />
</h2>
<p>Test2</p>
</div>
</section>
</section>
<section class="spotlight">
<div class="image"><a href=/index.php?id=1/><img src="<?php get_theme_url(); ?>/images/test1.jpg" alt="" /></div><div class="content">
<h2>1-Test1<br />
</h2>
<p>Test1</p>
</div>
</section>

</section>
Reply
#40
How do I make in page image goes with the responsiveness? The result on mobile is overflowing the screen
Reply
#41
I have written some instructions on the sample site for you, and anyone:
http://www.gs.cyberpress.biz/spectral/gallery/
Reply
#42
Very nice photo btw. (the tower)
Reply
#43
(2019-12-06, 05:38:26)datiswous Wrote: Very nice photo btw. (the tower)

It's Glastonbury Tor. Local.Not my photo.[Image: Tor_Crp_AbyhE6-800x408.jpg]
Reply
#44
Hello Tim

Thanks for porting this html5 template to gs. I was doing a one page site with onepageresponsive theme and had it looking ok but just ok. Hadn't seen your one page theme yet but Spectral works fine as a one pager. It's not that long of a page so people can scroll or hit the PgDn button. Don't need a menu for 3-4 page anchors. 

I swapped out the images of course and the outdoor shots are from around this area. I'm rural too. I'm using my smtp contact and running gs 3.4 but I after seeing the security issues with 3.4, think I'm going to redo the site with 3.3x.

3.4 has some nice admin improvements but development is at a snail's pace. (4-5 years now?)

I've been putting all my site together with wordpress but getting sick of that game. UPGRADE TO OUR PRO VERSION is all it's about now.

Anywho, here she be. https://www.ozarkswebdesign.com/index.php
Reply
#45
I installed and activated this with the latest stable gs 3.3.15 and ended up with the white page of death. Turned on debug mode and saw this
Code:
Parse error: syntax error, unexpected '<', expecting end of file in /fakehome/mydomain/public_html/theme/Spectral/template.php on line 9
Odd because line 9 was a link to the fontawesome stylesheet. Compared the template.php to other themes and  found the issue. 

PHP Code:
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
/****************************************************
*
* @File:     template.php
* @Package:    Spectral theme for GetSimple CMS
* @Action:    default page template
*
*****************************************************/
<link rel="stylesheet" href="https://ozarkswebdesign.com/theme/Spectral/assets/css/font-awesome.css">
# Include the opening tags, head section and nav menu
include('head_nav.inc.php'); 
?>

The first php snippet kind of runs right into the second so I added a closing php tag just below the template info block as I saw it in other themes and an opening php tag to the head_nav include since I had just closed the first and that fixed me up.
PHP Code:
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
/****************************************************
*
* @File:     template.php
* @Package:    Spectral theme for GetSimple CMS
* @Action:    default page template
*
*****************************************************/
?>
<link rel="stylesheet" href="https://ozarkswebdesign.com/theme/Spectral/assets/css/font-awesome.css">
# Include the opening tags, head section and nav menu
<?php include('head_nav.inc.php'); ?>
I also put the include all on one line as is standard.

I'm going to keep using gs 3.4 alpha/beta but I want a backup done in stable release in case 3.4 gives me problems. I get CSRF warnings with it.
Reply




Users browsing this thread: 1 Guest(s)