Forum Replies Created
-
Posts
-
No Worries
I have now solved the problem after a lot of hunting around using CSS - there's a couple of ways to achieve this. No idea of the implications for mobile responsiveness or site load, so if anyone wishes to comment feel free:
Here's how to add full browser width bars to any part of your theme/page etc using CSS & Divs - just style accordingly
Method A - use the section class in CSS - as seen here http://codepen.io/receter/pen/uBJaK
I haven't worked out how to get my text to format as I would like yet - centred in section but here's my css
.section {
margin: 0 auto;
width: 25rem;
background: white; (background middle if you extend text)
padding: 20px;
}
.section h2 {
color: white;
position: relative;
background: white; (this changes the middle of box colour behind text)
}
.section h2:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: 0;
border-left: 9999px solid red; (this changes box colour on left)
box-shadow: 9999px 0 0 red; (this changes box colour on right)
}Method B - Same principle different approach http://www.sitepoint.com/css-extend-full-width-bars/
My css here
.extendfull, .extendleft
{
padding-left: 3000px;
margin-left: -3000px;
}.extendfull, .extendright
{ background:#000;
padding-right: 3000px;
margin-right: -3000px;
}
.extendfull body {
overflow-x: hidden;
}Voila - coloured full width divs to use anywhere you fancy
Hi
Thanks...I looked at your sites in firebug and its all 1343 including the div for entry-content so I guess its the default for site width none?
Im working on local dev so no link but using Enterprise Pro - you can see what its doing on the demo for landing page template. I have a new page template copied from the landing one but set to full width content (I have changed this to be 1140px not the 800 that's on the demo - also tried setting this to 1343 but the entry-content div kicks in!)
http://my.studiopress.com/themes/enterprise/#demo-full
I am only looking to add full viewport/site width coloured content boxes as divs on a few pages that will be full width....effectively creating 3 x sales/landing pages - rest of site as normal
I could change themes but would prefer not to..
Your sites look great by the way
Many Thanks in advance
Hi
Thanks - I give up - I was using custom css all along - its a theme issue the site inner is not set so is 1343 by default, then the site wrap is 1140 which is getting called after the inner and then there's a hard coded entry-content div so even if you add a custom wrap size the entry content div kicks in!
What theme did you use - I see that all of your site-inner, wrap and entry-content are 1343
Cheers
Hi
Thanks again for replying
While I'm not a developer, I'm usually able to modify theme files to get the desired results 🙂
It seems very difficult to add coloured full site width sections to a genesis page and I see a number of people have asked the same question on the forums. Theme is Enterprise Pro but on local dev so no link im afraid.
Based on your get template suggestion above, I tried the following:-
1. Custom Template (Test)
<?php
/**
* This file adds the Test template to the Enterprise Pro Theme.
*
* @author StudioPress
* @package Enterprise Pro
* @subpackage Customizations
*//*
Template Name: Test
*///* Add custom body class to the head
add_filter( 'body_class', 'enterprise_add_body_class' );function enterprise_add_body_class( $classes ) {
$classes[] = 'test';
return $classes;}
//* Force full width content layout
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );//* Run the Genesis loop
genesis();2. I then added the new custom css class "test" for the site inner width
.test.site-inner {
max-width: none;
}In theory I thought this would call the custom css class for the site inner - but it doesnt
Moving on to get template, perhaps you could clarify this part
You create the template once with css classes etc and then simply hook it in anywhere.
Clearly you need to get the template to do what you want with the CSS that displays full width and then you can use it.
For your custom template file
.site-inner {
max-width: none;
}Do you mean create a custom page template and add this?
.site-inner {
max-width: none;Or create a single .php named full-width file that just contains this code?
I understand the logic you are suggestion with the get template function - I'm just not sure what needs to go in the custom template file that get's called - it only needs to change site-inner width - what do you suggest adding to the file to change this - I can create the usual page templates but how do you set the site-inner
Many Thanks
Hi
Thanks again for the reply. Sorry, you have completely lost me now - I'm not a coder - I sort of get what you are saying and had a look on wordpress already. I got the other page template codes online.
How would I create a custom page template using this? Do I need to create two files? What about the CSS?
it enables you to add a template to any section of your page or post
. - how do I use this on my pages?
Is there not a way to just add divs to page content when required to do this?
Thanks
Hi
Thanks for the reply. I don't really understand what get_template_part() does - and how that would enable me to add a screen wide text box to any page in Genesis. Can you explain further?
I am trying to do this http://www.studiopress.community/topic/full-width-fluid-div-rows-in-page/#post-106752
But only on specific pages - not the whole site
I can already add a div via a box to any page but its constrained by the site inner (1140)
Many Thanks
Hi
Great tips - did you guys get this working on a page by page basis? I need to do this but only for certain pages
setting site-inner to max width none makes the entire site that way as expected
Neil - I saw your guide online but see that you set the whole site this way
Any help would be appreciated thanks
Hi
Thanks
How are you adding the relevant hreflang markup to each post/page for the function? Does this function call this?
e.g. - All of these would go into the head or http header of a homepage using sub directories for multi region targeting
<link rel="alternate" href="site.com" hreflang="en" /> ( X default in English)
<link rel="alternate" href="site.com/kh" hreflang="en-kh" /> (Cambodia English)
<link rel="alternate" href="site.com/au" hreflang="en-au" /> (Aus English)
<link rel="alternate" href="site.com/kh" hreflang="km-kh" /> (Cambodia Khmer)I need to do this for all pages that are served to each region
It can also be done via sitemap which at least stops code bloat in pages and easier to change!
as explained here http://www.themediaflow.com/2012/08/an-international-seo-implementation-tale-sitemaps-relalternate-hreflangx/Cheers
Hi Tom
We are talking on the same page (excuse the pun), and in case anyone else is trying to this, here's the update
Arghh. It does work (remove the title) if you set a templated page as a static home page in Settings > Reading.
In fact, adding a page as a static home page is the only way to make the title banner appear on home.
(You said you were using a “static home page” 🙂 . A widgetized home page isn’t setup as static.)Correct. And yes, I am using a static home page. The only way to get a title banner to appear on the home page is via a static page.
Commenting out the functions section - for centric post title will also work as you mention. Didn't try the JS for the bumper yet.
I created a a new page template by copying and renaming front-page.php - without registering the widgets. This also removes the title banner for any pages using this template - a great solution for control on a page by page basis.
Menus
I commented out the function that removes the secondary menu - Line 74
//* Unregister secondary navigation menu
add_theme_support( 'genesis-menus', array( 'primary' => __( 'Primary Navigation Menu', 'centric' ) ) );This does enable a secondary menu option but it shows up in an odd position and there's still the issue of the JS controlling the site header meaning you cant see it.
I think it's probably easier to use another theme than try to reintroduce another menu. A shame, but its too limiting with just the one.
Also ran into issues trying to hook in a utility bar before header so guess the JS doesn't play nice with certain functions and I really don't know JS
Thanks for your help
Hi
Did you come up with a way of doing this on a by page or post basis?
I need to do this on a page by page basis - and with the Genesis default structure I cant see a simple way round having to create a new page template for every page and adding the code
Cheers
Hi
Thanks for the reply. This does work if you create a custom page template. It wont work in front page.php
Weirdly, cloning the front-page.php and renaming it e.g. mynewpage also works without adding this code - maybe as its using the default loop with no widgets?
You seem to know the theme well, dont know if you could help with a few queries before I go much further with this theme
1. Secondary menu - adding this back even with disabling the shrinking header means it disappears on scrolling - as per the theme design. Is there any way you can get a working second menu?
2. Creating custom page templates from the home page. Is there a recommended way set these up with the genesis loop?
I usually follow this http://wpsites.net/web-design/custom-page-template-widgets/ but centric doesnt seem to use a loop?
For now I have added copied front-page.php and renamed home to my custom page name (au) in this case, but wonder if I need to add a remove genesis action part back in?
mynew page template
<?php
/*
Template Name: au
/**
* This file adds the au Page to the Centric Theme.
*
* @author StudioPress
* @package Centric
* @subpackage
*/add_action( 'wp_enqueue_scripts', 'centric_enqueue_au_scripts' );
/**
* Enqueue Scripts
*/From wpsites
<?php
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'magazine_custom_loop_helper' );
/*
Template Name: Custom
*/I will ask over on wpsites as well
Many Thanks
Hi
Working Code Here
Working Code Here
//* Add post navigation (requires HTML5 theme support)
remove_action( 'genesis_entry_footer', 'genesis_prev_next_post_nav' );
add_action( 'genesis_entry_footer', 'cookie_prev_next_post_nav' );function cookie_prev_next_post_nav() {
if ( ! is_singular( 'post' ) )
return;genesis_markup( array(
'html5' => '<div %s>',
'xhtml' => '<div class="navigation">',
'context' => 'adjacent-entry-pagination',
) );echo '<div class="pagination-previous alignleft">';
previous_post_link('<span class="single-post-nav previous-post-link">%link</span>', get_previous_post_link('%title') , TRUE);
echo '</div>';echo '<div class="pagination-next alignright">';
next_post_link('<span class="single-post-nav next-post-link">%link</span>', get_next_post_link('%title') , TRUE);
echo '</div>';echo '</div>';
}This only works on a post level, and does not change the default archive pagination - working on that!
Hi
Wonder if you can help, tired to follow both your codes to add next and previous post links to Eleven Twenty Pro that display post titles..I cant seem to get this to work..
Also, is there a way in Genesis to get the post title to display as a permalink. Many Thanks
(Topic opened as below)
HiI am trying to edit the post navigation links in Eleven Twenty Pro to display the post title.
Where is the place to edit this – cant find anything in functions.php or do I need to add a new function?
Tried adding this to functions.php to test if its the right code but as no changes appeared in the link text, i guess not?
//* Add post navigation (requires HTML5 theme support)
remove_action( ‘genesis_entry_footer’, ‘genesis_prev_next_post_nav’ );
add_action( ‘genesis_entry_footer’, ‘cookie_prev_next_post_nav’ );function cookie_prev_next_post_nav() {
if ( ! is_singular( ‘post’ ) )
return;genesis_markup( array(
‘html5′ => ‘<div %s>’,
‘xhtml’ => ‘<div class=”navigation”>’,
‘context’ => ‘adjacent-entry-pagination’,
) );echo ‘<div class=”pagination-previous alignleft”>’;
previous_post_link(‘%link’, ‘new text1′);
echo ‘</div>’;echo ‘<div class=”pagination-next alignright”>’;
next_post_link(‘%link’, ‘new test 2′);
echo ‘</div>’;echo ‘</div>’;
}
Follow up:-
Tried this code and no luck
function wpsites_npp_navigation_links() {
if ( is_single ( ) ) { ?>
<?php previous_post('« « %', 'Previous', 'yes'); ?>
| <?php next_post('% » » ', 'Next', 'yes'); ?>
<?php
} }add_action('genesis_entry_footer', 'wpsites_npp_navigation_links', 5 );
To clarify:-
Front page set to static - showing blog posts
Theme pagination only showing on archive pages
Issues:-
1. Add previous/next pagination to posts both archived and not
2. How to display post title in pagination links - theme setting with numeric or previous next works
Thanks
Hi
I also need to do this for all Outreach Pro widget titles as they are wrapped in H4 tags. I tried adding this
'before_widget' => '<section id="%1$s" class="widget %2$s"><div class="widget-wrap">',
'after_widget' => '</div></section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>'But it's not working - think the number and order of widgets is more complex for the theme
It uses footers, featured pages, sub footers and sidebarsFrom Outreach Pro Home Page.PHP
add_action( 'genesis_meta', 'outreach_home_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function outreach_home_genesis_meta() {if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-bottom' ) ) {
//* Force full-width-content layout setting
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );//* Add outreach-pro-home body class
add_filter( 'body_class', 'outreach_body_class' );//* Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );//* Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );//* Add home top widgets
add_action( 'genesis_loop', 'outreach_home_top_widgets' );//* Add home bottom widgets
add_action( 'genesis_before_footer', 'outreach_home_bottom_widgets', 1 );}
}
function outreach_body_class( $classes ) {
$classes[] = 'outreach-pro-home';
return $classes;}
function outreach_home_top_widgets() {
genesis_widget_area( 'home-top', array(
'before' => '<div class="home-top widget-area">',
'after' => '</div>',
) );}
function outreach_home_bottom_widgets() {
genesis_widget_area( 'home-bottom', array(
'before' => '<div class="home-bottom widget-area"><div class="wrap">',
'after' => '</div></div>',
) );}
genesis();
From functions.php
//* Hook after post widget after the entry content
add_action( 'genesis_after_entry', 'outreach_after_entry', 5 );
function outreach_after_entry() {if ( is_singular( 'post' ) )
genesis_widget_area( 'after-entry', array(
'before' => '<div class="after-entry widget-area">',
'after' => '</div>',
) );}
//* Modify the size of the Gravatar in the author box
add_filter( 'genesis_author_box_gravatar_size', 'outreach_author_box_gravatar_size' );
function outreach_author_box_gravatar_size( $size ) {return '80';
}
//* Remove comment form allowed tags
add_filter( 'comment_form_defaults', 'outreach_remove_comment_form_allowed_tags' );
function outreach_remove_comment_form_allowed_tags( $defaults ) {$defaults['comment_notes_after'] = '';
return $defaults;}
//* Add the sub footer section
add_action( 'genesis_before_footer', 'outreach_sub_footer', 5 );
function outreach_sub_footer() {if ( is_active_sidebar( 'sub-footer-left' ) || is_active_sidebar( 'sub-footer-right' ) ) {
echo '<div class="sub-footer"><div class="wrap">';genesis_widget_area( 'sub-footer-left', array(
'before' => '<div class="sub-footer-left">',
'after' => '</div>',
) );genesis_widget_area( 'sub-footer-right', array(
'before' => '<div class="sub-footer-right">',
'after' => '</div>',
) );echo '</div><!-- end .wrap --></div><!-- end .sub-footer -->';
}}
//* Register widget areas
genesis_register_sidebar( array(
'id' => 'home-top',
'name' => __( 'Home - Top', 'outreach' ),
'description' => __( 'This is the top section of the Home page.', 'outreach' ),
) );
genesis_register_sidebar( array(
'id' => 'home-bottom',
'name' => __( 'Home - Bottom', 'outreach' ),
'description' => __( 'This is the bottom section of the Home page.', 'outreach' ),
) );
genesis_register_sidebar( array(
'id' => 'after-entry',
'name' => __( 'After Entry', 'outreach' ),
'description' => __( 'This is the after entry widget area.', 'outreach' ),
) );
genesis_register_sidebar( array(
'id' => 'sub-footer-left',
'name' => __( 'Sub Footer - Left', 'outreach' ),
'description' => __( 'This is the left section of the sub footer.', 'outreach' ),
) );
genesis_register_sidebar( array(
'id' => 'sub-footer-right',
'name' => __( 'Sub Footer - Right', 'outreach' ),
'description' => __( 'This is the right section of the sub footer.', 'outreach' ),
) );If anyone can suggest the code to change all the widget titles to H2 would be much appreciated
Thanks in Advance
Hi
Update - Checked home.php, functions.php and css - the only changes I made were to the CSS file
Manually went through CSS and changed all the code as per the genesis published markup guide http://my.studiopress.com/docs/genesis-markup-comparison/
Still have the same issue with Home Page, not surprised, as clearly I am missing whatever changes need to be made to the home.php and/or functions.php file
As mentioned, there is no appfinite markup comparison. Downloaded Latest Epik but as it has been completely rewritten in HTML5 there is no way to do a manual comparison for the required .php changes.
I appreciate that this is the SP forum, but if anyone has made the .php changes and is willing to share that would be great
I guess these need to be changed - but beyond my level
genesis_widget_area( 'home-feature-2', array(
'before' => '<div class="home-feature-2">',
) );Thanks in advance
