August 2011

Hide the sidebar, footer and all widgets on Blogger pages-create a simple page

This tutorials explains how to hide the sidebar, footer, even the header if you like, with all their widgets, on specific static pages. The given code will be inserted directly in the static page and will affect only the page it is inserted in. No template editing is needed.

This way you can create a clean, simple page, let's say for a gallery or whatever purpose you need one.
Blogger's flexibility and permission to design your page as you like it is one of the main features for which so many people prefer this platform.

The implementation of the code in this tutorial is much easier and clearer (I hope) but it will change only one single page.
To hide the sidebar and other elements on all pages/posts please go to my two previous tutorials about hiding the sidebar on both layout and designer templates.

With this tweak it is also much easier to create a different design for each of you static pages, with just a few lines of code.

Here we go but first things first:Demo

Hide all widgets contained in header, sidebar and footer

Step 1. Identify your template:

Go to Design | Edit Html and look for this word in your template with the search feature of your browser (Edit menu | Find or Ctrl+F) "fauxcolumns"

if you find it, you have a new (designer) template,

if not, you probably but not necessarily have an older (layout) template.

You will find the code for both template types bellow in differently colored boxes.
Step 2. The basic code:Now that you know your template type, you can select the code that is right for you.
We will hide all widgets in one step by hiding the container they are situated in, like header, sidebars, footer etc.

2.1. Open a static page in the editor or create a new page; work in HTML mode,
2.2. Select from the following two codes the one that is right for your template; the two codes do the same job but the one in the white box is for older (layout) templates and in the yellow box is the code for newer (designer) templates.
If there is only one code than it is the same for both template types.
2.3. Copy and insert one of the following codes directly at the top of your static page, before the content, not in the template, exactly as you see it.

Code for older, layout templates:

Code for new templates:

Now write your page content if it is a new page, preview and publish or update your page.
The code will produce different results according to your own template but it will affect only the specific page it is inserted in, nothing else. Experiment on a newly created page or on an existing one and customize it to your liking. I've included a few customization ideas in the final code, down the page. Try them, nothing can go wrong.

We're done here, unless you have widgets to hide in the main area too.

Step 3. Hide all widgets in the main section

What else we may want to hide? In case you have any widgets in the main section that you would like to hide, like ads in widgets or Linkwithin widget, just insert the specific widget id in the same line as the other hidden elements. First you have to find out the id of that widget. These widgets usually don't have a title, so

How to find out the widget id?

To keep it short and easy, open your widget for edit from the quick edit wrench and give the widget a title, let's say "My ads" (temporary). Now save the widget and go to Design |Edit Html. Don't click the expend widget template but find with your browser the new title you just gave the widget. It will look something like this:
<b:widget id="HTML39" locked="false" title="My ads" type="HTML">
There you have your widget id highlighted in red, with its own numbering, of course (not 39). See bellow how to insert it near the rest of hidden elements.

Customize the look of the page - Layout fine-tuning

See how the page looks like and read along for customizing it, if needed, like:

Restrict the main area, as now it spreads over the entire width of the page (code for both template types):
.post {width: 80%; margin: 0 auto; padding: 0;}

Change the background of the content area and the text color, also add some space around the top of the content:
#main-wrapper{background: #ffffff; color: #000000; margin-top: 100px;}

.content-inner {background: #ffffff; color: #000000; margin-top: 100px;}
Align the title to the center:
.post h3 a {text-align:center; padding:15px;}
.post-title {text-align:center; padding:15px;}

Hide Linkwithin widget: #lws_0

In case you see some vertical or horizontal lines crossing the page, those are left over borders from the sidebar or some other element. Check which element has borders and hide them. The example bellow is for the sidebar:

#sidebar-wrapper {border: 0;}

.fauxcolumn-left-outer .fauxcolumn-inner { border-right: none; }
.fauxcolumn-right-outer .fauxcolumn-inner { border-left: none; }

All these customizations are optional and I've included them in the final code, in case your page needs a facelift.

Final code:

Select the customizations you like and delete the rest from this final code. All values can be changed (color codes, width, etc.), I highlighted a few of them in blue, you find the rest.

Step 4. Add a menu to this page

But what if you still want a menu somewhere on the page, with a few links?
I added this last optional step as an answer to a reader's question. A very good question indeed!
Please read the next tutorial if you would like to have a few links in a menu, on this simple page.

This would be all for a normal Blogger template.
See also the other two tutorial, mentioned in the first part of this one, you will find many examples, demo pages and also answers to your questions.
If you still have questions, please ask.

Sometimes you want to hide the main widget itself (main section) in order to create a separate archive page or label (category) page.

"The best angle from which to approach a problem is the Try-angle."

~unknown author

Read more >>

Pink summer roses-rose close-up photos

Summer is almost over and most of the flowers are burnt by the summer heat.

Even dressed in their faded autumn colors, roses are still charming.

MACRO FLOWERS SATURDAY | WEEKEND FLOWERS

Read more >>

Ganoderma applanatum-Artist's fungus on white willow

Our beautiful willows are infected by Ganoderma applanatum- bracket fungus.

The old weeping willows and white willows on the banks of our river are a symbol of the town. On my last walk I discovered that two of a group of five white willows are infected.

While Ganoderma applanatum-shelf fungus is a useful decomposer of logs and stumps but it also lives as a parasite on living trees, causing butt rot.

Ganoderma infested White willows near the river

This fungus is a common cause of decay and death of many types of trees, especially maples, alders, birches, beech, apple, poplars, cherry, plum, oaks, willows, and elm.

The fungus attacks the tree trunk's thickest part, at the base, near the soil line.
It may take several years but finally the fungus kills the host tree.
There is no treatment or control once a tree is infected, it is only a matter of time until it dies.

shelf fungi brackets grouped in horizontal rows

Artist's conk, on its other name, produces very distinctive, shelf-like brackets grouped in several horizontal rows. Often there is only one bracket produced on an infected tree. The fungus is a perennial and grows for 5 to 10 years, reaching over 50 cm across.
Ganoderma applanatum produces the largest brackets of any fungus.

They are rough and have a woody feel. Their upper surfaces are dark reddish-brown to black, with a creamy-white margin.

Ganoderma applanatum - Artist's Conk-close up

The underside of the bracket is white to light yellow but turns brown when scratched or bruised.

Because of this property of the conk, artists use it as a natural medium for drawing and painting, hence the names Artist's conk and Artist's fungus. You can carve writing or pictures in it and the drawing naturally darkens.

They are attached to the tree over most of their width and very hard to detach. I intended to bring one home to paint on it but these are too small and already dirty, as you can see in the picture above.

I just hope the other willows will not be infested by the the mycelium of the fungus. This place will never look the same without the old weeping willows.

See more tree fungus pictures at this other post.

Read more >>

Female Common Blue butterfly-Polyommatus icarus pictures

The Common Blue (Polyommatus icarus) is the most widespread, small butterfly across Europe. It is a member of the Lycaenidae family and can be found in Asia and North Africa as well.
Its habitat is anywhere, where its food plants are found: a variety of grassland, meadows, woodland clearings but also in waste ground and urban habitats.

The female Common blue is usually brown, with a row of orange-red spots on the outer edges of the wings that fade along the forewings. Sometimes she has a blue dusting near the body.
Male upper sides are an iridescent lilac blue with a thin dark brown or black border on the wings.
Both female and male have a white fringe on the outer edges of the wings but their coloration is variable within local populations.

Common blue female butterfly-Polyommatus icarus-upper side

The underside of both sexes are similar in pattern. Besides the row of orange-red spots on the outer edges of the wings, they have about twelve black centered white spots on the hind wings, nine on the forewings and an elongated spot in the middle of each wings.

The presence of the blue tingle in a female Common Blue is highly variable, some are almost completely blue, others completely brown. She can be easily confused with the Brown Argus which is also a member of the blue subfamily (Polyommatinae). They can be differentiated by the pattern on their underside:
- the Common Blue has an extra spot, closer to the body (marked with A), before the elongated spot in the middle of the forewing, that is absent in the Brown Argus.

Female Common blue butterfly-wings' underside pattern

- unlike the Common Blue, Brown Argus has an extra spot on its hindwings, very close to the spots on the leading edge, forming an 8 shape (marked with B).

Photo source: Wikipedia

Female common blue head down on a grass leaf

There are two generations a year, the first brood flying in May and June.
I've snapped this one right at the start of the second brood that emerges at the end of July. They should be around for the whole of August and even September.

Males are the more active , so more difficult to capture. The female spends most of her time nectaring, resting and egg-laying.
She lays a single egg at a time on the upper side of a grass leaf or on young shoots of their food plants.
On boring, cloudy days this species roosts head down on a grass stem, like in the picture at the left.

Their preferred food plant is Bird's foot trefoil but they feed on Black Medick, White Clover Trifolium repens, Lesser Trefoil Trifolium dubium and Common Restharrow as well.

Pictures were taken in my neighborhood, at the Somesul Mic river banks in Cluj-Napoca (by me).

Read more >>

Hide the sidebar, footer and all widgets on Blogger pages-create a simple page

Hide all widgets contained in header, sidebar and footer

Step 3. Hide all widgets in the main section

How to find out the widget id?

Customize the look of the page - Layout fine-tuning

Final code:

Step 4. Add a menu to this page

Pink summer roses-rose close-up photos

Ganoderma applanatum-Artist's fungus on white willow

Female Common Blue butterfly-Polyommatus icarus pictures

Archive

Purchase photos

Macro Flowers Saturday

Popular Posts