Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

[SOLVED] specific css for a widget doesn't seem to work


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jun 9, 2011, 02:21 PM
IldiW
 
39 posts · Oct 2010
NZ
Hi,

back again! I need your help, I've been trying to fix this for a few days but no luck.

I only have this problem in Chrome, running ATA 364 and WP 313.

I have a new widget area in the header and it covers the main content in a way that links don't work (but I can still see the text). As I said it's only a problem in Chrome.

So say here: http://50.22.130.188/~westauck/?page_id=71 the info email isn't clickable.

The widget contains the images and doesn't need to be any longer than say 50px. While I managed to change the height of the widget itself, no luck with the .textwidget which seems to be causing the problem.

I tried all sorts of variations of the following but didn't work:

html body.home div#wrapper div#container table#layout tbody tr td#header div#page_header.bfa_widget_area div#text-17.widget div.textwidget

Interestingly just the last part (div#text-17.widget div.textwidget) did work on other widgets so I'm really lost here.

Any help would be appreciated!
Many thanks,
Ildi
  #2  
Old Jun 9, 2011, 06:06 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
You have a z-index of 100 for that image. Set it to 1 instead and see what happens.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Jun 9, 2011, 06:13 PM
IldiW
 
39 posts · Oct 2010
NZ
Thanks for looking into it Larry, but it didn't change anything.

It needs to have a z-index so that the photos are on the top of both the header and the main content. I still think the issue is that I don't seem to be able to style just this one widget and I don't see why. Otherwise it's just pulling the size of the content (ie. the image which has a height of 240px). So I can change the height of all the .textwidget and that solves the problem but obviously it will ruin all the other widgets which need to have height: auto.

Hm. I just don't see why styling doesn't work for this one widget?
  #4  
Old Jun 9, 2011, 06:17 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
To style just this widget use #text-17 .textwidget as the selector.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Jun 9, 2011, 06:27 PM
IldiW
 
39 posts · Oct 2010
NZ
That's what I thought and something along these lines has always worked before, but not here.

I have this in the CSS:
#text-17 .textwidget {height: 50px !important;}

(previously also tried: div#text-17.widget div.textwidget with no effect)

and it's just completely ignored (on firebug I can see how the css pulled is just the generic .textwidget style).

Is there something wrong with my code that I'm missing here?
  #6  
Old Jun 9, 2011, 06:34 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
You have an image that is pushing the widget to the size it is. If you want to make the image smaller use #text-17 .textwidget img as the selector. Or maybe I'm misunderstanding.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Jun 9, 2011, 06:39 PM
IldiW
 
39 posts · Oct 2010
NZ
No, it's more likely that I'm not understanding it! Are you saying that it's not possible to have the widget sized anything else other than it's content? With positioning the image is not really inside the widget anyway so I thought I could just make the widget smaller (keep the image the same size) and so it wouldn't cover the text in the main content.
It might not be possible afterall... but if I change the height of .textwidget, that works. So why can't it work for this specific widget (which happens to contain an image).
  #8  
Old Jun 9, 2011, 11:21 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
Now I understand. That is what I do at times. In this case your text widget does show as only 50px high but your image is what is crowding the menu items. It looks to be working OK now though.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Jun 14, 2011, 06:58 PM
IldiW
 
39 posts · Oct 2010
NZ
No, it still doesn't work in Chrome . I do appreciate you taking time to look into it though!

My problem is not that this specific thing doesn't work but that I'm not able to change things through the added CSS any more (although clearly it worked previously).
I have this added

div#signup {margin-bottom:3px; text-align:center; width: 130px;height: 150px; float:left;border-right: 2px solid #dc9a1f; padding: 5px;}

#visitshop p {margin-bottom:3px; text-align:center; width: 130px;height: 150px; float:left; padding: 5px;}

wanting to style the last widget in the sidebar on only this page (because the site is now live and this is a testing page) making the two paragraphs move next to each other:

http://westaucklandparents.org.nz/entertainment-book


but it doesn't appear in Firebug at all (same way as my previous problem). If I put all this css inline in the widget, it works fine but I'm trying to avoid that because other people will be maintaining this site in the future and I don't want them to potentially delete code in the text widgets.

I just don't understand what's changed?? Could a new plugin do something like this? I have so little understanding of how things work behind the scenes that it could be anything really...
  #10  
Old Jun 14, 2011, 10:37 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
The following worked for me in Firebug. You could also use a two celled table in that text widget.
HTML Code:
#visitshop {
    margin-bottom: 3px;
    text-align: center;
    width: 130px;
    height: 150px;
    float: right;
    padding: 5px;
    margin-top: -11px;
}
div#signup {
    margin-bottom: 3px;
    text-align: center;
    width: 130px;
    height: 150px;
    float: left;
    padding: 5px;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Jun 15, 2011, 12:03 AM
IldiW
 
39 posts · Oct 2010
NZ
Sorry, Larry, just to clarify, are you saying that when you're looking at that page, you can see this css in firebug?? (I know I can add it in Firebug, but why does the existing css not appear?) And also that the two paragraphs appear formatted according to the css? Because the css is already added and my problem is that I can't see either the code itself or its effect on the page...

I'm sorry to be difficult, but without understanding what's happening, I can't change anything on the site in ATA because it takes no affect (although, as mentioned before, it did use to).

Thanks!
  #12  
Old Jun 15, 2011, 03:30 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
Yes, I can see the signup and visitshop IDs in Firebug. I don't see any CSS applied to them however but if I add some in Firebug it works so it would seem if you added CSS to ATO>Add HTML/CSS Inserts>CSS Inserts it should work as well.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old Jun 15, 2011, 07:03 PM
IldiW
 
39 posts · Oct 2010
NZ
Well, then you see my problem, because it's already been added in CSS inserts... and yet we can't see it in Firebug (although I noticed too that you can add it in Firebug and it works). So the html is there but the CSS isn't applied. What can possibly cause this?
  #14  
Old Jun 15, 2011, 09:15 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
Could you paste the CSS you have in CSS inserts in a reply?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #15  
Old Jun 15, 2011, 09:28 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
Do you have all the 3.6.4 bug fixes applied. This could have something to do with your issue. Also do you have CSS Compression on? Do you have CSS set to external or inline?

If you add ?bfa_debug=1 to the end of your URL and then look at the page source you will see the CSS in question.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #16  
Old Jun 16, 2011, 06:31 PM
IldiW
 
39 posts · Oct 2010
NZ
I didn't have any bugfix as previously I had no issues. Also this site isn't a blog so no categories or posts so far. I'm guessing I will need 364-02/03. I've just done 364-03 but nothing changed. Should I be doing anything else?

I've been using the css compress and the css is set to external. You could well be onto something here because the css inserts stopped working around the time when I did these changes in the hope that the site loads faster.

Thanks,
ildi

ps. I'm assuming you have seen my CSS inserts and don't need it anymore to be copied here?....
  #17  
Old Jun 16, 2011, 06:34 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
Quote:
Originally Posted by IldiW
I'm assuming you have seen my CSS inserts and don't need it anymore to be copied here?....
That's correct. Have you tried setting the CSS to internal and not compress to see what happens.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #18  
Old Jun 16, 2011, 06:47 PM
IldiW
 
39 posts · Oct 2010
NZ
Hm, I tried to set these to inline and no compress but still nothing changed.

The only other thing I put on recently is the W3Cache plugin? Do you think that could be responsible in any way? I'll try to disable it tonight (it's the middle of the day here) in case it breaks the site. We've just started to advertise the launch and people are checking it out so it'd be a bit of a disaster if it stopped working!
  #19  
Old Jun 16, 2011, 06:56 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
Deactivating a caching plugin "SHOULDN'T" cause a problem but I understand your hesitancy. Let us know how it goes.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #20  
Old Jun 17, 2011, 04:06 AM
IldiW
 
39 posts · Oct 2010
NZ
Well, the cache plugin deactivated made no difference either.
But I'm trying to test things so we have the following random thing happening. I had styling for 'p' in the first part of the css inserts as font-size: 16px which worked fine. Now I changed the same line to font-size: 20px which also worked! That's all still in CSS inserts (so it does work??). BUT then I copied this line to the bottom of the CSS inserts and deleted the first instance and this time it didn't work. Does this mean anything to you (it's truly odd to me but I'm hoping that with your experience it might just help)?
  #21  
Old Jun 17, 2011, 05:23 AM
juggledad's Avatar
juggledad
 
22,251 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
normally when something odd like this happens, it's because there is an error in some other peice of CSS. Here is what I would do.

1) put the code at the top of the CSS
-- does it work (Y) go to (2) - (N) check what you have put in the options
2) Move the line of CSS half way to the bottom of the CSS Inserts
-- does it work (Y) go to (2) - (N) You know know where the issue is

examine the section of CSS, remove it all and put it back in a chunck at a time and you should fine the peice causing the issue.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #22  
Old Jun 17, 2011, 06:27 AM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
And because I am a glutton for punishment I decided to look at the CSS and did find two curly braces closing the #mainfeature #home selector. Perhaps removing one of them would fix the CSS issue.

I stopped after I found that issue so their may be others.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #23  
Old Jun 18, 2011, 02:50 AM
IldiW
 
39 posts · Oct 2010
NZ
Big thanks to both of you for looking into this!
The good news is that it works now! The bad is that I still don't know what is causing it!

Larry, the double curlies did make a difference but then I found another bit that didn't seem to work.
I was trying Juggledad's suggestions and found the following.
Anything 'after' this code (including this code itself) won't work:

/* Style youtube video page */
div#post-365.post-365 div.post-bodycopy div#tv {margin: 50px 0 0 60px
div#post-365.post-365 div.post-headline {padding-left: 20px;}

But misteriously now that I moved this to the bottom, everything 'before' it works as well this piece of CSS. But again if I put anything after this code that won't work.

I'm really relieved because even the initial problem with Chrome is sorted! But mistified at the same time!
  #24  
Old Jun 18, 2011, 02:53 AM
IldiW
 
39 posts · Oct 2010
NZ
And thanks to emoticons we can see very obviously what's wrong! I can't believe I didn't notice it before!

Many thanks again to both of you!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] post-specific header image w/ css insert (page-specific ones work, but not o viewdesigninc Header configuration & styling 10 Oct 1, 2012 03:43 PM
Padding doesn't work... mirco65 Center area post/pages 2 Feb 17, 2011 03:51 PM
Adsense doesn't work in homepage, but work in other pages. JavaBen Header configuration & styling 1 May 24, 2010 05:48 AM
[SOLVED] Custom Widget alignment doesn't work conon Sidebars & Widgets 2 May 10, 2010 01:20 PM


All times are GMT -6. The time now is 12:30 PM.


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