Home › Forums › Graphene WordPress theme › Support

Border around images and titles in posts?

  • atraael

    October 16, 2011 at 4:39 am #17613 
    <table align="center" style="padding-right:18px;"><tr><td><a href="http://theblackchannel.net/"><img
    
style="border: 0px solid ; width: 190px; height: 198px;" alt=""src="http://www.theblackchannel.net/graphics/tylerperry.jpg"></a>
    
</td></tr></table>

    Here is the code.

    Anonymous

    October 16, 2011 at 4:50 am #17614

    Okay, great.

    The reason for the border is because you are using the <table> styling which defaults to adding a border and background around individual cells. You can make this not happen… but it will affect every table you have made, or will make in the future.

    So, to avoid that… let’s try this code instead:

    <a href="http://theblackchannel.net/"><img src="http://www.theblackchannel.net/graphics/tylerperry.jpg" height="198px" width="190px" style="padding-left: 4px;" /></a>

    This way, we remove the table tags, and you are left with a simple image insert, linked to your radio page, with a little styling for image placement.

    Presto… border removed!

    atraael

    October 16, 2011 at 4:58 am #17615

    It appears to be working, centered and without the border. However, if I change the size of the image or use a different picture it goes back to aligning to the left again. Do I just have to use the same size for all pictures?

    Anonymous

    October 16, 2011 at 5:00 am #17616

    Let me make sure I understand you correctly before we proceed.

    Did you want a border around the image, or no border?

    atraael

    October 16, 2011 at 5:05 am #17617

    There’s no border. That’s correct. Your code removed the border and centered the image just like I wanted. However, I tried another picture of different dimensions using the same code and noticed that it was aligned to the left again. I know your code worked the first time so I’m wondering if this is just a feature of the theme’s coding or is my lack of .html catching up with me again?

    Anonymous

    October 16, 2011 at 5:12 am #17618

    Okay.

    So here is the issue. Your original image, the one being called from the web, is 450 x 394 pixels. This is way too large to fit inside a widget with a simple image insert… for example:

    <img src="http://www.theblackchannel.net/graphics/tylerperry.jpg" />

    It would spill WAY over the widget box. So, we had to add height and width properties to the image tag to make it display correctly in your widget. Hence,

    <img src="http://www.theblackchannel.net/graphics/tylerperry.jpg" height="198px" width="190px" />

    Now, what I suggest is to resize your image to something manageable in the widget area. Maybe 200px in width at most. You should be able to use any photo editor to resize the image. Remember to maintain the aspect ratio as you adjust size.

    Then, upload your newly sized image to your server and change your http path in your image tag.

    Next, use this code for all future text boxes with an image:

    <div align="center"><a href="http://theblackchannel.net/"><img src="http://www.theblackchannel.net/graphics/tylerperry.jpg" /></a></div>

    This will align your images to the center of the widget, assuming the width of your image is appropriate.

    Remember, you will need to change the <a href> and the <img src> references for each newly added image.

    atraael

    October 16, 2011 at 5:23 am #17619

    Okay. I was using another image that was only 150px wide and it was way over to the left any measurement over 190 pushes them to the right , but my Photoshop is better than my .html so resizing pics is no biggie. So, if that’s just a rule of the widget box (that you can’t go over or under a certain width without moving the alignment) then I can resize them. You’re correct, 190 px centers the pictures perfectly but using any other width throws it off.

    I hope I’ve understood you correctly.

    Thank you again for the help, Josh.

    Anonymous

    October 16, 2011 at 5:28 am #17620

    No problem, and just to be clear…

    The first code I gave you was specific to that image… because of the dimensions. It also had a padding property, which was specific to that image as well.

    As long as your images are “skinnier” than the widget box, they will center by wrapping the image tag with a centered div tag. They don’t have to be an exact width… just anything less than the width of the widget box.

    So here is your basic code, which you can alter for each image.

    <div align="center"><a href="WHERE YOU WANT YOUR IMAGE TO LINK"><img src="YOUR IMAGE URL ON SERVER"></a></div>

    atraael

    October 16, 2011 at 5:32 am #17621

    Okay. For my own future reference, I had also been changing the image dimensions directly in the code from the widget box rather than photoshopping it. Is it better to already have the image at the appropriate size or is it okay to just adjust the size in the copy and paste code or does it make a difference?

    Anonymous

    October 16, 2011 at 5:36 am #17622

    Well, the less work you make for the server and the browser, the faster and more efficient you site will load. Technically, you can do it either way.

    However, reducing the amount of code is always a good idea.

    If you adjust your images… you reap two benefits:

    1. You get a smaller image size, resulting in a faster loading time.

    2. You don’t have to add height and width properties to every image you insert, resulting in less code.

    Both of these factors will cause less “stress” on your users’ browsing environment.

Viewing 10 posts - 11 through 20 (of 23 total)

  • You must be logged in to reply to this topic.