Infinity Pro Widget Arrangement

This topic is: resolved

Tagged: Flexible Widgets, Infinity Pro

This topic has 11 replies, 2 voices, and was last updated 7 years, 9 months ago by Matthew Edmund.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
April 10, 2017 at 4:15 pm #204594

Matthew Edmund
Member

Hello,

I'm in the process of setting up my first Genesis Framework website. We're using the Infinity Pro theme. You can see our development site here: http://shade.purelightstudio.com/

Our Widget Area 4 currently looks like this:

However, we'd like it to look like this (with the descriptions...I didn't bother putting those in the mockup):

Now, I can think of a few ways to do this. But I'd like to see if there is a quick/easy way of doing it, specifically, unique to the theme or Genesis, to reduce time and can be easily replicated in the future.

Thank you in advance for your assistance!
http://shade.purelightstudio.com/

April 10, 2017 at 10:32 pm #204604

Brad Dalton
Participant

The Infinity pro theme uses flexible widgets so they should display depending on how many widgets you add to the widget area.

Tutorials for StudioPress Themes.

April 10, 2017 at 10:35 pm #204605

Matthew Edmund
Member

Yes. But, I would like to have a bit more control over how it's flexible. I was wondering if there is a quick and easy way to adjust how the widgets arrange. Right now, having a bunch of uneven boxes looks aesthetically poor. Is there a way to make the "flexible widgets" flex in a specific fashion?

April 11, 2017 at 1:05 am #204608

Brad Dalton
Participant

You could do anything using CSS.

If you inspect each widget, you'll find the CSS rules which control how the widget displays. You can then modify these CSS rules.

You need to learn how to use inspect element to find and modify CSS in your browser.

The website link you provided, links to buydomains

Tutorials for StudioPress Themes.

April 11, 2017 at 2:10 am #204610

Matthew Edmund
Member

I know how to inspect CSS and how to use CSS. Per my original post,

Now, I can think of a few ways to do this. But I'd like to see if there is a quick/easy way of doing it, specifically, unique to the theme or Genesis, to reduce time and can be easily replicated in the future.

I was wondering if there was a quick, specific way of handling this inside Genesis or this theme in particular.

Sorry about the link, I mistyped and forgot the S: http://shade.purelightstudioS.com/

April 11, 2017 at 2:22 am #204611
Matthew Edmund
Member
Essentially, what I'm seeing, is the only way to do this will be to play with the flexible-widgets classes
```
/* Flexible Widgets
---------------------------------------------------------------------------------------------------- */

.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;
}
```
If I'm reading this correctly, I would have to then change the percentages and equations of the nth-child selectors.

In this case, I'd probably want to create an entirely different class for just Widget Area 4 as to not effect the other widget areas?

What I don't understand is how classes like ".flexible-widgets.widget-thirds" are applied to different widgets dynamically?
April 11, 2017 at 2:24 am #204613

Brad Dalton
Participant

Yes. Here's the guide explaining the front end output the flexible widget code produces.

Any changes to this would require modification of the flexible widgets CS which is fairly straight forward.

Tutorials for StudioPress Themes.

April 11, 2017 at 2:28 am #204614
Brad Dalton
Participant
You could remove the flexible widgets class
```
flexible-widgets
```
from the PHP code on line 83 of Infinity Pro's front-page.php file add custom CSS to modify the default output. Be easier then modifying or writing new PHP.

Tutorials for StudioPress Themes.
April 11, 2017 at 11:54 am #204638

Matthew Edmund
Member

So is it the PHP that is then adding those classes?

April 11, 2017 at 9:24 pm #204650

Brad Dalton
Participant

Yes. Its in the functions file line 217.

Tutorials for StudioPress Themes.

April 17, 2017 at 12:53 am #204864

Brad Dalton
Participant

Did you end up getting this fixed? If so, please mark it as resolved.

Tutorials for StudioPress Themes.

April 26, 2017 at 10:44 am #205369
Matthew Edmund
Member
I fixed it by basically forgoing the widgets altogether which were, more or less, a pain and messy. The uneven boxes aren't at all ideal and instead opted to use display: table-cell to solve the problem.

My CSS looks like this:
```
/***** Professional Services Boxes Begin *****/
.serv-master {
	display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
  border-collapse: separate;
  border-spacing: 1.5rem 0.75rem;
}

.serv-box {
	display: table-cell; /* Make elements inside the container behave like table cells */
	width: 30%;
	padding:20px;
}

.serv-box p, .serv-row p {
	font-size: 1.6rem;	
}
.serv-row {
	display: table-cell;
		padding:20px;
}

.serv-row, .serv-box {
	background-color:#F4F4EF;
}

@media only screen and (max-width: 800px) {
	.serv-box { 
        display: block;
        width: 100%;
		    margin-top: 1.5rem;
    }
}

/***** Professional Services Boxes End *****/
```
That part at the end:
```
@media only screen and (max-width: 800px) {
	.serv-box { 
        display: block;
        width: 100%;
		    margin-top: 1.5rem;
    }
}
```
Causes it to collapse into stacked block elements on screen sizes smaller than 800px.

And instead of a bunch of widget boxes, I used two text widget boxes with the second containing the HTML looking like this:
```
<div class="serv-master">
<div class="serv-row">
	<i class="icon ion-ios-world-outline"></i>
	<h4>Web Design</h4>
		<p>Affordable, custom, handmade websites built on the security and reliability of WordPress</p>
</div>
</div>
<div class="serv-master">
	<div class="serv-box">
		<i class="icon ion-ios-bookmarks-outline"></i>
		<h4>Content Creation</h4>
			<p>Original content for your blog, email newsletters, social media, and more written exclusively for you to engage your audience and bring them back for more</p>
	</div>

	<div class="serv-box">
		<i class="icon ion-images"></i>
		<h4>Graphic Design</h4>
			<p>Logos, social media images, marketing photos, memes, and other eye-popping visuals for web and print</p>
	</div>

	<div class="serv-box">
		<i class="icon ion-easel"></i>
		<h4>Media Design</h4>
			<p>Business Cards, Post Cards, Fliers, Brochures, Posters, and more! With limited availability for emergency last-minute designs on most projects.</p>
	</div>

</div>
<p></p>
<p><a class="button" href="#front-page-5">Who We Work With</a></p>
```
The end result is this:

So the answer to my original question is "No, there is no quick way in Genesis to do that. You'll need to use custom CSS or modify the PHP."
Author

Posts