15 {{ upvoteCount | shortNum }}
15 {{ upvoteCount | shortNum }}

WP Sidebar help... need measurement in pixels...

by ProfitwithAdam
12 replies
  • WEB DESIGN
    • |
I have a "test site" that I am using to set-up a blog on so that I can learn the Thesis theme. Once I get it to look the way I want, I will build my actual money sites the same way. Basically, I'm setting up my template site.

My question is how can you find out the dimensions of a sidebar above the fold?

Basically, I'm trying to figure out the pixels for the right sidebar below my header graphic all the way down to where the fold is. I am going to have a banner built, but I want the whole thing to show up above the fold. I know the sidebar is 190 pixels wide, but I don't know how long it needs to be to fill the rest of the area above the fold. Is there a way to figure that out?

Is there a way to see what size monitors most of my visitors are using on my money sites and then figure it out from there?


Look forward to the replies!

Adam
#measurement #pixels #sidebar
  • Profile picture of the author donnan
    What is the fold?
    {{ DiscussionBoard.errors[3277958].message }}
  • Profile picture of the author ProfitwithAdam
    The fold is the cut-off point from when a page loads and what is on the screen to what is seen thru scrolling down. Everything above the cut-off point is above the fold. Think of it like a piece of paper folded in half. Looking at it you may only see one side, but turn it (would be scrolling down on the web) you can see the rest. I'm looking for the dimensions of everything above the cut off point.
    Signature

    {{ DiscussionBoard.errors[3277980].message }}
  • Profile picture of the author traceface
    Adam, Chrome and Firefox each have a plugin will resize your window so you can see what you site will look like at any resolution. And, I'd suggest you look at it in each browser (IE, Chrome, Firefox) because they don't all act the same way.

    I only use thesis for site design and I really love it. If I can help you with anything in particular, let me know.

    Best,

    Trace
    {{ DiscussionBoard.errors[3278205].message }}
  • Profile picture of the author Patrick
    Screen-Resolution - Free online tool for webmasters

    You can see how your website will look in different screen resolutions.
    Signature
    Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
    {{ DiscussionBoard.errors[3278333].message }}
    • Profile picture of the author VegasGreg
      Also keep in mind that the fold that you see on your computer will NOT be the same on anyone elses computer.

      There are too many factors to consider to say there is only one size above the fold.

      People will find you with different monitor sizes (really big desktops, little laptops, widescreen, square, iphones...etc).

      Then they will have their browsers set to open in different size windows.
      Then they will have their text sizes set differently which can stretch out the page views.

      Etc, etc...
      Signature

      Greg Schueler - Wordpress Fanatic... Living The Offline Marketing Dream...

      {{ DiscussionBoard.errors[3278749].message }}
  • Profile picture of the author BrianMullen
    Hi,

    This will help you do what you want: addons.mozilla.org/en-US/firefox/addon/measureit/

    More Details: kevinfreitas.net/extensions/measureit/

    Brian

    brianmullen.co.uk

    Originally Posted by ProfitwithAdam View Post

    I have a "test site" that I am using to set-up a blog on so that I can learn the Thesis theme. Once I get it to look the way I want, I will build my actual money sites the same way. Basically, I'm setting up my template site.

    My question is how can you find out the dimensions of a sidebar above the fold?

    Basically, I'm trying to figure out the pixels for the right sidebar below my header graphic all the way down to where the fold is. I am going to have a banner built, but I want the whole thing to show up above the fold. I know the sidebar is 190 pixels wide, but I don't know how long it needs to be to fill the rest of the area above the fold. Is there a way to figure that out?

    Is there a way to see what size monitors most of my visitors are using on my money sites and then figure it out from there?


    Look forward to the replies!

    Adam
    {{ DiscussionBoard.errors[3280782].message }}
  • Profile picture of the author ProfitwithAdam
    Thank you for that Firefox addon! It works like a champ!!
    Signature

    {{ DiscussionBoard.errors[3280966].message }}
    • Profile picture of the author BrianMullen
      Hi,

      Happy to help out.

      Another Firefox plugin I like that will also be of benefit to you is: addons.mozilla.org/en-us/firefox/addon/colorzilla/

      It has a lot of uses but initially this will help you match your site colours to your new banner and will also help to blend in any adsense links if need be.

      Brian

      brianmullen.co.uk

      Originally Posted by ProfitwithAdam View Post

      Thank you for that Firefox addon! It works like a champ!!
      {{ DiscussionBoard.errors[3282569].message }}
  • Profile picture of the author ProfitwithAdam
    Awesome Brian! Thank you! I have my website content in "pages" instead of posts. Likewise I show on the sidebar a list of "pages" I want to offer my visitors to look a.However, I don't want the "about us" page, the "contact us" page and the "subscribe" pages to show in the sidebar. I have a feed icon already on my site and all three pages are linked into the footer. Do you know by chance how to take out a few pages out of the list that shows under pages? Is there a widget that lets you pick what pages are shown?
    Signature

    {{ DiscussionBoard.errors[3288047].message }}
    • Profile picture of the author BrianMullen
      Hi,

      To amend this easily you can just use one of the 'links' widgets instead of the 'pages' one and link to your internal pages that way. This will also allow you to use keywords as the link text for better seo.

      I don't know of a plugin that will remove specific pages from the pages sidebar widget. There may be. I haven't needed one before to find out.

      Additionally you can take out the top navigation links simply by changing the parent page. See, en.support.wordpress.com/pages/hide-pages/

      This will still show in your sidebar if you are using the 'pages' widget though. Just an extra tip for the future.

      Brian

      brianmullen.co.uk

      Originally Posted by ProfitwithAdam View Post

      Awesome Brian! Thank you! I have my website content in "pages" instead of posts. Likewise I show on the sidebar a list of "pages" I want to offer my visitors to look a.However, I don't want the "about us" page, the "contact us" page and the "subscribe" pages to show in the sidebar. I have a feed icon already on my site and all three pages are linked into the footer. Do you know by chance how to take out a few pages out of the list that shows under pages? Is there a widget that lets you pick what pages are shown?
      {{ DiscussionBoard.errors[3289833].message }}
  • Profile picture of the author ProfitwithAdam
    Brian is a wealth of knowledge!!! With his help, I was able to get everything to work and am pretty well set on how it looks except for one thing. On my thesis theme I have a banner, but right below that starts the sidebars and the content area. Well actually I added an adsense bar under the header, then the sidebars and content start below that. The problem is there is no padding under the header. I would like to add the code or modify the code to have about 5-10 pixels under the header before the adsense block starts. Any ideas Brian?
    Signature

    {{ DiscussionBoard.errors[3290477].message }}
    • Profile picture of the author BrianMullen
      Hi,

      Happy to help.

      To create padding under the header put this before the adsense code:
      <div style="padding-top:5px; ">

      After put:
      </div>

      Increase the 5px as needed.

      ( For padding all the way round use this before the adsense code instead, <div style="padding-left:5px; padding-right:5px; padding-bottom:5px; padding-top:5px; "> )

      There is more information about adding adsense code to wordpress here, morearnings.com/add-adsense-to-a-wordpress-blog


      Another option for you is to place the <hr /> html tag before and / or after the adsense code. This will create a separation line and the 'gap' you are looking for.

      You can also use flexibilitytheme.com (free) which is a wordpress theme that can automatically insert adsense code, correctly padded, under the header, in sidebars and above / below posts.

      Brian

      brianmullen.co.uk

      Originally Posted by ProfitwithAdam View Post

      Brian is a wealth of knowledge!!! With his help, I was able to get everything to work and am pretty well set on how it looks except for one thing. On my thesis theme I have a banner, but right below that starts the sidebars and the content area. Well actually I added an adsense bar under the header, then the sidebars and content start below that. The problem is there is no padding under the header. I would like to add the code or modify the code to have about 5-10 pixels under the header before the adsense block starts. Any ideas Brian?
      {{ DiscussionBoard.errors[3290852].message }}

Trending Topics