WordPress.com

1. tampabayfood
   Member
   Nov 3, 2010, 11:46 PM

   Hello!

   I am having trouble with a theme I designed, but a friend implemented. I have no CSS experience, but he does, and even he is unsure of what to do here. My issue is basically that "Pages" are using h1 for headings. If there was a way to get Pages to use h2, then there would be no problem, because I'd like the style of my individual pages to mirror my style on posts. I am using rounded boxes for my entries, as you can see on the home page:

   http://tampabayfood.com/

   The edges of the boxes are images specified in the #content area of the CSS. My friend had been able to get the h1 to mimic this just fine, but then it would affect category and tag archive pages, which I make use of. Here, the image used for the rounded edges would appear behind the text that reads "Archive for the ‘Tampa Restaurants’ Category", shown here:

   http://tampabayfood.com/category/tampa-restaurants/

   As you can see, there is no longer the floating rounded-edged box behind that text, but now the compromise is that on my Page pages, the tops are no longer calling the rounded box image, leaving a squared-off top on the boxes, as you can see here:

   http://tampabayfood.com/about/

   So, once again, my question is - is there any way to have Pages use h2 instead of h1? Everything I've found online to do so for WordPress requires the alteration of .php files, which obviously I don't have access to. Any ideas? Any alternatives? Any idea what I'm talking about?

   Thanks for your help.
   The Food Monster

   The blog I need help with is tampabayfood.com.

2. luisshort
   Member
   Nov 4, 2010, 1:23 AM

   hi FoodMonster,

   I looked at your pages, and I think you can do what you're asking with just CSS.

   on your posts, you have styled the h2 tag within the 'content' div. I see the style is something like this (from firebug):
   #content h2 {
   background:url("http://tampabayfood.files.wordpress.com/2010/09/rounded_mid_top4.png") no-repeat scroll left top #FCE022;
   border-bottom:0 solid #B0B0B0;
   color:#606060;
   font-size:1.6em;
   padding-left:15px;
   padding-top:10px;

   on your pages, you need to something similar with the h1 tag inside the 'content' div, and ideally inside the 'page' div inside that (they are nested);

   I think if you create a new css entry for content/page/h2 , and style it just as you did the other rounded H1, it should work, and not affect too much else on your site.

   Try giving this to your CSS friend, if it helps.

3. tampabayfood
   Member
   Nov 4, 2010, 5:31 AM

   Thanks for your response! I've been messing with it for quite some time now, and I'm getting a bit more comfortable with CSS myself, but I'm really failing to make any progress.

   It seems like this is this situation as I now understand it: the posts are calling from two separate entries - the content h2 which provides it with the top rounded image, and a separate content .post, which seems to be providing the bottom rounded image. As far as I can tell, the pages are calling from two separate areas as well - the content h1 (as I had seen earlier) which would provide the top rounding image, but I have set to transparent, because as I mentioned in my first post, the 'Archive for (whatever tag)" text also calls on that. Additionally, there is a #page entry, which appears to give the pages their bottom rounding image.

   I fooled around with creating different entries, and using different combinations with the same style as used in h2, but it's still yielding the same problem - the archive pages show the top rounded image behind the text.

   Is it possible to get both the rounded background images packed under the #page div at once? If I switch it back and forth, both will show up, but only one at a time.

   Thanks again.

4. tampabayfood
   Member
   Nov 4, 2010, 5:46 AM

   After a quick google search (shoulda done this before posting), I found that it's really simple to pop in two background styles. Unfortunately, when I did that, instead of both top and bottom showing up in their proper places, both were completely gone. Hm...

5. tampabayfood
   Member
   Nov 4, 2010, 6:39 AM

   Alright, after a bunch of trial and error, I found a way to get it working. Apparently it was something to do with the syntax. My final solution was adding the multiple background style to the #page element. It would only accept it if I put it in the last position, and the additional background color hex had to go very last. Here it is in case anyone else who has no idea how to properly work with CSS comes across this wacky problem:

   #page {
   border-bottom:0 solid #B0B0B0;
   width:550px;
   margin-left:10px;
   margin-right:10px;
   padding-bottom:23px;
   min-height:250px;
   background:url('http://tampabayfood.files.wordpress.com/2010/09/rounded_mid_bot.png') bottom left no-repeat, url('http://tampabayfood.files.wordpress.com/2010/09/rounded_mid_top4.png') top left no-repeat #FCE022;
   }

   Thanks for your assistance!

Topic Closed

This topic has been closed to new replies.