Support » CSS / opmaak vragen » style.css | theme tot een maximum breedte laten weergeven

  • Opgelost Marinus59

    (@marinus59)


    Hoi allen,

    Ik ben bezig met de website voor: http://www.stichtingmetdemuziekmee.nl

    Op een klein scherm werkt het prima met het filmpje die ik in de sitebar heb gezet maar zodra de website op een groot scherm word bekeken dan zie je naast
    het filmpje die ik van youtube heb ge-embeded een breed wit vlak komen wat niet de bedoeling is.

    Code die ge-embed is:

    <iframe width=”270″ height=”160″ src=”//www.youtube.com/embed/YJGNmIMB-YE” frameborder=”0″ allowfullscreen></iframe>

    Echter doordat het thema responsive is krijg ik aan de rechterkant van het filmpje een groot wit vlak wat ik niet wil.

    Wellicht is dan toch de beste oplossing om de website (thema) een maximale breedte te geven van bv 1024 pixels.

    Als dat klaar is zou ik eventueel bovenstaande code nog wat aan kunnen passen zodat het filmpje in de juiste / beste verhouding kan worden weergegeven m.b.t. de breedte van het thema.

    Mijn vraag:
    Zou iemand van jullie me eventueel kunnen helpen die code in de stylesheet.css zo krijgen dat de website tot een bepaalde breedte wordt weergegeven van 1024 of 1078 pixels.

    Het heeft me al behoorlijk wat tijd gekost om het gewenste effect te krijgen, echter tot dusver zonder het gewenste resultaat en omdat ik binnenkort de website moet opleveren vandaar dat ik jullie de vraag stel om me ermee te helpen en zou het zeer op prijs stellen.

    Ik heb een bijlage meegezonden van de stylesheet.css van de template die ik gebruik (musik) een standaard template vanaf wordrpess.org gedownload.

    http://wordpress.org/themes/search.php?q=musik

    Wat ik zelf al o.a. heb geprobeerd is de textwidget aan te passen waarin ik de code heb toegevoegd. Onderstaand code’s hebben dus niet het gewenste restultaat opgeleverd.

    Het betreffende stukje staat op regel 759:
    .textwidget{
    color:#6699ff;
    padding:10px;
    background:#f5f5f5;
    overflow:hidden;
    width:270px;
    }

    en deze:

    Het betreffende stukje staat op regel 759:
    .textwidget{
    color:#6699ff;
    padding:10px;
    background:#f5f5f5;
    overflow:hidden;
    max-width:270px
    }

    Waar zet ik in de style.css een stukje code die er voor zorgt dat het thema tot een bepaalde breedte wordt weergegeven. En hoe ziet die code eruit?

    ——

    Stylesheet

    (style.css)

    /*
    Theme Name: Musik
    Theme URI: http://wordpress.org/themes/musik
    Author: Poena
    Author URI: http://layout.nu/about/
    Description: A responsive music theme with two widget areas, logo upload, sticky posts custom header and threaded comments. Includes Swedish translation.
    Version: 1.1
    Tags: white, blue, threaded-comments, custom-menu, sticky-post, translation-ready, post-formats, custom-header, two-columns, one-column, right-sidebar, left-sidebar, editor-style, featured-images
    Text Domain: musik

    License: GNU General Public License (GPL), v2 (or newer)
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    */

    html {
    -webkit-text-stroke: 1px rgba(0,0,0,0.1);
    -webkit-font-smoothing: antialiased;
    }

    html {
    background: url(images/mic.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    body {
    margin:0;
    font-family: ‘Open Sans’, sans-serif;
    line-height: 1;
    }

    a{
    text-decoration:none;
    color:#6699ff;
    }

    .wrapper {
    margin:0 auto;
    /*width:960px;*/
    width:90%;
    clear:both;
    }

    /* =Header
    ————————————————————– */
    #header{
    margin-top:3.2em;
    position:relative;
    }
    .site-title {
    font-size: 3.8em;
    font-weight: bold;
    margin:0;
    font-family: ‘Oswald’, sans-serif;
    }
    .site-description {
    font-size: 2.1em;
    line-height:2.15em;
    font-weight: bold;
    margin-top:0.8em;
    font-family: ‘Open Sans Condensed’, sans-serif;
    width:100%;
    }

    table{margin:4px 4px 10px 4px; border-collapse:collapse;}
    td{border:1px solid #f5f5f5; padding:4px;}
    th{background:#f5f5f5;}

    /* =Header Menu
    ————————————————————– */
    #header-menu {
    margin-top:2em;
    display: block;
    float: left;
    width: 100%;
    font-size: 1.5em;
    position:relative;
    z-index:9999;
    font-family: ‘Oswald’, sans-serif;
    background: url(images/70.png);
    }
    #header-menu a{
    color:#fff;
    }

    #header-menu ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    }
    #header-menu li {
    float: left;
    position: relative;
    }
    #header-menu a {
    display: block;
    line-height: 2em;
    margin-right: 0.7em;
    margin-left:0.7em;
    padding-bottom:6px;
    }

    #header-menu ul li ul li{
    float: left;
    position: relative;
    border-bottom:1px solid #999;
    }

    /*sub menu level 2*/
    #header-menu ul ul {
    display: none;
    font-size:0.8em;
    float: left;
    position: absolute;
    top: 2.8em;
    line-height: 4em;
    left: 0;
    z-index: 99999;
    width:170px;
    padding-right:1em;
    clear:both;
    background: #666;
    }
    #header-menu ul ul a {
    line-height: 1em;
    padding: .5em 0 .5em 1em;
    width:167px;
    margin:0;
    }

    /* sub menu level 3-5*/
    #header-menu ul ul ul,
    #header-menu ul ul ul ul,
    #header-menu ul ul ul ul ul
    {
    display: none;
    font-size:1em;
    float: left;
    position: absolute;
    top:0;
    line-height: 4em;
    left:185px;
    z-index: 99999;
    width:170px;
    }

    #header-menu ul li:hover > ul {
    display: block;
    }

    #header img{
    position:relative;
    z-index:7;
    margin:0;
    padding:0;
    border:0;
    }

    .header-image{
    position:relative;
    z-index:6;
    margin-bottom:-2px;
    padding:0;
    border:0;
    }

    #header .header-logo {
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    margin-right:25px;
    border:none;
    }
    .sidebar-logo {border:none; margin-bottom:10px; margin-left:29px; margin-top:19px;}
    .footer-logo {
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    margin-right:25px;
    margin-left:0;
    border:none;
    }

    /* Full width if the sidebar is inactive: */
    .no-sidebar .wrapper .container{width:100%;}
    .no-sidebar .wrapper .container .post,
    .no-sidebar .wrapper .container .type-page,
    .no-sidebar .wrapper .container .type-attachment{width:100%;}
    .no-sidebar .wrapper .header-image{visibility:hidden; height:0px;}

    /* Float the content to the right if the sidebar is to the left!*/
    .left-sidebar .wrapper .container{float:right;}
    .left-sidebar .wrapper .container .post,
    .left-sidebar .wrapper .container .type-page,
    .left-sidebar .wrapper .container .type-attachment{float:right; margin-right:0;}

    .left-sidebar .wrapper #rightsidebar {margin-left:0px;}

    /* Keep posts and stickies in place if there is a sidebar: */
    .container{
    width:70%;
    clear:both;
    margin:0;
    padding:0;
    float:left;
    }

    /* =Content
    ————————————————————– */
    .post,
    .type-page,
    .type-attachment
    {
    line-height: 1.5;
    /*margin-bottom:35px; */
    margin:0;
    width:100%;
    padding:2em;
    background:#fff;
    color:#333;
    font-family:Verdana,Georgia,Serif;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow:hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .post-title, .archive-title{
    display:block;
    line-height:1.5;
    padding-bottom:0.5em;
    padding-top:0;
    margin:0;
    clear:both;
    color:#000;
    font-family: ‘Oswald’, sans-serif;
    }
    .archive-title{
    padding-bottom:0.5em;
    }

    .crumbs{
    font-size:0.9em;
    clear:both;
    margin-bottom:1.3em;
    }
    .crumbs i{opacity:0.3;}
    .crumbs a{opacity:1.0;}

    .crumbs a:hover{
    text-decoration:none;
    }
    .meta {
    clear: both;
    padding:1em;
    width:100%;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:0;
    font-size:14px;
    line-height:16px;
    }
    .format-link .post-title,
    .format-aside .post-title,
    .format-status .post-title,
    .format-link .crumbs,
    .format-aside .crumbs,
    .format-status .crumbs {
    display:none;
    }
    .format-link,
    .format-status{
    min-height:30px;
    }

    .attachment_nav_clear{float:right; clear:both; margin:4px;}
    .fullimg{width:100%; float:left; clear:both; margin:6px;}

    /*author info
    ————————————————————– */
    .author-info {
    color:#6699ff;
    clear:both;
    font-size:1em;
    line-height: 20px;
    overflow: hidden;
    min-height:45px;
    margin:0;
    padding-left:4px;
    padding-top:16px;
    padding-bottom:0;
    }
    .author-info .author-link{
    padding-top:6px;
    }
    .author-info.author-link a {
    color:#6699ff;
    }
    .author-info .author-avatar {
    float:left;
    height:60px;
    width:60px;
    margin:10px;
    }
    .author-info .author-description {
    float:left;
    margin:10px;
    font-size:1em;
    }
    .author-info h2 {
    font-size:1.2em;
    font-weight:bold;
    margin:0;
    }

    /* Stickies*/
    .sticky,
    .whitetop{
    position:relative;
    z-index:7;
    float:left;
    width:100%;

    padding:2em;
    background:#f5f5f5;
    color:#666;
    margin:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    }

    .sticky .crumbs,
    .sticky .meta{display:none;}

    .search-post
    {
    margin:0;
    clear:both;
    overflow:hidden;
    padding:1em;
    min-height:5px;
    background:#f5f5f5;
    color:#666;
    position:relative;
    }

    /* Navigation
    —————————————-*/
    .more-link {
    color:#666;
    clear:both;
    padding-top:3px;
    }
    .page-link {
    color:#666;
    clear:both;
    padding-top:3px;
    padding-bottom:12px;
    }
    .page-link a{
    color:#666;
    }

    .page-link a:hover,
    .more-link a:hover{
    text-decoration:underline;
    }
    .older-posts,
    .newer-posts{
    font-family: ‘Oswald’, sans-serif;
    background:#fff;
    color:#666;
    min-width:170px;
    padding:6px;
    min-height:15px;
    margin:0;
    margin-top:30px;
    margin-bottom:25px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    padding:1em;
    }

    .newer-posts{
    float:right;
    }
    .older-posts{
    float:left;
    }
    .older-posts a,
    .newer-posts a,
    .paged-comments{
    color:#666;
    }
    .older-posts a:hover,
    .newer-posts a:hover,
    .paged-comments a:hover{
    color:#6699ff;
    }

    .paged-comments{
    background:#fff;
    color:#666;
    width:140px;
    padding:1em;
    margin-bottom:25px;
    margin-top:25px;
    min-height:15px;
    font-family: ‘Oswald’, sans-serif;
    }

    /* =Images and objects
    ————————————————————– */

    @media screen {
    img, object{
    width: auto; /* for ie 8 */
    }
    }

    img,
    object {
    max-width: 100%;
    height: auto;
    }

    a img {border: none;}
    p img {margin: 0.5em;}

    img.size-auto,
    img.size-full,
    img.size-large,
    img.size-medium,
    .attachment img,
    .widget-area img {
    max-width: 100%;
    height: auto;
    }

    .attachment-thumbnail{
    border-radius:4px;
    }

    .type-attachment .attachment-thumbnail{margin:8px;}

    img.alignleft {
    margin-right: 1em;
    }
    img.alignright {
    margin-left: 1em;
    }

    .wp-caption {
    padding: 5px;
    text-align: center;
    max-width:100%;
    }

    .wp-caption img {
    margin: 5px;
    }
    dl.gallery-item, .wp-caption, .wp-caption-text {
    color:#6699ff;
    font-size:0.9em;
    }
    .gallery-caption {}
    .wp-smiley {
    margin: 0;
    }
    object{margin:15px;}

    blockquote{border-left:3px solid #6699ff; padding:5px 0 5px 10px;}

    /* =Comments
    ————————————————————– */
    #comments {
    clear: both;
    width:100%;
    margin:0;
    padding:0;
    }
    #comments .navigation {
    padding:0 0 18px 0;
    }
    h2#comments-title{
    padding:1em;
    text-decoration:none;
    font-family: ‘Oswald’, sans-serif;
    font-weight:bold;
    color:#000;
    font-size: 1.5em;
    }
    .commentlist {
    list-style:none;
    margin:0;
    padding:0;
    }
    .commentlist .children {
    list-style:none;
    margin:0;

    }
    .commentlist .children .comment-body{
    background: url(images/20w.png);
    }

    .comment-body{
    font-size:1.2em;
    padding:1em;
    min-height:5px;
    line-height:1.5;
    margin-bottom:4px;
    background: url(images/20.png);
    color:#fff;
    overflow:hidden;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    }
    .comment-body p {
    margin:0;
    padding:0;
    }
    .comment-body a{
    color:#fff;
    text-decoration:none;
    }
    .comment-meta{
    margin-bottom:20px;
    margin-top:20px;
    font-size:0.8em;
    }
    .comment-author {
    margin:0;
    padding:0;
    font-weight:bold;
    font-size:1em;
    }
    .comment-author a{
    color:#fff;
    }
    .commentlist .avatar {
    margin-right:10px;
    }

    .comment-edit-link{
    color:#fff;
    font-size:.9em;
    }
    /*.bypostauthor .comment-author {}
    .bypostauthor .comment-body {
    border-left:2px solid #6699ff;
    }
    */
    .comment-reply-link{}

    .comment-form-comment label {margin-right:6px;}

    .reply a{
    background:#6699ff;
    padding:1em;
    float:right;
    font-weight:bold;
    font-size:.6em;
    color:#fff;
    text-decoration:none;
    }
    .reply a:hover{
    color:#fff;
    }
    .children li.depth-5 .reply{
    visibility:hidden;
    }
    .commentlist .even {}
    .nopassword,.nocomments {
    /*display: none;*/
    }
    .pingback {
    color:#6699ff;
    }
    .pingback a{
    text-decoration:none;
    }

    /* Comments form
    ————————————————————– */

    input[type=submit] {
    margin:3px;
    padding:3px;
    }

    #respond {
    overflow:hidden;
    position:relative;
    background: url(images/40.png);
    color:#fff;
    padding:2em;
    margin-bottom:30px;
    }
    #cancel-comment-reply-link{
    font-size:.9em;
    font-weight:normal;
    }
    #respond a{
    color:#ccc;
    }
    #respond p{
    margin:0;
    }
    #respond .logged-in-as{
    padding-bottom:6px;
    font-size:.9em;
    }
    #respond .logged-in-as a{
    color:#ccc;
    }
    #respond .comment-notes{
    font-size:12px;
    margin-bottom: 1em;
    }
    #respond .required {
    color:#fff;
    font-weight: bold;
    }
    #respond label {}

    #respond input {
    margin:9px;
    }

    .comment-form-comment label,
    #respond textarea {
    padding:6px;
    width:80%;
    float:left;
    clear:both;
    }
    #respond .form-allowed-tags {
    margin-top:14px;
    margin-bottom:14px;
    color:#ccc;
    font-size:.9em;
    line-height:1em;
    float:left;
    clear:both;
    }

    #respond .form-submit {
    margin: 12px 0;
    }
    #respond .form-submit input {
    font-size:.9em; width: auto;
    }

    /* =Widgets
    ————————————————————– */

    #rightsidebar{
    float:left;
    width:30%;
    background: url(images/70.png);
    margin:0;
    margin-bottom:25px; /*Adds space between widget and footer if needed */
    padding-left:1em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    #rightsidebar ul{
    width:100%;
    margin:0;
    float:left;
    padding:0;
    color:#fff;
    }

    .widget{
    width:90%;
    list-style: none;
    position:relative;
    z-index:2;
    float:left;
    margin-bottom:25px;
    padding:1em;
    color:#fff;
    }

    .widgettitle{
    margin-left:9px;
    margin-top:4px;
    margin-bottom:15px;
    font-weight:bold;
    font-family: ‘Oswald’, sans-serif;
    font-size:1.5em;
    }

    .widget ul{
    font-size:.9em;
    padding:0;
    margin:0;
    float:left;
    width:100%;
    }
    .widget ul li{
    list-style: none;
    font-weight:normal;
    margin-left:9px;
    margin-top:6px;
    margin-bottom:9px;
    padding:0;
    text-align:left;
    color:#6699ff;
    }
    #calendar_wrap{
    padding-top:5px;
    font-size:.9em;
    color:#fff;
    }

    .widget_calendar .widgettitle {
    display:none;
    }
    table#wp-calendar,
    #wp-calendar {
    color:#fff;
    font-weight:normal;
    padding:5px;
    }
    #wp-calendar th{color:#6699ff;}
    #wp-calendar a {
    color:#6699ff;
    text-decoration:underline;
    }
    #wp-calendar caption {
    font-family: ‘Oswald’, sans-serif;
    font-size:18px;
    margin-bottom:8px;
    color:#fff;
    }
    .tagcloud{
    padding:10px;
    }

    .widget ul li a,
    .tagcloud a {
    color:#6699ff;
    }
    .textwidget{
    color:#6699ff;
    padding:10px;
    background:#f5f5f5;
    overflow:hidden;
    max-width:270px
    }

    .widget_search form, .searchform form {margin-top:3px;}
    .widget_search input, .search-post input, #s{
    margin:3px;
    padding:3px;
    }

    .widget_rss ul li {margin-bottom:25px; width:97%;}
    .rssSummary{width:90%;}
    .rss-date{width:90%; float:left; clear:both;}

    select {
    max-width: 150px !important;
    overflow: hidden;
    }
    option {
    max-width: 120px !important;
    overflow: hidden;
    }

    /* =Footer
    ————————————————————– */

    #footer {
    margin:0 auto;
    padding:0;
    width:100%;
    clear:both;
    }

    #footer .site-title, #footer .site-title a{font-size:22px; font-weight:normal; color:#000;}
    #footer .site-description{font-size:20px;}

    #footer .widget{
    width:100%;
    padding:2em;
    background: url(images/70.png);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    /* Alignment
    ————————————————————– */
    .alignleft {
    display: inline;
    float: left;
    }
    .alignright {
    display: inline;
    float: right;
    }
    .aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    /* Text meant only for screen readers */
    .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    }

    /* Responsive
    ——————————————————-*/

    @media screen and (max-width:1024px){
    .wrapper{width:90%;}
    #header {background-size:100%;}
    }

    @media screen and (max-width:780px){
    .site-title {font-size:2.6em;}
    #header-menu{font-size:1em;}
    #header{width:100%}
    #header{background:none;}
    .container, #rightsidebar{width:100%;}
    .sticky{width:100%; margin:0;}
    }

    @media screen and (max-width:600px){
    .wrapper{padding:1em; margin:0; width:90%;}
    #header{width:100%}
    .header-logo, .site-title{clear:both;}
    .header-image{display:none;}
    .sticky { width:100%; margin:0; }
    #footer .widget{width:100%;}
    #rightsidebar ul{width:100%; margin:0; margin-top:10px;}
    .left-sidebar .wrapper #rightsidebar{margin-left:0px;}
    #header-menu li ul {visibility:hidden;}
    }

    ——

    Jullie reactie’s zie ik met belangstelling tegemoet.

    Met vriendelijke groet,

    Marinus59

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • NB! het is niet nodig de stylesheet zoals hierboven mee te sturen. Dat is allemaal te zien met bijv. je browser / firebug etc.
    Verder: plaats code zoals boven aub tussen ` quotes [knop hierboven editorveld]. Dat voorkomt storing van weergave van het forum.</p>
    == == ==

    Ik kan het gemelde probleem niet zien… Ik zie een film in een widget met een zwarte achtergrond…
    == == ==

    #wrapper{
        width: 100%;/*pas aan naar behoefte*/
    }

    NB!!
    Aanpassen van maten, KAN verrassende -onbedoelde- resultaten opleveren!! ’t Moet allemaal wel blijven passen 😉

    Ik zal er rekening mee houten geen stylesheetcode meer mee te sturen.

    Had inmiddels zelf ook al ondervonden om de maten, zoals je boven omschreef, beter niet aan te passen. Want anders kunnen de tabletgebruikers aan scrollen blijven wat ook niet de bedoeling is.

    Klopt wat betreft de kleur in de widget, de achtergrondkleur van de textwidget had ik inmiddels aangepast waarin het filmpje te zien is vandaar dat je het gemelde probleem niet kon zien.

    De afmeting van het filmpje ga ik nu aanpassen zodat passend weergegeven zal worden in de widget zonder de storende achtergrondkleur wit.

    Bedankt voor je reactie en tips voorzover.

    M.v.g.,
    Marinus59

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘style.css | theme tot een maximum breedte laten weergeven’ is gesloten voor nieuwe reacties.