WordPress.org

Forums

Celestial - Lite
Celestial Lite-Resizing Images on Front Page widget not working (7 posts)

  1. smith_jc
    Member
    Posted 1 year ago #

    Ok I admit it, I am a complete newbie! It has taken me 3 weeks to get to where I am now so I need some help.

    I am attempting to create a business website for my husband. If this works I might even do one for our non-profit :)
    Currently its at http://www.keithwsmith.com/wordpress

    I am not very creative so I am "TRYING" to create what is shown on the Celestial Lite demo...So far so good.

    I have read all the instructions on the Styled Themes page and followed them step by step but I am still struggling with the thumbnails on the front page. I have 2 questions

    How do I make the 4 bottom thumbnails/widgets/pictures the same size?

    Is there any was to make the thumbnails at the bottom round?...(hey its the only creative idea I have had....)

  2. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    No worries.... but first, here is a code snippet of the first widget on the demo site that you can use as a guide for each one:

    <div class="post-thumbnail" style="margin-top:10px; padding:6px;"><img class="center" src="http://demo.styledthemes.com/celestial-free/wp-content/uploads/fp-responsive.jpg" alt="responsive"></div><h3>Fully Responsive</h3><p>Celestial is a fully responsive WordPress theme for you to enjoy viewing your website in your favourite mobile device. I've incorporated the popular Twitter Bootstrap framework to give you more flexibility whether you are on a desktop or an iPhone.</p>

    For image sizes, you will need to make the thumbnails the size you want before uploading them. For example, the demo site uses images that are 270x125 pixels. This means you will need to have some kind of image program on your computer that lets you crop and edit photos.

    For your other question, rounded thumbnails can be done with custom CSS such as:

    width: 100px;
    height: 100px;
    border-radius: 50%;

    What is important is to have the image square.

  3. smith_jc
    Member
    Posted 1 year ago #

    Thanks for your reply! I have read all your help files.

    I tried this with your code and the pictures do not appear.
    Since i am using a visual text editpr, I just inserted
    The pictures and text without your code.

    I tried it again with your "code snippet" and again the pictures are not there.

  4. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    You did replace my image link with your own?

  5. smith_jc
    Member
    Posted 1 year ago #

    I suppose so. I used a Visual text editor to create what I wanted. Is that the same as replacing the code? (I told you I am green)

  6. smith_jc
    Member
    Posted 1 year ago #

    Actually making all my graphics square seems to be what made the difference. When I used your code they were all weird sizes and the first one had multiple borders. The only thing I know to do when that happens is delete it all and try again..

  7. StyledThemes
    Member
    Theme Author

    Posted 1 year ago #

    Something was missed then when you used my code, not sure what though because the code I gave you is the exact code I used in the front page widgets from the demo site. The only thing needed was to replace the URL path to the photo and to change the text content part. The thumbnails you are using right now are the generated thumbnails from WordPRess at 150x150...was this the size you wanted or your other one at 250x219 ?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic