White spaces on inside pages

Tagged: 

Author Posts

vargula June 26, 2012 at 1:42 am

Heads up! this post was created when Microthemer was at version 1. The current version is 7. Some references to the interface may be out of date.

Hi
apologies as I am still a microthemer newbie, but my site inside pages ha go some very big with spaces I need to trim down. Example pages are here:

http://miconsent.org/?page_id=209
http://miconsent.org/?page_id=229
http://miconsent.org/?page_id=67
http://miconsent.org/?page_id=237
http://miconsent.org/?page_id=58

In all these the white space above the first black header text is too big – I need to know how to identify the segment of white space so it can be trimmed own on all these pages and so ne pages will have a smaller white space.

Many thanks for this help!!

Ed

Sebastian June 26, 2012 at 9:28 am

I see you are using the Twenty Eleven blank Slate Theme. You will want to reduce the Top Padding value. You need to do this in 2 separate places (one will change the top padding on Pages the other will change the top padding on single-view Posts.

  • To change the top padding on Pages find the “Page” selector, located in the “Pages” section.
  • To change the top padding on Posts (single view) find the “Single Post” selector, located in the “Posts Single View” section.

I hope that helps! Let me know if you have any more questions.

Sebastian

PS Firebug for Firefox can be very helpful when trying to work out how to override a theme’s default styling: http://getfirebug.com/

vargula June 27, 2012 at 1:15 am

Thanks Sebastian.

Sorted – almost!

While fiddling about with settings the white space margins at the sides of pages refused to move in whatever I was doing. An example is here: http://miconsent.org/?page_id=67

I’d really like to have the text less wide – i.e. about 10% shaved off each edge to what is there now. Apologies again for learning phase – but i am learning a lot by playing around with Microthemer.

I’m only posting questions where I’m really, really stuck!

BR

Ed

Sebastian June 27, 2012 at 10:45 am

Hi Ed,

No problem.

If you find the “Content” selector in the “Content” section (where you have set the top padding to 0) and set the left and right padding to 85 it should make the text less wide. It’s hard for me to know exactly what will happen when you do this (applying CSS to a web page still gives me little surprises even though I’m fairly experienced!).

If that doesn’t work you could try giving the “Post” and “Page” selectors I mentioned in my previous post left and right padding of 160.

I hope that helps!

vargula June 28, 2012 at 12:18 am

Hi Sebastian

well… I think I have screwed up somewhere, probably in using a wrong (duplicate) template for the home page on miconsent.org. That’s my fault, don’t expect help on that. The lack of **individual margin control** seems related to this error.

I seem to have done it so that if I change my home page settings (its a STATIC home page choice by the way) it also changes my inner pages.

Now I do realise that the following actually changes the subject, but its the same root cause…

The setting I’m making for my home page also means that my crafted home page **images** (see the 80 x 40 px images here, set as such thru microthemer…

https://dl.dropbox.com/u/1129320/downloads/as-on-home-page.gif

…are also imposed on all other images I place…

Just as an example I tried posting a 100px by 100px face picture as here:

https://dl.dropbox.com/u/1129320/downloads/in-Edit-page.gif

but unfortunately the setting I made in Microthemer for images tweaking very nicely the home page resulted in a non-avoidable squish of the 100px by 100px image in my other pages:

https://dl.dropbox.com/u/1129320/downloads/squish.gif

So I’m only mentioning this because there is obviously something I’m missing re independence of designs (including the current topic: whitespace/margins) that apply to home pages versus inner pages.

What I’d like to do is have a page that will do what I want on inner pages:
1. First, leave the home page 40 x 80 images as they are
2. allow me to place much bigger pictures on inner pages without “squish”
3. do this control from microthemer
4. with independence of control over separate pages, I should be able to independently control white space (currently, if I change teh margins as indicated in teh upper thread, it meant my front page widget menus were overlapped).

I’m telling the whole story (i.e. including the image diversion) because it might help others learn about the fine points on page-level control.

…and yes I really think that without the existence of microthemer, the whole complexity of this would be completely unfathomable.

BR

Ed

Sebastian June 28, 2012 at 10:13 am

Hi Ed,

To target pages individually you will need to get your hands dirty with a bit of CSS. Fortunately, with the help of Firebug this is just a case of copying and pasting. To target only the home page, do the following:

  1. Create a new section in the Microthemer UI called “Home Page”. (it will appear at the bottom of the Microthemer UI)
  2. Create a new selector in the “Home Page” section and give it the label “Home Page Content”.
  3. You also need to enter something in the CSS Selector textarea. Use Firebug to inspect your home page (right-click near the top left of the page > Inspect Element with Firebug)
  4. Find the HTML tag. You will see that it contains classes. The class you are interested in is the “page-id-361” class. This class differs on every page. And it will allow you at apply page–specific classes.
  5. Copy that class into the CSS Selector textarea. Because it is a class (in the HTML it was contained between a class=” ” attribute), you need to put a dot (.) before it so it will now read “.page-id-361“. If it was an id (i.e. in the HTML it was contained between a id=” ” attribute) you would use a hash character (#) instead.
  6. As things stand, the selector you are about to create is targeting the body tag of the home page. But we want to target the content area, so we’re not done yet.
  7. Go to the “Content” selector in the “Content” section and click the “Modify Selector” link. Then copy the text from the textarea (#content)
  8. Go back to the new “Home Page Content” selector you are editing and paste the text you copied after the “.page-id-361” bit on the same line but with a space in between so it now reads “”.page-id-361 #content“.
  9. Click the Update button to add the selector to your new “Home Page” section. Using this technique of finding the page id and pasting it into a custom page-specific section followed by a selector’s code you’ve copied from elsewhere in the Microthemer UI, you can target any element on a per page basis. It’s a good trick to have up your sleeve.
  10. Now try to use this technique to only target images on the home page.

It’s definitely useful to know how to apply page-specific styles. But regarding your image problem, it’s generally best not to define image dimensions for post images via CSS (with or without the help of Microthemer). In WordPress, if you go to the Settings > Media page, you can set 3 different image sizes (small, medium and large). Then, when you’re inserting images into a post you just select small, medium or large.

Finally, if you don’t know how to create sections and selectors, watch this part of the program walk-through video: http://www.youtube.com/embed/M3NKA27rOzg?rel=0&wmode=transparent&autoplay=1#t=2m02s

vargula June 29, 2012 at 8:39 pm

Hi
first of all many thanks for this attention to detail. The targeting page trick is really useful. At first I didn’t fix the resizing images thing but did eventually when trawling the .css by one of the other tips you’d mentioned – so goddit! Now faces and pics don’t come out squished and so only some minor points to solve ;-). Ed.

Sebastian July 6, 2012 at 9:25 am

Great!

You must login or register to reply to this topic.