The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Theme Help
unsavvy
post Jan 15 2013, 09:11 PM
Post #1





Group: Members
Posts: 1
Joined: 15-January 13
Member No.: 18,453
Hi everyone~

I'd like some help with the theme I'm currently using for my tumblr blog. Certain pictures when I reblog them won't fit completely into the window; how can I make it so that they're all the same width? The smaller ones leave a white bar and it looks weird.

Here's the code:

CODE


<html>
    <head>
        <!-- Win98 from themes.edada.ms -->
        <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
        {block:Description}<meta name="description" value="{MetaDescription}" />{/block:Description}
        <link rel="shortcut icon" href="{Favicon}" />
        <link rel="alternate" type="application/rss+xml" href="{RSS}" />
        <meta charset="utf-8" />

        <meta name="image:Background" content="" />

        <meta name="color:Background" content="#008080" />
        <meta name="color:Link Color" content="#000000" />
        
        <meta name="if:Enable Infinite Scrolling" content="1" />
        <meta name="if:Background Image Cover" content="0" />
        <meta name="if:Display Photo Captions" content="1" />
        <meta name="if:Display Description" content="0" />
        <meta name="if:Display Home Icon" content="1" />
        <meta name="if:Display Ask Icon" content="1" />
        <meta name="if:Display Submit Icon" content="1" />
        <meta name="if:Display Pages Icon" content="1" />
        <meta name="if:Display Archive Icon" content="1" />

        <style type="text/css">
            body, html {
                margin: 0;
                padding: 0;
            }
        
            body {
                background: {color:Background} url('{image:Background}') repeat fixed;
                {block:IfBackgroundImageCover}background-size: cover;{/block:IfBackgroundImageCover}
                font-family: 'Arial', sans-serif;
                font-size: 12px;
            }
        
            a {
                color: {color:Link Color};
                text-decoration: none;
            }
        
            a:hover {
                text-decoration: underline;
            }
        
            .icons {
                margin: 0 0 0 10px;
                list-style-type: none;
                padding: 0;
                width: 100px;
                float: left;
                position: fixed;
                z-index: 2;
            }
        
            .my_computer, .my_documents, .network_neighborhood, .folder, .recycle_bin, .start_menu, .application_icons, .start_bar .start_button .logo, .start_bar .tray .calendar, .start_menu, .window .top, .window .middle, .window .bottom, .description .top, .description .ok_button, .description .bottom {
                background-image: url('http://static.tumblr.com/fpdiq1j/O6Um4f3al/master_sprite.png');
                margin: auto;
            }
        
            .my_computer {
                height: 32px;
                width: 32px;
                background-position: -616px -157px;
            }
        
            .my_documents {
                height: 30px;
                width: 32px;
                background-position: -616px -189px;
            }
        
            .network_neighborhood {
                height: 32px;
                width: 32px;
                background-position: -616px -219px;
            }
        
            .recycle_bin {
                height: 32px;
                width: 30px;
                background-position: -616px -251px;
            }
        
            .folder{
                height: 27px;
                width: 32px;
                background-position: -616px -283px;
            }
        
            .start_bar .start_button .logo {
                width: 16px;
                height: 14px;
                background-position: -633px -103px;
            }
        
            .application_icons {
                height: 16px;
                width: 84px;
                background-position: -565px -69px;
            }
        
            .start_bar .tray .calendar {
                height: 16px;
                width: 16px;
                background-position: -632px -87px;
            }
        
            .start_menu {
                height: 383px;
                width: 168px;
                background-position: 0px 0px;
            }
        
            .window .top {
                height: 44px;
                background-position: -168px 0px;
            }
            
            .description .top {
                height: 21px;
                background-position: -168px -134px;
            }
            
            .description .ok_button  {
                height: 23px;
                width: 75px;
                margin-top: 7px;
                background-position: -231px -158px;
            }
            
            .description .bottom {
                height: 2px;
                background-position: -168px -155px;
            }
        
            .window .middle, div.notes, div.attribution, div.tags {
                background: url('http://static.tumblr.com/fpdiq1j/utSm3gwcy/large_middle.png');
                background-repeat: repeat-y;
            }
        
            .window .bottom {
                background-position: -168px -46px;
                height: 22px;
            }
        
            .icon_label {
                padding-top: 6px;
                padding-bottom: 15px;
                color: white;
                text-align: center;
            }
        
            .icons a{
                color: white;
                text-decoration: none;
            }
        
            .title {
                font-size: 1.4em;
                margin-bottom: 3px;
            }
        
            .attempt_resize {
                max-width: 100%;
            }
        
            .label {
                font-weight: bold;
            }
            
            .body img, .caption img {
                max-width: 100%;
                overflow: hidden;
            }
        
            #desktop {
                margin: 20px auto 0 auto;
                width: 480px;
                z-index: 3;
                position: relative;
            }  
            
            {block:IfEnableInfiniteScrolling}div.navigation, #infscr-loading {
                display: none !important;
            }{/block:IfEnableInfiniteScrolling}
            
            .navigation {
                padding-bottom: 55px;
                height: 20px;
                font-weight: bold;
            }
            
            .navigation .next, .navigation .previous {
                background-color: #FFFFFF;
                padding: 3px 4px;
            }
            
            .navigation .next {
                float: left;
            }
            
            .navigation .previous {
                float: right;
            }
        
            .window {
                width: 480px;
                max-width: 480px;
                margin: 0 0 30px;
            }
        
            .window .top {
                height: 44px;
            }
        
            .window .top .info {
                top: 26px;
                left: 10px;
                position: relative;
                width: 300px;
                z-index: 4;
                font-size: 11px;
                line-height: 13px;
            }
        
            .window .middle, div.notes, div.attribution, div.tags {
                background-repeat: repeat-y;
                padding: 4px 26px 4px 10px;
            }
            
            .middle .caption {
                margin-top: 5px;
            }
            
            .middle .video_player embed {
                display: block;
                width: 444px !important;
                max-width: 444px !important;
            }
            
            .middle .video_player iframe {
                display: block;
                width: 444px !important;
                max-width: 444px !important;
                height: 249px !important;
                max-height: 249px !important;
            }
            
            .window .bottom {
                height: 22px;
            }
            
            .description {
                position: fixed;
                top: 20%;
                right: 10%;
                z-index: 4;
                width: 200px;
            }
            
            .description .middle {
                background: url('http://static.tumblr.com/fpdiq1j/leqm4f39j/description_middle.png') repeat-y;
                display: block;
                padding: 5px;
                max-width: 190px;
                font-size: 11px;
            }
        
            .start_bar {
                position: fixed;
                background-color: rgb(192,192,192);
                bottom: 0;
                height: 28px;
                width: 100%;
                z-index: 4;
            }
        
            .start_menu {
                position: fixed;
                z-index: 3;
                bottom: 28px;
                display: none;
            }
        
            .start_bar .top_border {
                border-bottom: 1px solid rgb(255,255,255);
                border-top: 1px solid rgb(223,223,223);
            }
        
            .start_bar .start_button {
                float: left;
                border-top: 2px solid white;
                border-left: 2px solid white;
                border-bottom: 2px solid gray;
                border-right: 2px solid gray;
                height: 18px;
                width: 54px;
                margin-left: 2px;
                margin-top: 2px;
            }
        
            .sb_click {
                border-bottom: 2px solid white !important;
                border-right: 2px solid white !important;
                border-top: 2px solid gray !important;
                border-left: 2px solid gray !important;
            }
        
            .start_bar .start_button .text{
                float: right;
                display: inline;
                margin-right: 4px;
                line-height: 18px;
                font-weight: bold;
            }
        
            .start_bar .start_button .logo{
                float: left;
                margin-top: 2px;
                margin-left: 2px;
            }
        
            .start_bar .big_seperator {
                float: left;
                border-left: 1px solid rgb(128,128,128);
                border-right: 1px solid rgb(255,255,255);
                height: 22px;
                margin-top: 2px;
                margin-left: 2px;
            }
        
            .start_bar .small_seperator {
                float: left;
                border-left: 1px solid rgb(255,255,255);
                border-top: 1px solid rgb(255,255,255);
                border-right: 1px solid rgb(128,128,128);
                border-bottom: 1px solid rgb(128,128,128);
                background-color: rgb(192,192,192);
                width: 1px;
                height: 16px;
                margin-top: 4px;
                margin-left: 2px;
            }
        
            .start_bar .application_icons {
                float: left;
                margin-top: 5px;
                margin-left: 7px;
                margin-right: 7px;
            }
        
            .start_bar .tray {
                float: right;
                border-top: 1px solid rgb(128,128,128);
                border-left: 1px solid rgb(128,128,128);
                border-bottom: 1px solid rgb(255,255,255);
                border-right: 1px solid rgb(255,255,255);
                height: 18px;
                width: 79px;
                margin-right: 5px;
                margin-top: 2px;
            }
        
            .start_bar .tray .time {
                line-height: 18px;
                float: right;
                font-size: 10px;
                margin-right: 10px;
            }
        
            .start_bar .tray .calendar {
                float: left;
                margin-top: 1px;
                margin-left: 3px;
            }
            
            /* COMMON */
            
            blockquote {
                margin-left: 10px;
                padding-left: 10px;
                border-left: 1px solid #000;
            }
            
            #infscr-loading {
                display: none !important;
                opacity: 0 !important;
                visibility: hidden !important;
            }
            
            .middle img {
                display: block;
            }
            
            .middle a img {
                border: 0;    
            }
            
            .middle p:first-child, ul:first-child, ol:first-child, blockquote:first-child {
                margin-top: 0;
            }
            
            /*.middle p:only-child, ul:only-child, ol:only-child, blockquote:only-child {
                margin-top: 0;
                margin-bottom: 0;  
            }*/
            
            .middle p:last-child, ul:last-child, ol:last-child, blockquote:last-child {
                margin-bottom: 0;
            }
            
            /* END COMMON */
            
            {block:IfNotDisplayPhotoCaptions}.caption{
                display:none;
            }{/block:IfNotDisplayPhotoCaptions}

            {block:IfNotDisplayHomeIcon}.home{
                display:none;
            }{/block:IfNotDisplayHomeIcon}

            {block:IfNotDisplayAskIcon}.ask{
                display:none;
            }{/block:IfNotDisplayAskIcon}

            {block:IfNotDisplaySubmitIcon}.submit{
                display:none;
            }{/block:IfNotDisplaySubmitIcon}

            {block:IfNotDisplayPagesIcon}.pages{
                display:none;
            }{/block:IfNotDisplayPagesIcon}

            {block:IfNotDisplayArchiveIcon}.archive{
                display:none;
            }{/block:IfNotDisplayArchiveIcon}
        
            {CustomCSS}
        </style>
        
        
    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://static.tumblr.com/fpdiq1j/S5Jmd2p8d/win98.js"></script>
        <script type="text/javascript">
            var has_infinite_scrolling = {block:IfEnableInfiniteScrolling}true{/block:IfEnableInfiniteScrolling}{block:IfNotEnableInfiniteScrolling}false{/block:IfNotEnableInfiniteScrolling};
        </script>
    </head>

    <body>
        <div class="wrapper">
            <div class="icons">
                <a href="/" class="home">
                    <div class="my_computer"></div>
                    <div class="icon_label">{Title}</div>
                </a>
            
                {block:AskEnabled}
                    <a href="/ask" class="ask">
                        <div class="my_documents"></div>
                        <div class="icon_label">{AskLabel}</div>
                    </a>
                {/block:AskEnabled}
                
                {block:SubmissionsEnabled}
                    <a href="/submit" class="submit">
                        <div class="network_neighborhood"></div>
                        <div class="icon_label">{SubmitLabel}</div>
                    </a>
                {/block:SubmissionsEnabled}

                {block:HasPages}
                    {block:Pages}
                        <a href="{URL}" class="pages">
                            <div class="folder"></div>
                            <div class="icon_label">{Label}</div>
                        </a>    
                    {/block:Pages}
                {/block:HasPages}

                <a href="/archive" class="archive">
                    <div class="recycle_bin"></div>
                    <div class="icon_label">{lang:Archive}</div>
                </a>
            </div>
            {block:IfDisplayDescription}
                {block:Description}
                    <div class="description">
                        <div class="top"></div>
                        <div class="middle">
                            {Description}
                            <div class="ok_button"></div>
                        </div>
                        <div class="bottom"></div>
                    </div>        
                {/block:Description}
            {block:IfDisplayDescription}
            <div id="desktop">
                {block:Posts}
                    <div class="window">
                        <a href="{Permalink}">
                            <div class="top">
                                {block:Date}
                                    <div class="info">
                                        Posted on {DayOfMonth}{DayOfMonthSuffix} {ShortMonth} at {12Hour}:{Minutes} {CapitalAmPm}{block:NoteCount}, with {NoteCountWithLabel}{/block:NoteCount}
                                    </div>
                                {/block:Date}
                            </div>
                        </a>
                        <div class="middle">
                            {block:Text}
                                {block:Title}
                                    <div class="title">
                                        {Title}
                                    </div>
                                {/block:Title}
                                <div class="body">
                                    {Body}
                                </div>
                            {/block:Text}

                            {block:Photo}
                                {LinkOpenTag}<img src="{PhotoURL-500}" class="attempt_resize" alt="{PhotoAlt}" />{LinkCloseTag}
                                {block:Caption}
                                    <div class="caption">
                                        {Caption}
                                    </div>
                                {/block:Caption}
                            {/block:Photo}

                            {block:Photoset}
                                <div class="photoset_wrapper">
                                    {Photoset-400}
                                </div>
                                {block:Caption}
                                    <div class="caption">
                                        {Caption}
                                    </div>
                                {/block:Caption}
                            {/block:Photoset}

                            {block:Quote}
                                <div class="title">
                                    "{Quote}"
                                </div>
                                {block:Source}
                                    <div class="body">
             &nbs
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Web Site Functionality · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 08:49 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC