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)
-   -   Seems to be a problem when displaying multiple links sections on right sidebar (http://forum.bytesforall.com/showthread.php?t=4665)

debsmusings Dec 1, 2009 11:18 AM

Seems to be a problem when displaying multiple links sections on right sidebar
 
1 Attachment(s)
I am playing with a new website and am leaning toward the use of the Atahualpa theme and have the latest one installed (3.4.4).

On the right the first set of links is appropriately formatted. The subsequent ones are not. I am not much of a coder but I do see a div tag that isn't added to the subsequent ones.

See:http://backpacks.reachfoundation.org/ to see page source. [see note below]
See attachment of screen capture showing formatting problem.

Note - I am posting this today midday and don't plan to play with the site again until tomorrow. Tomorrow night I will be flipping themes around to demo to someone else and so if you follow the link after today the theme might have flipped over. While I am leaning to this theme, others might not feel that way.

juggledad Dec 1, 2009 03:56 PM

What widget are you using for the 'School Links' and what did you put in the widget?
How have you setup your links in the dashboard?

debsmusings Dec 1, 2009 07:18 PM

Not using any widgets (that I know of). I did a very straight default WP install. Added a few sample pages and posting and then installed a bunch of themes and started flipping through them. I like this theme whatever logic is formatting the various links is not quite working correctly. The first link section (school links) came out well. It's all the subsequent ones that look broken. The generated page source looks like:
-----------------

<div id="linkcat-99" class="widget widget_links"><div class="widget-title">
<h3>- School Links -</h3></div>
<ul class='xoxo blogroll'>
<li><a href="http://www.ramapocentral.org" rel="me" title="This is the main website for all 7 Ramapo Central Schools">Ramapo Central School Website</a></li>
<li><a href="http://www.reachfoundation.org" rel="friend" title="This is the only educational charity that services the Ramapo Central School district other than the school PTA’s.">REACH Foundation of Rockland</a></li>

</ul>

<h3>- School Sports -</h3></div>

<ul class='xoxo blogroll'>
<li><a href="http://suffernbaseball.vnsports.com/" title="Need to verify this website.">Suffern Mounties Baseball</a></li>
<li><a href="http://www.ballcharts.com/SHSBASKETBALL" title="Information on the SHS Varsity and JV teams can be found on this site.">Suffern Mounties Basketball</a></li>
<li><a href="http://www.suffernfootball.com" title="SuffernFootball.com is designed for, and maintained by, the alumni, parents and friends of Suffern High School football. ">Suffern Mounties Football</a></li>

</ul>

<h3>Community Clubs</h3></div>
<ul class='xoxo blogroll'>
<li><a href="http://www.rocklandscouts.org/" title="For more information on cub scout and boy scout packs, please visit this main rockland site.">Boy Scouts</a></li>

<li><a href="http://www.girlscoutshh.org" title="To get in touch with the local girl scout troops.">Rockland County Girl Scouts</a></li>

</ul>
---------------

Anyway it looks like the formatting <div>'s aren't being repeated for each link section. The key point here is that I didn't do anything special. This is a straight default install.

Deb

juggledad Dec 1, 2009 08:08 PM

right your getting the default widgets

How did you create the links, ie what did you put in the various parts of the links when you added them iinks at the wordpress dashboard->Links?

I think something in the way you created them is causing this behavior. Please try an experiment, switch to the default theme and see what they look like.

if it is an Atahualpa issue, it would be nice to recreate it so it could be fixed

debsmusings Dec 1, 2009 09:31 PM

I created the links by going into the dashboard, clicking on links and using the left side navigation to Add New. I had deleted the default theme so I went and activated another one that I like a lot for this purpose but I don't like how it handles main navigation (no sub pages). But if you look at how it handles the links on the right, it recognizes all the links properly. So I think that its the theme and not the links. I tried another theme as well and they look well formatted there too. Take a look: http://backpacks.reachfoundation.org/

juggledad Dec 2, 2009 03:44 AM

very odd, if you add the 'links' widget in manually (just drop it in the LEFT sidebar) it works fine!
I'll dig a little more, but you can fix your site for now by manually adding the widgets in.

docfox Dec 2, 2009 04:06 PM

I've been having the same problem but with the NextGEN widgets (one says "New Arrivals" and the other says "More New Arrivals". Most of my items are centered in the right-hand column - the video selection above the New Arrivals is centered. I've followed some previous posts with no luck. Here is the page: http://www.ffstock.com/blog/kohler-f...boret-handles/

I have tried changing the widget css, Style and Configure SIDEBARS and style WIDGETS and cannot get this centered.

Thanks for any help,
Allen

juggledad Dec 2, 2009 06:48 PM

Not sure what is out of wack. do you mean the titles are not positioned over the photos or the whole widget is not aligned with the other widgets?

docfox Dec 2, 2009 08:20 PM

The whole widget is not aligned. Actually the videos is a text widget and I was able to put a <div align="center"> and a </div>.

I had the titles centered, and they were centered, but then the images really looked out of wack.

Thank you for getting back to me,
Allen

juggledad Dec 3, 2009 03:47 AM

I like to put a border around the element that I'm trying to fix and give it a color so I can see what happening. It's really hard to see movement of a white box inside a white box.

So you could go to ATO->Style & configure SIDEBARS->RIGHT sidebar style and add
HTML Code:

border: solid 1px #000000;
padding: 2px 2px 2px 2px;
background: #00ffff;

and then go to ATO->Style WIDGETS->Widget Container and add
HTML Code:

border: solid 1px #000000;
padding: 2px 2px 2px 2px

;
and you will get a good feel for the spacing of the widgets.

Once you do ou need to look at the generated source and look at the widget you want to effect. When I look at your page, I see
HTML Code:

<div id="ngg-images-486249871" class="widget ngg_images">
  <div class="hslice" id="ngg-webslice" >
    <h2 class="widgettitle entry-title">New Arrivals</h2>
    <div class="ngg-widget entry-content">
      <a href="<..snip..>/antique/t132-3d-bn.jpg" title="" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/antique/thumbs/thumbs_t132-3d-bn.jpg" width="90" height="90" title="t132-3d-bn.jpg" alt="t132-3d-bn.jpg" /></a>
      <a href="<..snip..>/kohler-valves/407-K.jpg" title="" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/kohler-valves/thumbs/thumbs_407-K.jpg" width="90" height="90" title="407-K" alt="407-K" /></a>
      <a href="<..snip..>/kohler-alterna-inserts/9926-PB-17.jpg" title="K-9926-PB-17" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/kohler-alterna-inserts/thumbs/thumbs_9926-PB-17.jpg" width="90" height="90" title="9926-PB-17" alt="9926-PB-17" /></a>
      <a href="<..snip..>/kohler-valves/679-ks-na.jpg" title="" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/kohler-valves/thumbs/thumbs_679-ks-na.jpg" width="90" height="90" title="679-ks-na" alt="679-ks-na" /></a>
      <a href="<..snip..>/kohler-revival/T16113-4A-CB-OLD.jpg" title="" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/kohler-revival/thumbs/thumbs_T16113-4A-CB-OLD.jpg" width="90" height="90" title="T16113-4A-CB-OLD.jpg" alt="T16113-4A-CB-OLD.jpg" /></a>
      <a href="<..snip..>/kingston-heritage/KS2981KX.jpg" title="" rel="lightbox[sidebar_486249871]"><img src="<..snip..>/kingston-heritage/thumbs/thumbs_KS2981KX.jpg" width="90" height="90" title="KS2981KX" alt="KS2981KX" /></a>
    </div>
  </div>
</div>

since you want to center the pictures, look at teh inner most <div> and you see a '<div class="ngg-widget entry-content">' so there is a class you can use for teh CSS Selector so you can add a CSS Insert of
HTML Code:

div.ngg-widget {
text-align: center;
}

and if you go look at the results, the pictures will now be aligned...but the title is not.

Looking at the code you see that the title is in an <h2> and it has a class="widgettitle" so you can use this to make the CSS Selector for the titles, but (there is always a but, isn't there.) it could effect other widget titles, so looking at the <div> that includes the <h2>we see another calss with 'class="hslice" so if you buil the CSS selector with both, the rules will only apply to h2's that have a class of 'widgettitle' and are inside a DIV with a class of 'hslice' so to center the title you would use
HTML Code:

div.hslice h2.widgettitle {
text-align: center;
}

Now it looks like the the 'Featured Videos' title is not centered, but you should have enough here to figure out how to center that too.

docfox Dec 19, 2009 06:09 PM

Thanks for the response, I see what you mean. This has become quite a project. What looks un-aligned is not always the case. I know this may be off the track topic of this thread, but in making sure the page and category vertical menus are aligned (I've started over going from top to bottom) and centered, I cannot get the background color to change to white.

I've tried several places in the ATO and even changed some of the css. The background color that is showing is #152B4E.

Here is the link again: http://www.ffstock.com/blog/

If I should post this somewhere else please let me know.

Thanks
doc

juggledad Dec 19, 2009 07:50 PM

check the body, styling 'background'

docfox Dec 19, 2009 10:17 PM

Yes, I've changed that setting several times and that changes the entire background. I've tried to figure out how to change the background of the "page menu bar" and the "category menu bar" to white while leaving the sides of the layout blue.

I've played with it almost all day, it seems so simple but there is almost another "layer" under the actual menu bars.

doc

lmilesw Dec 20, 2009 12:40 PM

Have you tried changing the Background Color in the Page Menu Bar section?

docfox Dec 20, 2009 04:11 PM

Yes, I have those set to FFFFFF white with an orange hover. That's where it seems there is another (something) behind there that I have not been able to get at.

Thanks for the help,
doc

lmilesw Dec 20, 2009 04:34 PM

I hate to do this because it can seem like I don't trust what you know but I have added a picture to this to be sure we are clear on the settings since what you describe is not anything I have experienced.

juggledad Dec 22, 2009 04:28 AM

Duhh, sorry I just reread this thread. Here is what you need
HTML Code:

/* ================================================== */
/* menu background  page is menu1, cat is menu2 */
/* ================================================== */
div#menu1,
div#menu2 {
        margin-top:0px;
        background: #FFFFFF;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */



All times are GMT -6. The time now is 03:46 PM.

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