bmackenny

Ok. I have fixed it. I used Firebug to see that the Flexi Pages Widget was generating a unique <div> for this content. I am not sure how or why…I don’t know enough about PHP to know this. But, after inspected the contents of the wdiget’s output on my web page, I found that it was enclosed in a <div> called ‘flexipages-2’. After that, I just wrote the following code into my theme’s style.css:

#flexipages-2 {
}

#flexipages-2 ul {
	margin: 0;
	margin: 0 0 24px 0;
	padding: 0 0 27px 0;
}

	#flexipages-2 ul li {
		display: -moz-inline-box;
		display: inline-block;
		*zoom: 1;
		*display: inline;
		vertical-align: top;
		width: 300px;
		margin: 0 0 0 16px;
		padding: 0;
	}

	#flexipages-2 ul li a {
	font-family: 'Voltaire',sans-serif !important;
	font-size:24px;
	text-transform:uppercase;
	color:#002E56;}

	#flexipages-2 ul li a img {
	padding: 0 0 10px 0;
	}

	#flexipages-2 ul li a:hover {
	color:#E31B23;
	}

	#flexipages-2 ul li:first-child {
		margin: 0;
	}

I hope this helps someone out. Of course, your css might look different from mine as I have written this to best suite my site’s overall design. But the main point is that the widget PHP generates a unique div on the website’s output. I inserted a separate instance of the widget on the same page and the output div ‘flexipages-3’ was created. I would still like to see better control over the CSS of this widget in the future. Either the FAQ needs to be updated to inform the user of this unique div generation OR the widget should include its own style.css so that users can better control the widget. Thanks for your help Riversatile!

It looks like I need to add some php scrip definitions in the the php file somewhere to define the class ‘flexipages_widget’ but I am not familiar enough with php scripting to do this. Any suggestions? I think it should go somewhere in this section of code BUT where?

function flexipages_list($page_array, $level = 0)
	{
		if(!$page_array)
			return;

		$pagelist = "";

		foreach($page_array as $page) {

			$date = "";
			$pagethumb = get_the_post_thumbnail($page['ID'], 'thumbnail', array('class' => 'attachment-thumbnail','title' => trim(strip_tags( $attachment->post_title )),));	

			if(isset($page['date']) && $page['date']) $date = " ".$page['date'];

			$pagelist .= str_repeat("\t", $level+1).'<li class="'.$page['class'].'"><a href="'.$page['link'].'" title="'.$page['title'].'">'.$pagethumb.''.$page['title'].'</a>'.$date;
			if($page['children'])
				$pagelist .= flexipages_list($page['children'], $level+1);
			$pagelist.= "\n";
		}
		if($pagelist)
			$pagelist = str_repeat("\t", $level)."
<ul>\n{$pagelist}".str_repeat("\t", $level)."</ul>
";
		return $pagelist;
	}

If I could find a way to properly call to this style set I could display the widget how I want:

ul.flexipages_widget {
	margin: 0;
	margin: 0 0 24px 0;
	padding: 0 0 27px 0;
}

	ul.flexipages_widget li {
		display: -moz-inline-box;
		display: inline-block;
		*zoom: 1;
		*display: inline;
		vertical-align: top;
		width: 300px;
		margin: 0 0 0 16px;
		padding: 0;
	}

	ul.flexipages_widget li:first-child {
		margin: 0;
	}

		ul.flexipages_widget li .featured-thumbnail {
			margin: 0 0 28px 0;
		}

		ul.flexipages_widget li strong {
			display: inline-block;
			padding: 4px 38px 8px 0;
			vertical-align: top;
			word-spacing: 2px;
			line-height: 18px;
			font-size: 12px;
			text-transform: uppercase;
		}

			ul.flexipages_widget li strong a {
				text-decoration: none;
			}

Hi Riversatile!

Thank you so much for pointing that out to me. After replacing ‘full’ with ‘thumbnail’ I did get the script to call up the thumbnail for the pages instead of the full sized image. However, I am still baffled on how to style the widget. I cannot find a CSS definition that properly calls to the flexipages widget. I have read so many articles on people trying different things. Nothing seems to work when I write it into my theme’s style.css. Do you know how I could add a call-to in the flexi-pages-widget.php so that I can create a separate style.css in the flexi page widget directory? Or do you know what style definition I need to use to call to it. You can view the position I am working on here: https://s119736768.onlinehome.us

Can riversatile or migswd tell me how I could add some CSS to the Flexi Pages Widget? I want to have the widget display the page thumbnails and the titles in a three column grid. I just can’t seem to find the right style to add to my theme’s style.css

I really wish that the widget came with it’s own stylesheet. Can I add one for it? Just not sure how to make this happen. When I add migswd’s code to the wdiget’s php it does display the pages thumbnails but they are at FULL size. I’d like for them to display at my theme’s thumbnail setting.

Can anyone help?