- This topic has 8 replies, 2 voices, and was last updated 11 years, 7 months ago by
.
-
Posts
-
I'm trying to add a widget area to the left of the content in the genesis_post_content hook area.
I've already set a width for the content and padded it to the right so that the space is free for the widget.
However, the widget area is being called after the content and so it is appearing at the bottom (see picture below).
I want the widget area to be called first so that the widgets contained in it will appear in line with the top of the content just 20px below the main image.
Any idea how to fix this? (Sorry, the site is on a localhost, so no link for the time being).
I know this is going to be because I'm tired, it being nearly 2am and that I should really be in bed. But this is driving me up the wall and I'm determined to defeat it before going to sleep.
Hello,
Since it is local to your development environment, I am gonna have to guess some possible culprits.
Does the widget area have the appropriate css styling to float? It almost looks like the content has cleared both sides, forcing the widget down.
Again, it's hard to rule out css rules since I cannot debug the site.
Let me know.
Just in case it's not 100 per cent obvious what I'm trying to achieve without being able to access the site, I've mocked up a screen in photoshop to demonstrate.
As you can see, the widgets on the left have moved up to be inline with the top of the content under the featured image.
As I said, any help will be much appreciated.
Hi Ryan,
I might upload it to my hosting tomorrow to make it easier to debug.
In the meantime, it's not a clearance issue. I'll paste the relevant code below until I've uploaded the site tomorrow.
From the functions file (for the call):
`// Inserts advert spotbox into single posts
add_action( 'genesis_post_content', 'metro_advert_box' );
function metro_advert_box() {
if (is_single() && is_active_sidebar( 'in-post' ) ) {
echo '';
dynamic_sidebar( 'in-post' );
echo '';
}
}`And the CSS:
`.entry-content p {
clear: none;
position: relative;
font-size: 14px;
font-size: 0.875rem;
width: 53%;
padding-left: 47%;
right: 0;
}``.spotbox {
width: 45%;
float: left;
margin: 0 0 15px 0;
margin: 0 0 1rem 0;
padding: 0;
border: none;
}.spotbox img {
float: left;
margin: 0 0 15px 0;
margin: 0 0 1rem 0;
padding: 0;
border: none;
}`
For giggles, have you tried removing the left padding on the .entry-content p?
Just throwing ideas out.
All that does is constrain the content within the boundaries of the width on the left rather than the right side of the genesis_post_content area like I need it to be.
I've copied the CSS and functions pages over from the local host and pasted them as is into the same files on the server hosted version.
This post is the only thing I've uploaded as it's the only thing I've having an issue with at the moment.
http://www.furfiemedia.co.uk/news/involuntary-it-managers-costing-small-businesses-in-productivity/
Let me know if you need any other information or code.
Looking at this within chrome helped and I could edit css and move elements around.
With the widget elements appearing before the entry content your css worked well, From your code you posted before, try this;
// Inserts advert spotbox into single posts add_action( 'genesis_post_content', 'metro_advert_box', 9 ); // set priority less than 10 function metro_advert_box() { if (is_single() && is_active_sidebar( 'in-post' ) ) { echo ''; dynamic_sidebar( 'in-post' ); echo ''; } }I set the priority to 9. This will execute your code before the default Genesis callbacks.
Hope this helps.
Thank Ryan,
I had a feeling it was going to be a case of setting a priority level.
Just for reference – in case anyone else is interested – once I put that code into, I needed to create css for each of the div ids.
I used the information from the .spotbox classes, and simply added clear: both; to each of the new ids.
That sorted it all out now.
For example, in the advert box – which is a text widget, the css is now:
`#text-5 {
width: 45%;
clear: both;
float: left;
margin: 0 0 15px 0;
margin: 0 0 1rem 0;
padding: 0;
border: none;
}`
- The forum ‘General Discussion’ is closed to new topics and replies.