Need help? Check out our Support site, then


Changing CSS on nishita theme

  1. Hi,
    is there a way I could change the shape of my pictures by changing css ? I would like to put a rounder shape on the corners of the photos, but since I'm beginning to read on css, I couldn't find a way to do it.

    The blog I need help with is chefmignonnette.com.

  2. Howdy,

    There really isn't a reliable way to change the shape of images using only CSS.

    Of course, you could always upload rounded images that you process in Photoshop or other photo editing software.

  3. Okay, thanks a lot for the answer !
    If it's not possible for the pictures, then how about giving a rounded shape to the posts ? (all content area)

  4. You can give this a go. I've targeted it to only images in the main content area so it won't mess with other images in the site. This solution covers about all cases, but people with really old browsers will still see the squared corners on images. That can't be helped since older browsers do not support the border radius CSS. Edit the 10px values as desired, but keep them all the same.

    #nishita-content img {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }
  5. Wow ! Thanks so much, it worked perfectly well, exactly what I wanted !
    Would you know, by any chance, how to do the same with the
    ''content areas'' ?

    thanks again

    Jessica

  6. Did you want just a rounded border around the posts themselves, individually, or did you want a background color to the posts?

    Or did you want a rounded border or background around ALL the posts together?

  7. I wanted a border on each post individually, so that each post would be like a ''bubble'', not really a bubble of course, but it's the best way I can describe it. And also around the widgets in the sidebar, if possible. I would then change the colour in the background to make the shape more visible.

    Please tell me if my explanations are unclear :)

    thanks so much,

    Jessica

  8. Jessica, let me work on that. Nishita has a few peculiarities I need to work through with the posts.

  9. Well I don't know what to say... thanks so much, this is really nice of you. How did you get all the knowledge on css ? :)

    Looking foward to hear from you, and take all the time you need !

    Have a good night

    Jess

  10. Ok, this will do it for the content area, with one caveat: You are currently using photo post formats, and if you happen to use a different format, such as standard, aside, or something else, we might have to add to this. Note the border set in both div.post, and also the "bottom-bottom" in the last rule starting with .infinite-scroll . Both of those will need to be kept the same (whatever width you decide on). Give this a try and see what you think, and edit the background color as desired.

    The sidebars are going to take a bit of playing with as my first run uncovered more interesting twists. This theme is designed a little differently and needs more rules to accomplish things than other themes it seems. More complex.

    div.photo {
    background: transparent;
    }
    
    div.post {
    background-color: #AADFF2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 1px solid #000000;
    border-radius: 10px;
    }
    
    h2.photo-title {
    background: none;
    }
    
    .photo-meta {
    background: none;
    }
    
    .infinite-scroll .hentry:last-of-type, .infinite-scroll .hentry.last-before-infinite {
    border-bottom: 1px solid #000000;
    }
  11. First off, put the following at the end of the code in your text widget where the social icons are.

    <br style="clear:both;">

    Add the following to your CSS and edit as desired. The bottom margin regulates the spacing between the widgets. The padding is needed to keep the text from being right on top of the border lines. If you increase the padding, you will have to decrease the left and right margin values for #text-10 img or the icons will go to a second line.

    .widget-area .widget {
    background-color: #FF0000;
    border: 1px solid #000000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 10px;
    padding: 5px;
    }
    
    .widget_blog_subscription form, #s {
    width: 188px;
    }
    
    #text-10 img {
    margin-left: 4px;
    margin-right: 4px;
    }

    Give this a try and see how it looks.

  12. Wow ! Thanks so much, it worked perfectly !!! I love it !

  13. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic