1.

Solve : CSS confusion, some help please?

Answer»

I am a newb when it comes to this stuff, but I'm trying to learn more about html codes and CSS so that I can have more options with creativity. I am using a tumblr theme that sets all my photos to the same size. I want to be able to save an image at a certain size and have it appear as such on the screen.

I read that HighRes allows the images to be sized however they are saved, but as far as I can tell that is not happening. Can anyone tell me how to modify the SCRIPT to fit my needs? When I save an image in photoshop as 100 px wide, I want it to appear like that on screen, but all my images are coming out the same, predetermined size.






http://static.tumblr.com/i2jrupg/yM2ld2ucr/jquery-1.4.4.js" language="javascript" type="text/javascript">



   {Title}
   
   
   



http://static.tumblr.com/zug3shz/aLGld613h/styles.css" />
   

   
   {block:DESCRIPTION}
      
   {/block:Description}






   
   
   
   
   
   
   
   
   
   
   
        {CustomCSS}
   
   






{block:IndexPage}
   
      
         {block:IfUseMyTitle}{Title}{/block:IfUseMyTitle}{block:IfNotUseMyTitle}Photography by
Catherine
O'CONNOR
{/block:IfNotUseMyTitle}[/url]

      

       
   
   
      

{Description}


   
{/block:IndexPage}



{block:IndexPage}
   
      {block:IfAuthorName}
         

{text:Author Name}


      {/block:IfAuthorName}
   
{/block:IndexPage}



{block:Posts}
   





{block:Photo}
   {LinkOpenTag}{LinkCloseTag}
{/block:Photo}


{block:Photoset}
   
      {Photoset-500}
   
{/block:Photoset}


{block:Chat}
   

          {block:Lines}
             
  • {block:Label}{Label}{/block:Label} {Line}

    •       {/block:Lines}      
       

{/block:Chat}


{block:Video}
   
      {Video-500}
   
{/block:Video}


{block:Link}
   {Name}[/url]
{/block:Link}


{block:Quote}
   

"{PlaintextQuote}"


   

{block:Source}- {Source}{/block:Source}


{/block:Quote}


{block:Text}
   

{PlaintextBody}


{/block:Text}


{block:Audio}
   {block:IndexPage}
      {AudioPlayerBlack}
   {/block:IndexPage}

   {block:PermalinkPage}
      {AudioPlayerWhite}
   {/block:PermalinkPage}
{/block:Audio}





{block:PermalinkPage}
   
      
         [/url]
      
{/block:PermalinkPage}


{block:Date}
   {ShortMonth} {DayOfMonth}{block:PermalinkPage} -{/block:PermalinkPage}
{/block:Date}


{block:Caption}
   
      

{Caption}


   
{/block:Caption}


{block:Title}
   
      
{PlaintextTitle}

   
{/block:Title}


{block:IndexPage}
   
{/block:IndexPage}


{block:PermalinkPage}
   
{/block:PermalinkPage}


{block:Audio}
   

          {block:Artist}
             
  • {Artist}

    •       {/block:Artist}
          {block:TrackName}
             
  • {TrackName}

    •       {/block:TrackName}
          {block:Album}
             
  • {Album}

    •       {/block:Album}
       

{/block:Audio}


Meta:



   
      
{block:HasTags}

   
   {block:IndexPage}
       Tags:
   {/block:IndexPage}
   

          {block:Tags}
             
  • #{Tag}[/url]

    •       {/block:Tags}
       

{/block:HasTags}


{block:PermalinkPage}
   
{/block:PermalinkPage}


{block:IndexPage}
   
{/block:IndexPage}


{block:PermalinkPage}
   

{PlaintextDescription}


{/block:PermalinkPage}


{block:PermalinkPage}
   
{/block:PermalinkPage}


{block:PermalinkPagination}
   

          {block:NextPost}
             
  • «[/url]

    •       {/block:NextPost}               
          {block:PreviousPost}
             
  • »[/url]

    •       {/block:PreviousPost}
       

{/block:PermalinkPagination}





{/block:Posts}



   {block:Pagination}
      

             {block:PreviousPage}
                
  • « Previous Page[/url]

    •          {/block:PreviousPage}
             
  • Page {CurrentPage} of {TotalPages}

    •          {block:NextPage}
                
  • Next Page »[/url]

    •          {/block:NextPage}   
          

   {/block:Pagination}   
ArtSheSaid brought to you by http://anntaylor.com/">Ann Taylor[/url] and http://flavorpill.com/">Flavorpill[/url]{block:IndexPage} / http://alldayeveryday.com/">branding and design by ALLDAYEVERYDAY[/url]{/block:IndexPage}


$('#permablock h1 a').prepend($("title").text());



   var $origVideo = $(".video_container OBJECT, .photoset_container embed, .video_container embed, .video_container iframe");
   var aspectRatio = $origVideo.attr("height") / $origVideo.attr("WIDTH");

   $(window).resize(function() {
           var wrapWidth = $(".video_container, .photoset_container").width();
           $origVideo
                   .width(wrapWidth)
                   .height(wrapWidth * aspectRatio);
   }).trigger("resize");







Hi.  When posting code here, it helps to put it in [code] [/code] tags:

Code: [Select]<!DOCTYPE html>
<html lang="en">

<head>

<script src="http://static.tumblr.com/i2jrupg/yM2ld2ucr/jquery-1.4.4.js" language="javascript" type="text/javascript"></script>



   <title>{Title}</title>
   <link rel="shortcut icon" href="{Favicon}">
   <link rel="alternate" type="application/rss+xml" href="{RSS}">

...


Your biggest clue is here:

Code: [Select]<link rel="stylesheet" href="http://static.tumblr.com/zug3shz/aLGld613h/styles.css" />
There are various img styles set in that CSS.  Might be worth tweaking those (if you're able to edit this CSS directly).  But you'll have to look at the generated HTML from Tumblr to see exactly what DIVS, classes, etc., you need to modify.  In short, without good knowledge of CSS, it's going to be a struggle.  This CSS reference is your friend.


Discussion

No Comment Found

Related InterviewSolutions