WordPress.org

1. jeffwenberg
   Member
   Posted 2 weeks ago #

   I'm trying to hide my title, tagline, and the search function. When I try to do it using code in my css it always moves the navagation up or down the page. I can't figure out how to hide it without that happening. Anyone have any ideas? The site is www.getgroupies.com I just want to use my header image as the title. On my other wordpress page I used a css code and it worked perfectly, however it doesn't seem to be the case here. It's almost like when those things aren't displayed, the spacing and number of lines get's messed up or something. Please help, I can't find this anywhere, or figure it out. Thanks in advance.

2. buddha trance
   Member
   Posted 2 weeks ago #

   You could either cut out the code from your theme header.php or - if you don't want to touch the template and just use css you can use

   display:none;

   1 - you create a new statement for the title h1
   2 -just add the declaration for the existing tagline description

   like this

   #headerimg h1 a{
           display:none;
   }
   #headerimg .description{
   	position: relative;
   	text-align:left;
   	top:0px;
   	bottom: 3px;
   	padding-left: 20px;
   	color: #fff;
   	font-size: 14px;
           display:none;
   }

   Hope this helps.

3. alchymyth
   Member
   Posted 2 weeks ago #

   @buddha trance:
   'display:none' will remove the space of h1 and description and will shift the nav.

   @jeffwenberg:
   follow the tip of 'buddha trance' but use 'visibility:hidden;' instead.

   or you can use a relative shift of h1 and description to move them from the screen - is better for SEO purposes:
   in style.css:
   

   #headerimg h1 {position: relative;left:-9999px;}
   #headerimg .description{
   	position: relative;
   	text-align:left;
   	top:0px;
   left:-9999px;
   	bottom: 3px;
   	padding-left: 20px;
   	color: #fff;
   	font-size: 14px;
   }

4. buddha trance
   Member
   Posted 2 weeks ago #

   @alchymyth - Interesting... I hadn't noticed that the nav moved slightly upwards. You are right. Good to know about the different behavior of visibility:hidden :-)

5. jeffwenberg
   Member
   Posted 2 weeks ago #

   @alchymth - So do I just copy and paste that code and put it on the bottom of my css stylesheet?

6. jeffwenberg
   Member
   Posted 2 weeks ago #

   nevermind, I tried it and it worked! Thanks so much. Any ideas how to get rid of the search bar without the same thing happening?

7. alchymyth
   Member
   Posted 2 weeks ago #

   you might have guessed:
   #search-form {left:-9999px;}

   general:
   adding the code at the end of style.css works fine, however it might be confusing if you later search for the formatting and are not aware that it is entered twice in the style sheet.
   normally the procedure is to search for the style you need to change, and to make the changes in existing lines.
   related lines should also be added close to the existing formatting.
   i.e. in your example above, you could have edited the existing formatting for #headerimg .description' and then added the new line for '#headerimg h1' just after or before that.

8. jeffwenberg
   Member
   Posted 2 weeks ago #

   Thanks that worked great. Finally, how would I shrink the side bar text so it's not butting right up against the body content box? Also in the body content box there is a black box underneath I don't need there for the catergory of the post. Any ideas how to get rid of that?

9. alchymyth
   Member
   Posted 2 weeks ago #

   you could add a right margin to #content:
   

   #content {
   	padding: 10px 0px 20px 20px;
   	float: left;
   	width: 65%;
   	overflow: hidden;
   margin-right:10px;
   }

   IMHO, however, the 'sidebar' is not really defined yet in html and css, so that doesn't give you any good possibility of formatting.

   the black box is styled with the class .posted:
   you can make it invisible by adding 'display:none;'
   

   .posted {
   	margin: 0;
   	font-size:0.9em;
   	padding: 5px;
   	background:#000;
   	border-bottom: 1px solid #222;
   	color: #fff;
   	text-align:right;
   display:none;
   }

   ideally, you could remove the corresponding php code from 'index.php'

10. jeffwenberg
    Member
    Posted 2 weeks ago #

    alchymythm, this is going to sound really dumb, but I don't know anything about what you said. I'm not really sure what you mean? The second code is the one I should use? Where should I post it to? What is the corresponding php code? Sorry, I'm just not super hip to this language. Thanks

11. RVoodoo
    Member
    Posted 2 weeks ago #

    those lines of code are in your style.css

    Most of that code is already there I'm guessing. The example is just showing you a line of code to add....

12. jeffwenberg
    Member
    Posted 2 weeks ago #

    ok I can follow that. What about removing the corresponding php code from 'index.php' what is the corresponding code? The same code, only in the index file?

Reply

You must log in to post.