Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   [SOLVED] Unable to Re-Create New Widget Area after deleting it (http://forum.bytesforall.com/showthread.php?t=10997)

GILSAN Nov 5, 2010 09:03 PM

[SOLVED] Unable to Re-Create New Widget Area after deleting it
 
Hi,

My website is www.acvideo.org
I'm using WordPress 3.0.1 and ATA v3.5.3

I spent several hours trying to add a New Widget Area to be placed on the right half of the Logo Bar area after removing the Search Box, the Posts and Comment Feed by doing the following:

ATA » Style & Edit HEADER AREA » Configure Header Area and added the following code:

%logo <?php bfa_widget_area('name=Logo_Widget_Area&cells=1&ali gn=1&before_widget=<div id="%1$s" class="logo-widget %2$s">&after_widget=</div>'); ?> %bar1 %image %bar2 %pages

So the New Widget Area was created but I couldn’t get the Text widget to place itself on the right half of the Logo Bar area. It kept going below the Logo.

After many experiments I ended up creating several new unwanted widget areas (Apearance » Widgets). I then decided to delete these (Add New Widget Areas » Delete custom Widget Areas and Deleted the checked Widget Areas) and try to start all over, but now I’m NOT able to re-create a New Widget Area even though I'm using the same procedure as above.

Your help would be greatly appreciated

lmilesw Nov 5, 2010 09:11 PM

Have you deleted the code for the widget areas you created? What kind of widget area or areas do you want to create? Are there still widget areas showing in the Add New Widget Areas section?

GILSAN Nov 5, 2010 09:22 PM

Quote:

Originally Posted by lmilesw (Post 48620)
Have you deleted the code for the widget areas you created? What kind of widget area or areas do you want to create? Are there still widget areas showing in the Add New Widget Areas section?

Yes I deleted the code: <?php bfa_widget_area('name=Logo_Widget_Area&cells=1&ali gn=1&before_widget=<div id="%1$s" class="logo-widget %2$s">&after_widget=</div>'); ?>

from ATA » Style & Edit HEADER AREA » Configure Header Area, leaving it like:

%logo %bar1 %image %bar2 %pages

Yes all the other widgets are there. I only deleted the 3 that I had created and had named logo_widget-area

lmilesw Nov 5, 2010 09:28 PM

Have you tried using a different name for the widget area. Also if you want items side by side you should probably create a 2 celled widget area as items in the Style & edit Header area box are one over the other as you found out.

GILSAN Nov 5, 2010 09:37 PM

Quote:

Originally Posted by lmilesw (Post 48623)
Have you tried using a different name for the widget area. Also if you want items side by side you should probably create a 2 celled widget area as items in the Style & edit Header area box are one over the other as you found out.

OK now for some reason the new widget called logo_widget-area is now appearing in the widget area, but when I open it there no place to add a title or any code.

So what do you sugest I do so that I have the Logo, the Title and the Tag Line just the way it is and then add a widget area on the right side.

I have not yet decided what to put in the widget area, maybe an image or a banner

lmilesw Nov 5, 2010 09:47 PM

First of all a widget area is for putting a widget in. It will have not title in and of itself. For instance if you want some text in the widget area you will put a text widget in it. If you want to put an image in it you could add an image widget or a slideshow widget just like you put in the right or left sidebars which are also widget areas. They are just built into the theme.

You also can't just put a widget area on the right of something. You can sometimes use CSS to position the widget you put in it or you can create a two celled widget area where you can have two or more widgets side by side.

GILSAN Nov 5, 2010 10:08 PM

Quote:

Originally Posted by lmilesw (Post 48625)
First of all a widget area is for putting a widget in. It will have not title in and of itself. For instance if you want some text in the widget area you will put a text widget in it. If you want to put an image in it you could add an image widget or a slideshow widget just like you put in the right or left sidebars which are also widget areas. They are just built into the theme.

You also can't just put a widget area on the right of something. You can sometimes use CSS to position the widget you put in it or you can create a two celled widget area where you can have two or more widgets side by side.

I Deleted the new widget area called logo_widget-area once again and re-created another one, but its not showing up. Its after 4 in the morning here and I'm getting tired and frustrated with this so if you don't mind we'll continue this conversation tomorrow.

Thanks for your explanation. So if I create a two celled widget area where and how do I place the Logo, the title, the tag line and the new widget?

lmilesw Nov 5, 2010 10:14 PM

You do have to view the site and refresh a couple of times for the widget area to show. If you have a caching plugin installed you should deactivate it for now. If you create a new two celled widget area you will just put a text or other type of widget in one of the widget areas to use as a title. The blog title will not be used directly with this method.

Have a good night. It's only a little after midnight here so I have plenty of time yet. NO... I'm going to bet pretty soon.

GILSAN Nov 6, 2010 09:35 AM

Quote:

Originally Posted by lmilesw (Post 48630)
You do have to view the site and refresh a couple of times for the widget area to show. If you have a caching plugin installed you should deactivate it for now. If you create a new two celled widget area you will just put a text or other type of widget in one of the widget areas to use as a title. The blog title will not be used directly with this method.

Have a good night. It's only a little after midnight here so I have plenty of time yet. NO... I'm going to bet pretty soon.

OK, just like you said after refreshing the website the New Widget Areas I had re-created do appear. This time I created a two celled widget area by placing the code as follows:

%logo <?php bfa_widget_area('name=Logo_Widget_Area&cells=2&ali gn=1&before_widget=<div id="%1$s" class="logo-widget %2$s">&after_widget=</div>'); ?> %bar1 %image %bar2 %pages

As you can see from my site www.acvideo.org on Logo Widget 1 I only added a Title while on Logo Widget 2 I put an image and no Title.

But the problem is these new widgets appear below the Logo area. All I want to do is for that image (of flowers) to appear to the right of the Title and the Tag line (Reportagens Profissionais em Fotografia e Vídeo) Is it possible? :confused:

lmilesw Nov 6, 2010 02:27 PM

You need to remove %logo and put the logo image and text where is now says Logo Widget 1.

GILSAN Nov 6, 2010 03:20 PM

Quote:

Originally Posted by lmilesw (Post 48675)
You need to remove %logo and put the logo image and text where is now says Logo Widget 1.

OK I did what you said. Now how do I add the Blog Title and the Tag Line between the Logo and the picture of flowers?

lmilesw Nov 6, 2010 11:12 PM

That depends on how you added the logo. I would use a text widget and add the logo with the title and tagline in it. You will not be using the title and tagline generated by WordPress. You will be making your own.

GILSAN Nov 7, 2010 07:50 AM

Quote:

Originally Posted by lmilesw (Post 48704)
That depends on how you added the logo. I would use a text widget and add the logo with the title and tagline in it. You will not be using the title and tagline generated by WordPress. You will be making your own.

Yes I used Text widgets on both widget areas. Would it be easier to create 3 celled widget areas where the Logo would be placed on the first, the title and Tagline on the second and the picture of flowers on the third Widget area?

I can't get the Title and Tagline the way it was before (default). I'm really very poor as far as code goes and feel I'm wasting so much time on something I thought would be relatively simple. Is there another solution such as a Plugin that would simply add a New Widget Area on the right side of the Logo Bar where the Search Box, the Posts and Comment Feed are found and that I removed? :confused:

lmilesw Nov 7, 2010 09:13 PM

Three cells could work as well. This kind of styling is where you either have to get into the CSS and some code or live with what you can do within the theme.

With what you have right now you could add the following to ATO>Add HTML/CSS Inserts>CSS Inserts to get you closer to what you want.
HTML Code:

#text-12 img {float:left;padding:0 0 10px 20px;}
If you want a different background color for the header go to ATO>Style and configure Layout and either change the background that is there or add something like following.
HTML Code:

background-color: #E9E9E9;

GILSAN Nov 8, 2010 10:39 AM

Quote:

Originally Posted by lmilesw (Post 48755)
Three cells could work as well. This kind of styling is where you either have to get into the CSS and some code or live with what you can do within the theme.

With what you have right now you could add the following to ATO>Add HTML/CSS Inserts>CSS Inserts to get you closer to what you want.
HTML Code:

#text-12 img {float:left;padding:0 0 10px 20px;}

Thanks, that helped, but the First widget (with Logo + Title + Tagline) was too small to acommodate all of that info so after scratching through the forum I discovered that I needed to change the size of the First widget area and make it bigger. (This is obvious for people with experience in code, but not so obvious for a lot of us noobs)

So because both New widget areas were ocupying 50% each in width I had to add the following code: &width_1=650 to ATA » Style & Edit Header Area » Configure Header Area:

<?php bfa_widget_area('name=Logo_Widget_Area&cells=2&width_1=650&align=1&before_widget=<div id="%1$s" class="logo-widget %2$s">&after_widget=</div>'); ?>



Quote:

Originally Posted by lmilesw (Post 48755)
If you want a different background color for the header go to ATO>Style and configure Layout and either change the background that is there or add something like following.
HTML Code:

div#container {
background-color: #E9E9E9;
}


Tried this and nothing happens. The background colour of the page (grey) and the Logo Area are identical. It's like they fused into one whole area.

Also the space between the Title and the Tagline is too big.
Also I would like the Title to align to the left and not to the center, but have no idea how or where to add code

Here is the code that I added to the left Logo Widget:

<a href="http://acvideo.org"><img src="http://acvideo.org/wp-content/themes/atahualpa353/images/logo.png" alt="" />

<h1>AC Vídeo</h1><h4>Reportagens Profissionais em Fotografia e Vídeo</h4>


Is this the correct way to do it?

Thanks

lmilesw Nov 8, 2010 11:05 AM

I goofed on the code for the background color (I have corrected it). The code I gave you would be what you might use if you were putting it in CSS Inserts but where I said to put it the code should just be.
HTML Code:

background-color: #E9E9E9;
The other code you mention is missing an ending a tag. It should be as follows.
HTML Code:

<a href="http://acvideo.org"><img src="http://acvideo.org/wp-content/themes/atahualpa353/images/logo.png" alt="" /></a>

<h1>AC Vídeo</h1><h4>Reportagens Profissionais em Fotografia e Vídeo</h4>


GILSAN Nov 8, 2010 03:37 PM

Quote:

Originally Posted by lmilesw (Post 48808)
I goofed on the code for the background color (I have corrected it). The code I gave you would be what you might use if you were putting it in CSS Inserts but where I said to put it the code should just be.
HTML Code:

background-color: #E9E9E9;
The other code you mention is missing an ending a tag. It should be as follows.
HTML Code:

<a href="http://acvideo.org"><img src="http://acvideo.org/wp-content/themes/atahualpa353/images/logo.png" alt="" /></a>

<h1>AC Vídeo</h1><h4>Reportagens Profissionais em Fotografia e Vídeo</h4>


Thanks, Adding background-color: #E9E9E9; did the trick. In my case I used #CDDBF3;

And thanks for correcting the missing an ending a tag </a>

Things are lookiing much better already and we are almost there. I really appreciate your patience with me and hope you will bear with me for a little longer. Now how do I get the the Title + TagLine to appear just like it was before these alterations.

- The line spacing between the title and the tagline is too big
- The Title is centered. How do I get it aligned to the left?
- The Title now has no Link. How do I get a link to it?

In other words how do I get it to be like my other sites www.cristianoronaldoportugal.com/ or www.capeverdeislandsholidays.net/ where the Logo Bar area was not tampered with.

Thanks

Here's an example of another site of mine:

lmilesw Nov 8, 2010 04:22 PM

If you want this site to look like the other without the image on the right you would would take out the widget area and the image, use the square logo, turn on show title and tagline, and put the following the the Style & edit Header Area
HTML Code:

%logo %bar1 %image %bar2 %pages
If you want the image on the right to stay try adding the following to ATO>Add HTML/CSS Inserts>CSS Inserts. The last item is just a change from what I had you previously had you enter (changed the 0 to 10px).

HTML Code:

div#text-12 {
text-align: right;
}
div#text-12 h1 {
padding-top:15px;
}
div#text-12 h3 {
line-height:0;
margin:0;
}

#text-12 img {
float:left;
padding:10px 10px 10px 20px;
}


GILSAN Nov 8, 2010 06:28 PM

Quote:

Originally Posted by lmilesw (Post 48825)
If you want this site to look like the other without the image on the right you would would take out the widget area and the image, use the square logo, turn on show title and tagline, and put the following the the Style & edit Header Area
HTML Code:

%logo %bar1 %image %bar2 %pages

Did that.

Quote:

Originally Posted by lmilesw (Post 48825)
If you want the image on the right to stay try adding the following to ATO>Add HTML/CSS Inserts>CSS Inserts. The last item is just a change from what I had you previously had you enter (changed the 0 to 10px).

HTML Code:

div#text-12 {
text-align: right;
}
div#text-12 h1 {
padding-top:15px;
}
div#text-12 h3 {
line-height:0;
margin:0;
}

#text-12 img {
float:left;
padding:10px 10px 10px 20px;
}


Added this code but had to change the first bit on line 2 (changed text-align: right; to text-align: left and changed the padding a little.

Everything looks fine as far as I can see, just 1 more thing to go if possible. How do I get the Title AC Video to be linkable?

Thanks :)

lmilesw Nov 8, 2010 07:13 PM

Left... that's right. I mean right is wrong... I mean align left is what I meant... I meant... well you know what I mean.;)

To link the title you would use

HTML Code:

<a href="http://acvideo.org"><h1>AC Vídeo</h1><h4>Reportagens Profissionais em Fotografia e Vídeo</h4></a>
But the title will probably have the wrong color in regular and hover state so you might want to use.
HTML Code:

<div id="myblogtitle"><a href="http://acvideo.org"><h1>AC  Vídeo</h1><h4>Reportagens Profissionais em Fotografia e  Vídeo</h4></a></div>
And then put the following in ATO>Add HTML/CSS Inserts>CSS Inserts. If that doesn't work put !important after #000 and before the semicolon with a space before it as in the next example.
HTML Code:

#myblogtitle a {
color: #000;
}

HTML Code:

#myblogtitle a {
color: #000 !important;
}


GILSAN Nov 8, 2010 08:01 PM

Quote:

Originally Posted by lmilesw (Post 48845)
Left... that's right. I mean right is wrong... I mean align left is what I meant... I meant... well you know what I mean.;)

To link the title you would use

HTML Code:

<a href="http://acvideo.org"><h1>AC Vídeo</h1><h4>Reportagens Profissionais em Fotografia e Vídeo</h4></a>
But the title will probably have the wrong color in regular and hover state so you might want to use.
HTML Code:

<div id="myblogtitle"><a href="http://acvideo.org"><h1>AC  Vídeo</h1><h4>Reportagens Profissionais em Fotografia e  Vídeo</h4></a></div>
And then put the following in ATO>Add HTML/CSS Inserts>CSS Inserts. If that doesn't work put !important after #000 and before the semicolon with a space before it as in the next example.
HTML Code:

#myblogtitle a {
color: #000;
}

HTML Code:

#myblogtitle a {
color: #000 !important;
}


LOL... I knew if I left you with this problem you would show me the right way.
OK here is what happened. Prior to adding these two codes, the LOGO was clickable but both the Title and the Tagline were NOT.

Now the whole New Widget Area (Logo + Title + Tagline) have become 1 clickable area.
Also the Line spacing (between the Title and the Tagline) has increased again.

Thanks

lmilesw Nov 8, 2010 09:42 PM

The problem is that we are in a situation where one thing can affect the other and all I can do is send you suggestions. You also apparently changed an h3 to an h4 but didn't change the CSS that applied to the h3 tag to h4.

It really is necessary to understand the CSS and how it works otherwise you will always be doing this kind of back and forth with someone. That being said below is what you can do to "fix" the spacing or you might be able to just change the h3 to h4 in the previous code I gave you.

If you want the hyperlink to only be on a particular part of the logo or text you need to change where the a tag is wrapped.

HTML Code:

#text-12 h1 {margin-bottom:0;margin-top:3px;}#text-12 h4 {margin-top:0;}

GILSAN Nov 9, 2010 07:35 AM

Quote:

Originally Posted by lmilesw (Post 48852)
The problem is that we are in a situation where one thing can affect the other and all I can do is send you suggestions. You also apparently changed an h3 to an h4 but didn't change the CSS that applied to the h3 tag to h4.

It really is necessary to understand the CSS and how it works otherwise you will always be doing this kind of back and forth with someone. That being said below is what you can do to "fix" the spacing or you might be able to just change the h3 to h4 in the previous code I gave you.

If you want the hyperlink to only be on a particular part of the logo or text you need to change where the a tag is wrapped.

HTML Code:

#text-12 h1 {margin-bottom:0;margin-top:3px;}#text-12 h4 {margin-top:0;}

Thanks lmilesw, Yes I had forgotten to change the h3 tag to h4 or vice-versa and for that reason the line spacing was out of wack. my apologies.

You are right, I need to learn more CSS. I'm gratefull for this back and forth as it helped me understand a lot more about this great theme.

Many Thanks :)

Gil


All times are GMT -6. The time now is 02:33 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.