Editing Chunk theme using CSS
-
Hello all,
I am looking to do a few things with custom design on my wordpress.com blog but have no idea how to use CSS. This is what I am trying to do:
1. Take out the “filed under…” when I click on categories from my menu
2. Center the alignment for my menu
3. Use a different background image for only the home page, and have that background image take up the whole screen instead of being tiled or only take up one corner
4. Change the colour of the text for IMVERYAPE and the menu on just my homepage to white
5. Increase the size of the IMVERYAPE on the just the homepage
6. Remove the “leave a comment” section from my homepageI know that’s a lot of questions but if somebody knows the answer to at least one of them I would be grateful. Thanks!
The blog I need help with is: (visible only to logged in users)
-
1.
.archive .page-title h2 { display: none; }2. This is nearly impossible right now. First off, I have a 2560px wide monitor and if I have my browser maximized, do you really want the browser to stretch your background image from 423px in width to 2560px? I don’t think so. You would not recognize it.
There is a lot that is simply out of your control. You have no control over what size display someone is viewing your site on. It could be a 300px wide smartphone, or a 1024px wide tablet, or a 2560px wide 30″ display such as I have (although I never maximize any windows except for Photoshop and Illustrator).
There is a “background-size” CSS declaration that can be used to rip background images to shreds and stretch and contort them to fit any screen size, but as of yet it doesn’t work here at wordpress.com. (I find it of little use in general since it seriously kills image quality.)
3. To do s separate background image on the home page, you have to specifically target that page. This does not work in all themes since not all themes have the necessary classes declared in the body selector for each page, but in your theme it does. Replace IMAGE URL between the double quote marks with the URL of the image you upload to your media library. It is right now set for “no-repeat”. If you need the image to repeat, then turn “no-repeat” into just “repeat.”
body.home { background: url("IMAGE URL") no-repeat scroll 0 0 transparent; }4 & 5.
site title and menu non-hover colors and title font size – main page
.home #site-title a ( color: #FFFFFF; font-size: 200%; }.home #menu a { color: #FFFFFF; }site title and menu hover colors – main page
.home #site-title a:hover, .home #menu a:hover { color: #FFFFFF; }current page item menu color – main page
.home #menu ul li.current_page_item > a, .home #menu ul li.current_page_ancestor > a, .home #menu ul li.current-menu-item > a { color: #FFFFFF; }6. You figured this out apparently.
-
Thank you very very much, sir! Everything is working great so far.
This is the image I used. However, I think it is actually too big, if you take a look at my home page it is too big (if you compare it to the original). It is 4368 x 2912. Any recommendations on what to do with this image so that on a regular screen in is closer to the normal size of the image?
Again, thank you so much for all of your help.
-
-
If you download the image and then upload it to your WordPress.com image library, then you can add a query string to adjust the image site.
For example, if you want the image to be 800 pixels, you would add ?w=800 to the end of a WordPress.com hosted image.
-
Thank you! I will have to give that a try. I’m not sure what a query string is though, any way of explaining that a bit? Oh, and what size would be ideal for a photo like that to cover the whole screen for all monitors? 2000 pixels? I really have no idea.
Thanks again, very helpful.
-
I’m not sure what a query string is though, any way of explaining that a bit?
Sure. A query string is anything at the end of a link that looks like this:
?key=value&key2=value2Here’s an example of a WordPress.com image link:
And here’s that same example using a query string to change the size:
-
Oh, and what size would be ideal for a photo like that to cover the whole screen for all monitors? 2000 pixels?
Monitors are all different sizes. They range from 1900 pixels wide to 800 pixels wide (most often). Common web design widths are often in the 900 to 1200 pixel range these days I think.
-
-
Adding the “?w=” then a number didn’t adjust the size when I put it beside the url in CSS.
I tried it like this
body.home {
background:url(‘http://upload.wikimedia.org/wikipedia/commons/4/4e/Justice_in_concert.jpg?w=800’) no-repeat scroll 0 0 transparent;
} -
It won’t work for http://upload.wikimedia.org/wikipedia/commons/4/4e/Justice_in_concert.jpg because that image is not saved in your WordPress.com blog’s media library.
Upload it to your blog first:
-
So I did that and it worked up to 1200 (where it didn’t fill the whole screen). Then if I go any size over 1200 it goes back to giant size and can’t adjusted it. For some reason it won’t adjust over 1200. Does that make sense?
-
-
Hello thesacredpath and designsimply,
Since I know very little about CSS, I am wondering if either of you answered the question I had about centering the text in the menus for all pages. Even if you had I don’t think I would recognize it.
Thanks!
-
Also, any idea how to center the menu text for the whole site?
To center the menu in the Chunk theme, try this:
#menu { text-align: center; } #menu ul { display: inline-block; } -
-
thesacredpath, I have not been able to use the size changing code well
.home #site-title a (
color: #FFFFFF;
font-size: 200%;
}I just pasted this in the CSS editor and it didn’t do anything. I also tried changing the percentage. Am I doing something wrong?
-
It works for me using Firebug and putting it directly into your custom CSS. I don’t see the code I gave you in your custom CSS at all.
-
Oh, I took it out because it wasn’t working. I will put it back in. Do you have access to it to play around a bit?
-
It doesn’t seem to want to save when I put just this code in:
.home #site-title a (
color: #000;
font-size: 200%;
}After I press save changes it disappears. Not quite sure I’m doing in right.
- The topic ‘Editing Chunk theme using CSS’ is closed to new replies.
WordPress.com Forums 