Sidebar layout enterprise pro theme

[kjvietti]

I'm trying to replicate/migrate a friends website to wordpress. I'm using the enterprise pro theme and I've having trouble with the sidebars he has on his current website.

I can't seem to get the sidebars to display to the right of the text in the middle of the page. Right now the sidebar is below the page content. I can get the sidebar to display to the right by floating it, but it displays up near the image/header area which I don't want.

Link to existing site (site I'm trying to replicate):
http://www.funbelievableballoons.com/artists.php

Link to what I have so far:
http://1103marketing.biz/funbelievableballoons/artists/

Any help would be greatly appreciated, I've been banging my head over this for a while now!

http://1103marketing.biz/funbelievableballoons/artists/

[Christoph]

Hi,

around line 542 of the style.css set a width for the content between 700px and 790px.

.content {
	float: right;
	width: ***px;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[kjvietti]

Hey Chris,

Thanks for the reply. I tried that before and just tried it again (to make sure I didn't miss anything). This gets the sidebar to display to the right, but I want it to display to the right and underneath the image of the man with balloons in his pocket.

I thought that I could do this by adding an additional class to the text on the page underneath the image (.inpage), float it left and reduce the width but sidebar still stays below everything.

Hopefully you understand what I'm getting at and have some other ideas!

-kyle

[Christoph]

HI Kyle,

ok, now I understand you better.

You will have to adjust the width anyway or the sidebar will stay underneath the content.

The easiest way is to insert your text and image into the genesis_before_content or genesis_before_loop hook.

Install the Genesis Simple Hooks plugin, go to one of the two hooks and write the following:
(if you use the genesis_before_content hook you can use it as is, if you want to use the genesis_before_loop hook

add_action('genesis_before_content', 'add_text_image');
function add_text_image() {
if ( is_page ('page-id') )
echo '<div class="add-text-image">Add Text and image</div>';
};

(if you use the genesis_before_content hook you can use it as is, if you use the genesis_before_loop hook change it to add_action('genesis_before_loop', 'add_text_image');)

'page-id' has to be replaced with the actual id of the page in WordPress.

Select execute php on this hook.
Save your changes.

You can style text and image with css using the .add-text-image class.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[ecigguy]

Sorry, Just testing if my posting capabilities work, Ignore.

[kjvietti]

Thanks for your help Chris and for pointing me in the right direction (inserting the hero/top stuff before the content of the page). Your solution will definitely work.

This website only has four pages that I need to do this on, for my own challenge I'm wondering if there's a way to dynamically pull in the text that I have to left of the image on each page in without defining it in the hook. Similar to what I'm doing for the page title and featured image in my code below:

add_action( 'genesis_before_content', 'single_post_featured_image', 1 );
function single_post_featured_image() {
	if ( (! is_singular( 'page' ) || !has_post_thumbnail()) || wp_is_mobile() )
		return;
$img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'hero-image' ) ) );

	echo '<div class="hero-wrap"><div class="hero-header">';
		genesis_do_post_title();
	echo '</div>';
	echo '<div class="hero-image">';
		printf ( $img );
	
	echo '</div></div>';
	
		remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); 

Again, certainly not something that's necessary in this case. But my thought is that in the future if I have clients updating sites like this it would be nice to just have them add a class to the text they want to show up to the left of the image and assign it a class that runs before the page content. I'm pretty certain this isn't possible, but thought that greater minds might have an idea 🙂

[Author]

Posts