Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Custom image in preset CSS theme question

    I've been away from CSS and HTML for a while and now I'm having some issues. This theme from Tumblr is supposed to have a set up where you can easily custom insert an image over the "about" section just over where it says "home". I'm having a hard time figuring out how to do this and blahhhh it is frustrating me. Can you just point me to where I need to insert the dang image source.

    http://ladypintada.tumblr.com/

    Side note, do you know how I could bring the content and the about section a little closer together, closing the middle gap.

    I hope this makes sense. Thank you.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    
    <!--PODEM MODIFICAR O QUE QUISEREM NO THEME, SÓ PEÇO PARA NÃO TIRAREM OS CRÉDITOS, NUNCA, JAMAIS! OBRIGADA! HAHA-->
    
    <!-- FONTE PERSONALIZADA -->
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
    
    <head>
    
    <title>{TITLE}</title>
    
    
    <!-- DEFAULT VARIABLES -->
    
    <link rel="shortcut icon" href="{Favicon}">
    
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
    
    
    <!-- APPEARANCE -->
    
    <meta name="image:Background" content="url(http://www.piccolecreazioni.com/velvetfactory/images/you/pattern/21/VF_q02.jpg)"/>
    <meta name="color:Navigation" content="#000000"/>
    <meta name="color:Navigation2" content="#E4DDA9"/>
    <meta name="image:NavigationBG" content="url(http://www.pixyup.com/uploads/112327214e1b6ab91f377.jpg)"/>
    <meta name="color:Sidebar" content="#ffffff"/>
    <meta name="color:Box" content="#ffffff"/>
    <meta name="color:Title" content="#B3B1B1"/>
    <meta name="color:Text" content="#000000"/>
    <meta name="color:Link" content="#FF004D"/>
    <meta name="color:Link2" content="#000000"/>
    <meta name="font:Body" content="georgia"/>
    <meta name="if:Enable Image Opacity" content="1"/>
    <meta name="image:300pxPortrait" content=""/>
    
    <meta name="text:Link 1 Name" content=""/>
    <meta name="text:Link 1 URL" content=""/>
    
    <meta name="text:Link 2 Name" content=""/>
    <meta name="text:Link 2 URL" content=""/>
    
    <meta name="text:Link 3 Name" content=""/>
    <meta name="text:Link 3 URL" content=""/>
    
    <meta name="text:Link 4 Name" content=""/>
    <meta name="text:Link 4 URL" content=""/>
    
    <meta name="text:Link 5 Name" content=""/>
    <meta name="text:Link 5 URL" content=""/>
    
    <style type="text/css">
    
    body {
    background-image:{image:Background};
    background-position:{text:Background Image Position};
    {block:IfBackgroundImageNotRepeat}background-repeat:no-repeat;{/block:IfBackgroundImageNotRepeat}
    {block:IfBackgroundImageFixed}background-attachment: fixed;{/block:IfBackgroundImageFixed}
    color:{color:Text};
    font-size:13px;
    line-height:18px;
    font-family:{font:body};
    }
    
    
    a, a:visited, a:active {
    color:{color:Link};
    text-decoration: none;
    }
    
    a:hover {
    color:{color:Link2};
    text-decoration:none;
    }
    
    p {
    margin: 2px 2px 2px 2px;
    line-height:16px;
    padding: 0;
    }
    
    ol.notes {
    padding: 0px;
    margin: 25px 0px;
    list-style-type: none;
    border-bottom: dotted 1px {color:text};
    }
    
    ol.notes li.note {
    border-top: dotted 1px {color:text};
    padding: 10px;
    }
    
    ol.notes li.note img.avatar {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    }
    
    blockquote{padding:0px; padding-left:5px; margin:5px; border-left:1px dotted {color:text};}
    blockquote img{display:block;}
    blockquote p{padding:0px; margin:0px;}
    blockquote blockquote{position:relative; left:-5px; margin-top:0px; margin-right:0px; padding-right:0px;}
    a img{border:none;}
    
    
    
    
    
    #content{
    position:absolute;
    top:25px;
    width:520px;
    right:180px;
    padding:10px;
    margin:auto;
    }
    
    
    
    
    
    #sidebar{
    top:85px;
    width:300px;
    position:fixed;
    left:47px;
    overflow:hidden;
    padding:0px;
    background-color: {color:Sidebar};
    }
    
    
    
    
    #post{
    padding:10px;
    margin-bottom:10px;
    background-color: {color:Box};
    }
    
    
    
    
    h1 {
    font-size:24px;
    font-weight:normal;
    font:{font:title};
    color:{color:Title};
    text-transform:none;
    line-height:20px;
    letter-spacing:-2px;
    }
    
    
    .h2 {
    font-size:11px;
    font:{font:text};
    color:{color:text};
    background-color: transparent;
    text-align: right;
    text-transform:uppercase;
    padding:1px;
    font-weight:normal;
    }
    
    
    h3 {
    margin-top:10px;
    margin-bottom:10px;
    font-size:28px;
    font-weight:normal;
    font:{font:title};
    color:{color:Title};
    text-transform:none;
    line-height:20px;
    letter-spacing:-2px;
    }
    
    h4 {
    font-size:30px;
    font:{font:title};
    color:{color:Title};
    text-transform:none;
    line-height:20px;
    letter-spacing:-2px;
    font-weight:normal;
    }
    
    .name {
    font-size:28px;
    font:{font:title};
    text-transform:lowercase;
    line-height:25px;
    letter-spacing:-2px;
    font-weight:normal;
    }
    
    #credit{
    padding-top:5px;
    text-align:center;
    width:500px;
    }
    
    
    .album-art {
    float: left;
    width: 100px;
    height: 100px;
    overflow: hidden;
    }
    
    .about {
    font-size:15px;
    font:;
    color:#FFFFFF;
    background-color: #transparent
    text-align: center;
    text-transform:uppercase;
    padding:1px;
    margin-bottom:-15px;
    letter-spacing:10px;
    
    }
    
    
    .introduction_title { 
    float: left;
    left: 40px
    color: #303347;
    font-family: 'Dancing Script';
    text-transform: none;
    font-size: 70px;
    letter-spacing: 2px;        
    }
    
    .introduction_subtitle { 
    color: #303347;
    font-family: 'Dancing Script';
    text-transform: none;
    font-size: 13px;
    letter-spacing: 2px;        
    }
    
    
    div.navigation a{
    background: {image:NavigationBG}; color: {color:Navigation}; display:block; width: 320px; height: 20px; text-align: center; padding-top:0px; margin-left:0px; margin-top:0px; position:relative; text-align: center; text-transform: uppercase; z-index:1; font-weight: regular; display: inline-block; border-bottom: #transparent 1px dotted;
    }
    div.navigation a:hover{
    background: #transparent; color: {color:Navigation2}; letter-spacing:6px; text-transform: uppercase; border-bottom: #transparent 3px solid;
    }
    
    
    div.botright{
    -moz-border-radius:10px; border-radius:10px;
    z-index:9;
    font-size:9px;
    display:block;
    position: fixed;
    left:-14px;
    bottom:0px;
    padding:6px;
    padding-left:20px;
    background-image:url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png);
    background-color: transparent;}
    
    
    
    
    
    img, a img {
    border: 0px !important;
    }
    
    .pimg {
    {block:IfEnableImageOpacity}
    opacity: 0.8; filter:alpha(opacity=85);
    {/block:IfEnableImageOpacity}
    -webkit-transition-duration: 0.8s;
    max-width: 500px;
    }
    
    .pimg:hover {
    {block:IfEnableImageOpacity}
    opacity:1; filter:alpha(opacity=99);
    {/block:IfEnableImageOpacity}
    }
    
    
    
    {CustomCSS}
    
    
    
    </style>
    
    
    
    </head>
    <body>
    
    
    
    <center>
    
    </script></div><br><br><center>
    <div class="text">{text:your url here}</div>
    </div></div><p></center>
    
    </center>
    
    <div id="sidebar">
    <br>
    {block:If300pxPortraitImage}<a href="/"><img src={image:300pxPortrait} width=300"></a><br><p>{/block:If300pxPortraitImage}
    <br>
    <div class="navigation">
    <a href="/">Home</a>
    <a href="/archive">Archive</a>
    <a href="/ask">Ask</a>
    {block:IfLink1Name}<a href="{text:link 1 url}">{text:link 1 name}</A>{/block:IfLink1Name}
    {block:IfLink2Name}<a href="{text:link 2 url}">{text:link 2 name}</A>{/block:IfLink2Name}
    {block:IfLink3Name}<a href="{text:link 3 url}">{text:link 3 name}</A>{/block:IfLink3Name}
    {block:IfLink4Name}<a href="{text:link 4 url}">{text:link 4 name}</A>{/block:IfLink4Name}
    {block:IfLink5Name}<a href="{text:link 5 url}">{text:link 5 name}</A>{/block:IfLink5Name}
    </div><p>
    <br>
    <div class="about"></div><br><center><em>
    {block:Description}{Description}{/block:Description}
    </center></em>
    <br>
    <br>
    <em>
    <small>
    Theme by: <u><a href="http://heloteixeira.tumblr.com"><font color="2c2c2c">Heloísa Teixeira</font></u></a>
    <br>
    Base by: <u><a href="http://jahrenesis.tumblr.com"><font color="2c2c2c">Jahrenesis</font></u></a>
    </em>
    </small>
    </div>
    
    
    
    
    <div id="content">
    
    
    {block:Posts}
    
    
    
    <div id="post">
    
    {block:Text}
    {block:Title}
    <h3><a href="{Permalink}">{Title}</a></h3>
    {/block:Title}
    {Body}
    {/block:Text}
    
    {block:Photo}
    {LinkOpenTag}<img class="pimg" src="{PhotoURL-500}" alt="{PhotoAlt}" width="500px"/>{LinkCloseTag}
    {block:Caption}
    {Caption}
    {/block:Caption}
    {/block:Photo}
    
    {block:Photoset}
    <center>{Photoset-500}</center>
    {block:Caption}
    {Caption}
    {/block:Caption}
    {/block:Photoset}
    
    <em>
    {block:Quote}
    <h3>"{Quote}"</h3>
    {block:Source}
    -{Source}
    {/block:Source}
    {/block:Quote}
    </em>
    
    {block:Link}
    <a href="{URL}" class="link" {Target}><h3>{Name}</h3></a>
    {block:Description}
    {Description}
    {/block:Description}
    {/block:Link}
    
    {block:Chat}
    {block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
    {block:Lines}
    {block:Label}<b>{Label}</b>{/block:Label}
    {Line}<br>
    {/block:Lines}
    {/block:Chat}
    
    
    {block:Video}
    <center>{Video-500}</center>
    {block:Caption}
    {Caption}
    {/block:Caption}
    {/block:Video}
    
    
    {block:Audio}<br/>
    {block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" height="90px"></div>{/block:AlbumArt}
    {AudioPlayerWhite}
    {block:Caption}
    {Caption}
    {/block:Caption}
    {PlayCountWithLabel}<br><br>
    {/block:Audio}<br>
    
    <div class="h2">
    {block:NoteCount}{NoteCountWithLabel}</a> ∞ <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank">Reblog</a> ∞ {/block:NoteCount}
    <a href="{Permalink}">
    {TimeAgo}{/Block:NoteCount}</a>
    </div>
    
    {block:PermalinkPage}
    <center>{Block:NoteCount}Posted on {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}{/Block:NoteCount}
    <br>
    {block:HasTags} Tagged as: {block:Tags}<a href="{TagURL}">{Tag}. </a>{/block:Tags}<br> {/block:HasTags}
    {block:RebloggedFrom}
    Reblogged from: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
    Originally posted by: <a href="{ReblogRootURL}">{ReblogRootName}</a> {/block:RebloggedFrom}
    </center>
    {block:PostNotes}{PostNotes}{/block:PostNotes}
    {/block:PermalinkPage}
    
    </div>
    {/block:Posts}
    
    
    
    
    <div id="post">
    <div id="credit">
    <font size="5">
    <center>{block:Pagination}
    {block:PreviousPage}
    <a href="{PreviousPage}">&#171;</a>
    {/block:PreviousPage}
    
    {block:JumpPagination length="5"}
    {block:CurrentPage}
    {PageNumber}
    {/block:CurrentPage}
    
    {block:JumpPage}
    <a href="{URL}">{PageNumber}</a>
    {/block:JumpPage}
    {/block:JumpPagination}
    
    {block:NextPage}
    <a href="{NextPage}">&#187;</a>
    {/block:NextPage}
    {/block:Pagination}</center>
    </font></div></div>
    
    
    <div class="botright">
    <b>Theme By: </b><a href="http://heloteixeira.tumblr.com"><font color="ffffff">Heloísa Teixeira</font></a>
    </div>
    
    </div>
    </div>
    </div>
    </body>
    </html>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    link wasn't working, but hopefully this is your website.

    ---

    so here's the css for the left panel (#sidebar) and right panel (#content).

    for #sidebar change left: 47px; to a larger number (maybe 70px or so).
    for #content change right: 180px; to a larger number (maybe 210px or so).



    that will reduce the gap, however for the image, are you trying to make it like a background to your about section, on top, or some place else?
    Last edited by Sammy12; 08-03-2011 at 04:58 AM.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ladypintada.tumblr.com/

    Here try that link. Sorry about that.



    Where the picture of the two girls sitting over the "home" link is where I'd like a picture. Roughly the same size. Sorry I can't get a better preview.

    And thank you so much for the other part! That totally fixed the gap issue!

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You can insert image under <div id="sidebar">

    Code:
    <div id="sidebar"><br>
    
    <br>
    
    <div class="navigation">
    <a href="/">Home</a>
    
    <a href="/archive">Archive</a>
    
    <a href="/ask">Ask</a>
    Also now, your sidebar is hidden behind the main contain


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •