3 more Widgets on Homepage

This topic is: not resolved

Tagged: widgets

This topic has 15 replies, 3 voices, and was last updated 11 years, 10 months ago by Pinky.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts

March 18, 2013 at 6:48 am #28955

lindebjerg

Member

I have tried to get 3 Widgets to show up in a row on the Homepage, but they float left?

here is a screenshot how I would like it to be

I have setup 3 home featured widget sections. See 3 times "Dekoration" http://dev.buchner-floristik.de/

Here are all my widgets:

/** Register widget areas */
genesis_register_sidebar( array(
'id' => 'slide',
'name' => __( 'Slide', 'mp' ),
'description' => __( 'Soliloquy Slider', 'mp' ),
) );
genesis_register_sidebar( array(
'id' => 'angebot',
'name' => __( 'Angebot', 'mp' ),
'description' => __( 'Hier ein Angebot', 'mp' ),
) );
genesis_register_sidebar( array(
'id' => 'home-featured-1',
'name' => __( 'Home Featured #1', 'mp' ),
'description' => __( 'This is the home featured #1 section.', 'mp' ),
) );
genesis_register_sidebar( array(
'id' => 'home-featured-2',
'name' => __( 'Home Featured #2', 'mp' ),
'description' => __( 'This is the home featured #2 section.', 'mp' ),
) );
genesis_register_sidebar( array(
'id' => 'home-featured-3',
'name' => __( 'Home Featured #3', 'mp' ),
'description' => __( 'This is the home featured #3 section.', 'mp' ),
) );

genesis_register_sidebar( array(
'id' => 'newsletter',
'name' => __( 'Newsletter', 'mp' ),
'description' => __( 'Newsletter anmelde Formular', 'mp' ),
) );
genesis_register_sidebar( array(
'id' => 'blog',
'name' => __( 'Blog', 'mp' ),
'description' => __( 'This is the Blog section.', 'mp' ),
) );

then I have taken CSS style from the Minimum Theme

/* Home Featured
------------------------------------------------------------ */

#home-featured {
	overflow: hidden;
	padding: 60px 0;
	width: 100%;
}

.home-featured-1,
.home-featured-2,
.home-featured-3 {
	float: left;
	margin: 0;
	overflow: hidden;
	text-align: center;
	width: 33%;
}

Here my functions.php

 '',
		'after' => '',
	) );

	genesis_widget_area( 'angebot', array(
		'before' => '',
		'after' => '',
	) );

	genesis_widget_area( 'home-featured-1', array(
			'before' => '',
		) );

	genesis_widget_area( 'home-featured-2', array(
			'before' => '',
		) );

	genesis_widget_area( 'home-featured-3', array(
			'before' => '',
		) );

	genesis_widget_area( 'newsletter', array(
		'before' => '',
		'after' => '',
	) );

	genesis_widget_area( 'blog', array(
		'before' => '',
		'after' => '',
	) );

}

genesis();

I dont know how to get this right, where did I make the wrong code, or?

March 18, 2013 at 6:57 am #28957

AnitaC

Keymaster

I think the third widget needs to float right, but did you put any code in your home.php file?

Need help with customization or troubleshooting? Reach out to me.

March 18, 2013 at 7:08 am #28962

lindebjerg

Member

Yes, here my whole css and home.php
here I have made the third widget to float right, but still I am missing something?

<?php
/**
 * Controls the homepage output.
 */

add_action( 'wp_enqueue_scripts', 'mp_enqueue_scripts' );
/**
 * Enqueue Scripts
 */
function mp_enqueue_scripts() {

	if ( is_active_sidebar( 'slide' ) || is_active_sidebar( 'angebot' ) || is_active_sidebar( 'blog' ) ) {
		wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );
		wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
		wp_enqueue_script( 'scroll', get_stylesheet_directory_uri() . '/js/scroll.js', array( 'localScroll' ), '', true );
	}
}

add_action( 'genesis_meta', 'mp_home_genesis_meta' );
/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 */
function mp_home_genesis_meta() {
	if ( is_active_sidebar( 'slide' ) || is_active_sidebar( 'angebot' ) || is_active_sidebar( 'newsletter' ) || is_active_sidebar( 'blog' ) || is_active_sidebar( 'home-featured-1' ) || is_active_sidebar( 'home-featured-2' ) || is_active_sidebar( 'home-featured-3' ) ) {

		// Force content-sidebar layout setting
		add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

		// Add mp-home body class
		add_filter( 'body_class', 'mp_body_class' );
		function mp_body_class( $classes ) {
			$classes[] = 'mp-home';
			return $classes;
		}
		
		// Remove the navigation menus
		remove_action( 'genesis_after_header', 'genesis_do_nav' );

		// Remove the default Genesis loop
		remove_action( 'genesis_loop', 'genesis_do_loop' );

		// Add homepage widgets
		add_action( 'genesis_loop', 'mp_homepage_widgets' );

	}

}

function mp_homepage_widgets() {
	
	genesis_widget_area( 'slide', array(
		'before' => '<div id="slide"><div class="wrap">',
		'after' => '</div></div>',
	) );

	genesis_widget_area( 'angebot', array(
		'before' => '<div id="angebot"><div class="wrap">',
		'after' => '</div></div>',
	) );
	
	genesis_widget_area( 'home-featured-1', array(
			'before' => '<div id="home-featured"><div class="wrap">',
		) );
	
	genesis_widget_area( 'home-featured-2', array(
			'before' => '<div id="home-featured"><div class="wrap">',
		) );
	
	genesis_widget_area( 'home-featured-3', array(
			'before' => '<div id="home-featured"><div class="wrap">',
		) );
	
	genesis_widget_area( 'newsletter', array(
		'before' => '<div id="newsletter"><div class="wrap">',
		'after' => '</div></div>',
	) );

	genesis_widget_area( 'blog', array(
		'before' => '<div id="blog"><div class="wrap">',
		'after' => '</div></div>',
	) );

}


genesis();

/*
	Theme Name: Modern Portfolio Child Theme
	Theme URI: http://my.studiopress.com/themes/modern-portfolio/
	Description: Minimialist, mobile-responsive theme created for the Genesis Framework.
	Author: StudioPress
	Author URI: http://www.studiopress.com/

	Version: 1.0.1

	Tags: black, white, one-column, two-columns, fixed-width, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready

	Template: genesis
	Template Version: 1.9

	License: GPL-2.0+
	License URI: http://www.opensource.org/licenses/gpl-license.php 
*/
 

/* Table of Contents

	01 Import Fonts
	02 Defaults
	03 Typography
		- Font Color
		- Font Family
		- Font Size
		- Font Miscellaneous
	04 Layout
		- Structure
		- 1080px CSS Grid
		- Header
		- Homepage
		- Main Content
		- Post Info & Meta
		- Column Classes
		- Miscellaneous
	05 Menus
		- Primary Navigation Extras
	06 Headings
	07 Lists
	08 Post Navigation
	09 Comments
	10 Sidebars
	11 Footer
		- Footer Widgets
	12 Forms & Buttons
		- Gravity Forms
	13 Images & Captions
	13.1 Extras Lindebjerg
	14 Media Queries
		- max-width: 1024px
		- max-width: 768px
		- max-width: 480px

*/


/*
01 Import Fonts
---------------------------------------------------------------------------------------------------- */

@import url(http://fonts.googleapis.com/css?family=Lato:300,400|Merriweather:300,400);


/*
02 Defaults
---------------------------------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
input, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	font-size: 100%; /* 16px browser default */
}

body {
	background-color: #fff;
	line-height: 1;
}

body,
input,
select,
textarea,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
#home-featured .wrap,
#slide .wrap,
#blog .wrap,
#footer-widgets,
#inner,
#angebot .wrap,
#newsletter .wrap {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

a,
a:visited,
button,
input[type="button"],
input[type="submit"],
.btn,
#home-featured img,
#blog img,
#angebot img {
	-moz-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

::-moz-selection {
	background-color: #222;
	color: #fff;
}

::selection {
	background-color: #222;
	color: #fff;
}

a img {
	border: none;
}


/*
03 Typography
-------------------------------------------------------------------------------------------------------

	This section covers font colors, families, size, styles and weight.

	This style sheet uses rem values with a pixel fallback.
	The rem values are calculated per the examples below:

	12 / 16 =		0.75rem
	14 / 16 =		0.875rem
	16 / 16 =		1rem	
	18 / 16 =		1.125rem
	20 / 16 =		1.25rem
	24 / 16 =		1.5rem
	30 / 16 =		1.875rem
	36 / 16 =		2.25rem
	42 / 16 =		2.625rem
	48 / 16 =		3rem
	
	Further reading on the use and compatibility of rems:
	
	http://caniuse.com/rem
	http://snook.ca/archives/html_and_css/font-size-with-rem
	
*/

/* 03a - Font Color ----------- */

a:hover,
body,
h2 a,
h2 a:visited,
h4.widgettitle a,
input,
.genesis-nav-menu a,
.genesis-nav-menu a:visited,
.genesis-nav-menu li li a,
.genesis-nav-menu li li a:link,
.genesis-nav-menu li li a:visited,
.post-comments,
.post-info a,
.post-meta a,
#footer a,
#title a,
#title a:hover {
	color: #222;
}

a,
h2 a:hover,
.genesis-nav-menu li.right a:hover,
.post-info a:hover,
.post-meta a:hover,
#footer a:hover,
#header .genesis-nav-menu li a:hover {
	color: #cb1024;
}

blockquote::before,
blockquote p,
input,
select,
textarea,
.post-info,
.post-meta {
	color: #888;
}

.footer-widgets a {
	color: #aaa;
}

a.cta-button,
a.landing-button,
a.social-buttons,
button,
input[type="button"],
input[type="submit"],
.btn,
.enews,
.footer-widgets,
.footer-widgets a:hover,
.genesis-nav-menu li a:hover,
.genesis-nav-menu li li a:hover,
.genesis-nav-menu .highlight-menu-item a,
.genesis-nav-menu .highlight-menu-item a:hover,
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled,
#slide,
#newsletter {
	color: #fff;
}

a.cta-button:hover,
a.social-buttons:hover,
.sidebar .enews-widget input:hover[type="submit"] {
	color: #222;
}

/* 03b - Font Family ----------- */

body,
input,
textarea,
.author-box h1,
#title {
	font-family: 'Lato', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title a,
#title a::before {
	font-family: 'Merriweather', serif;
}

/* 03c - Font Size ----------- */

h1,
.entry-title,
.entry-title a {
	font-size: 36px;
	font-size: 2.25rem;
}

blockquote::before {
	font-size: 32px;
	font-size: 2rem;
}

h2 {
	font-size: 30px;
	font-size: 1.875rem;
}

h3,
h4,
.archive-title,
.taxonomy-description h1,
.widgettitle,
#title {
	font-size: 24px;
	font-size: 1.5rem;
}

h5,
h6,
.archive-title,
.author-box h1,
.footer-widgets .widgettitle,
.sidebar h2 a,
.taxonomy-description h1,
#slide,
#blog,
#newsletter {
	font-size: 20px;
	font-size: 1.25rem;
}

body,
.featuredpost h2 a {
	font-size: 18px;
	font-size: 1.125rem;
}

input,
select,
textarea,
.comment-header,
.featuredpost p,
.post-info,
.post-meta,
.wp-caption {
	font-size: 16px;
	font-size: 1rem;
}

a.social-buttons {
	font-size: 14px;
	font-size: 0.875rem;
}

/* 03d - Font Miscellaneous ----------- */

cite {
	font-style: normal;
}

body,
input,
#title {
	font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
.wp-caption {
	font-weight: 400;
}

a.landing-button,
.wp-caption {
	text-align: center;
}

a.cta-button,
a.landing-button,
a.social-buttons,
h2 a,
h2 a:visited,
.genesis-nav-menu a,
.navigation li a,
.widgettitle a,
#title a {
	text-decoration: none;
}

#title {
	text-transform: lowercase;
}

#title a::before {
	text-transform: uppercase;
}


/*
04 Layout
---------------------------------------------------------------------------------------------------- */

/* 04a - Structure ----------- */

.wrap,
#header,
#inner {
	margin: 0 auto;
	max-width: 1080px;
}

.mp-landing #inner {
	border: 1px solid #222;
	max-width: 700px;
	margin: 32px auto;
	margin: 2rem auto;
	padding: 48px 64px 0;
	padding: 3rem 4rem 0;
}

#inner {
	clear: both;
	overflow: hidden;
	padding: 64px 0 16px;
	padding: 4rem 0 1rem;
}

.mp-home #inner {
	padding: 0;
	max-width: 100%;
}

/* 04b - 1080px CSS Grid ----------- */

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar,
#blog .featuredpost .post:nth-of-type(3n+0),
#blog .featuredpost .post:nth-of-type(3n+1),
#blog .featuredpost .post:nth-of-type(3n+2),
#home-featured .featuredpost .post:nth-of-type(3n+0),
#home-featured .featuredpost .post:nth-of-type(3n+1),
#home-featured .featuredpost .post:nth-of-type(3n+2),
#angebot .featuredpost .post:nth-of-type(3n+0),
#angebot .featuredpost .post:nth-of-type(3n+1),
#angebot .featuredpost .post:nth-of-type(3n+2),
#newsletter .alignright,
#title-area {
	width: 29.629629629%; /* 320px / 1080px */
}

#content,
#header .widget-area,
#newsletter .alignleft {
	width: 64.814814814%; /* 700px / 1080px */
}

.full-width-content #content,
#content-sidebar-wrap {
	width: 100%; /* 1080px / 1080px */
}

.footer-widgets-1,
.footer-widgets-2,
.sidebar-content #sidebar,
#blog .featuredpost .post:nth-of-type(3n+1),
#blog .featuredpost .post:nth-of-type(3n+2),
#content,
#content-sidebar-wrap,
#footer .gototop,
#home-featured .home-featured-1,
#home-featured .home-featured-2,
#angebot .featuredpost .post:nth-of-type(3n+1),
#angebot .featuredpost .post:nth-of-type(3n+2),
#sidebar-alt,
#title-area {
	float: left;
}

.footer-widgets-3,
.sidebar,
.sidebar-content #content,
#blog .featuredpost .post:nth-of-type(3n+0),
#footer .creds,
#header .widget-area,
#home-featured .home-featured-3,
#angebot .featuredpost .post:nth-of-type(3n+0) {
	float: right;
}

.footer-widgets-1,
#blog .featuredpost .post:nth-of-type(3n+1),
#home-featured .home-featured-1,
#angebot .featuredpost .post:nth-of-type(3n+1) {
	margin-right: 5.555555555%; /* 60px / 1080px */
}

/* 04c - Header ----------- */

#header {
	border-bottom: 1px solid #222;
	overflow: hidden;
	padding: 32px 0;
	padding: 2rem 0;
}

.mp-home #header {
	border: none;
}

#title-area {
	padding: 12px 0;
	padding: 0.75rem 0;
}

.header-image #header,
.header-image #title-area {
	padding: 0;
}

#title,
#title a {
	cursor: pointer;
	display: block;
	line-height: 1;
	margin: 0;
}

#title a::before {
	background-color: #222;
	border-radius: 50%;
	color: #fff;
	content: "M"; /* Used to display the letter in the header logo */
	cursor: pointer;
	display: inline-block;
	height: 58px;
	line-height: 2.5;
	margin-right: 16px;
	margin-right: 1rem;
	padding: 3px 4px;
	padding: 0.1875rem 0.25rem;
	text-align: center;
	width: 58px;
}

#title a:hover::before {
	background-color: #cb1024;
}

.header-full-width #title,
.header-full-width #title a,
.header-full-width #title-area {
	width: 100%;
}

.header-image #title,
.header-image #title a,
.header-image #title-area {
	display: block;
	float: left;
	min-height: 120px;
	overflow: hidden;
	text-indent: -9999px;
}

.header-image #title,
.header-image #title a {
	width: 100%;
}

/* Home Featured
------------------------------------------------------------ */

#home-featured {
	overflow: hidden;
	padding: 60px 0;
	width: 100%;
}

.home-featured-1,
.home-featured-2,
.home-featured-3 {
	float: left;
	margin: 0;
	overflow: hidden;
	text-align: center;
	width: 33%;
}

/* 04d - Homepage ----------- */

#slide,
#blog,
#angebot,
#home-featured,
#newsletter {
	clear: both;
	overflow: hidden;
}

#slide {
	background-color: #E0E05A;
}

#newsletter {
	background-color: #F7C41F;
}

#slide,
#newsletter {
	padding: 64px 0;
	padding: 4rem 0;
}

#blog,
#angebot,
#home-featured {
	padding: 64px 0 16px;
	padding: 4rem 0 1rem;
}

/* 04e - Main Content ----------- */

#content {
	padding-bottom: 48px;
	padding-bottom: 3rem;
}

.mp-home #content {
	padding: 0;
}

.entry,
.page .post.entry {
	margin-bottom: 80px;
	margin-bottom: 5rem;
}

.mp-home .featuredpost .entry,
.single .entry {
	margin-bottom: 48px;
	margin-bottom: 3rem;
}

.page .entry {
	margin: 0;
}

.entry-content {
	overflow: hidden;
}

.featuredpost .entry p {
	line-height: 1.5;
}

.entry-content,
.entry-content p,
#slide,
#newsletter {
	line-height: 1.625;
}

.entry-content p {
	margin-bottom: 26px;
	margin-bottom: 1.625rem;
}

blockquote {
	padding: 24px 64px;
	padding: 1.5rem 4rem;
}

blockquote::before {
	content: "“";
	display: block;
	height: 0;
	left: -20px;
	position: relative;
	top: -10px;
}

/* 04f - Post Info & Meta ----------- */

.post-info,
.post-meta {
	clear: both;
	line-height: 1.5;
}

.post-info {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
}

.post-comments {
	background: url(images/post-comments.png) no-repeat center left;
	margin-left: 16px;
	margin-left: 1rem;
	padding-left: 20px;
	padding-left: 1.25rem;
}

.post-meta::before {
	border-top: 1px solid #222;
	content: "";
	display: block;
	padding-bottom: 32px;
	padding-bottom: 2rem;
	width: 10%;
}

.categories,
.tags {
	display: block;
}

/* 04g - Column Classes ----------- */

.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
	float: left;
	margin-left: 4.166666666%; /* 48px / 1152px */
}

.one-half,
.three-sixths,
.two-fourths {
	width: 47.9166666666%; /* 552px / 1152px */
}

.one-third,
.two-sixths {
	width: 30.555555555%; /* 352px / 1152px */
}

.four-sixths,
.two-thirds {
	width: 65.277777777%; /* 752px / 1152px */
}

.one-fourth {
	width: 21.875%; /* 252px / 1152px */
}

.three-fourths {
	width: 73.958333333%; /* 852px / 1152px */
}

.one-fifth {
	width: 16.666666666%; /* 192px / 1152px */
}

.two-fifths {
	width: 37.5%; /* 432px / 1152px */
}

.three-fifths {
	width: 58.333333333%; /* 672px / 1152px */
}

.four-fifths {
	width: 79.166666666%; /* 912px / 1152px */
}

.one-sixth {
	width: 13.194444444%; /* 152px / 1152px */
}

.five-sixths {
	width: 82.638888888%; /* 952px / 1152px */
}

.first {
	margin-left: 0;
}

/* 04h - Miscellaneous ----------- */

a.social-buttons {
	background-color: #888;
	float: left;
	margin: 0 4px 4px 0;
	margin: 0 0.25rem 0.25rem 0;
	overflow: hidden;
	padding: 4px 8px;
	padding: 0.25rem 0.5rem;
}

a.social-buttons:hover {
	background-color: #fff;
}

p.subscribe-to-comments {
	padding: 24px 0 16px;
	padding: 1.5rem 0 1rem;
}

p.pages,
.clear,
.clear-line,
.first {
	clear: both;
}

.clear-line {
	border-bottom: 1px solid #222;
	margin-bottom: 26px;
	margin-bottom: 1.625rem;
}

.alignleft,
.archive-page {
	float: left;
}

.alignright {
	float: right;
}

.archive-page {
	width: 50%;
}

.author-box,
.sticky {
	margin-bottom: 80px;
	margin-bottom: 5rem;
}

.author-box,
.author-box h1,
.taxonomy-description {
	line-height: 1.5;
}

.author-box,
.sticky,
.taxonomy-description {
	background-color: #f5f5f5;
	margin-bottom: 48px;
	margin-bottom: 3rem;
	overflow: hidden;
	padding: 32px;
	padding: 2rem;
}

#angebot .sticky {
	background: none;
	margin: 0;
	padding: 0;
}

.breadcrumb {
	border-bottom: 1px solid #222;
	margin-bottom: 48px;
	margin-bottom: 3rem;
	overflow: hidden;
	padding: 8px 0 24px;
	padding: 0.5rem 0 1.5rem;
}


/*
05 Menus
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {
	clear: both;
	overflow: hidden;
}

#header .genesis-nav-menu {
	float: right;
	margin-top: 10px;
	margin-top: 0.625rem;
	width: auto;
}

.genesis-nav-menu.menu-primary,
.genesis-nav-menu.menu-secondary {
	border-bottom: 1px solid #222;
}

.genesis-nav-menu ul {
	float: left;
	width: 100%;
}

.genesis-nav-menu li {
	display: inline-block;
	float: left;
	list-style-type: none;
	text-align: left;
}

.genesis-nav-menu a {
	display: block;
	padding: 24px 20px;
	padding: 1.5rem 1.25rem;
	position: relative;
}

.genesis-nav-menu li.highlight-menu-item {
	margin-left: 20px;
	margin-left: 1.25rem;
}

.genesis-nav-menu .highlight-menu-item a {
	background-color: #222;
}

.genesis-nav-menu .highlight-menu-item a:hover {
	background-color: #cb1024;
}

.genesis-nav-menu li li a,
.genesis-nav-menu li li a:link,
.genesis-nav-menu li li a:visited {
	background-color: #fff;
	border: 1px solid #222;
	border-top: none;
	padding: 20px;
	padding: 1.25rem;
	position: relative;
	width: 160px;
}

.genesis-nav-menu li a:hover,
.genesis-nav-menu li li a:hover {
	background-color: #222;
}

#header .genesis-nav-menu li a:hover {
	background: none;
}

.genesis-nav-menu li ul {
	left: -9999px;
	position: absolute;
	width: 202px;
	z-index: 99;
}

.genesis-nav-menu li ul ul {
	margin: -59px 0 0 201px;
}

.genesis-nav-menu li:hover ul ul,
.genesis-nav-menu li.sfHover ul ul {
	left: -9999px;
}

.genesis-nav-menu li:hover,
.genesis-nav-menu li.sfHover {
	position: static;
}

ul.genesis-nav-menu li:hover>ul,
ul.genesis-nav-menu li.sfHover ul,
#header .genesis-nav-menu li:hover>ul,
#header .genesis-nav-menu li.sfHover ul {
	left: auto;
}

.genesis-nav-menu li a .sf-sub-indicator,
.genesis-nav-menu li li a .sf-sub-indicator,
.genesis-nav-menu li li li a .sf-sub-indicator {
	position: absolute;
	text-indent: -9999px;
}

#wpadminbar li:hover ul ul {
	left: 0;
}

/* 05a - Primary Navigation Extras ----------- */

.genesis-nav-menu li.right {
	float: right;
	padding: 24px 20px;
	padding: 1.5rem 1.25rem;
}

.genesis-nav-menu li.right a {
	display: inline;
	padding: 0;
}

.genesis-nav-menu li.search {
	padding: 6px 0 0;
	padding: 0.375rem 0 0;
}

.genesis-nav-menu li.rss a {
	background: url(images/rss.png) no-repeat center left;
	margin-left: 20px;
	margin-left: 1.25rem;
	padding-left: 20px;
	padding-left: 1.25rem;
}

.genesis-nav-menu li.twitter a {
	background: url(images/twitter-nav.png) no-repeat center left;
	padding-left: 24px;
	padding-left: 1.5rem;
}


/*
06 Headings
---------------------------------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title a {
	line-height: 1.2;
	margin-bottom: 16px;
	margin-bottom: 1rem;
}

.author-box h1 {
	margin: 0
}

.taxonomy-description h1 {
	margin-bottom: 4px;
	margin-bottom: 0.25rem;
}

.featuredpost h2 {
	margin-bottom: 8px;
	margin-bottom: 0.5rem;
}

.archive-title,
#blog .widgettitle,
#angebot .widgettitle,
#home-featured .widgettitle {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
}


/*
07 Lists
---------------------------------------------------------------------------------------------------- */

.entry-content ol,
.entry-content ul {
	margin-bottom: 26px;
	margin-bottom: 1.625rem;
}

.entry-content ol li,
.entry-content ul li {
	line-height: 1.625;
}

.entry-content ol li,
.entry-content ul li {
	margin-left: 40px;
	margin-left: 2.5rem;
}

.entry-content ol li {
	list-style-type: decimal;
}

.entry-content ul li {
	list-style-type: disc;
}

.entry-content ol ol,
.entry-content ul ul {
	margin-bottom: 0;
}


/*
08 Post Navigation
---------------------------------------------------------------------------------------------------- */

.navigation li {
	display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	background-color: #222;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
	background-color: #cb1024;
}


/*
09 Comments
---------------------------------------------------------------------------------------------------- */

#comments,
#respond {
	line-height: 1.5;
	overflow: hidden;
}

.ping-list,
#comments {
	margin-bottom: 48px;
	margin-bottom: 3rem;
}

#author,
#email,
#url {
	width: 50%;
}

.commentmetadata,
#author,
#email,
#url {
	margin-bottom: 12px;
	margin-bottom: 0.75rem;
}

#comment {
	margin: 12px 0;
	margin: 0.75rem 0;
}

label {
	margin-left: 12px;
	margin-left: 0.75rem;
}

.comment-list li,
.ping-list li {
	list-style-type: none;
	margin-top: 24px;
	margin-top: 1.5rem;
	padding: 32px;
	padding: 2rem;
}

.comment-list li ul li {
	margin-right: -32px;
	margin-right: -2rem;
}

.comment-header {
	overflow: hidden;
}

.comment {
	background-color: #f5f5f5;
	border: 2px solid #fff;
	border-right: none;
}

.comment-content p {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
}

.bypostauthor {
}

#comments .navigation {
	margin-top: 32px;
	margin-top: 2rem;
}


/*
10 Sidebars
---------------------------------------------------------------------------------------------------- */

.sidebar {
	display: inline;
	line-height: 1.5;
	padding-top: 8px;
	padding-top: 0.5rem;
}

.sidebar p {
	margin-bottom: 16px;
	margin-bottom: 1rem;
}

.sidebar .widget {
	margin-bottom: 32px;
	margin-bottom: 2rem;
	overflow: hidden;
}

.sidebar .widget::after {
	border-bottom: 1px solid #222;
	content: "";
	display: block;
	padding-bottom: 32px;
	padding-bottom: 2rem;
	width: 20%;
}

.sidebar.widget-area ul li {
	list-style-type: none;
	margin-bottom: 6px;
	margin-bottom: 0.375rem;
	word-wrap: break-word;
}

.enews {
	background-color: #222;
	margin-bottom: 8px;
	margin-bottom: 0.75rem;
	padding: 32px;
	padding: 2rem;
}

.sidebar .widget.enews-widget::after {
	border-bottom: none;
	padding-bottom: 0;
}


/*
11 Footer
---------------------------------------------------------------------------------------------------- */

#footer {
	border-top: 1px solid #222;
	clear: both;
	overflow: hidden;
	padding: 48px 0;
	padding: 3rem 0;
}

#footer .creds {
	text-align: right;
}

#footer .creds,
#footer .gototop {
	margin: 16px 0;
	margin: 1rem 0;
}

/* 11a - Footer Widgets ----------- */

.footer-widgets {
	background-color: #222;
	clear: both;
	line-height: 1.5;
	overflow: hidden;
	padding: 64px 0 16px;
	padding: 4rem 0 1rem;
}

.footer-widgets p {
	margin-bottom: 16px;
	margin-bottom: 1rem;
}

.footer-widgets .widget {
	margin-bottom: 32px;
	margin-bottom: 2rem;
	overflow: hidden;
}

.footer-widgets .widget-area ul li {
	list-style-type: none;
	margin-bottom: 6px;
	margin-bottom: 0.375rem;
	word-wrap: break-word;
}


/*
12 Forms & Buttons
---------------------------------------------------------------------------------------------------- */

input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: 0 0 5px #ddd inset;
	padding: 16px;
	padding: 1rem;
	width: 100%;
}

#header .search-form {
	float: right;
	margin-top: 56px;
	margin-top: 3.5rem;
	width: 100%;
}

.sidebar .enews-widget input {
	background-color: #fff;
	box-shadow: none;
}

a.cta-button,
a.landing-button,
button,
input[type="button"],
input[type="submit"],
.btn {
	background-color: #222;
	border: none;
	box-shadow: none;
	cursor: pointer;
	padding: 16px 24px;
	padding: 1rem 1.5rem;
	width: auto;
}

a.cta-button {
	float: right;
	margin-top: -32px;
	margin-top: -2rem;
	padding: 20px 24px;
	padding: 1.25rem 1.5rem;
}

a.landing-button {
	margin-top: 16px;
	margin-top: 1rem;
}

a.cta-button,
a.landing-button:hover,
button:hover,
input:hover[type="button"],
input:hover[type="submit"],
.btn:hover,
.sidebar .enews-widget input[type="submit"] {
	background-color: #cb1024;
}

.sidebar .enews-widget input {
	margin-bottom: 8px;
	margin-bottom: 0.75rem;
}

.sidebar .enews-widget input[type="submit"] {
	display: block;
	margin: 0 auto;
	padding: 16px;
	padding: 1rem;
	width: 100%;
}

a.cta-button:hover,
.sidebar .enews-widget input:hover[type="submit"] {
	background-color: #fff;
}

.search-form input[type="submit"] {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* 12a - Gravity Forms ----------- */

#content div.gform_wrapper input,
#content div.gform_wrapper select,
#content div.gform_wrapper textarea,
#content div.gform_wrapper .ginput_complex label {
	font-size: 16px;
	font-size: 1rem;
	padding: 16px;
	padding: 1rem;
}

#content div.gform_wrapper input[type="submit"] {
	padding: 16px 24px;
	padding: 1rem 1.5rem;
}

#content div.gform_wrapper .ginput_complex label {
	padding: 0;
}

div.gform_wrapper li,
div.gform_wrapper form li {
	margin: 16px 0 0;
	margin: 1rem 0 0;
}


/*
13 Images & Captions
---------------------------------------------------------------------------------------------------- */

embed,
img,
object,
video,
.wp-caption {
	max-width: 100%;
}

img {
	height: auto;
}

#blog img,
#angebot img,
#home-featured img {
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
	opacity: 0.8;
}

#blog img:hover,
#angebot img:hover,
home-featured img:hover{
	opacity: 1;
}

.alignleft .avatar {
	margin-right: 24px;
	margin-right: 1.5rem;
}

.alignright .avatar {
	margin-left: 24px;
	margin-left: 1.5rem;
}

.author-box .avatar {
	float: left;
	margin-right: 24px;
	margin-right: 1.5rem
}

.comment-list li .avatar {
	float: left;
	margin: 0 16px 24px 0;
	margin: 0 1rem 1.5rem 0;
}

img.centered,
.aligncenter {
	display: block;
	margin: 0 auto 24px;
	margin: 0 auto 1.5rem
}

img.alignnone {
	display: inline;
	margin-bottom: 12px;
	margin-bottom: 0.75rem;
}

img.alignleft,
.post-image,
.wp-caption.alignleft {
	display: inline;
	margin: 0 24px 24px 0;
	margin: 0 1.5rem 1.5rem 0;
}

img.alignright,
.wp-caption.alignright {
	display: inline;
	margin: 0 0 24px 24px;
	margin: 0 0 1.5rem 1.5rem;
}

p.wp-caption-text {
	line-height: 1.2;
	margin-top: 12px;
	margin-top: 0.75rem;
}

.gallery-caption {
}

/*
13.1 Extras Lindebjerg
---------------------------------------------------------------------------------------------------- */
#header .menu li.home a {
	background: url(images/home.png)!important;
	margin-top: 18px;
	height: 55px;
	padding: 0;
	text-indent: -9999px;
	width: 55px;
}

#header .menu li.home a:active,
#header .menu li.home a:hover {
	background: url(images/home-2.png)!important;
	margin-top: 18px;
	height: 55px;
	padding: 0;
	text-indent: -9999px;
	width: 55px;
}

/*
14 Media Queries
---------------------------------------------------------------------------------------------------- */

/* Desktops, laptops and iPads (landscape) ----------- */

@media only screen and (max-width: 1024px) {

	.wrap,
	#inner {
		max-width: 960px;
	}

}

/* iPads (portrait) ----------- */

@media only screen and (max-width: 768px) {
	#home-featured {
		padding: 30px 0 0;
	}
	
	.home-featured-1,
	.home-featured-2,
	.home-featured-3 {
		padding: 0 0 30px;
		width: 100%;
	}
	
	#inner {
		padding: 32px 5%;
		padding: 2rem 5%;
	}
	
	.footer-widgets {
		padding: 64px 5% 32px;
		padding: 4rem 5% 2rem;
	}

	#slide .wrap,
	#blog .wrap,
	#angebot .wrap,
	#newsletter .wrap,
	#img:hover .wrap {
		padding: 0 5%;
	}
	
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.wrap,
	#footer .creds,
	#footer .gototop,
	#header .widget-area,
	#inner,
	#newsletter .alignleft,
	#newsletter .alignright,
	#title-area,
	#wrap .sidebar,
	#wrap #content,
	#wrap #content-sidebar-wrap,
	#wrap #sidebar-alt {
		width: 100% !important;
	}

	.genesis-nav-menu li,
	#footer .creds,
	#footer .gototop,
	#header ul.genesis-nav-menu,
	#header .search-form {
		float: none;
	}

	.genesis-nav-menu,
	#footer .creds,
	#footer .gototop,
	#header .search-form,
	#title,
	#title-area {
		text-align: center;
	}
	
	#header {
		padding: 0;
	}

	#title-area {
		padding: 12px 0 0;
		padding: 0.75rem 0 0;
	}

	#title {
		margin: 16px 0;
		margin: 1rem 0;
	}

	#header .search-form {
		margin: 32px auto 0;
		margin: 2rem auto 0;
		width: 50%;
	}

	.genesis-nav-menu a {
		padding: 20px 16px;
		padding: 1.25rem 1rem;
	}

	.genesis-nav-menu li.right {
		display: none;
	}

	.mp-landing #inner {
		border: none;
	}

	a.cta-button {
		float: none;
		line-height: 6;
	}

	#footer {
		padding: 24px 0;
		padding: 1.5rem 0;
	}

	.footer-widgets-1,
	#header .genesis-nav-menu {
		margin: 0;
	}

}

/* iPhones (portrait and landscape) ----------- */

@media only screen and (max-width: 480px) {

	html {
		font-size: 87.5%; /* 14px base */
	}

	#title a::before {
		height: 50px;
		width: 50px;
	}

	#blog .featuredpost .post:nth-of-type(3n+0),
	#blog .featuredpost .post:nth-of-type(3n+1),
	#blog .featuredpost .post:nth-of-type(3n+2),
	#angebot .featuredpost .post:nth-of-type(3n+0),
	#angebot .featuredpost .post:nth-of-type(3n+1),
	#angebot .featuredpost .post:nth-of-type(3n+2),
	#header .search-form {
		width: 100%;
	}

	.archive-page,
	.five-sixths,
	.four-fifths,
	.four-sixths,
	.one-fifth,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fifths,
	.three-fourths,
	.three-sixths,
	.two-fifths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}

}
@media only screen and (max-width: 300px) {

	.home-featured-1,
	.home-featured-2,
	.home-featured-3 {
		padding: 0 0 30px;
		width: 100%;
	}

}

March 18, 2013 at 7:26 am #28964

AnitaC

Keymaster

In your Home.php - you have each widget in a separate DIV. I believe they all need to be in one DIV, floating 1, 2 - left and 3 right.

Need help with customization or troubleshooting? Reach out to me.

March 18, 2013 at 7:30 am #28965

lindebjerg

Member

okay, ? but how then.... I have no idear how to wrap it together that it works, it just break or show nothing when I try to make it different.

March 18, 2013 at 7:48 am #28967

AnitaC

Keymaster

I just sent out a Tweet to see if I can get someone more experienced to help with that. Give it a little time, someone will respond.

Need help with customization or troubleshooting? Reach out to me.

March 18, 2013 at 7:53 am #28969

lindebjerg

Member

thanks anitac, I hope you reach someone:)

March 18, 2013 at 8:04 am #28972

Pinky

Member

Hi there

functions.php looks fine to me.

You just need to call the functions into the home.php

On the home page replace this:

genesis_widget_area( 'home-featured-1', array(
            'before' => '<div id="home-featured"><div class="wrap">',
        ) );

    genesis_widget_area( 'home-featured-2', array(
            'before' => '<div id="home-featured"><div class="wrap">',
        ) );

    genesis_widget_area( 'home-featured-3', array(
            'before' => '<div id="home-featured"><div class="wrap">',
        ) );

    genesis_widget_area( 'newsletter', array(
        'before' => '<div id="newsletter"><div class="wrap">',
        'after' => '</div></div>',
    ) );

    genesis_widget_area( 'blog', array(
        'before' => '<div id="blog"><div class="wrap">',
        'after' => '</div></div>',
    ) );

with this :

	echo '<div id="home-featured"><div class="wrap">';

		genesis_widget_area( 'home-featured-1', array(
			'before' => '<div class="home-featured-1 widget-area">',
		) );

		genesis_widget_area( 'home-featured-2', array(
			'before' => '<div class="home-featured-2 widget-area">',
		) );

		genesis_widget_area( 'home-featured-3', array(
			'before' => '<div class="home-featured-3 widget-area">',
		) );

	echo '</div><!-- end .wrap --></div><!-- end #home-featured -->';

The css should be ok as it is but if it gives you problems once you've done all of the above, then try this:

/* Home Featured
------------------------------------------------------------ */

#home-featured {
    overflow: hidden;
    padding: 60px 0;
    width: 100%;
}

.home-featured-1,
.home-featured-2 {
    float: left;
    margin: 0;
    overflow: hidden;
    text-align: center;
    width: 33%;
}

.home-featured-3 {
    float: right;
    margin: 0;
    overflow: hidden;
    text-align: center;
    width: 33%;
}

cheers

Pinky

March 18, 2013 at 8:08 am #28974

AnitaC

Keymaster

@pinky thanks! I can rationalize what needs to be done, but can't code it!

Need help with customization or troubleshooting? Reach out to me.

March 18, 2013 at 8:39 am #28986

Pinky

Member

lol... @ anita I actually didn't realise I'm such a nerd until I started answering some of these questions!

hehe - you sure can design tho!

cheers

Pinky

March 18, 2013 at 8:40 am #28989

AnitaC

Keymaster

I can design a little bit. I didn't realize how much I knew until I started participating on the board a lot.

Need help with customization or troubleshooting? Reach out to me.

March 18, 2013 at 9:07 am #28994

lindebjerg

Member

You are sooooo great, I love Studiopress:)
cheers and thanks
jesper

March 18, 2013 at 9:15 am #29002

AnitaC

Keymaster

@lindebjerg let us know how it turns out.

Need help with customization or troubleshooting? Reach out to me.

March 18, 2013 at 9:47 am #29014

lindebjerg

Member

perfect, ready:) I works perfect now. The Homepage are now half minimum theme/half modern-portfolio theme.
thank you for fast support

March 18, 2013 at 9:55 am #29017

AnitaC

Keymaster

I see it. It looks great!

Need help with customization or troubleshooting? Reach out to me.

March 18, 2013 at 10:05 am #29020

Pinky

Member

so glad it worked out... loving the colours!

cheers

Pinky

Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

3 more Widgets on Homepage

Welcome!

Products

Company

Community

Resources

Connect

Forum navigation

Are You Using The WordPress Block Editor?

Welcome!

Footer

Products

Company

Community

Resources

Connect