[BoblebadMember]

Some more search revealed the solution 🙂

/** Add support for custom background */
add_theme_support( 'custom-background' );

https://wpsites.net/web-design/styling-the-background-of-your-theme/

[BoblebadMember]

Anyone who knows this ?

[BoblebadMember]

For others who find this post and are looking for some ways to do this nice toggle thing. Here's a great site 😀

He explains so many ways how you can do it. There's examples and code. Just put it in your template and put in your own text 🙂

http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

The third options fits me best:

Javascript:

$('.top').on('click', function() {
	$parent_box = $(this).closest('.box');
	$parent_box.siblings().find('.bottom').slideUp();
	$parent_box.find('.bottom').slideToggle(1000, 'swing');
});

Html: ( you can put it in a text widget )

<div class="container">
  <div class="box">
    <div class="top">
      click me
    </div>
    <div class="bottom">
      door #1
    </div>
  </div>
  <div class="box">
    <div class="top">
      click me
    </div>
    <div class="bottom">
      door #2
    </div>
  </div>
  <div class="box">
    <div class="top">
      click me
    </div>
    <div class="bottom">
      door #3
    </div>
  </div>
</div>

And the CSS:

.container .box {
  float: left;
  width: 150px;
  margin: 20px;
}

.container .box .top {
  padding: 12px;
  background-color: blue;
  color: white;
  cursor: pointer;
}

.container .box .bottom {
  padding: 12px;
  background-color: red;
  color: white;
  display: none;
}

And of course, change the color or whatever you want to fit your needs.

And, again, for the javascript, here's a way to do that: ( in the functions.php )

/** Remove jQuery and jQuery-ui scripts loading from header */
add_action('wp_enqueue_scripts', 'crunchify_script_remove_header');
function crunchify_script_remove_header() {
      wp_deregister_script( 'jquery' );
      wp_deregister_script( 'jquery-ui' );
}
 
/** Load jQuery and jQuery-ui script just before closing Body tag */
add_action('genesis_after_footer', 'crunchify_script_add_body');
function crunchify_script_add_body() {
      wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', false, null);
      wp_enqueue_script( 'jquery');
      
      wp_register_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', false, null);
      wp_enqueue_script( 'jquery-ui');
}

You can of course call this crunchify_script_add_body what ever you want. Just remember to change both this and the add function. Works like a charm.

Here's the link to the site: http://crunchify.com/genesis-framework-how-to-enqueue-scripts-and-css-into-child-theme/

😀 😀 😀

[BoblebadMember]

I'm also trying to figure out the jQuery. I no nothing about it. I'm interested to see whether when one "guide" is clicked, if there's any other open, it will get closed.

if( jQuery(".toggle .toggle-title").hasClass('active') ){
		jQuery(".toggle .toggle-title.active").closest('.toggle').find('.toggle-inner').show();
	}
	jQuery(".toggle .toggle-title").click(function(){
		if( jQuery(this).hasClass('active') ){
			jQuery(this).removeClass("active").closest('.toggle').find('.toggle-inner').slideUp(200);
		}
		else{	jQuery(this).addClass("active").closest('.toggle').find('.toggle-inner').slideDown(200);
		}
	});

[BoblebadMember]

Thank you for your reply Victor.

I'm not sure why i need all that extra code and features, when i just need a toggle function 😉

This here at Codepen looks fine: https://codepen.io/ArielBeninca/pen/KdVJGO

I though have a problem with the accordions, they don't show up. Im not sure why it works on their site, be course the same CSS does not work on Infinity Pro. But it could also be be course the CSS is not complete. Komodo gives me errors on a couple of things, but i know it does not recognize webkit, so maybe there's more.

But, at the beginning of the CSS i had to add an } that was missing. All toggles was wide open, so i believe that it needs more checking.

[BoblebadMember]

I believe that you could just change "background-color" to "background-image: url("image.jpg");" and of course add the path to the image 🙂

[BoblebadMember]

It's not easy, be course if you wanna "contain" the image, then it will only fit one screen size according to where it is widest or highest.

I just tried be course i thought i could be cool too, but it does not work. You can use the "contain" value on background-size, but when going from your big laptop screen to your smartphone, you're left with a lot of empty space that's filled with the background color of the page. And that does not look good in my opinion.

I just took the CSS from the "Front Page Sections" section in the style-front.css and put in under Media at the bottom:

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7,
.front-page-9 {
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: contain;
	-moz-background-size:    contain;
	background-size: contain;
}

I'm not sure about the webkit's "contain", but it shows the result anyway 🙂

[BoblebadMember]

I have no idea how this got like that. I have never bin walking in my sleeps, and i surly have never operated a computer in my sleep. (Well, when i was younger i attended a lan-party, one time didn't sleep a whole weekend, but i would say, operating my computer - no, not at all, couldn't combine words to a sentence 😉 🙂

But this weird thing happened over night and i have no clue to how. I went back and started to compare files from the orig Infinity Pro zip and the ones i got that just stopped working. Somehow .flexible-widgets found its place in the code below. I can tell you, if that's there, it will _not_ work 😉

.price-page-1 .flexible-widgets .widget {
	float: left;
	margin-bottom: -20px;
}

Then i changed two sizes in here:

#pricing-table {
	margin: 100px auto;
	text-align: center;
	width: 230px;  /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
	font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
	text-shadow: 0 1px rgba(255,255,255,.8);        
	background: #FAF5EB;      
	border: 1px solid #ddd;
	color: #333;
	padding: 20px;
	width: 100%; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
	float: left;
	position: relative;
}

Removed some padding, that actually was needed before, and then it worked.

This will stay as a mystery to me, but i'll stop twisting my head how. I have much more things i need to do with my site 🙂

So this is "roger, over and out" 🙂

[BoblebadMember]

Sorry for not posting the code, but i did not think it was needed be course it was some weird WordPress/Infinity Pro problem that it could not hold on to the template under the page settings.

But now it seams to stay that way, that the widgets don't group.

<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>Gratis<span>0,-</span></h3>
        <a class="signup" href="http://www.website.com/join">Opret</a>         
        <ul>
            <li><b>Evigt</b> - GRATIS</li>
            <li><b>Kun</b> søge</li>
            <li><b>Kun</b> se profiler</li>
            <li><b>Ikke</b> skrive eller svare</li>
			<li><b>Ikke</b> deltage</li>			
        </ul> 
    </div>
</div>

<div id="pricing-table" class="clear">
    <div class="plan" id="most-popular">
        <h3>Aktiv<span>109,-</span></h3>
        <a class="signup" href="http://www.website.com/join">Opret</a>        
        <ul>
            <li><b>1 Måned</b> - DKK 109</li>
            <li><b>Fuld</b> adgang til alt</li>
            <li><b>SoulMatching</b></li>
            <li><b>Skrive</b> beskeder og chatte</li>
			<li><b>Deltage</b> aktivt</li>			
        </ul>    
    </div>
</div>

<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>Passiv<span>59,-</span></h3>
		<a class="signup" href="http://www.website.com/join">Opret</a>
        <ul>
            <li><b>1 Måned</b> - DKK 59</li>
            <li><b>Begrænset</b> adgang</li>
            <li><b>SoulMatching</b></li>
            <li><b>Kun</b> svare beskeder og chat</li>
			<li><b>Passiv</b> deltagelse</li>			
        </ul>
    </div>
</div>

<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>3 Dage<span>39,-</span></h3>
        <a class="signup" href="http://www.website.com/join">Opret</a>		
        <ul>
            <li><b>3 Dage</b> - DKK 39</li>
            <li><b>Fuld</b> adgang til alt</li>
            <li><b>SoulMatching</b></li>
            <li><b>Skrive</b> beskeder og chatte</li>
			<li><b>Deltage</b> aktivt</li>			
        </ul>    
    </div>
</div>

The CSS for the pricing table is here: https://codepen.io/arkev/pen/EDeuG

I have changed the wideness and to percent on the single price blocks:

#pricing-table {
	margin: 100px auto;
	text-align: center;
	width: 960px;  /* total computed width = 222 x 3 + 226 */
}

#pricing-table .plan {
	font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
	text-shadow: 0 1px rgba(255,255,255,.8);        
	background: #FAF5EB;      
	border: 1px solid #ddd;
	color: #333;
	padding: 20px;
	width: 23.958333333333333%; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
	float: left;
	position: relative;
}

And the CCS for the widget area:

.price-page-1 .flexible-widgets .widget {
	float: left;
	margin-bottom: -20px;
	padding-left: 10px;
	padding-right: 10px;
}

.price-page-1 {
	padding-bottom: 100px;
	padding-top: 100px;
	text-align: center;
}

.price-page-1 .widget-full .wrap {
	max-width: 960px;
}

.price-page-1,
.price-page-1 a,
.price-page-1 p,
.price-page-1 .featured-content .entry-title a,
.price-page-1 .widget-title {
	color: #fff;
}

.price-page-1 p {
	font-size: 30px;
	font-size: 3rem;
	line-height: 1.75;
}

.price-page-1 p:last-child {
	margin-bottom: 0;
}

.price-page-1 button:focus,
.price-page-1 button:hover,
.price-page-1 input:focus[type="button"],
.price-page-1 input:hover[type="button"],
.price-page-1 input:focus[type="reset"],
.price-page-1 input:hover[type="reset"],
.price-page-1 input:focus[type="submit"],
.price-page-1 input:hover[type="submit"],
.price-page-1 .textwidget a.button:focus,
.price-page-1 .textwidget a.button:hover {
	background-color: #000;
	border: none;
	color: #fff;
}

And the flexible widgets area:

.flexible-widgets .widget {
	float: left;
	margin-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

.flexible-widgets.widget-full .widget {
	padding-left: 0;
	padding-right: 0;
}

.flexible-widgets .widget:last-of-type {
	margin-bottom: 0;
}

.flexible-widgets.widget-full .widget,
.flexible-widgets.widget-area .widget:nth-of-type(1),
.flexible-widgets.widget-halves.uneven .widget:last-of-type {
	width: 100%;
}

.flexible-widgets.widget-fourths .widget {
	width: 25%;
}

.flexible-widgets.widget-halves .widget {
	width: 50%;
}

.flexible-widgets.widget-thirds .widget {
	width: 33.33%;
}

.flexible-widgets.widget-halves .widget:nth-child(even),
.flexible-widgets.widget-thirds .widget:nth-child(3n+2),
.flexible-widgets.widget-fourths .widget:nth-child(4n+2) {
	clear: left;
}

And again, it all worked just fine before WordPress/Infinity Pro couldn't hang on to the template settings. And that is really something i don't understand and also have never experienced before.

[BoblebadMember]

Update: Only a few minutes after updating this post, WordPress lost the page again. It's like it can't hold on to the template. Yes i know it sounds weird, but it's actually what's happening.

So now i did the same again. New page and added the template again. But know it messes up my first widget area, where the last four widget doesn't float left as they should - and as they did before i went to bed.

[BoblebadMember]

Very weird. The site/page inserts my four widget ares as separate pages after the widget areas: http://postimg.org/image/5oe22sxxp/

[BoblebadMember]

Is it possible to split this between the two pages ?:

$images = apply_filters( 'infinity_images', array( '1', '2', '3', '4', '5', '6', '7', '8', '9', '10' ) );

Or is it not the problem. The images are just taken from 1 and up, that's the two images used on the price page.

If i understand the theme correctly, then there can only be one output.php and also only one customize.php.

[BoblebadMember]

Well, in some way it works, but it doesn't.

I just changed the code from front to price page. The interesting part is that i have only assigned an image to the first widget. That does not show. But in widget two and three, where there's no image assigned, images shows up.

How does that happen ?

[BoblebadMember]

Is "front page" a standard out of the box WordPress function ?

Be course i can only find something like it in front-page.php: "function infinity_front_page_genesis_meta()"

[BoblebadMember]

I found out that i tried editing that file before, but i forgot an instance in it. But it gives me an "Call to undefined function is_price_page()"

I tried changing it to price-page, but that didn't help. I also have changed ".price-page-%s".

[BoblebadMember]

Thank you again Victor 🙂

By that, do you mean that i can add another line in the file or do i have to create another file for my custom page ?

[BoblebadMember]

Thank you for your answer Victor 🙂

I tried it and have it working, but am stuck on getting the background images showing. Everything seams right, but they are not showing up ?

[BoblebadMember]

Regarding the breaking of the widget size, i found that the 960px that is set as the max widget size gets thrown away and the lager page wrap 1280px is used.

How is that possible when the pricing tables are put in a text widget that has a max size at 960px ?

EDIT: Found the problem in the PHP. I don't know how, but the last part of the lines was not copied, so i class was missing 🙂

[BoblebadMember]

It's a very nice thing called Toggle 🙂

[BoblebadMember]

So when i change customize.php and output.php accordingly, i get the exact same result.

You're changes to helper_functions.php is of course an easier way. But in some way it seams that it's just overriding the code in the other files.

Which way is the "right" way to do it ?

[Author]

Posts