WordPress.com

1. zfashionblog
   Member
   Dec 25, 2010, 8:57 AM

   Hi,

   I'd like to purchace the custom CSS upgrade, but I want to make sure I'm able to do the modifications I need first.
   http://zfashionblog.wordpress.com

   All I need is to remove the border from the header image, posts rectangle and posts image.

   For the header, I tried typing:

   #header-image img {
   border:none;
   }

   and

   #header-image img {
   border:none!important;
   }

   But it's not working! how come?!

   for the posts I tried typing:
   .post {
   position:relative;
   background-color:#fff;
   border:none;
   margin:0 0 60px;
   padding:50px 55px;
   }

   But nothing is changing in the preview either..

   What am I doing wrong?

   Also, I'd like to ask you for another tip...

   Would it be possible to completely remove the header image, but leave the space behind it free so I can ad an image on the background in this space?

   Basicly, I'd need to leave a space between the upper menue and the posts area even after I remove the header image.

   As the header image is not clickable anyway, I see no point in keeping it and would rather designing something on the background instead.

   Thanks a lot for your help and...

   MERRY X-MAS!!! :-)

   The blog I need help with is zfashionblog.wordpress.com.

2. panaghiotisadam
   Member
   Dec 25, 2010, 11:52 AM

   To remove the border from the header image:

   #header-image img { border: none; }

   To remove the border from regular images in posts:

   .entry img { border: none; }

   To remove the border form featured images:

   .post img.attachment-post-thumbnail { border: none; }

   But you can take care of all images at once (header, posts, widgets) - just add this instead of all the above:

   img { border: none !important; }

   To remove the post border:

   .post { border: none; }

   To remove the header image but retain the space it occupied:

   #header { margin-bottom: 208px; }
   #header-image img { display: none; }

   If you see no changes upon previewing, try refreshing the page. Or use another browser.

3. zfashionblog
   Member
   Dec 25, 2010, 1:51 PM

   Thanks a lot panaghiotisadam!

   I still can't preview the changes.
   I guess it's a problem with the browser... I use internet explorer on this PC.
   Maybe I need to install firefox or something..

   I have another question regarding the header:

   I'd like to remove the header image retaining it's space, but I'd like to increase this space..

   Could I use the code you mentioned above increasing the number of px?
   For example:
   #header { margin-bottom: 300px; }
   #header-image img { display: none; }

   ?

   Also could I render the header image clickable (to link to home page)?

   Last question:
   Could I also remove the line underneath the upper menu?
   I'd like to leave the text without the line under it.

   Thanks again!

4. hallluke
   Member
   Dec 25, 2010, 3:04 PM

   Try force refresh/reload-ing your browser after attempting to preview your changes. This seems to have worked for people before, some browsers cling to cached versions of the CSS for longer than they should.

5. panaghiotisadam
   Member
   Dec 25, 2010, 7:40 PM

   @zfashionblog: You're welcome.

   a) Of course you can increase the number of px.

   b) I don't know how to make the header image in Bueno clickable; please wait for a reply by hallluke or thesacredpath.

   c) See here:
   http://en.forums.wordpress.com/topic/top-menu-line?replies=3#post-536710

6. zfashionblog
   Member
   Dec 26, 2010, 1:15 PM

   Thanks again for your help.

   I've always wondered why the header image is not clickable.

   Many readers tell me they get confused because they don't know how to return to the homepage..
   Having a clickable header would make it much clear.

7. panaghiotisadam
   Member
   Dec 26, 2010, 2:26 PM

   In all wp.com themes it's the blog title that acts as a link to the homepage. So as a rule the header image isn't clickable if the blog title is outside the header image area. Why don't you add a home link to your top nav menu or your sidebar? That's clearer than a clickable header image.

   By the way, you have deleted the blog title in Settings>General. Not a good idea SEO-wise. Once you buy the CSS upgrade, you should type the title back in and hide it via CSS:

   .site-title { display:none; }

8. zfashionblog
   Member
   Dec 26, 2010, 3:18 PM

   Thanks for this tip too.

   Some time ago I added a home link in the top nav menu..
   I hope it helps.

   I've just purchased the upgrade.
   Will start working on the updates soon.

   Your tips regarding hiding the header and title were great and are giving me more flexibility in the design.

9. panaghiotisadam
   Member
   Dec 26, 2010, 3:44 PM

   You're welcome.

   One more tip: when you make identical changes to various elements, you don't have to add a separate line for each one. Instead of this, for instance:

   SELECTOR1 { display:none; }
   SELECTOR2 { display:none; }
   SELECTOR3 { display:none; }

   you can write:

   SELECTOR1, SELECTOR2, SELECTOR3 { display:none; }

Topic Closed

This topic has been closed to new replies.