• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Enterprise Pro: Need Responsive Header-Image and title and description.

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Enterprise Pro: Need Responsive Header-Image and title and description.

This topic is: not resolved

Tagged: background, description, header image, title

  • This topic has 10 replies, 4 voices, and was last updated 6 years, 6 months ago by eastsidekeith.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 27, 2016 at 12:51 pm #180075
    hampi52
    Member

    Hi together
    I need help and sorry for mistakes - I am not so familiar with the English language.
    And I only have a small basic knowledge wit CSS and PHP.
    I installed Enterprise Pro and customized the header-image according this description:

    Getting Your Head Around Header Images

    and especially (it doesn't exist for Enterprise pro, so I used Executive Pro)

    Full-Width Responsive Header Logo Image for Executive Pro

    This is the result - it works fine but the title disappeared: http://zukzg.chisana.ch

    That what I want is, that the picture is built-in as a responsive background (instead of a color like the green on the side). So that I have the possibility to add the side-title or a customized logo. I don't know whether this is possible or not.

    Thanks for helping me an kind regards.

    hampi52 from Switzerland

    Here the CSS-Code:

    /*
    Theme Name: Enterprise Pro Theme
    Theme URI: http://my.studiopress.com/themes/enterprise/
    Description: A mobile responsive and HTML5 theme built for the Genesis Framework.
    Author: StudioPress
    Author URI: http://www.studiopress.com/

    Version: 2.1.1

    Tags: black, blue, white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, responsive-layout, custom-menu, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, premise-landing-page

    Template: genesis
    Template Version: 2.1

    License: GPL-2.0+
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */

    /* Table of Contents

    - Imports
    - HTML5 Reset
    - Baseline Normalize
    - Box Sizing
    - Float Clearing
    - Defaults
    - Typographical Elements
    - Headings
    - Objects
    - Gallery
    - Forms
    - Tables
    - Structure and Layout
    - Site Containers
    - Column Widths and Positions
    - Column Classes
    - Common Classes
    - Avatar
    - Genesis
    - Search Form
    - Titles
    - WordPress
    - Widgets
    - Featured Content
    - Plugins
    - Genesis eNews Extended
    - Genesis Responsive Slider
    - Gravity Forms
    - Jetpack
    - Site Header
    - Title Area
    - Widget Area
    - Site Navigation
    - Header Navigation
    - Primary Navigation
    - Secondary Navigation
    - Responsive Menu
    - Content Area
    - Home Page
    - Entries
    - Entry Meta
    - After Entry
    - Pagination
    - Comments
    - Sidebars
    - Footer Widgets
    - Site Footer
    - Theme Colors
    - Enterprise Pro Black
    - Enterprise Pro Green
    - Enterprise Pro Orange
    - Enterprise Pro Red
    - Enterprise Pro Teal
    - Media Queries
    - Retina Display
    - Max-width: 1139px
    - Max-width: 1023px
    - Max-width: 767px

    */

    /*
    Imports
    ---------------------------------------------------------------------------------------------------- */

    @font-face {
    font-family: 'Icon';
    src:url('fonts/Icon.eot');
    src:url('fonts/Icon.eot?#iefix') format('embedded-opentype'),
    url('fonts/Icon.woff') format('woff'),
    url('fonts/Icon.ttf') format('truetype'),
    url('fonts/Icon.svg#Icon') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    /*
    HTML5 Reset
    ---------------------------------------------------------------------------------------------------- */

    /* Baseline Normalize
    normalize.css v2.1.3 | MIT License | git.io/normalize
    --------------------------------------------- */

    article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

    /* Box Sizing
    --------------------------------------------- */

    *,
    input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    /* Float Clearing
    --------------------------------------------- */

    .author-box:before,
    .clearfix:before,
    .entry:before,
    .entry-content:before,
    .footer-widgets:before,
    .nav-primary:before,
    .nav-secondary:before,
    .pagination:before,
    .site-container:before,
    .site-footer:before,
    .site-header:before,
    .site-inner:before,
    .wrap:before {
    content: " ";
    display: table;
    }

    .author-box:after,
    .clearfix:after,
    .entry:after,
    .entry-content:after,
    .footer-widgets:after,
    .nav-primary:after,
    .nav-secondary:after,
    .pagination:after,
    .site-container:after,
    .site-footer:after,
    .site-header:after,
    .site-inner:after,
    .wrap:after {
    clear: both;
    content: " ";
    display: table;
    }

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

    /* Typographical Elements
    --------------------------------------------- */

    body {
    background-color: #fff;
    color: #777;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    line-height: 1.625;
    }

    a,
    button,
    input:focus,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    textarea:focus,
    .button {
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    }

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

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

    a {
    color: #31b2ed;
    text-decoration: none;
    }

    a:hover {
    color: #333;
    }

    p {
    margin: 0 0 24px;
    padding: 0;
    }

    strong {
    font-weight: 700;
    }

    ol,
    ul {
    margin: 0;
    padding: 0;
    }

    li {
    list-style-type: none;
    }

    blockquote,
    blockquote::before {
    color: #999;
    }

    blockquote {
    margin: 40px;
    }

    blockquote::before {
    content: "\201C";
    display: block;
    font-size: 30px;
    height: 0;
    left: -20px;
    position: relative;
    top: -10px;
    }

    cite {
    font-style: normal;
    }

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

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    color: #333; /* Hier können Titelfarben geändert werden. Original: #333; */
    font-family: 'Titillium Web', sans-serif; /* Hier können Titelschriftarten geändert werden. Original: 'Titillium Web' */
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 10px;
    }

    h1 {
    font-size: 36px;
    }

    h2 {
    font-size: 30px;
    }

    h3 {
    font-size: 24px;
    }

    h4 {
    font-size: 20px;
    }

    h5 {
    font-size: 18px;
    }

    h6 {
    font-size: 16px;
    }

    /* Objects
    --------------------------------------------- */

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

    img {
    height: auto;
    }

    .featured-content img,
    .gallery img {
    width: auto;
    }

    /* Gallery
    --------------------------------------------- */

    .gallery {
    overflow: hidden;
    margin-bottom: 28px;
    }

    .gallery-item {
    float: left;
    margin: 0;
    padding: 0 4px;
    text-align: center;
    width: 100%;
    }

    .gallery-columns-2 .gallery-item {
    width: 50%;
    }

    .gallery-columns-3 .gallery-item {
    width: 33%;
    }

    .gallery-columns-4 .gallery-item {
    width: 25%;
    }

    .gallery-columns-5 .gallery-item {
    width: 20%;
    }

    .gallery-columns-6 .gallery-item {
    width: 16.6666%;
    }

    .gallery-columns-7 .gallery-item {
    width: 14.2857%;
    }

    .gallery-columns-8 .gallery-item {
    width: 12.5%;
    }

    .gallery-columns-9 .gallery-item {
    width: 11.1111%;
    }

    .gallery-columns-2 .gallery-item:nth-child(2n+1),
    .gallery-columns-3 .gallery-item:nth-child(3n+1),
    .gallery-columns-4 .gallery-item:nth-child(4n+1),
    .gallery-columns-5 .gallery-item:nth-child(5n+1),
    .gallery-columns-6 .gallery-item:nth-child(6n+1),
    .gallery-columns-7 .gallery-item:nth-child(7n+1),
    .gallery-columns-8 .gallery-item:nth-child(8n+1),
    .gallery-columns-9 .gallery-item:nth-child(9n+1) {
    clear: left;
    }

    .gallery .gallery-item img {
    border: none;
    height: auto;
    }

    /* Forms
    --------------------------------------------- */

    input,
    select,
    textarea {
    background-color: #fff;
    border: 1px solid #ececec;
    border-radius: 3px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.06);
    color: #aaa;
    font-size: 16px;
    font-weight: 400;
    padding: 16px;
    width: 100%;
    }

    input:focus,
    textarea:focus {
    border: 1px solid #999;
    outline: none;
    }

    input[type="checkbox"],
    input[type="image"],
    input[type="radio"] {
    width: auto;
    }

    ::-moz-placeholder {
    color: #666;
    opacity: 1;
    font-weight: 400;
    }

    ::-webkit-input-placeholder {
    color: #666;
    font-weight: 400;
    }

    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    .button,
    .home-top .more-link {
    background-color: #31b2ed;
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    padding: 16px 24px;
    width: auto;
    }

    button:hover,
    input:hover[type="button"],
    input:hover[type="reset"],
    input:hover[type="submit"],
    .button:hover,
    .home-top .more-link:hover {
    background-color: #333;
    color: #fff;
    }

    .entry-content .button:hover,
    .footer-widgets .button {
    color: #fff;
    }

    .button {
    display: inline-block;
    }

    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button {
    display: none;
    }

    /* Tables
    --------------------------------------------- */

    table {
    border-collapse: collapse;
    border-spacing: 0;
    line-height: 2;
    margin-bottom: 40px;
    width: 100%;
    }

    tbody {
    border-bottom: 1px solid #ddd;
    }

    td,
    th {
    text-align: left;
    }

    td {
    border-top: 1px solid #ddd;
    padding: 6px 0;
    }

    th {
    font-weight: 700;
    text-transform: uppercase;
    }

    /*
    Structure and Layout
    ---------------------------------------------------------------------------------------------------- */

    /* Site Containers
    --------------------------------------------- */

    .wrap {
    margin: 0 auto;
    max-width: 1140px;
    }

    .enterprise-pro-landing .wrap {
    max-width: 800px;
    }

    .site-inner {
    background-color: #f5f5f5;
    border-top: 1px solid #ececec;
    clear: both;
    padding-top: 40px;
    }

    /* Column Widths and Positions
    --------------------------------------------- */

    /* Wrapping div for .content and .sidebar-primary */

    .content-sidebar-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
    width: 920px;
    }

    .content-sidebar-sidebar .content-sidebar-wrap {
    float: left;
    }

    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
    float: right;
    }

    /* Content */

    .content {
    float: right;
    width: 740px;
    }

    .content-sidebar .content,
    .content-sidebar-sidebar .content,
    .sidebar-content-sidebar .content {
    float: left;
    }

    .content-sidebar-sidebar .content,
    .sidebar-content-sidebar .content,
    .sidebar-sidebar-content .content {
    width: 520px;
    }

    .full-width-content .content {
    width: 100%;
    }

    /* Primary Sidebar */

    .sidebar-primary {
    float: right;
    width: 360px;
    }

    .sidebar-content .sidebar-primary,
    .sidebar-sidebar-content .sidebar-primary {
    float: left;
    }

    /* Secondary Sidebar */

    .sidebar-secondary {
    float: left;
    width: 180px;
    }

    .content-sidebar-sidebar .sidebar-secondary {
    float: right;
    }

    /* Column Classes
    Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css
    --------------------------------------------- */

    .five-sixths,
    .four-sixths,
    .one-fourth,
    .one-half,
    .one-sixth,
    .one-third,
    .three-fourths,
    .three-sixths,
    .two-fourths,
    .two-sixths,
    .two-thirds {
    float: left;
    margin-left: 2.564102564102564%;
    }

    .one-half,
    .three-sixths,
    .two-fourths {
    width: 48.717948717948715%;
    }

    .one-third,
    .two-sixths {
    width: 31.623931623931625%;
    }

    .four-sixths,
    .two-thirds {
    width: 65.81196581196582%;
    }

    .one-fourth {
    width: 23.076923076923077%;
    }

    .three-fourths {
    width: 74.35897435897436%;
    }

    .one-sixth {
    width: 14.52991452991453%;
    }

    .five-sixths {
    width: 82.90598290598291%;
    }

    .first {
    clear: both;
    margin-left: 0;
    }

    /*
    Common Classes
    ---------------------------------------------------------------------------------------------------- */

    /* Avatar
    --------------------------------------------- */

    .avatar {
    float: left;
    }

    .alignleft .avatar,
    .author-box .avatar {
    margin-right: 24px;
    }

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

    .comment .avatar {
    margin: 0 16px 24px 0;
    }

    /* Genesis
    --------------------------------------------- */

    .breadcrumb {
    margin-bottom: 20px;
    }

    .archive-description,
    .author-box {
    background-color: #fff;
    border: 1px solid #ececec;
    box-shadow: 0 1px #ececec;
    margin-bottom: 40px;
    padding: 40px;
    }

    .author-box-title {
    color: #333;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    margin-bottom: 4px;
    }

    .archive-description p:last-child,
    .author-box p:last-child {
    margin-bottom: 0;
    }

    /* Search Form
    --------------------------------------------- */

    .search-form {
    overflow: hidden;
    }

    .site-header .search-form {
    float: right;
    margin-top: 8px;
    }

    .entry-content .search-form,
    .site-header .search-form {
    width: 50%;
    }

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

    /* Titles
    --------------------------------------------- */

    .archive-title {
    font-size: 20px;
    }

    .entry-title {
    font-size: 30px;
    margin: 0;
    }

    .entry-title a,
    .sidebar .widget-title a {
    color: #333;
    }

    .entry-title a:hover {
    color: #31b2ed;
    }

    .widget-title,
    .footer-widgets .featured-content .widget-title {
    border-bottom: 1px solid #ececec;
    font-size: 16px;
    margin: 0 0 20px;
    padding: 0 0 20px;
    }

    .home-bottom .widget-title,
    .sidebar .widget-title {
    margin: -40px -40px 40px;
    padding: 30px 40px;
    }

    /* WordPress
    --------------------------------------------- */

    .alignleft {
    float: left;
    text-align: left;
    }

    .alignright {
    float: right;
    text-align: right;
    }

    a.alignleft,
    a.alignnone,
    a.alignright {
    max-width: 100%;
    }

    a.alignnone {
    display: inline-block;
    }

    a.aligncenter img {
    display: block;
    margin: 0 auto;
    }

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

    img.alignnone,
    .alignnone {
    margin-bottom: 12px;
    }

    a.alignleft,
    img.alignleft,
    .wp-caption.alignleft {
    margin: 0 24px 12px 0;
    }

    a.alignright,
    img.alignright,
    .wp-caption.alignright {
    margin: 0 0 12px 24px;
    }

    .wp-caption-text {
    font-weight: 700;
    text-align: center;
    }

    .entry-content p.wp-caption-text {
    margin-bottom: 0;
    }

    .gallery-caption {
    margin: 0 0 10px;
    }

    /*
    Widgets
    ---------------------------------------------------------------------------------------------------- */

    .widget {
    word-wrap: break-word;
    margin-bottom: 40px;
    }

    .widget li {
    border-bottom: 1px dotted #ececec;
    margin-bottom: 10px;
    padding-bottom: 10px;
    }

    .widget ol > li {
    list-style-position: inside;
    list-style-type: decimal;
    padding-left: 20px;
    text-indent: -20px;
    }

    .widget li li {
    border: none;
    margin: 0 0 0 30px;
    padding: 0;
    }

    .widget ul > li:last-child,
    .widget p:last-child {
    margin-bottom: 0;
    }

    .widget_calendar table {
    width: 100%;
    }

    .widget_calendar td,
    .widget_calendar th {
    text-align: center;
    }

    /* Featured Content
    --------------------------------------------- */

    .after-entry .widget.featured-content,
    .featured-content,
    .home-bottom .widget.featured-content,
    .sidebar .widget.featured-content {
    border-bottom-width: 0;
    padding: 0;
    }

    .after-entry .featured-content .widget-title,
    .featured-content .widget-title {
    margin: 0;
    padding: 30px 40px;
    }

    .featured-content .entry {
    background: none;
    border: none;
    border-bottom: 1px solid #ececec;
    box-shadow: none;
    margin: 0;
    padding: 0;
    }

    .featured-content .entry-header {
    border-bottom: 1px solid #ececec;
    margin: 0;
    padding: 30px 40px;
    }

    .featured-content .entry-title {
    font-size: 20px;
    margin: 0;
    }

    .featured-content .entry-content {
    padding: 40px;
    }

    .featured-content .alignnone {
    background: #f8f8f8;
    border-bottom: 1px solid #ececec;
    margin-bottom: 0;
    }

    .featured-content img {
    margin-bottom: -7px;
    }

    .featured-content .more-link {
    display: block;
    font-weight: 700;
    margin-top: 20px;
    }

    .featured-content .more-from-category,
    .featured-content ul {
    border-bottom: 1px solid #ececec;
    margin: 0;
    padding: 40px;
    }

    .footer-widgets .featured-content .alignnone {
    margin-bottom: 24px;
    }

    .footer-widgets .featured-content .entry {
    background: none;
    border: none;
    margin-bottom: 30px;
    }

    .footer-widgets .featured-content .entry-header,
    .footer-widgets .featured-content .more-from-category,
    .footer-widgets .featured-content ul {
    border: none;
    padding: 0 0 10px;
    }

    .footer-widgets .featured-content .entry-content {
    padding: 0;
    }

    /*
    Plugins
    ---------------------------------------------------------------------------------------------------- */

    /* Genesis eNews Extended
    --------------------------------------------- */

    .enews-widget input {
    margin-bottom: 16px;
    }

    .enews-widget input[type="submit"] {
    margin: 0;
    width: 100%;
    }

    .enews form + p {
    margin-top: 24px;
    }

    /* Genesis Responsive Slider
    --------------------------------------------- */

    .home-top .genesis_responsive_slider {
    margin: 0;
    }

    .site-container #genesis-responsive-slider {
    border-width: 0;
    padding: 0;
    }

    .site-container #genesis-responsive-slider .flex-control-nav {
    margin-top: -40px;
    }

    .site-container #genesis-responsive-slider .more-link {
    float: none;
    text-align: center;
    }

    .site-container #genesis-responsive-slider li {
    border-width: 0;
    margin: 0;
    padding: 0;
    text-indent: 0;
    }

    /* Gravity Forms
    --------------------------------------------- */

    div.gform_wrapper input[type="email"],
    div.gform_wrapper input[type="text"],
    div.gform_wrapper textarea,
    div.gform_wrapper .ginput_complex label {
    font-size: 16px;
    padding: 16px;
    }

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

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

    /* Jetpack
    --------------------------------------------- */

    #wpstats {
    display: none;
    }

    /*
    Site Header
    ---------------------------------------------------------------------------------------------------- */

    .site-header {
    background-color: #fff;
    min-height: 150px;
    }

    .site-header .wrap {
    padding: 40px 0;
    }

    /* Title Area
    --------------------------------------------- */

    .title-area {
    float: left;
    padding: 0 0 4px;
    width: 320px;
    }

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

    .site-title {
    font-family: 'Titillium Web', sans-serif; /* Hier kann die Seitentitelschrift geändert werden Original: 'Titillium Web' */
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    }

    .site-title a,
    .site-title a:hover {
    color: #31b2ed;
    }

    .header-image .site-title > a {
    background-position: top !important;
    float: left;
    min-height: 80px; /* min-height: 80px; original */
    width: 100%;
    }

    .site-description { /* Hier kann die Titelunterzeile verändert werden */
    color: #aaa;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 1.5;
    text-transform: uppercase;
    }

    .site-description,
    .site-title {
    margin-bottom: 0;
    }

    .header-image .site-description, /* Hier sind die Kopfbild-Infos */
    .header-image .site-title {
    display: block;
    text-indent: 0; /* Hier die Änderung Anzeige Untertitel mit Kopfbild und Schrift. Original: -9999px; */
    }

    /* Widget Area
    --------------------------------------------- */

    .site-header .widget-area {
    float: right;
    text-align: right;
    width: 720px;
    }

    .site-header .widget-area .widget {
    margin-bottom: 0;
    }

    .site-header .genesis-nav-menu li {
    border: none;
    margin: 0;
    padding: 0;
    }

    /*
    Site Navigation
    ---------------------------------------------------------------------------------------------------- */

    .genesis-nav-menu {
    clear: both;
    font-family: 'Titillium Web', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    width: 100%;
    }

    .genesis-nav-menu a {
    color: #333;
    }

    .genesis-nav-menu .menu-item {
    display: inline-block;
    text-align: left;
    }

    .genesis-nav-menu a {
    display: block;
    padding: 20px 24px;
    }

    .genesis-nav-menu a:hover,
    .genesis-nav-menu .current-menu-item > a,
    .genesis-nav-menu .sub-menu a:hover,
    .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
    color: #31b2ed;
    }

    .genesis-nav-menu .sub-menu {
    border-top: 1px solid #ececec;
    left: -9999px;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
    width: 200px;
    z-index: 99;
    }

    .genesis-nav-menu .sub-menu a {
    background-color: #f8f8f8;
    border: 1px solid #ececec;
    border-top: none;
    color: #333;
    font-size: 12px;
    padding: 16px 24px;
    position: relative;
    width: 200px;
    }

    .genesis-nav-menu .sub-menu .sub-menu {
    margin: -52px 0 0 199px;
    }

    .genesis-nav-menu .menu-item:hover {
    position: static;
    }

    .genesis-nav-menu .menu-item:hover > .sub-menu {
    left: auto;
    opacity: 1;
    }

    .genesis-nav-menu > .first > a {
    padding-left: 0;
    }

    .genesis-nav-menu > .last > a {
    padding-right: 0;
    }

    .genesis-nav-menu > .right {
    float: right;
    list-style-type: none;
    padding: 0;
    }

    .genesis-nav-menu > .date,
    .genesis-nav-menu > .right > a {
    display: inline-block;
    padding: 20px 24px;
    }

    .genesis-nav-menu > .search {
    padding: 8px 0 0;
    }

    .genesis-nav-menu > .search input {
    font-size: 12px;
    padding: 12px 20px;
    }

    /* Site Header Navigation
    --------------------------------------------- */

    .site-header .widget_nav_menu {
    color: #333;
    }

    .site-header .genesis-nav-menu li li {
    margin-left: 0;
    }

    /* Primary Navigation
    --------------------------------------------- */

    .nav-primary {
    background-color: #333;
    }

    .nav-primary,
    .nav-primary a {
    color: #fff;
    }

    .nav-primary .sub-menu {
    border-color: #222;
    }

    .nav-primary .sub-menu a {
    background-color: #333;
    border-color: #222;
    color: #fff;
    }

    /* Secondary Navigation
    --------------------------------------------- */

    .nav-secondary {
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 20px;
    }

    .nav-secondary .genesis-nav-menu a {
    padding: 6px 20px;
    }

    .site-footer .nav-secondary .genesis-nav-menu a {
    color: #aaa;
    }

    .nav-secondary .genesis-nav-menu a:hover {
    color: #31b2ed;
    }

    /* Responsive Menu
    --------------------------------------------- */

    .responsive-menu-icon {
    cursor: pointer;
    display: none;
    }

    .responsive-menu-icon::before {
    content: "\f333";
    display: block;
    font: normal 20px/1 'dashicons';
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    }

    .site-header .responsive-menu-icon::before {
    padding: 0;
    }

    /*
    Content Area
    ---------------------------------------------------------------------------------------------------- */

    /* Home Page
    --------------------------------------------- */

    .home-top {
    border-top: 1px solid #ececec;
    }

    .home-top .widget:first-child h4 {
    padding-top: 20px;
    }

    .home-top .entry {
    background: none;
    }

    .home-top .featured-content a.alignleft,
    .home-top .featured-content a.alignnone,
    .home-top .featured-content a.alignright {
    margin-bottom: 0;
    }

    .home-top a.alignleft,
    .home-top a.alignright {
    width: 66%;
    }

    .home-top .featured-content,
    .home-top .featured-content .entry {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
    }

    .home-top .featured-content .entry-header {
    border: none;
    padding: 10% 40px 0;
    }

    .home-top .featured-content .entry-title {
    font-size: 30px;
    }

    .home-top .featured-content .entry-content {
    padding: 0 40px;
    }

    .home-top .more-link {
    display: table;
    text-align: center;
    }

    .home-bottom .widget {
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #ececec;
    box-shadow: 0 1px #ececec;
    float: left;
    margin-left: 2.564102564102564%;
    padding: 40px;
    width: 31.623931623931625%;
    }

    .home-bottom .widget:nth-child(3n+1) {
    clear: both;
    margin-left: 0;
    }

    /* Entries
    --------------------------------------------- */

    .entry {
    background-color: #fff;
    border: 1px solid #ececec;
    box-shadow: 0 1px #ececec;
    padding: 40px;
    margin-bottom: 40px;
    }

    .entry-header {
    border-bottom: 1px solid #ececec;
    margin: -40px -40px 40px;
    padding: 40px;
    }

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

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

    .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;
    }

    .entry-content code {
    background-color: #333;
    color: #ddd;
    }

    /* Entry Meta
    --------------------------------------------- */

    p.entry-meta {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 0;
    }

    .entry-meta a {
    font-weight: 700;
    }

    .entry-header .entry-meta {
    margin: 10px 0 0;
    }

    .entry-footer {
    margin-top: 22px;
    }

    .entry-footer .entry-meta {
    border-top: 1px solid #ececec;
    margin: 0 -40px;
    padding: 40px 40px 0;
    }

    .entry-tags {
    float: right;
    }

    .entry-comments-link::before {
    content: "\2014";
    margin: 0 6px 0 2px;
    }

    /* After Entry
    --------------------------------------------- */

    .after-entry {
    background-color: #fff;
    border: 1px solid #ececec;
    box-shadow: 0 1px #ececec;
    margin-bottom: 40px;
    }

    .after-entry .widget {
    margin: 0;
    padding: 40px;
    }

    .after-entry .widget-title {
    border-top: 1px solid #ececec;
    margin: -40px -40px 30px;
    padding: 30px 40px;
    }

    .after-entry .widget:first-child .widget-title {
    border-top: 0;
    }

    .after-entry .featured-content .entry:last-of-type,
    .after-entry .featured-content .more-from-category {
    border-bottom: none;
    }

    .after-entry .featured-content .more-from-category {
    padding: 20px 40px;
    }

    .after-entry li {
    list-style-type: none;
    }

    /* Pagination
    --------------------------------------------- */

    .pagination {
    margin: 40px 0;
    }

    .adjacent-entry-pagination {
    margin-bottom: 0;
    }

    .archive-pagination li {
    display: inline;
    }

    .archive-pagination li a {
    background-color: #fff;
    border: 1px solid #ececec;
    box-shadow: 0 1px #ececec;
    color: #333;
    cursor: pointer;
    display: inline-block;
    padding: 8px 12px;
    }

    .archive-pagination li a:hover,
    .archive-pagination .active a {
    background-color: #31b2ed;
    color: #fff;
    }

    .entry-pagination.pagination {
    margin: 0 0 10px;
    }

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

    .comment-respond,
    .entry-comments,
    .entry-pings {
    background-color: #fff;
    border: 1px solid #ececec;
    box-shadow: 0 1px #ececec;
    margin-bottom: 40px;
    }

    .comment-respond {
    padding: 40px 40px 16px;
    }

    .comment-respond h3 {
    border-bottom: 1px solid #ececec;
    margin: -40px -40px 40px;
    padding: 30px 40px;
    }

    .entry-comments {
    border-bottom-width: 0;
    }

    .entry-comments h3,
    .entry-pings h3 {
    border-bottom: 1px solid #ececec;
    margin: 0;
    padding: 30px 40px;
    }

    .comment-list li.depth-1 {
    border-bottom: 1px solid #ececec;
    padding-bottom: 40px;
    }

    .comment-content {
    clear: both;
    }

    .comment-list li {
    padding: 40px 40px 0;
    }

    .comment-list li li {
    padding-right: 0;
    }

    .comment-respond input[type="email"],
    .comment-respond input[type="text"],
    .comment-respond input[type="url"] {
    width: 50%;
    }

    .comment-respond label {
    display: block;
    margin-right: 12px;
    }

    .entry-comments .comment-author,
    .entry-comments .comment-author a {
    color: #333;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    margin-bottom: 0;
    }

    .comment-meta,
    .comment-meta a {
    color: #aaa;
    font-size: 14px;
    }

    .entry-comments .comment-author a:hover,
    .comment-meta a:hover {
    color: #31b2ed;
    }

    .ping-list li {
    padding: 40px 40px 16px;
    }

    .entry-pings .reply {
    display: none;
    }

    .comment-reply-link {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    }

    .form-allowed-tags {
    background-color: #f5f5f5;
    padding: 24px;
    }

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

    .sidebar .widget {
    background-color: #fff;
    border: 1px solid #ececec;
    box-shadow: 0 1px #ececec;
    padding: 40px;
    }

    /*
    Footer Widgets
    ---------------------------------------------------------------------------------------------------- */

    .footer-widgets {
    background-color: #fff;
    border-top: 1px solid #ececec;
    clear: both;
    padding-top: 40px;
    }

    .footer-widgets input {
    border: 1px solid #333;
    }

    .footer-widgets li {
    border-bottom: 1px dotted #ececec;
    margin-bottom: 10px;
    padding-bottom: 10px;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3 {
    width: 340px;
    }

    .footer-widgets-1 {
    margin-right: 60px;
    }

    .footer-widgets-1,
    .footer-widgets-2 {
    float: left;
    }

    .footer-widgets-3 {
    float: right;
    }

    /*
    Site Footer
    ---------------------------------------------------------------------------------------------------- */

    .site-footer {
    background-color: #fff;
    border-top: 1px solid #ececec;
    color: #aaa;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 40px 0;
    text-align: center;
    text-transform: uppercase;
    }

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

    .site-footer a:hover {
    color: #31b2ed;
    }

    .site-footer p {
    margin-bottom: 0;
    }

    /*
    Theme Colors
    ---------------------------------------------------------------------------------------------------- */

    /* Enterprise Pro Black
    --------------------------------------------- */

    .enterprise-pro-black .comment-meta a,
    .enterprise-pro-black .genesis-nav-menu .current-menu-item > a,
    .enterprise-pro-black .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
    .enterprise-pro-black .genesis-nav-menu .sub-menu a:hover,
    .enterprise-pro-black .genesis-nav-menu a:hover,
    .enterprise-pro-black .site-footer a,
    .enterprise-pro-black a:hover {
    color: #aaa;
    }

    .enterprise-pro-black .comment-meta a:hover,
    .enterprise-pro-black .entry-comments .comment-author a,
    .enterprise-pro-black .entry-title a,
    .enterprise-pro-black .genesis-nav-menu a,
    .enterprise-pro-black .sidebar .widget-title a,
    .enterprise-pro-black .site-footer a:hover,
    .enterprise-pro-black .site-title a,
    .enterprise-pro-black .site-title a:hover,
    .enterprise-pro-black a {
    color: #333;
    }

    .enterprise-pro-black .nav-primary a {
    color: #fff;
    }

    .enterprise-pro-black .archive-pagination .active a,
    .enterprise-pro-black .archive-pagination li a:hover,
    .enterprise-pro-black .button,
    .enterprise-pro-black .home-top .more-link,
    .enterprise-pro-black button,
    .enterprise-pro-black input[type="button"],
    .enterprise-pro-black input[type="reset"],
    .enterprise-pro-black input[type="submit"] {
    background-color: #333;
    color: #fff;
    }

    .enterprise-pro-black .button:hover,
    .enterprise-pro-black .home-top .more-link:hover,
    .enterprise-pro-black button:hover,
    .enterprise-pro-black input:hover[type="button"],
    .enterprise-pro-black input:hover[type="reset"],
    .enterprise-pro-black input:hover[type="submit"] {
    background-color: #aaa;
    color: #fff;
    }

    /* Enterprise Pro Green
    --------------------------------------------- */

    .enterprise-pro-green .comment-meta a:hover,
    .enterprise-pro-green .entry-comments .comment-author a:hover,
    .enterprise-pro-green .entry-title a:hover,
    .enterprise-pro-green .genesis-nav-menu .current-menu-item > a,
    .enterprise-pro-green .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
    .enterprise-pro-green .genesis-nav-menu .sub-menu a:hover,
    .enterprise-pro-green .genesis-nav-menu a:hover,
    .enterprise-pro-green .site-footer a:hover,
    .enterprise-pro-green .site-title a,
    .enterprise-pro-green .site-title a:hover,
    .enterprise-pro-green a {
    color: #2bc876;
    }

    .enterprise-pro-green .comment-meta a,
    .enterprise-pro-green .site-footer a {
    color: #aaa;
    }

    .enterprise-pro-green .entry-comments .comment-author a,
    .enterprise-pro-green .entry-title a,
    .enterprise-pro-green .genesis-nav-menu a,
    .enterprise-pro-green .sidebar .widget-title a,
    .enterprise-pro-green a:hover {
    color: #333;
    }

    .enterprise-pro-green .nav-primary a {
    color: #fff;
    }

    .enterprise-pro-green .archive-pagination .active a,
    .enterprise-pro-green .archive-pagination li a:hover,
    .enterprise-pro-green .button,
    .enterprise-pro-green .home-top .more-link,
    .enterprise-pro-green button,
    .enterprise-pro-green input[type="button"],
    .enterprise-pro-green input[type="reset"],
    .enterprise-pro-green input[type="submit"] {
    background-color: #2bc876;
    color: #fff;
    }

    .enterprise-pro-green .button:hover,
    .enterprise-pro-green .home-top .more-link:hover,
    .enterprise-pro-green button:hover,
    .enterprise-pro-green input:hover[type="button"],
    .enterprise-pro-green input:hover[type="reset"],
    .enterprise-pro-green input:hover[type="submit"] {
    background-color: #333;
    color: #fff;
    }

    /* Enterprise Pro Orange
    --------------------------------------------- */

    .enterprise-pro-orange .comment-meta a:hover,
    .enterprise-pro-orange .entry-comments .comment-author a:hover,
    .enterprise-pro-orange .entry-title a:hover,
    .enterprise-pro-orange .genesis-nav-menu .current-menu-item > a,
    .enterprise-pro-orange .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
    .enterprise-pro-orange .genesis-nav-menu .sub-menu a:hover,
    .enterprise-pro-orange .genesis-nav-menu a:hover,
    .enterprise-pro-orange .site-footer a:hover,
    .enterprise-pro-orange .site-title a,
    .enterprise-pro-orange .site-title a:hover,
    .enterprise-pro-orange a {
    color: #ff6f00;
    }

    .enterprise-pro-orange .comment-meta a,
    .enterprise-pro-orange .site-footer a {
    color: #aaa;
    }

    .enterprise-pro-orange .entry-comments .comment-author a,
    .enterprise-pro-orange .entry-title a,
    .enterprise-pro-orange .genesis-nav-menu a,
    .enterprise-pro-orange .sidebar .widget-title a,
    .enterprise-pro-orange a:hover {
    color: #333;
    }

    .enterprise-pro-orange .nav-primary a {
    color: #fff;
    }

    .enterprise-pro-orange .archive-pagination .active a,
    .enterprise-pro-orange .archive-pagination li a:hover,
    .enterprise-pro-orange .button,
    .enterprise-pro-orange .home-top .more-link,
    .enterprise-pro-orange button,
    .enterprise-pro-orange input[type="button"],
    .enterprise-pro-orange input[type="reset"],
    .enterprise-pro-orange input[type="submit"] {
    background-color: #ff6f00;
    color: #fff;
    }

    .enterprise-pro-orange .button:hover,
    .enterprise-pro-orange .home-top .more-link:hover,
    .enterprise-pro-orange button:hover,
    .enterprise-pro-orange input:hover[type="button"],
    .enterprise-pro-orange input:hover[type="reset"],
    .enterprise-pro-orange input:hover[type="submit"] {
    background-color: #333;
    color: #fff;
    }

    /* Enterprise Pro Red
    --------------------------------------------- */

    .enterprise-pro-red .comment-meta a:hover,
    .enterprise-pro-red .entry-comments .comment-author a:hover,
    .enterprise-pro-red .entry-title a:hover,
    .enterprise-pro-red .genesis-nav-menu .current-menu-item > a,
    .enterprise-pro-red .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
    .enterprise-pro-red .genesis-nav-menu .sub-menu a:hover,
    .enterprise-pro-red .genesis-nav-menu a:hover,
    .enterprise-pro-red .site-footer a:hover,
    .enterprise-pro-red .site-title a,
    .enterprise-pro-red .site-title a:hover,
    .enterprise-pro-red a {
    color: #ff473a;
    }

    .enterprise-pro-red .comment-meta a,
    .enterprise-pro-red .site-footer a {
    color: #aaa;
    }

    .enterprise-pro-red .entry-comments .comment-author a,
    .enterprise-pro-red .entry-title a,
    .enterprise-pro-red .genesis-nav-menu a,
    .enterprise-pro-red .sidebar .widget-title a,
    .enterprise-pro-red a:hover {
    color: #333;
    }

    .enterprise-pro-red .nav-primary a {
    color: #fff;
    }

    .enterprise-pro-red .archive-pagination .active a,
    .enterprise-pro-red .archive-pagination li a:hover,
    .enterprise-pro-red .button,
    .enterprise-pro-red .home-top .more-link,
    .enterprise-pro-red button,
    .enterprise-pro-red input[type="button"],
    .enterprise-pro-red input[type="reset"],
    .enterprise-pro-red input[type="submit"] {
    background-color: #ff473a;
    color: #fff;
    }

    .enterprise-pro-red .button:hover,
    .enterprise-pro-red .home-top .more-link:hover,
    .enterprise-pro-red button:hover,
    .enterprise-pro-red input:hover[type="button"],
    .enterprise-pro-red input:hover[type="reset"],
    .enterprise-pro-red input:hover[type="submit"] {
    background-color: #333;
    color: #fff;
    }

    /* Enterprise Pro Teal
    --------------------------------------------- */

    .enterprise-pro-teal .comment-meta a:hover,
    .enterprise-pro-teal .entry-comments .comment-author a:hover,
    .enterprise-pro-teal .entry-title a:hover,
    .enterprise-pro-teal .genesis-nav-menu .current-menu-item > a,
    .enterprise-pro-teal .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
    .enterprise-pro-teal .genesis-nav-menu .sub-menu a:hover,
    .enterprise-pro-teal .genesis-nav-menu a:hover,
    .enterprise-pro-teal .site-footer a:hover,
    .enterprise-pro-teal .site-title a,
    .enterprise-pro-teal .site-title a:hover,
    .enterprise-pro-teal a {
    color: #34bfba;
    }

    .enterprise-pro-teal .comment-meta a,
    .enterprise-pro-teal .site-footer a {
    color: #aaa;
    }

    .enterprise-pro-teal .entry-comments .comment-author a,
    .enterprise-pro-teal .entry-title a,
    .enterprise-pro-teal .genesis-nav-menu a,
    .enterprise-pro-teal .sidebar .widget-title a,
    .enterprise-pro-teal a:hover {
    color: #333;
    }

    .enterprise-pro-teal .nav-primary a {
    color: #fff;
    }

    .enterprise-pro-teal .archive-pagination .active a,
    .enterprise-pro-teal .archive-pagination li a:hover,
    .enterprise-pro-teal .button,
    .enterprise-pro-teal .home-top .more-link,
    .enterprise-pro-teal button,
    .enterprise-pro-teal input[type="button"],
    .enterprise-pro-teal input[type="reset"],
    .enterprise-pro-teal input[type="submit"] {
    background-color: #34bfba;
    color: #fff;
    }

    .enterprise-pro-teal .button:hover,
    .enterprise-pro-teal .home-top .more-link:hover,
    .enterprise-pro-teal button:hover,
    .enterprise-pro-teal input:hover[type="button"],
    .enterprise-pro-teal input:hover[type="reset"],
    .enterprise-pro-teal input:hover[type="submit"] {
    background-color: #333;
    color: #fff;
    }

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


    @media
    only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min-device-pixel-ratio: 1.5) {

    }


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

    .wrap {
    max-width: 960px;
    }

    .content-sidebar-sidebar .content-sidebar-wrap,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-sidebar-content .content-sidebar-wrap {
    width: 740px;
    }

    .content {
    width: 620px;
    }

    .site-header .widget-area {
    width: 600px;
    }

    .sidebar-content-sidebar .content,
    .sidebar-sidebar-content .content,
    .content-sidebar-sidebar .content {
    width: 400px;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .sidebar-primary {
    width: 300px;
    }

    .footer-widgets-1 {
    margin-right: 30px;
    }

    }


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

    .wrap {
    max-width: 768px;
    }

    .home-top .wrap {
    max-width: 750px;
    }

    .content,
    .content-sidebar-sidebar .content,
    .content-sidebar-sidebar .content-sidebar-wrap,
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .sidebar-content-sidebar .content,
    .sidebar-content-sidebar .content-sidebar-wrap,
    .sidebar-primary,
    .sidebar-secondary,
    .sidebar-sidebar-content .content,
    .sidebar-sidebar-content .content-sidebar-wrap,
    .site-header .widget-area,
    .title-area {
    width: 100%;
    }

    .site-header .wrap {
    padding: 20px 5%;
    }

    .genesis-nav-menu li,
    .site-header ul.genesis-nav-menu,
    .site-header .search-form {
    float: none;
    }

    .genesis-nav-menu,
    .site-description,
    .site-header .search-form,
    .site-header .title-area,
    .site-header .widget-area,
    .site-title {
    text-align: center;
    }

    .site-header .search-form {
    margin: 16px auto;
    }

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

    .footer-widgets-1 {
    margin-right: 0;
    }

    .featured-content .alignnone {
    display: block;
    text-align: center;
    }

    .home-top a.alignleft,
    .home-top a.alignright {
    width: 100%;
    }

    .home-top .featured-content .entry-header {
    clear: both;
    padding: 40px 40px 0;
    }

    .home-top .featured-content .entry-content {
    padding: 0 40px 40px;
    }

    }


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

    .wrap {
    padding-left: 5%;
    padding-right: 5%;
    }

    .archive-pagination li a {
    margin-bottom: 4px;
    }

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

    .home-top .more-link {
    display: block;
    }

    .home-bottom .widget {
    margin: 0 0 40px;
    width: 100%;
    }

    .header-image .site-title a {
    background-size: contain !important;
    }

    .genesis-nav-menu.responsive-menu,
    .genesis-nav-menu.responsive-menu > .menu-item > .sub-menu {
    display: none;
    }

    .genesis-nav-menu.responsive-menu .menu-item,
    .responsive-menu-icon {
    display: block;
    }

    .genesis-nav-menu.responsive-menu .menu-item:hover {
    position: static;
    }

    .genesis-nav-menu.responsive-menu li a,
    .genesis-nav-menu.responsive-menu li a:hover {
    background: none;
    border: none;
    display: block;
    line-height: 1;
    padding: 16px 20px;
    text-transform: none;
    }

    .genesis-nav-menu.responsive-menu .menu-item-has-children {
    cursor: pointer;
    }

    .genesis-nav-menu.responsive-menu .menu-item-has-children > a {
    margin-right: 60px;
    }

    .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
    content: "\f347";
    float: right;
    font: normal 16px/1 'dashicons';
    height: 16px;
    padding: 15px 20px;
    right: 0;
    text-align: right;
    z-index: 9999;
    }

    .genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
    content: "\f343";
    }

    .genesis-nav-menu.responsive-menu .sub-menu {
    background-color: rgba(0, 0, 0, 0.05);
    border: none;
    left: auto;
    opacity: 1;
    position: relative;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    -webkit-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;
    width: 100%;
    z-index: 99;
    }

    .genesis-nav-menu.responsive-menu .sub-menu li a,
    .genesis-nav-menu.responsive-menu .sub-menu li a:hover {
    padding: 12px 20px;
    position: relative;
    text-transform: none;
    width: 100%;
    }

    .nav-primary .genesis-nav-menu.responsive-menu {
    padding-bottom: 16px;
    }

    .nav-primary .genesis-nav-menu.responsive-menu .sub-menu {
    background-color: rgba(0, 0, 0, 0.07);
    }

    .genesis-nav-menu.responsive-menu .sub-menu .sub-menu,
    .nav-primary .genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
    background-color: transparent;
    margin: 0;
    padding-left: 25px;
    }

    }

    /* Eingefügt für volles Kopfbild hpe */

    /* CSS for full-width responsive header Executive Pro 3.1 */

    .site-description {
    display: none; /* Original: display: none: */
    }

    .site-header,
    .title-area,
    .site-title,
    .header-image .title-area,
    .header-image .site-title,
    .header-image .site-title a {
    float: left;
    margin: 0;
    max-width: 100%;
    min-height: 0%;
    padding: 0;
    width: 100%;
    text-indent: 0;
    }

    .site-title a,
    .site-title a:hover {
    background: transparent;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
    }

    http://www.zukzg.chisana.ch
    February 27, 2016 at 9:47 pm #180122
    Jason Weber
    Member

    Your top banner image is responsive and the title doesn't disappear (I tested in Chrome, IE11, Firefox, Opera, and Safari).

    One issue is that you're using a .png image when this is not necessary; it's over 500KB!

    I converted it to .jpg, and then I losslessly compressed it, and it's now 41KB (faster page load time).

    So use this image: http://i.imgur.com/4i1UgVE.jpgHypnose Zielgenau banner


    Webby’s WebPrezence
    National Center For Due Process

    February 28, 2016 at 2:00 pm #180167
    hampi52
    Member

    Hi Jason

    Thanks a lot for your help. I will change the image, I have to change any CSS code (from png to jpg).

    What you see on my site is not the title - it is the site-description. (HYPNOSE IST WIE MAGIE. NUR ANDERS!)
    The real title is "Zielgenau" and covert by the image. Because in the current mode the image works like the title: By clicking it connects to the URL.
    What I want is, that the image is a static background - like the simple color green, instead of it. So I am looking for a css snippet which puts the image as background.
    So as I have seen on "webbys web presence" the picture with the woman.

    Kindly
    Hanspeter (hampi52)

    February 28, 2016 at 2:56 pm #180171
    Jason Weber
    Member

    This is taken from Sridhar's website. If you're really into customizing your site, you should purchase a membership. I did, and it's worth it!

    1. First, register two widget areas -- one below the header and one above the footer.

    Add this at the bottom of your functions.php:

    //* Register widget areas
    genesis_register_sidebar( array(
    	'id'          => 'parallax-section-below-header',
    	'name'        => __( 'Parallax Section Below Header', 'enterprise-pro' ),
    	'description' => __( 'This is the parallax section below header.', 'enterprise-pro' ),
    ) );
    
    genesis_register_sidebar( array(
    	'id'          => 'parallax-section-above-footer',
    	'name'        => __( 'Parallax Section Above Footer', 'enterprise-pro' ),
    	'description' => __( 'This is the parallax section above footer.', 'enterprise-pro' ),
    ) );
    
    //* Hooks parallax-section-below-header widget area after header
    add_action( 'genesis_after_header', 'parallax_section_below_header' );
    function parallax_section_below_header() {
    
    	genesis_widget_area( 'parallax-section-below-header', array(
    		'before' => '<div class="below-header parallax-section widget-area"><div class="wrap">',
    		'after'  => '</div></div>',
    	) );
    
    }
    
    //* Hooks parallax-section-above-footer widget area above footer
    add_action( 'genesis_before_footer', 'parallax_section_above_footer' );
    function parallax_section_above_footer() {
    
    	genesis_widget_area( 'parallax-section-above-footer', array(
    		'before' => '<div class="above-footer parallax-section widget-area"><div class="wrap">',
    		'after'  => '</div></div>',
    	) );
    
    }
    1. Second, save a copy of parallax.js and upload it to you Enterprise Pro's /js/ directory (wp-content/themes/enterprise-pro/js/parallax.js).
    1. Load the .js

    Add this to the bottom of your functions.php:

    //* Enqueue parallax script
    add_action( 'wp_enqueue_scripts', 'enqueue_parallax_script' );
    function enqueue_parallax_script() {
    
    	if ( ! wp_is_mobile() ) {
    
    		wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );
    
    	}
    
    }
    1. Add the following to Enterprise Pro's style.css:
    /* Parallax effect
    --------------------------------------------- */
    
    .parallax-section {
    	background-attachment: fixed;
    	background-color: #fff;
    	background-position: 0px 0px;
    	background-repeat: no-repeat;
    	-webkit-background-size: cover;
    	-moz-background-size:    cover;
    	background-size:         cover;
    	text-align: center;
    	font-family: 'Sorts Mill Goudy',sans-serif;
    	color: #fff;
    	font-size: 28px;
    	padding: 190px 0 200px;
    }
    
    .parallax-section .widget-title {
    	font-size: 72px;
    	margin-bottom: 40px;
    	color: #fff;
    }
    
    .parallax-section.below-header {
    	background-image: url("images/bg-1.jpg");
            /* height:700px; -- this is optional if you want the parallax background images to be higher.  Just adjust the height as needed */
    }
    
    .parallax-section.above-footer {
    	background-image: url("images/bg-2.jpg");
    	color: #000;
            /* height:700px; -- this is optional if you want the parallax background images to be higher.  Just adjust the height as needed */
    }
    
    .parallax-section.above-footer .widget-title {
    	color: #000;
    }

    Of course, ensure that bg-1.jpg and bg-2.jpg are your images, so upload them to /wp-content/themes/enterprise-pro/images/your-image-here.jpg, and put the proper image name in the snippet above.

    Note: There will now be two new widget areas under Appearances >> Widgets. You might have to drag a text widget in there and put a space:
    &nbsp;
    in the text widget. Additionally, you can drag any widget in there, and the image will still be in the background. Or you can leave it as is, like I did with USS Vision.

    Good luck!


    Webby’s WebPrezence
    National Center For Due Process

    February 28, 2016 at 3:02 pm #180177
    Jason Weber
    Member

    This is taken from Sridhar's website. If you're really into customizing your site, you should purchase a membership. I did, and it's worth it!

    1. First, register two widget areas -- one below the header and one above the footer.

    Add this at the bottom of your functions.php:

    //* Register widget areas
    genesis_register_sidebar( array(
    	'id'          => 'parallax-section-below-header',
    	'name'        => __( 'Parallax Section Below Header', 'enterprise-pro' ),
    	'description' => __( 'This is the parallax section below header.', 'enterprise-pro' ),
    ) );
    
    genesis_register_sidebar( array(
    	'id'          => 'parallax-section-above-footer',
    	'name'        => __( 'Parallax Section Above Footer', 'enterprise-pro' ),
    	'description' => __( 'This is the parallax section above footer.', 'enterprise-pro' ),
    ) );
    
    //* Hooks parallax-section-below-header widget area after header
    add_action( 'genesis_after_header', 'parallax_section_below_header' );
    function parallax_section_below_header() {
    
    	genesis_widget_area( 'parallax-section-below-header', array(
    		'before' => '<div class="below-header parallax-section widget-area"><div class="wrap">',
    		'after'  => '</div></div>',
    	) );
    
    }
    
    //* Hooks parallax-section-above-footer widget area above footer
    add_action( 'genesis_before_footer', 'parallax_section_above_footer' );
    function parallax_section_above_footer() {
    
    	genesis_widget_area( 'parallax-section-above-footer', array(
    		'before' => '<div class="above-footer parallax-section widget-area"><div class="wrap">',
    		'after'  => '</div></div>',
    	) );
    
    }
    1. Second, save a copy of parallax.js and upload it to you Enterprise Pro's /js/ directory (wp-content/themes/enterprise-pro/js/parallax.js).
    1. Load the .js

    Add this to the bottom of your functions.php:

    //* Enqueue parallax script
    add_action( 'wp_enqueue_scripts', 'enqueue_parallax_script' );
    function enqueue_parallax_script() {
    
    	if ( ! wp_is_mobile() ) {
    
    		wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );
    
    	}
    
    }
    1. Add the following to Enterprise Pro's style.css:
    /* Parallax effect
    --------------------------------------------- */
    
    .parallax-section {
    	background-attachment: fixed;
    	background-color: #fff;
    	background-position: 0px 0px;
    	background-repeat: no-repeat;
    	-webkit-background-size: cover;
    	-moz-background-size:    cover;
    	background-size:         cover;
    	text-align: center;
    	font-family: 'Sorts Mill Goudy',sans-serif;
    	color: #fff;
    	font-size: 28px;
    	padding: 190px 0 200px;
    }
    
    .parallax-section .widget-title {
    	font-size: 72px;
    	margin-bottom: 40px;
    	color: #fff;
    }
    
    .parallax-section.below-header {
    	background-image: url("images/bg-1.jpg");
            /* height:700px; -- this is optional if you want the parallax background images to be higher.  Just adjust the height as needed */
    }
    
    .parallax-section.above-footer {
    	background-image: url("images/bg-2.jpg");
    	color: #000;
            /* height:700px; -- this is optional if you want the parallax background images to be higher.  Just adjust the height as needed */
    }
    
    .parallax-section.above-footer .widget-title {
    	color: #000;
    }

    Of course, ensure that bg-1.jpg and bg-2.jpg are your images, so upload them to /wp-content/themes/enterprise-pro/images/your-image-here.jpg, and put the proper image name in the snippet above.

    Note: There will now be two new widget areas under Appearances >> Widgets. You might have to drag a text widget in there and put a space:
    &nbsp;
    in the text widget. Additionally, you can drag any widget in there, and the image will still be in the background. Or you can leave it as is, like I did with USS Vision.

    Good luck!


    Webby’s WebPrezence
    National Center For Due Process

    February 28, 2016 at 3:04 pm #180178
    Jason Weber
    Member

    I used that exact method above on USS Vision and Dr. Kelwala's website, so you can see the result in advance.


    Webby’s WebPrezence
    National Center For Due Process

    February 29, 2016 at 3:20 am #180232
    hampi52
    Member

    Hi Jason

    Thanks a lot for your advices and codes. I will try it when I can spend a lot of thime for having a look, whether this is it what I want or not.

    Kindly Hanspeter

    February 29, 2016 at 7:23 am #180253
    hampi52
    Member

    Hi Jason

    I tried that on a trial-site and it works fine. But it is not that, what I want - it is to mighty for ma site.

    I just want to replace the background-color green in the header with a statig image. Also that means, the image should be the background instead of the color green.

    So I can add a logo as title-image or leave the title text.

    Original means the CSS some kind as

    .site-header {
    background-color: #fff;

    Instead of background-color should be background-image or else....

    That I dont know how to do...

    Kindly

    Hanspeter

    March 9, 2016 at 1:58 pm #181043
    singletree
    Member

    can I use that code change (@Jason Weber) and simply get a static header image and then another image over top as a widget? Is that what I'm understanding?

    Mike

    March 10, 2016 at 2:46 am #181102
    hampi52
    Member

    Hi Mike

    I chose this code (uploaded a image 1140x251 in the image-folder of the theme)

    `/*
    Site Header
    ---------------------------------------------------------------------------------------------------- */

    .site-header {
    background-color: #006b3f; /* Original: #fff; */
    /*min-height: 251px;*/ /* Original: 150px */

    /* Das gibt ein nicht responsives selber eingefügtes Hintergrundbild Anfang */

    background-image: url(/wp-content/themes/enterprise-pro/images/kopfbildstrand.jpg); /* Selber eingefügte Zeilen */
    background-repeat: no-repeat;

    position: relative;
    background-position: center;
    width: 100%;
    height: 251px; /* 251px */
    margin-left: auto;
    margin-right: auto;

    and get this result
    http://www.testhampi.chisana.ch

    The image is not fully responsive, I didn't find out yet how to do that...

    There is another possibility but then the image is like a logo and you couldn't lay another image over it. But it is fully responsive. First load the 1140 x 251 header-image to the image-folder of the theme and then do the steps as descibed here. Take step 3 from executive-pro, it works.

    General description

    Getting Your Head Around Header Images

    Step 3

    Full-Width Responsive Header Logo Image for Executive Pro

    You may see the result here

    http://zukzg.chisana.ch/

    and it is fully responsive.

    Good luck!

    Hanspeter

    September 6, 2016 at 2:21 pm #192716
    eastsidekeith
    Member

    Hi, my name is Keith Watling and I have a similar problem with registering a widget area to be just below the nav and above the main content. Here is the code I used.

    /** Register widget areas */
    genesis_register_sidebar( array(
    'id' => 'utilty-menu',
    'name' => __( 'utilty-menu', 'enterprise' ),
    'description' => __( 'This is the utilty-menu widget.', 'enterprise' ),
    ) );

    /** Add the welcome text section */
    add_action( 'genesis_before_content_sidebar_wrap', 'utily_menu' );
    function custom_welcome_text() {
    genesis_widget_area( 'welcome-text', array(
    'before' => '<div class="utilty-menu widget-area">',
    'after' => '</div>',
    ) );
    }

    /* utilty-menu
    ------------------------------------------------------------ */

    .utilty-menu {
    font-size: 12px;
    line-height: 1.0;
    overflow: hidden;
    padding: 25px 0;
    text-align: center;
    }

    .utilty-menu p {
    font-size: inherit;
    line-height: 1.0;
    margin: 0;
    }
    When I added this the functions.php I got this error:

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'utily_menu' not found or invalid function name in /home/content/a2pnexwpnas01_data01/31/3547531/html/wp-includes/plugin.php on line 524

    There is also some styling which I hadn't added yet.
    Do know what I missed on this?
    I am using Enterprise Pro. Here is the site: jnwhitedesignsver.com

    thanks,
    Keith

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble