Understanding What CSS Can/Can’t Do
-
Hello much more knowlegable people,
I am still relatively new (9 mo) to blogging, and have decided I would like to change and customize the appearance of my blog more than I can do simply by changing themes. But before I plunge into the complicated task of learning CSS, and before buying the upgrade, I was hoping some of you could give me a much better idea what aspects of a blog’s appearance can and cannot be controlled with CSS.
And yes, I have read the FAQ, “About the Custom CSS upgrade” as well as the “Can I edit my templates” post. And I understand that CSS allows me to change, “fonts, colors, borders, backgrounds, and even the layout of the page.” But I also have learned on the forums that there are limits to what you can do with CSS. So I am trying to understand better how much control over appearance CCS does and does not allow me.
I want to be certain before buying the upgrade and learning CSS that I will be able to do all I want to do. SO, I thought I’d make it easy (hopefully) by asking a few quick yes or no questions (and a few more complicated ones)…
(FYI, I am currently using the “Chaotic Soul” theme, but am probably going to switch to “benevolence” or, depending on what I learn, perhaps “sandbox”, but I think my questions would apply to any theme. )
1. Can I change the width of the entire page?
2. Can I change the width of the main post column?
3. Can I change the width of the sidebar?
4. Can I MOVE the sidebar from one side to the other?
5. Can I change the size of the Custom Header? (I want a bigger one than is available)
6. Can I add a custom footer image? of any size I want?
7. Can I increase the size of the margins?
9. Can I remove the “filed under” categories and tags from all the posts (I think they just make it look cluttered)
10. Can I change the way listed links appear and are highlighted? ie whether they have a bullet, a gradient highlight, or an underline, etc…And the last two questions are more specific and complicated.
11. I would like to visually separate the main posting column from the sidebar by making the main column look like its written on a long piece of paper by giving it a hairline edge and inserting a dropshadow behind it — the dropshadow being cast on the rest of the blog making it look as though the main column were a piece of paper raised slightly above the rest of the blog. (Did that make sense?) Is this something I can accomplish with CSS?
12. I want to create some buttons in my sidebar (that is the blog I am experimenting on, not my actual blog) out of an image I created that looks like several campaign badges overlapping eachother. The problem is, I want to divide the ONE image into several clickable images that fit snugly up against each other and still appear to be one image. I divided the image into 4 pieces and turned each one into a separate link, but I ended up with a break of whitespace between the 4 images. (the breaks are no longer there because I removed the 4 image links and put up just the whole image while I try to figure out how to do it) Would CSS allow me to get rid of that division between the images? and could I do it so that it only applies to that particular widget? or would it make all adjacent images butt up against eachother? (Did that make sense)
Any and all help will be very much appreciated!
Thanks!
PS: I apologize for the length of the question, I’m just trying to be very clear and specific.
-
-
Just to add, a number of these are quite complex things, especially to get them working well in all browsers. I’d really urge you to spend some time using the free CSS preview feature to give yourself an idea of what you personally can achieve. There’s no staff support and not many volunteers on the forums who can help either. So unless you’re already a CSS expert, take the time to learn it before you spend your money.
-
lol, oops, apparently forgot how to count.
Thanks very much for your quick reply.
re #9: yeah, I wouldnt want to remove the time/date stamp or the comments. So if anyone else knows the answer to that I’d appreciate it. And you said “from below the posts” I just want to make sure: does it make a difference that this info is after the title but above the post in “benevolence”?
If anyone is certain about #12 I’d appreciate it. (Were my questions in 11 and 12 clear?)
And, last question: I don’t want to fiddle with CSS any more than I have to to make those customizations. Can I accomplish all I want to do by tinkering with the “benevolence” theme or would I have to do it all from scratch in “sandbox” and do you know which would be easier?
Thanks for helping an ignorant beginner!
-
And thanks, I will definately experiment before buying. I just want to make sure what I want to do is possible before I set out to learn.
-
I took a quick peek at the HTML structure that gets generated. At least with that theme, you won’t be able to remove the “filed under” stuff without removing the date and time of the post.
-
rosclarke is dead on. Those customizations aren’t easy – so be prepared to spend a lot of time to learn how CSS.
-
-
Good to know, thank you very much!
Do you happen to know the answer to #12? Or is there another way to accomplish the same effect?
And finally is it easier to achieve the other customizations (other than removing the “filed under” stuff) by altering an existing theme that is close to what I want, or to use sandbox and get exactly what I want? Or would I have to start from scratch to do what I want?
I’m happy to dive into learning CSS, would just like as clear a notion as possible of how difficult the customizations I want would be.
-
I’ve been working on learning CSS for several months and I wouldn’t even attempt some of the stuff you mention. For example, you said something about links having a gradient highlight. Getting something like that link to display properly in all browsers would be very difficult.
No idea on #12.
-
Thanks Vivian,
So are any of them easier than others? Any that I could achieve with a fundamental understanding of CSS or do I need to have a really advanced understanding of it?
You are all very helpful, thanks!
-
In general, CSS will allow you to accomplish #12; it requires setting the margin, border, and padding to 0. Whether it is actually feasible for your blog depends on whether the theme and widget combination provide enough information to build a selector that will let you modify just those items.
With a couple of these, be prepared to spend quite a bit of time trying to figure out how to get it to work, and make sure you have several browsers available for testing. More than anything else, I’ve found that IE5, 6, and 7 tend to cause a lot of headaches when you’re working with CSS.
-
I’ve been working on learning CSS for several months and I wouldn’t even attempt some of the stuff you mention
Ok, thats definately good to know.
For example, you said something about links having a gradient highlight.
Well, I’m not sure I’m even phrasing that question right. I just like the way listed items appear to be highlighted in Chaotic Soul more than I like the way they are in Benevolence with just a dotted line under them.
But I guess its good that that is probably the change that is least important to me.
Is that the one that sounds most difficult to you?
-
Thank you singular
I’m also considering an HTML solution to that idea where I use columns in a text widget put a type link next to each political button. But with the width of the widgets in Benevolence, I’d have to shrink the graphic down too small in order to fit type next to it. …I think.
What about putting in a custom footer image? or flipping the sidebar to the other side? those are the changes I want to accomplish most.
Are those also really difficult?
-
Looking at the current CSS, it doesn’t look like the sidebar should be too hard to switch. Here’s part of the current CSS for the theme:
#sidebar {
position: relative;
float: left;
width: 180px;
left: 40px;
padding: 0px;
background-color: #fff;
text-align: left;
font-family: Arial;
color: #000;
font-size: 7.5pt;
line-height: 11pt;
text-transform: uppercase;
}
The basic change is to change this to
float: right;
and then fix whatever visual oddities crop up (for example, if some of the margin/border/padding settings are asymmetric, that may cause it to look a bit odd until they’re switched). So, I wouldn’t say that part’s too hard, just potentially time-consuming depending on exactly how the CSS for the theme is done.
CSS will let you add a background image to an existing HTML element very easily. Adding a new HTML element to contain the image so that the text doesn’t get written over the top of it can’t be done, unless the theme already supports it.
-
Okay, that’s almost right. To move the sidebar to the other side, you replace just the line containing “float” to change the side; you keep the rest of it the way it is.
-
Ohhh, that definitely helps me understand better. I think.
So, just to make sure I understand:
Elements like headers, sidebars, the main column, and footers are determined by HTML and I can’t add (or subtract) any new elements that arent already part of the theme…but with CSS I can make almost any change in the position, size and appearance of those elements that I want to?
For example I can’t add a custom footer to any theme, or a second side bar if the theme doesnt already have them built in, but I can make the custom header bigger, or flip the sidebar to the other side, or play around with margins, colors, spacing, size, backgrounds, etc…?
Is that all correct? And if so, is it true for ALL themes, including “sandbox” (which if I understand correctly, is the most versatile), or just the themes I’m currently experimenting with?
Thanks, youve been incredibly helpful!
-
You’re welcome!
Your understanding is correct, and true for all themes – that’s the beauty of CSS. To understand what can be done using just CSS, I really recommend checking out the css Zen Garden. When you switch from one design to the next, there are no – I repeat, no – changes to the HTML. All of the changes are accomplished with CSS.
If you want the technical nitty-gritty, here’s the standard that defines of CSS (2.1). I learned most of what I know about CSS from the Zen Garden, the standard, and a bunch of experimentation.
-
Those websites are very helpful. Makes it much clearer.
Can I ask another question? With this design is the image of coral and fish at the bottom a custom footer or just a background image?
So, I cant add a footer, but if I use a background image instead of a footer, can I edit CSS so that the background image at the bottom doesnt get overwritten by text?
-
Short answers:
- Yes, you can ask another question. :-)
- The coral is a background image.
- Whether you can replace the text with an image using the background property depends on the exact structure of the HTML.
Here’s the longer versions:
In HTML, a “footer” doesn’t exist as such; rather, other elements, such as <div> tags, are used to create what we think of as a footer for the page. Most often, what we think of as a footer is just a div that is set up with a width of 100% of its containing block.
The coral (seafloor.jpg) is a background image. The CSS that puts it there is the last block of code in the design’s CSS:
#extraDiv6 span {
z-index: 2;
top: 0px;
left: 0px;
width: 633px;
height: 426px;
background: url(seafloor.jpg) no-repeat;
}
The reason that it works is because there are already elements in the HTML of the Zen Garden page that can be used for these types of things. Here’s part of the tail end of the HTML for that page:
<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>
Notice that these elements don’t have any text in them; that’s why there’s no text over the top of the images.
To make this clearer, consider the following two ways that a footer could be created in HTML.
Example 1:
<div id="footer"><span>footer text, including other HTML tags</span></div>
Example 2:
<div id="footer">footer text, including other HTML tags</div>
</div>With Example 1, you could use the CSS selector
#footerand assign it’s background property to set the image that you want, then use the CSS selector#footer spanto be hidden. With a bit of additional tweaking, this gets you an image for your footer, and no text in the footer.This doesn’t work in Example 2, however. The problem there is that you would need to use the selector
#footerto both (a) bring in the background image, and (b) hide the text. The net result is that the entire div gets hidden, including the background image.Hope that helps!
- The topic ‘Understanding What CSS Can/Can’t Do’ is closed to new replies.
WordPress.com Forums 