3 more Widgets on Homepage

Community Forums Forums Design Tips and Tricks 3 more Widgets on Homepage

This topic is: not resolved

Tagged: 

This topic contains 15 replies, has 3 voices, and was last updated by  Pinky 1 year, 7 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #28955

    lindebjerg
    Participant
    Post count: 42

    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:

    [php]
    /** 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’ ),
    ) );
    [/php]

    then I have taken CSS style from the Minimum Theme

    [css]
    /* 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%;
    }[/css]

    Here my functions.php

    [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();[/php]

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

    #28957

    AC
    Blocked
    Post count: 7712

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

    #28962

    lindebjerg
    Participant
    Post count: 42

    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]<?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();[/php]

    [css]
    /*
    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%;
    }

    }[/css]

    #28964

    AC
    Blocked
    Post count: 7712

    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.

    #28965

    lindebjerg
    Participant
    Post count: 42

    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.

    #28967

    AC
    Blocked
    Post count: 7712

    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.

    #28969

    lindebjerg
    Participant
    Post count: 42

    thanks anitac, I hope you reach someone:)

    #28972

    Pinky
    Participant
    Post count: 95

    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:

    [php]
    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>’,
    ) );

    [/php]

    with this :

    [php]
    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 –>’;
    [/php]

    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:

    [css]
    /* 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%;
    }
    [/css]


    cheers

    Pinky

    #28974

    AC
    Blocked
    Post count: 7712

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

    #28986

    Pinky
    Participant
    Post count: 95

    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

    #28989

    AC
    Blocked
    Post count: 7712

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

    #28994

    lindebjerg
    Participant
    Post count: 42

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

    #29002

    AC
    Blocked
    Post count: 7712

    @lindebjerg let us know how it turns out.

    #29014

    lindebjerg
    Participant
    Post count: 42

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

    #29017

    AC
    Blocked
    Post count: 7712

    I see it. It looks great!

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

You must be logged in to reply to this topic.