I don’t know which elements are available to edit with CSS
-
Hello,
We paid the CSS Update but I dont know how to edit templates on WP.com because it seems there are restrictions on the preset templates. I know, I could start from scratch with one of the sandbox templates, but:
Doesnt I need a html / php file to know what exactly is already there to define with CSS?
I found a nice preset on WP.com. The CONTEMPT theme. I started to edit the CSS and then I recognized there is a background picture I cant edit with CSS. It seems to be in the html file saved on the WP.com server. The same I found on all other templates. Why is that?And I dont want to use my own webspace. I want to edit the CSS here in WP.com. That’s why I paid 15 USD. I’m willing to learn more about CSS but don’t I need something like a html base frame to see what elements are there?
For example: If I want to put a 3rd column but there are only 2 columns. Or if I want to add a main menu on top of the screen or if I want to get rid of the main title and use only a picture.
There is a funny template called Cutline.
You can edit the CSS and change the header title with a header picture but you cant get rid of the preset header picture, you know. You can change it with another picture but why should one use 2 header pictures. (And if I save the stylesheet it deletes half of it when I go back to edit it again)It seems that the only way to edit a useful template is to download stuff and put it on your own webspace because this way you can see and edit the html, too.
But how do people do it on WP.com?
thanks in advance, Leeza
-
Hiya,
Here is an example: http://focusfashionagency.wordpress.com/
How do I get rid of this picture in the header:
http://s2.wordpress.com/wp-content/themes/pub/digg3/images/bg_header_overlay.pngIn the CSS it says:
#header-overlay {
position:absolute;
width:904px;
height:250px;
z-index:-10;
}I changed the z-index to -10 so my banner is on top of this preset header thingy. But is there a way to get totally rid of it?
I tried various things but I really dont know if that’s all what I get for the 15 USD?
Leeza
-
Use Firefox and install the Firebug and Web Developer Toolbar extensions. These will allow you to identify the CSS elements you’re dealing with. You can also just use CTRL+U to look at the underlying CSS of your blog.
You should be able to use your own images. Upload them (for free) to your wordpress.com gallery, then grab the url and put it in the CSS. It will override the url linked in the stylesheet.
-
Hi rosclarke =)
Thanks for your answer. My problem is that the graphic I try to overwrite is not mentioned in the stylesheet. It seems that its a “hardware” preset in the html saved on WP.com servers. I tried a lot but I cant find this particular graphic in the stylesheet =/
Leeza
-
CTRL-U tells me:
<div id=”header-overlay”>
<img src=”http://s2.wordpress.com/wp-content/themes/pub/digg3/images/bg_header_overlay.png” alt=”” />
</div>and the CSS tells me:
#header-overlay {
position:absolute;
width:904px;
height:250px;
z-index:-10;
}But I dont know how to overwrite this bg_header_overlay.png graphic.
Leeza
-
-
You mean from the CSS upgrade? You can always ask support but the answer is generally no because they provide a free preview which allows you to try before you buy.
-
You need to put in:
#header-overlay { background:url(PUT THE URL OF YOUR IMAGE HERE STARTING WITH HTTP); } -
And if that doesn’t work (which it should) you could always try adding the !important code to make sure it overwrites the stylesheet.
-
Hello =)
Thanks for the answers :)
That’s what I tried to do. Now I added the !important but I still cant get rid of this graphic.
Thats what I put in the CSS of my blog http://focusfashionagency.wordpress.com
#header-overlay {
background:url(http://img58.imageshack.us/img58/8430/overlay2xb7.jpg)!important;
position:absolute;
width:904px;
height:250px;
z-index:6;
}I tried different z-index too.
I also tried http://focusfashionagency.files.wordpress.com/2008/10/overlay2.jpg instead of imageshack.Between the black layer and the header picture is the bg_header_overlay.png graphic and I cant get rid of it. =/
-
Okay, try this:
#header-image{ background:url(http://focusfashionagency.files.wordpress.com/2008/10/header2.jpg); } #header-overlay{ display:none } -
I dont know why but this solved it =)
Thank you so much, rosclarke!
All of you =)
Have a great time, Leeza :)
-
-
Also, I realise that’s just a test blog and there’s nothing actually in the boxes, but if you are planning to put actual ads where it says ‘Advertise Here’ you should be aware that that is against the TOS here at WP.com. Ads are not allowed on our blogs.
-
Is it ok if it’s not really paid advertisment but suggesting other blogs and pages? Should I give it a different name then?
-
It’s fine to have links to other blogs and websites, so long as you’re not being paid for them.
- The topic ‘I don’t know which elements are available to edit with CSS’ is closed to new replies.
WordPress.com Forums 
