SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS in wordpress theme

    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 :

    http://colingoldberg.com/_c0lin/?page_id=1209

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    <a title="testing2" rel="gallery[Portfolio]" href=
    If you want to hide the secondary menu completely you could set it to display:none.

    Code:
    #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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You have a 33px top margin on your header element. If you don't want a margin there then just remove it.

    Code:
    #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

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Attached Images Attached Images

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #page .header img {
    margin-top:0;
    
    
    }
    
    #page .header {
    padding-bottom:0;
    }
    I'll look at the other problem tomorrow.

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, Paul, thanks so much for all of your assistance!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •