WordPress.com Forums » Topic: Changing CSS on nishita theme

thesacredpath on "Changing CSS on nishita theme"

thesacredpath — Tue, 31 Jul 2012 19:21:36 +0000

You are welcome.

lafraiserie on "Changing CSS on nishita theme"

lafraiserie — Tue, 31 Jul 2012 19:06:39 +0000

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

thesacredpath on "Changing CSS on nishita theme"

thesacredpath — Tue, 31 Jul 2012 07:32:53 +0000

First off, put the following at the end of the code in your text widget where the social icons are.

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.

thesacredpath on "Changing CSS on nishita theme"

thesacredpath — Tue, 31 Jul 2012 06:10:57 +0000

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;
}

lafraiserie on "Changing CSS on nishita theme"

lafraiserie — Mon, 30 Jul 2012 21:55:32 +0000

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

thesacredpath on "Changing CSS on nishita theme"

thesacredpath — Mon, 30 Jul 2012 21:51:54 +0000

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

lafraiserie on "Changing CSS on nishita theme"

lafraiserie — Mon, 30 Jul 2012 21:48:16 +0000

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

thesacredpath on "Changing CSS on nishita theme"

thesacredpath — Mon, 30 Jul 2012 21:35:31 +0000

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?

lafraiserie on "Changing CSS on nishita theme"

lafraiserie — Mon, 30 Jul 2012 20:15:14 +0000

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

thesacredpath on "Changing CSS on nishita theme"

thesacredpath — Mon, 30 Jul 2012 19:30:40 +0000

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;
}

lafraiserie on "Changing CSS on nishita theme"

lafraiserie — Mon, 30 Jul 2012 18:39:04 +0000

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)

chrisrudzki on "Changing CSS on nishita theme"

chrisrudzki — Mon, 30 Jul 2012 18:06:16 +0000

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.

lafraiserie on "Changing CSS on nishita theme"

lafraiserie — Mon, 30 Jul 2012 17:43:21 +0000

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.