CSS in wordpress theme

HTML & CSS
1

Hello,

I am using the “Dark Atlantica” theme for Wordpress, I am having a hard time getting image descriptions to show up in the image gallery images. The theme uses a jQuery script called prettyPhoto (like Lightbox). I am using the theme to show my artwork, and I want to put the title and year on top, which works fine with the ALT tag, but when I use the TITLE tag as described in the prettyPhoto documentation, it doesn’t work. Can anyone please tell me how to fix this ?

My site is here :

Also is there a way to prevent the secondary menu from showing up ? IE the row under the drop-down menu ?

If you can let me what CSS to edit to fix these issues, it would be most appreciated. I am happy to post any CSS, JS or PHP files anyone might need to analyze the issue.

Thanks, Colin Goldberg

2

Awesome, Paul, thanks so much for all of your assistance!

3

Hi,

It seems to work for me if you add the title:


<a [B]title="testing2" [/B]rel="gallery[Portfolio]" href=

If you want to hide the secondary menu completely you could set it to display:none.


#content .from_title {
display:none;
}

Though I’m not sure why you want it hidden as it would be a good aid to accessibility to have the current options displayed there.

4

ahh, I was adding the TITLE tag to my IMG, not my anchor! DUH! Thanks so much… Since you seem to be well-versed with this theme, I was also wondering if you know how to get rid of all the space above the logo (I would like all 4 rows of thumbs to be visible ‘above the fold’, and also when my gallery images appear, there is sometimes a slight sliver of black next to the rounded corner graphic - any easy fixes here ?

Colin

5

Hi,

You have a margin-top of 30px on the image in the header and 20px padding-bottom on the header itself. Remove those two if you want less space.


#page .header img {
[B]margin-top:0;[/B]


}

#page .header {
padding-bottom:0;
}

I’ll look at the other problem tomorrow.

6

Hi,

t only appears to be happening on Mac Firefox ( v 3.6.10).

I looked at the page in the above browser and I don’t see any lines on my mac system. However, If I zoom the page then a slight gap appears due to rounding errors in FF on the mac. This doesn’t happen in FF on the PC though so there isn’t much you can do about it.

The problem is the way the corners are placed and they should be nested elements rather than elements placed in each corner absolutely which is always prone to break. You could try making the round corner images 1px bigger and making the element they sit in 1px bigger all around and that might serve to hide the gap when the page zooms.

As it’s only happening on zoom I wouldn’t worry to much about it as there would be no real need to zoom those large images anyway. Unless of course your system is displaying the gaps at normal size but I find that unlikely.

7

OK I am attaching a screenshot - it only appears to be happening on Mac Firefox ( v 3.6.10). Also my header graphic is only 80px tall, and there still appears to be a bunch of space both above and below it. I would love to eliminate this so my 4 rows of gallery thumbnails (ie Artwork -> Early Work) all appear “above the fold” so to speak on smallish screens. Is there some padding or margin I should eliminate ?

Thanks so much, you are a CSS guru!
Colin

8

You have a 33px top margin on your header element. If you don’t want a margin there then just remove it.


#page .header{margin-top:0}

and also when my gallery images appear, there is sometimes a slight sliver of black next to the rounded corner graphic

I didn’t notice anything so you may need to send a screenshot and mention which browser it happens on.

Since you seem to be well-versed with this theme,

I’m afraid I nothing of wordpress at all. I just look at the CSS :slight_smile: