Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member shimiz's Avatar
    Join Date
    Aug 2011
    Posts
    22
    Member #
    29095
    Liked
    2 times
    Hey guys.

    So I have a site and a blog. My blog is on blogger and my site is built using the wordpress plug-in.

    What I want to do is put borders around the images on my site the way they are on my blog. The blog makes these borders by default so I have no idea what html code i'd have to use..

    Anyway, here is an entry from my blog with a bunch of inserted images so that you can see the kind of fade-out borders that I'm talking about: http://stuffedwallet.blogspot.com/20...duct-test.html

    Here is a page from my site and you can see that without borders, these images look like a mess:
    http://paid-surveys-reviews.com/survey-savvy-review/

    So is there a way to put the same type of borders around images on my site? I'm guessing that this isn't an easy type of thing to do and I'd have to go deeper into the layout code or something?

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    He's using a blogger template:

    [COLOR=rgb(0, 0, 0)]Blogger Template Style
    Name: Awesome Inc.
    Designer: Tina Chen
    URL: tinachen.org[/COLOR]

  4. #3
    Junior Member shimiz's Avatar
    Join Date
    Aug 2011
    Posts
    22
    Member #
    29095
    Liked
    2 times
    Alright, but how do i find out how to make that type of image borders? I don't think you can use blogger templates on a site built with the Word Press plug-in, right?

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    No, but you can inspect the code to find out how they're doing it.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member shimiz's Avatar
    Join Date
    Aug 2011
    Posts
    22
    Member #
    29095
    Liked
    2 times
    Alright. What do i do with the code once i find it? Is it some type of root code that I will have to insert into the code of my wordpress template which will then put borders around all images that I post?

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You could just try searching Google for a plugin.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Junior Member shimiz's Avatar
    Join Date
    Aug 2011
    Posts
    22
    Member #
    29095
    Liked
    2 times
    I think if found the code:

    <Group description="Images" selector=".main-inner">
    <Variable name="image.background.color" description="Background Color" type="color" default="transparent" value="#ffffff"/>
    <Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="#cccccc"/>
    </Group>

    Now just where the heck do i insert it..?

    I guess i'll go with the plug-in option if i can't figure out where to insert the code.

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Here's what you can do:
    In your CSS, set the border for the image to white, 5px. Then, add a box shadow.
    It'll look something like this:
    Code:
    #id img{
    border:5px solid white;
    -webkit-box-shadow: 5px 5px 5px #888888; /* Safari and Chrome */
    box-shadow: 5px 5px 5px #888888;
    }
    Just change #id to the id or class for the images, or whatever selector you need to use.
    shimiz likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Junior Member shimiz's Avatar
    Join Date
    Aug 2011
    Posts
    22
    Member #
    29095
    Liked
    2 times
    Thanks, ill try that out! Have to go for now, but ill report on my success/failure once im back.

  11. #10
    Junior Member shimiz's Avatar
    Join Date
    Aug 2011
    Posts
    22
    Member #
    29095
    Liked
    2 times
    Well, i think i finally achieved the effect i wanted, thanks to your suggestions and the good old process of trial and error haha.

    Now, i'm trying to figure out how to create more space between text paragraphs and images. If you look at them now, they're too close to each other and this just makes the whole pages feel cluttered. How can create more space? I'm guessing it's some short simple piece of code like <break> or something like that?


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

place border around post images in blogger using css

,

word quick way to put borders on all images

Click on a term to search for related topics.
All times are GMT -6. The time now is 05:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com