Community Forums › Forums › Archived Forums › General Discussion › Centric Pro Homepage Issues
Tagged: centric, home, home sections, image alignment
- This topic has 15 replies, 3 voices, and was last updated 10 years, 7 months ago by
Tom.
-
AuthorPosts
-
May 21, 2014 at 11:25 pm #106264
bearknuckles
MemberHello,
When using a featured page widget, the content will not render as written. Meaning, If I add an image and align it to the left and have text content around it, it looks great on the page view. However, when I used it on homepage as a featured page, my images will not align left or right. They become part of the background and all of my text content goes on the entire content area including on the images themselves.
Any help?
May 23, 2014 at 9:36 am #106503bearknuckles
MemberAny help guys?
May 23, 2014 at 11:51 pm #106572Tom
ParticipantCan you post a link to your site please? It really helps if we can see what you can see.
What you are describing will depend on the widget area used among other things, so please provide as much detail as possible.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]May 29, 2014 at 11:09 am #107319bearknuckles
Memberhttp://clothedinconfidence.org/
I'm very confused, so I'm not sure what else I can provide. I can answer any questions that you guys may have. Thank you for the help, Tom.
May 29, 2014 at 12:12 pm #107323emasai
ParticipantTry removing the negative margins on line 1461 in the styles.css or look for the following and comment out
.home-widgets .featuredpage .entry .alignleft, .home-widgets .featuredpage .entry .alignnone, .home-widgets .featuredpage .entry .alignright {
margin-bottom: -148px;
margin-top: -110px;}
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comMay 29, 2014 at 7:22 pm #107392Tom
ParticipantI think you'll have to either match your content to the theme's home page style or change the home page section's style to match your long, multi-image pages (as Lynne has started for you).
The Centric home-widgets-3 section is designed for three featured posts. each with a text excerpt and featured image. Your home-widgets-3 section is showing a full page of text with 3 images embedded in paragraphs, but without any featured image. You've got the same problem in home-widgets-2 where the text overlays the paragraph-embedded image from the "About the Program" page.
So, a question or two first:
Do you want to publish the full content and images of the pages featured in these home sections?
Or do you want to show a 'teaser' plus the page/post's featured image? (like in home-widgets-6 with "Our Team").(Visit the theme instructions page again for how these home sections are designed to work.)
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]May 30, 2014 at 9:53 am #107487bearknuckles
MemberThanks for replying guys, it definitely makes me feel good about going with Studio Press.
Emasai, I tried commenting out, but it did not seem to work.
Tom, I concede I didn't see this as a potential issue when choosing this theme for this project. I have not had that issue with any other themes and didn't think I had to choose between featuring excerpts and displaying a page's entire content. But, if I had it my way, I would be able to display the entire content in section 1 and 2. The rest of the sections could be used as excerpts.
I really appreciate your time, gentlemen.
May 30, 2014 at 10:22 pm #107577Tom
ParticipantI don't think your choice of theme is a problem, but, like any theme, it's built for a certain presentation - particularly the home page. Centric isn't really designed to display large, full pages in the home sections (and will present them differently to their style on the original page). Rather, the sections feature one or more brief excerpts and images, announcing more to be found on the linked pages, with each section being styled differently.
My suggestions: (I did a mock-up to illustrate)
Home1: (your logo section) Shrink the logo to allow the arrow to appear at the bottom of the screen on the initial page load without scrolling. (about 700 x 400px)
Home2: (video section) Build this section using a text widget to embed the video and limited text with a "read more" button linked to the actual page. The video can be played from either page. You can then style the full-text page completely independent of the home page.
Home3: (3 images) Use a featured page or text widgets to show the images 3-across with limited text and "read more" buttons all linked to the single target page, You can them style the full-text page completely independent of the home page and use larger versions of the images. This section required a small CSS change to make the widgets fit in my mockup.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]June 4, 2014 at 9:16 am #108067bearknuckles
MemberTom, you are the man. How did you get the widgets to display side by side?
June 4, 2014 at 9:30 am #108068Tom
ParticipantI believe I used these changes to the stylesheet. (You may have to do some adjustments.) They should be inserted at the bottom of the "Home Page" section around line 1544. This leaves the Media queries unaffected.
.home-widgets-3 .featuredpost .entry { float: left; margin-left: 2.5%; width: 30%; } .home-widgets-3 .featuredpost .entry:nth-child(3n+1) { clear: none; }
Good luck with your new site.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]June 16, 2014 at 11:30 pm #110113bearknuckles
MemberHey Tom,
A couple of things, but, before that, THANK YOU for your time and help.
1. So, I tried styling the home page section three in the way you described, with your CSS change, but the three text widgets containing an image and an excerpt will not display horizontally. I'm not quite sure how to fix that.
2. I think I want to follow this same type of strategy for the rest of the page just like you did for section 2 with the video and then another text widget by its side. What do I need to do, to do this like you did on the test site?
June 17, 2014 at 8:05 pm #110319Tom
Participant1. Since you opted to use text widgets, you would have to change the CSS a little bit ...
.home-widgets-3 .widget_text { float: left; margin-left: 8%; width: 22%; clear: none; }
... but you'll still have problems because the images are different sizes and the text blocks are different sizes, so the three text widgets will look a little lopsided.
In my mock-up I used three pages with featured images for the three teasers. To display them on the front page I used the Genesis Sandbox Featured Content plugin to
- specify the three pages
- select the image size as 'featured posts - 400x300px
- specify a fixed size for the content block ("Show Content Limit")
- specify a common link to the page with the full content sections
(You'll need the css snippet from post 108068, above)
The widget settings look like this:
2. For the intro video section in Home-2 I used a text widget split 2/3 for the video and 1/3 for the text with "read more" button*. This might work for your other content - or not 🙂 - it depends on the content you want to include in the different sections. Remember that Centric is not really designed (IMO) to carry the full story in any one home segment. It's more a showcase for select image(s) and focused text to catch the reader's interest and direct them to an inner page. So my 2/3 -- 1/3 split may not work for you if you want to include as much text as you're currently featuring.
(* column classes make splits easy: http://my.studiopress.com/tutorials/content-column-classes/)
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]June 18, 2014 at 1:20 pm #110395bearknuckles
MemberTom, you are a genius.
I have managed to get the homepage to look much more like what I had in mind.
http://clothedinconfidence.org/
I used the plug in you suggested and it looks much better. Thank you.
I had to create three separate pages (solely for the purpose of the homepage) so I could use the featured image option and make it look like yours. However, now these elements link to these pages instead of the inner page that it's supposed to. Is there a way for me to get the "Read More" link from all of these to point to one page that I elect?
I hope I'm making sense.
What do you think thus far of the progress?
June 18, 2014 at 10:00 pm #110488Tom
ParticipantIs there a way for me to get the “Read More” link from all of these to point to one page that I elect?
You could do this using the widget setup for Genesis Sandbox Featured Content: down the right column of settings, for both "Show Featured image" and "Show Post Title" there is a field for "Link (Defaults to Permalink):" - use this field to specify a custom single URL (for your "How to Participate" page).Scratch that: Genesis Sandbox Featured Content is not performing as expected. There is a different, known fault with the plugin (that's why we're using a slightly older version), but this additional fault makes it unusable for our purpose. (I've added a note on the plugins GitHub Page.)
You could do this using the plugin "Genesis Featured Widget Amplified" (precursor to GSFC), except this plugin is also broken: it does not allow the selection of post type (we want pages). (It also is broken in not remembering selection of a specific page in the drop-down page list.) So much for plan "B".
For plan "C", we'll use the plugin "Genesis Featured Page Extras" instead. This means recreating the 'steps' using the widget like this...
... and some different CSS for this different widget, including a media query for better presentation on tablets and phones. You can place these blocks as the bottom of the theme stylesheet, or carefully integrate them in the appropriate sections.
.home-widgets-3 .featuredpage { clear: none; float: left; width: 33%; } .home-widgets-3 .entry-content p { padding-left: 10%; padding-right: 10%; }
@media only screen and (max-width: 768px) { .home-widgets-3 .featuredpage { width: 100%; } }
This leaves one item left unfinished: a title for the section ('how to participate') because we're back to using 3 widgets to show the 3 page excerpts, there is no common title for the pages. You can choose from a number of different ways to add this back, like: each of the three widgets gets a one word title "How" "To" "Participate", or you could add a text widget above the three Featured Page Extras widgets if using a longer title (this will probably need some added styling)
It's too bad that the original plugins are not suitable, but this will provide the common page link you're looking for.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]June 19, 2014 at 10:16 am #110579Tom
Participantn
Is there a way for me to get the “Read More” link from all of these to point to one page that I elect?
You could do this using the widget setup for Genesis Sandbox Featured Content: down the right column of settings, for both "Show Featured image" and "Show Post Title" there is a field for "Link (Defaults to Permalink):" - use this field to specify a custom single URL (for your "How to Participate" page).Scratch that: Genesis Sandbox Featured Content is not performing as expected. There is a different, known fault with the plugin (that's why we're using a slightly older version), but this additional fault makes it unusable for our purpose. (I've added a note on the plugins GitHub Page.)
You could do this using the plugin "Genesis Featured Widget Amplified" (precursor to GSFC), except this plugin is also broken: it does not allow the selection of post type (we want pages). (It also is broken in not remembering selection of a specific page in the drop-down page list.) So much for plan "B".
For plan "C", we'll use the plugin "Genesis Featured Page Extras" instead. This means recreating the 'steps' using the widget like this...
... and some different CSS for this different widget, including a media query for better presentation on tablets and phones. You can place these blocks as the bottom of the theme stylesheet, or carefully integrate them in the appropriate sections.
.home-widgets-3 .featuredpage { clear: none; float: left; width: 33%; } .home-widgets-3 .entry-content p { padding-left: 10%; padding-right: 10%; }
@media only screen and (max-width: 768px) { .home-widgets-3 .featuredpage { width: 100%; } }
This leaves one item left unfinished: a title for the section ('how to participate') because we're back to using 3 widgets to show the 3 page excerpts, there is no common title for the pages. You can choose from a number of different ways to add this back, like: each of the three widgets gets a one word title "How" "To" "Participate", or you could add a text widget above the three Featured Page Extras widgets if using a longer title (this will probably need some added styling)
It's too bad that the original plugins are not suitable, but this will provide the common page link you're looking for.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]June 19, 2014 at 10:50 pm #110727Tom
ParticipantI'm going to try this a third time - the Forum has somehow eaten my last two attempts to reply on this thread (spambot?) - using a slightly different format.
Is there a way for me to get the “Read More” link from all of these to point to one page that I elect?
Unfortunately, the Genesis Sandbox Featured Content plugin doesn't perform as expected: you can enter a common URL to solve your question, but it doesn't override the individual page links. (Two other, similar plugins: 1 doesn't work, one doesn't have this feature.) We can use the plugin "Genesis Featured Page Extras" instead. This means:
1. Recreating the 'steps' using the Genesis Featured Page Extras widget as in this image
http://goo.gl/nlG7oT
2. Using some different CSS for this different widget, including a media query for better presentation on tablets and phones. You can place these blocks as the bottom of the theme stylesheet, or carefully integrate them in the appropriate sections.
.home-widgets-3 .featuredpage { clear: none; float: left; width: 33%; } .home-widgets-3 .entry-content p { padding-left: 10%; padding-right: 10%; }
@media only screen and (max-width: 768px) { .home-widgets-3 .featuredpage { width: 100%; } }
3. Creating a title for the section ('how to participate'). Because we're back to using 3 widgets to show the 3 page excerpts, there is no common title for the pages. I'll leave it up to you to choose from a number of different ways to add this back,: each of the three widgets could get a one word title "How" "To" "Participate", or you could add a text widget above the three Featured Page Extras widgets if using a longer title (this will probably need some added styling), or you could do something entirely different.
It's too bad that the original plugins are not suitable, but this will provide the common page link you're looking for.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ] -
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.