SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I replace a gif image with some CSS code?

    On my site, I have a gif image which is in in fact just a bar, about 2 px wide, colored in green. Can i take that gif image out of the table and replace it with CSS instead of going into photoshop and redo the image with a different color?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Can you post a link or your code, then we can see where you want to place the image.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    www.yvib.com/alicia

    I'm looking to replace the green bar that's at above the random members? Even though, I don't think it's a big deal if I have to just redo another in Photoshop

    Also, since I'm here: have you guys used those javascrip libraries that generate round corners? If you did, is it pretty hard to put my login box and the middle section of the page in a round corner box?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    replace
    Code:
    <td colspan="2" background="theme/default/images/frame/greenbar.gif" height="5"><img src="theme/default/images/frame/spacer.gif" alt="Spacer" height="5"></td>
    with
    Code:
    <td colspan="2" height="5" style="background: #AFF74D"><img src="theme/default/images/frame/spacer.gif" alt="Spacer" height="5"></td>
    Just change the color to what you are after, though tables are bad
    Also, since I'm here: have you guys used those javascrip libraries that generate round corners? If you did, is it pretty hard to put my login box and the middle section of the page in a round corner box?
    I used niftycorners and now niftycube, they seem to work well. It's very easy, just have a look at the examples you should be able to figure it out.
    http://www.html.it/articoli/niftycube/index.html

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Mark, I know tables are bad, but it will take me forever to convert that theme into a CSS solution only. I wish I would have the knowledge to do all of that without wasting a lot of time.

    I did take a look at niftycube before, but I'll check it out again and see how I can integrate my stuff with it.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one more question Mark: on the same website, I would like to replace the top part where it has the logo. I know that the logo is a picture, and I can see that there is a header.gif there as well. But when I open header.gif, I can only see a white background, I don't see the blueish color.

    How should I proceed to replace that top part? Make the logo with an invisible background and make another header.gif in Photoshop?

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I know tables are bad, but it will take me forever to convert that theme into a CSS solution only.
    That's ok, but if you are making a new website in the future, try and use CSS for layout - It's a great learning experience.
    But when I open header.gif, I can only see a white background, I don't see the blueish color.
    The bluish gradient is in there - but the image is only 1px wide and tiled horizontally. I've heard it's better to use 10px wide to speed up rendering.
    How should I proceed to replace that top part?
    If you don't want to mess around with the layout at all just open logo.gif
    and change the design however you would like, then crop the right 10px and save as header.gif. yeah ?

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sounds good. Also, why do the tabs on top look different in IE7 than Firefox? Did I do something wrong?

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Code:
    #navigation li a {
    	font-family: "Trebuchet MS", verdana, helvetica, arial, sans-serif; 
    	font-weight: bold; 
    	font-size: 1.1em;
    	color: #515151;
    	padding:7px 14px 0 2px;
    	text-decoration: none;
    	float:left;
    	background:url(images/tabs_reg_r.png) no-repeat right top;
    	height:20px;
    }
    Try this, However - the fonts in IE7 will be anti aliased so they will always look slightly different.

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    much better. Thanks. Now if I could figure out what Paul told me earlier, on how to get the active tab to be displayed in blue, then I'm set with the menu. That's the only thing that is broken

  11. #11
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    It looks blue now

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Chicago
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ) true, but click on another one, like search or blogs, and the tab stays the same color, white

  13. #13
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You need to change the class to the selected item - this means changing the menu on each page - impossible if you are simply including the same header on a each page.


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
  •