Hi,

I would like to add a frame containing a disclaimer, right above the footer and be able to control the text and background color. I would also like to control which pages it is visible on.

Would appreciate your help with this.

~ Obi

Real quick answer...

• Add a new widget area above the footer
• Add a text widget with the disclaimer to the new widget area
• Add the Display Widgets plugin
• Set the widget to only show on the pages you want with the controls the Display Widgets gives you.

Thank you lmilesw for your answer.
I am a complete novice with WP and Atahualpa and would appreciate some detail as to how exactly to perform these four steps.

Many thanks

~ Obi

If you are totally unfamiliar with WordPress and Atahualpa these instructions may still seem too complex. You really should spend some time just playing with some of the settings to see what they do and to become familiar with the theme options. That said here you go.

• Install Display Widgets
• Look in ATO>Add New Widget Areas. Copy the code for the most basic widget area

  <?php bfa_widget_area('name=My new widget area'); ?>

• Go to ATO>Style & edit FOOTER and paste the code you just copied above anything else in the Footer:Content box
• View the site and refresh a couple of times
• Go to Appearance>Widgets and add a text widget to the new widget area
• Add the disclaimer text and set the widget to display on the pages you wish with the check boxes on the widget.

lmilesw,

Your patience is much appreciated. I did as per your instructions and all works fine.

I'd appreciate if you could also tell me how to change the font (type and size), text and background color, just on the disclaimer portion of the footer, without affecting that of the original footer.

Many thanks.

~ Obi

If your new widget area is My new widget area then you would use an id of my_new_widget_area so your selector would be
#my_new_widget_area. You would add the CSS in ATO>Add HTML/CSS Inserts>CSS Inserts. Something like the following changing the items as you wish.

#my_new_widget_area {
background-color: #ffffff;
font-size: 24px;
font-family: Tahoma serif;
}

Thank you lmilesw.
I did something wrong.
When I first added the widget in the footer area I named it Disclaimer with an upper case D, and that's how it appeared in the Appearance > widgets.
When I added your last bit of code in the Add HTML/CSS inserts I used a lower case d as in disclaimer and then I also changed it to lower case d in the footer content.

Then I realized that I have just added another widget area in Appearance > widgets. Now I have both Disclaimer and disclaimer boxes in the widget area. Changing it back to upper case Disclaimer did not make the lower case disclaimer widget go away.

Now, I have an extra widget that I don't know how to get rid of, the CSS code that I added shows no effect, and the disclaimer text shows only on the home page even though I checked the boxes for two more pages. Before this, it showed correct on all three pages.

I would appreciate your help.

~ Obi

Just go to ATO>Add New Widget Areas and at the top you will see how to remove widget areas

I deleted the extra widget and the disclaimer now shows in all the right places.
The added CSS code however, does nothing. Making changes to the background color and font size makes no effect.

~ Obi

What is the code you used for the widget area and what did you call the new widget area?

I placed this part of the code in ATO > Add HTML/CSS Inserts > CSS Inserts, at the end of the existing code:

/* Styling the disclaimer */
#Disclaimer {
background-color: #ff0000;
font-size: 24px;
font-family: Tahoma serif;
}

I placed the following code in ATO > Add new WIDGET AREAS > Style & edit FOOTER > Footer: Content, above the existing code:

<?php bfa_widget_area('name=Disclaimer'); ?>

~ Obi

Instead of #Disclaimer use #disclaimer. When the widget area is created it eliminates upper case from the id.

Thank you for your continuing help.
I can now change the background color of the frame. The font size still shows no effect. Also I added a line to be able to control the color of the text:

color: #ff0000;

It effects only the disclaimer's content but not its title, which I would like to control as well.


~ Obi

You are getting to the point where you need to use a tool like the Firebug extension in Firefox to help you in determining selectors. I offhand knew what the selector for the widget area would be but to further figure out what the selectors for the various items in that selector are I would need to replicate what you have and look at the code which is something that you can do with Firebug since you already have the thing built.

Also sometimes you have to put !important after a line of CSS such as.

font-size:24px !important;

Adding the

!important;

made no difference.
Firebug: Could you please point me to a link as to what exactly to download (I have Firefox 3.6.8) and some guidelines.

~ Obi

Firebug is just an extension for Firefox. In Firefox go to Tools>Add-ons and do a search.

lmilesw,

I appreciate your kind help.
My original intention in picking WordPress was to avoid the code path and just be able to concentrate on writing content. Already in this very early stage, it looks as though this is not going to be so.

As much as I appreciate your kind help, I have no intention abusing it. As it is you have already helped me a great deal with putting together a disclaimer area. I will make do with what I have and do some more homework to see whether I can find something that is more appropriate for me than WordPress.

~ Obi

Obi... Many are in your position wanting an interface that you could just use without resorting to code. My experience has been that the more ease you have the less control you have. While WordPress CAN be difficult at times it is, in my opinion a great mix of function and ease. Believe me I have looked at many different themes for WordPress along with using Joomla, standard HTML, and other content management systems. When they got "easier" to use I couldn't do what I wanted.

I kept coming back WordPress and with all the other themes out there kept coming back to Atahualpa. If you can hang in past the initial learning curve the combination can be a great tool.

To your point of just writing content you could use the default 2010 theme, change the header image and perhaps the background and add a widget for the disclaimer. Boom your done. But you could do that with Atahualpa as well and leave yourself open for MUCH more customization as you learn.

Hope you don't mind my rambling on but I think you found the answer to what you want in WordPress and Atahualpa. If you want suggestions for how to implement something without getting into new widget areas, etc. etc. we can help you.

lmilesw,

I appreciate your kind words and I see your point. Personally, I can sustain through a rough start, I just hate feeling that I'm a pest and keep coming back with more questions. I very much appreciate your "open door" attitude.

We left off with Firebug.
I have downloaded and installed it in Firefox.
It is now available under Tools with its own submenu.
How should I proceed ?

~ Obi

The best place to start is at their site. Here is a short intro video from their documentation page. It will probably be a bit confusing at first but just start playing with it. Along with being able to find the selectors for an object one of the neat features is you can try CSS without doing anything to your site.

Thank you for the links.
I watched the video and checked out the Firebug website.

Here's what I did:
- Opened Firefox
- Went to my blog: insightintowellbeing.com
- Turned on Firebug
- Clicked on the CSS tab
- Typed the name of the selector "disclaimer" at the search window top right corner

I found only one single instance of "disclaimer", that's the one that I entered:

#disclaimer {
background-color:#FFFFFF;
color:#FF0000;
font-family:Tahoma serif;
font-size:84px !important;
}

I am able to make visible changes to the background color and text color of the content of the disclaimer, but not of the title.
The font size of the content shows no effect.

~ Obi

For the title you would use #disclaimer h3 as the selector as you want to change any h3 references within disclaimer. So to change the font size you would use.

#disclaimer h3 {font-size:24px;}

as an example.

Reading the CSS and deciphering how to set up the hierarchy will probably take you awhile as it did for me but as you work with it you get better.

This one went past me. How were we to know that '#disclaimer h3' was the selector to be using ?

~ Obi

That is where working with CSS for awhile will help. You had the #disclaimer part then you just look at what you want to change withing that selector. In this case it was h3.

I do understand that '#disclaimer h3' stands for: h3 inside of id name 'disclaimer'. But why does h3 work, while h2 or h4 don't, or in other words, what suggested that h3 is the correct selector to use?


~ Obi