The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Tumblr Edit Help
Loli-Loveless
post Nov 21 2014, 04:10 PM
Post #1





Group: Members
Posts: 1
Joined: 21-November 14
Member No.: 21,836
Hello,

I'm a really newbie at editing such sites-http://loli-loveless.tumblr.com/-
My wish is to have just 3 post in a row who are bigger then they are now. But I don't find an option to change the width in the HTML code to another standart size.
It looks like this http://theinfinitetheme.tumblr.com/ but with my header , avatar and the tags under the posts. And I don't find a free theme that looks like this to overwrite it.
If somebody knows how to get the taxtbox under the post transparent it would also be very nice if he or she could show me how to change this.

Thank you in anticipation




If you need the code:


CODE
<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie10 lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie10 lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]><html class="lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
    <head>
---------------------------------------------------------------

<style> html, body, a, a:hover { cursor:url('http://www.snazzyspace.com/cursorsfolder/cookie.png'), auto !important; }</style>


------------------------------------------------------------------------





<script type="text/javascript" src="http://www.snazzyspace.com/moveobj.js"> </script>
<script type="text/javascript">

//

//Step 1: Define unique variable names depending on number of flying images (ie:3):
var flyimage1, flyimage2, flyimage3

function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
flyimage1=new Chip("flyimage1",100,110);
flyimage2=new Chip("flyimage2",100,110);
flyimage3=new Chip("flyimage3",100,110);


//Step 3: Using the same variable names as 1), add or delete more of the below lines:
movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");

}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart

</script>


<!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above -->

<DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:100; height:110;">
<A HREF="http://www.snazzyspace.com/moving-objects.php"><IMG SRC="http://www.loaditup.de/files/833940_g8rdmpmfsv.png" BORDER=0></a>
</DIV>

<DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:100; height:110;">
<A HREF="http://www.snazzyspace.com/moving-objects.php"><IMG SRC="http://www.loaditup.de/files/833941_s88x2cdbzn.png" BORDER=0></a>
</DIV>

<DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:100; height:110;">
<A HREF="http://www.snazzyspace.com/moving-objects.php"><IMG SRC="http://www.loaditup.de/files/833945_qn8ywhpdwt.png" BORDER=0></a>
</DIV>





   ------------------------------------------------------
   <script type="text/javascript">
// <![CDATA[
var colour="#a800ff";
var sparkles=120;

//
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function() { if (document.getElementById) {
  var i, rats, rlef, rdow;
  for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
  }
  set_width();
  sparkle();
}}

function sparkle() {
  var c;
  if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
      star[c].style.left=(starx[c]=x)+"px";
      star[c].style.top=(stary[c]=y)+"px";
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
      star[c].style.visibility="visible";
      starv[c]=50;
      break;
    }
  }
  for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
  }
  setTimeout("sparkle()", 40);
}

function update_star(i) {
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
      star[i].style.top=stary[i]+"px";
      starx[i]+=(i%5-2)/5;
      star[i].style.left=starx[i]+"px";
    }
    else {
      star[i].style.visibility="hidden";
      starv[i]=0;
      return;
    }
  }
  else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
  }
}

function update_tiny(i) {
  if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
  }
  if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
      tiny[i].style.top=tinyy[i]+"px";
      tinyx[i]+=(i%5-2)/5;
      tiny[i].style.left=tinyx[i]+"px";
    }
    else {
      tiny[i].style.visibility="hidden";
      tinyv[i]=0;
      return;
    }
  }
  else tiny[i].style.visibility="hidden";
}

document.onmousemove=mouse;
function mouse(e) {
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
}

function set_scroll() {
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}

window.onresize=set_width;
function set_width() {
  if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
}

function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}
// ]]>
</script>
------------------------------------------------------------------------

        {MobileAppHeaders}
        <meta charset="utf-8">
        <title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
        {block:Description}
        <meta name="description" content="{MetaDescription}">
        {/block:Description}

        {block:Hidden}
        <meta name="if:Sliding header" content="1">
        <meta name="if:Collapse navigation" content="1">
        <meta name="if:Endless scrolling" content="1">
        <meta name="select:Layout" content="regular" title="Regular">
        <meta name="select:Layout" content="narrow" title="Narrow">
        <meta name="select:Layout" content="grid" title="Grid">
        <meta name="text:Disqus shortname" content="">
        <meta name="text:Google analytics ID" content="">
        {/block:Hidden}

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">

        <link rel="stylesheet" href="http://static.tumblr.com/vr9xgox/PuGmmhqcs/normalize.css">
        <link rel="stylesheet" href="http://static.tumblr.com/vr9xgox/qE8n2yg06/optica-icons.css">
        <link rel="stylesheet" href="http://static.tumblr.com/n3pcpus/zWsnebjcm/main.css">

        <!-- HTML5 Shiv -->
        <!--[if lt IE 9]>
            <script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
        <![endif]-->

        <style>
            /* Colors */
            body {
                background: {BackgroundColor};
            }

            h1 {
                font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
                font-weight: {TitleFontWeight};
            }

            h1 a,
            .description,
            .search-header {
                color: {TitleColor};
            }

            .h-line {
                background: {TitleColor};
            }

            a {
                color: {AccentColor};
            }

            #pagination a,
            .exposed-nav-wrapper li a {
                color: {AccentColor};
            }

            #pagination a.next:after {
                border-left-color: {AccentColor};
            }

            #pagination a.previous:after {
                border-right-color: {AccentColor};
            }

            .loader .loader-bar {
                background-color: {TitleColor};
            }

            .link-wrapper h2 a {
                background-color: {AccentColor};
            }

            .header-image.cover {
                background-image: url({HeaderImage});
            }

            .user-avatar {
                background-color: {BackgroundColor};
                border-color: {BackgroundColor};
            }

            .avatar-style-square .user-avatar {
                -wekbit-box-shadow: 0 0 0 4px {BackgroundColor};
                -moz-box-shadow: 0 0 0 4px {BackgroundColor};
                box-shadow: 0 0 0 4px {BackgroundColor};
            }

            .no-header-image .selector .bar-icon,
            .contain-header-image .selector .bar-icon {
                background: {AccentColor};
            }

            .no-header-image .search-only .selector .icon,
            .contain-header-image .search-only .selector .icon {
                color: {AccentColor};
            }

            /* Adjust menus for light accents on light backgrounds */
            .light-on-light.no-header-image .selector .bar-icon,
            .light-on-light.contain-header-image .selector .bar-icon {
                background: #444;
            }

            .light-on-light.no-header-image .search-only .selector .icon,
            .light-on-light.contain-header-image .search-only .selector .icon {
                color: #444;
            }

            /* Adjust menus for dark accents on dark backgrounds */
            .dark-on-dark.no-header-image .selector .bar-icon,
            .dark-on-dark.contain-header-image .selector .bar-icon {
                background: #fff;
            }

            .dark-on-dark.no-header-image .search-only .selector .icon,
            .dark-on-dark.contain-header-image .search-only .selector .icon {
                color: #fff;
            }

            @media screen and (max-device-width: 568px) {
                .header-image.cover {
                    background-image: url({HeaderImage-640});
                    -webkit-background-size: cover;
                    background-size: cover;
                }

                .nav-menu-bg,
                .nav-menu-wrapper .nav-menu.active:before,
                .nav-menu .pop-menu ul {
                    background: {BackgroundColor};
                }

                .nav-menu.active .selector .bar-icon,
                .below-header .selector .bar-icon {
                    background: {AccentColor};
                }

                .nav-menu .pop-menu ul li a,
                .below-header .search-only .selector .icon {
                    color: {AccentColor};
                }

                /* Adjust menus for light accents on light backgrounds */
                .light-on-light.below-header .nav-menu .selector .bar-icon,
                .light-on-light.below-header .selector .bar-icon {
                    background: #444;
                }

                .light-on-light .nav-menu .pop-menu ul li a,
                .light-on-light.below-header .search-only .selector .icon {
                    color: #444;
                }

                /* Adjust menus for dark accents on dark backgrounds */
                .dark-on-dark .nav-menu .selector .bar-icon,
                .dark-on-dark .below-header .selector .bar-icon {
                    background: #fff;
                }

                .dark-on-dark .nav-menu .pop-menu ul li a,
                .dark-on-dark.below-header .search-only .selector .icon {
                    color: #fff;
                }

                .avatar-style-square .user-avatar {
                    -wekbit-box-shadow: 0 0 0 3px {BackgroundColor};
                    -moz-box-shadow: 0 0 0 3px {BackgroundColor};
                    box-shadow: 0 0 0 3px {BackgroundColor};
                }

            }

            /* Custom CSS */
            {CustomCSS}
        </style>
    </head>
    <body data-urlencoded-name="{URLEncodedName}" class="{select:Layout}{block:IndexPage} index-page{/block:IndexPage}{block:PermalinkPage} permalink{/block:PermalinkPage}{block:SearchPage} search-page{block:NoSearchResults} no-results{/block:NoSearchResults}{/block:SearchPage}{block:HideHeaderImage} no-header-image{/block:HideHeaderImage}{block:NoStretchHeaderImage} contain-header-image{/block:NoStretchHeaderImage}">
        <section id="page">
            <div class="nav-menu-wrapper {block:IfNotCollapseNavigation}search-only{/block:IfNotCollapseNavigation}">
                <nav class="nav-menu pop">
                    <a class="selector">
                        {block:IfCollapseNavigation}
                            <div class="bar-icon-wrapper">
                                <span class="bar-icon"></span>
                                <span class="bar-icon"></span>
                                <span class="bar-icon"></span>
                            </div>
                        {/block:IfCollapseNavigation}
                        {block:IfNotCollapseNavigation}
                            <span class="icon icon-search_16"></span>
                            <span class="icon icon-close"></span>
                        {/block:IfNotCollapseNavigation}
                    </a>
                    <div class="pop-menu west">
                        <ul>
                            <li class="no-hover search">
                                <form action="/search" method="get" id="search">
                                    <input type="text" name="q" id="q" placeholder="{lang:Search}" value="{SearchQuery}">
                                    <button type="submit" class="icon-search_16"></button>
                                </form>
                            </li>
                            {block:IfCollapseNavigation}
                                <li>
                                    <a href="/archive" class="archive">{lang:Archive} <i class="icon-arrow_carrot_right"></i></a>
                                </li>
                                {block:AskEnabled}
                                    <li>
                                        <a href="/ask" class="ask">{AskLabel} <i class="icon-arrow_carrot_right"></i></a>
                                    </li>
                                {/block:AskEnabled}
                                {block:HasPages}
                                    {block:Pages}
                                    <li>
                                        <a href="{URL}" class="page">{Label} <i class="icon-arrow_carrot_right"></i></a>
                                    </li>
                                    {/block:Pages}
                                {/block:HasPages}
                                {block:SubmissionsEnabled}
                                    <li>
                                        <a href="/submit" class="submit">{SubmitLabel} <i class="icon-arrow_carrot_right"></i></a>
                                    </li>
                                {/block:SubmissionsEnabled}
                            {block:IfCollapseNavigation}
                        </ul>
                    </div>
                </nav>
                <div class="glass"></div>
            </div>
            {block:IfCollapseNavigation}
            <div class="nav-menu-bg"></div>
            {/block:IfCollapseNavigation}
            <div class="header-wrapper
                {block:HideTitle}{block:HideDescription}no-title-desc {/block:HideDescription}{/block:HideTitle}
                {block:HideHeaderImage}no-image {/block:HideHeaderImage}
                {block:HideAvatar}avatar-hidden{/block:HideAvatar}
                {block:ShowAvatar}avatar-style-{AvatarShape}{/block:ShowAvatar}">

                <header id="header">
                    {block:ShowHeaderImage}
                    <div class="header-image-wrapper {block:NoStretchHeaderImage}contain{/block:NoStretchHeaderImage}">
                        <a href="/" class="header-image {block:IfSlidingHeader}parallax{/block:IfSlidingHeader} {block:StretchHeaderImage}cover{/block:StretchHeaderImage} {block:NoStretchHeaderImage}contain{/block:NoStretchHeaderImage}" data-bg-image="{HeaderImage}">
                            {block:NoStretchHeaderImage}
                            <img src="{HeaderImage}" alt="">
                            {/block:NoStretchHeaderImage}
                        </a>
                        <div class="loader-bg"></div>
                    </div>
                    {/block:ShowHeaderImage}

                    <div class="blog-title content">
                        <figure class="avatar-wrapper{block:IndexPage} animate{/block:IndexPage}">
                            <a href="/" style="background-image: url({PortraitURL-128})" class="user-avatar"><img src="{PortraitURL-128}" alt="" class="print-only invisible"></a>
                        </figure>

                        <div class="title-group{block:IndexPage} animate{/block:IndexPage}">
                            {block:ShowTitle}
                            <h1><a href="/">{Title}</a></h1>
                            {/block:ShowTitle}
                            {block:ShowDescription}
                            <span class="description">
                                {Description}
                            </span>
                            {/block:ShowDescription}
                        </div>
                    </div>

                    {block:IfNotCollapseNavigation}
                    <div class="{block:HideTitle}{block:HideDescription}no-title-desc{/block:HideDescription}{/block:HideTitle} exposed-nav-wrapper content">
                        <div class="h-line"></div>
                        <nav class="nav-menu">
                            <ul>
                                <li>
                                    <a href="/archive">{lang:Archive}</a>
                                </li>
                                {block:AskEnabled}
                                    <li>
                                        <a href="/ask" class="ask">{AskLabel}</a>
                                    </li>
                                {/block:AskEnabled}
                                {block:HasPages}
                                    {block:Pages}
                                    <li>
                                        <a href="{URL}" class="page">{Label}</a>
                                    </li>
                                    {/block:Pages}
                                {/block:HasPages}
                                {block:SubmissionsEnabled}
                                    <li>
                                        <a href="/submit" class="submit">{SubmitLabel}</a>
                                    </li>
                                {/block:SubmissionsEnabled}
                            </ul>
                        </nav>
                    </div>
                    {/block:IfNotCollapseNavigation}
                </header>
            </div>
            {block:SearchPage}
                <div class="search-header content">
                    <h2>
                        {lang:SearchResultCount results for SearchQuery}
                        {block:NoSearchResults}{lang:Sorry no search results found}{/block:NoSearchResults}
                    </h2>
                </div>
            {/block:SearchPage}
            <section id="posts" class="content clearfix {block:HideTitle}{block:HideDescription}no-title-desc {/block:HideDescription}{/block:HideTitle}{block:HideHeaderImage}no-image {/block:HideHeaderImage} {block:ShowAvatar}avatar-style-{AvatarShape}{/block:ShowAvatar} {block:HideAvatar}avatar-hidden{/block:HideAvatar} {block:IfNotCollapseNavigation}exposed-nav{/block:IfNotCollapseNavigation}">

                <div data-page-id="{CurrentPage}">
                    {block:Posts}
                            <article class="{block:Text}text {/block:Text}{block:Photoset}photoset {/block:Photoset}{block:Photo}photo {/block:Photo}{block:RebloggedFrom}reblogged {/block:RebloggedFrom}{block:Quote}quote {/block:Quote}{block:Link}link {/block:Link}{block:Chat}chat {/block:Chat}{block:Audio}audio {/block:Audio}{block:Video}video {/block:Video}{block:Answer}answer {/block:Answer}{block:Date}not-page post-{PostID}{/block:Date} {block:PermalinkPage} active exposed{/block:PermalinkPage}" {block:Date}data-post-id="post_{PostID}"{/block:Date}>
                                <div class="post-wrapper clearfix">
                                    {block:RebloggedFrom}
                                    <header class="reblog-header">
                                        <a class="reblog-link" href="{ReblogParentURL}"><i class="icon-reblog"></i>{ReblogParentName}</a>
                                    </header>
                                    {/block:RebloggedFrom}
                                    <section class="post">
                                        {block:Text}
                                            {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                                            {block:Body}
                                            <div class="body-text">
                                                {Body}
                                            </div>
                                            {/block:Body}
                                        {/block:Text}

                                        {block:Photo}
                                        <figure class="{block:HighRes}high-res{/block:HighRes}{block:Caption} with-caption{/block:Caption}" data-photo-width="{PhotoWidth-HighRes}">
                                            <div class="photo-wrapper">
                                                <div class="photo-wrapper-inner">
                                                    {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighR
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: 26th April 2024 - 05:02 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC