Advertisement
0fficialvanessa

One Column to Two Column - Tutorial!

May 27th, 2013
100
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.23 KB | None | 0 0
  1. If using one of my themes, there should be a Choice of making it Two Column or One Column. If not follow these steps, :)
  2.  
  3. 1) ONE- Scroll down the HTML codes, and stop at .entry
  4. Or use ctrl + F and type in .entry
  5. It should have stuff like this:
  6.  
  7. .entry {
  8. float:left;
  9. display: block;
  10. margin:5px;
  11. overflow:hidden;
  12. border:1px solid #ddd;
  13. padding:4px;
  14. width:230px;
  15. {block:PermalinkPage}
  16. width:450px;
  17. text-align:left;
  18. line-height:10px;
  19. {/block:PermalinkPage}
  20. background:white;
  21. }
  22.  
  23. Or at least something like that. Change the width, to something in between 220 and 300 [ ONLY THE WIDTH BEFORE {block:PermalinkPage} NOT THE ONE AFTER IT ]
  24.  
  25. 2) TWO- It's similar to Step One but find #posts instead.
  26. It should look like this, or something similar:
  27.  
  28. #posts {
  29. width:500px;
  30. margin-top:1px;
  31. z-index:99;
  32. margin-left:260px;
  33. right:auto;
  34. background:transparent;
  35. margin-right:auto;
  36. position:relative;
  37. overflow-y: hidden;
  38. }
  39.  
  40. Depending on what you chose for your .entry [ the width ] you'll need to mess around with the width. It should stay between 500 and 600.
  41.  
  42. 3) THREE- Once you noticed the Two Columns for your Theme Preview;;
  43. Scroll down all the way to; {block:Photo}
  44. Something like this; should be under it
  45.  
  46. {block:IndexPage}
  47. <center>
  48. <div class="perma">
  49. <a href="{Permalink}">{timeago}</a> - <a href="{Permalink}">{notecountwithlabel}</a> <br>
  50. <a href="{ReblogURL}" target="_blank"> Reblog </a>
  51. </div>
  52.  
  53. <div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a></div>
  54. {/block:IndexPage}
  55. {block:PermalinkPage}
  56. {LinkOpenTag}<div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a></div>
  57.  
  58. {LinkCloseTag}
  59. {/block:PermalinkPage}
  60. {/block:Photo}
  61.  
  62. Sometimes for the width="100%"/> it'll be 500px, 480px - or something like that. If so, change it to 100%
  63. It'll automatically know the width of your Entries and use it that way. Same for the Second width below {block:PermalinkPage} Just change it to 100%
  64.  
  65. - - - - -
  66.  
  67. Hopefully this helps! If not feel free to message me! I based this off of my own themes, so I'm sorry if you tried to follow this Tutorial with a different one, not so similar to it. <3
  68.  
  69. -Jade
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement