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




Users browsing this thread: 1 Guest(s)