Responsive Theme: Title pages

• 

  peintureetinconscient · Member · Feb 9, 2014 at 8:20 pm

  • Copy link
  • Add topic to favorites

  Hi,
  I would like to know if it’s possible to eliminate the post-title of the page. In responsive theme I have a double name title: on the button (Entrevues) and on the page (Entrevues).
  Do I have to buy the CSS extension?
  Thanks for your help

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 9, 2014 at 9:25 pm

  • Copy link

  Hi there, the following will remove the title on static pages, such as Entrevues. I included a top margin for the “leave a comment” element to space it down away from the breadcrumb menu above. Again, this is targeting static pages only, such as Entrevues. You can adjust the top margin value as you desire.

  .page .post-title {
      display: none;
  }
  .page .post-meta {
      margin-top: 10px;
  }

• 

  peintureetinconscient · Member · Feb 9, 2014 at 10:58 pm

  • Copy link

  Hi thesacredpath,
  I’m very lost, this is my first time using wordpress.
  I would like to say you two things:

  1- I can’t see your modifications. I’m looking for the “leave a comment” element. I thought that I could manipulate from Screen Options/Comments and after that Add comment…. but not. Is not that.

  2-If you need to modify the code of the template, this blog is not the original, I just made it to practice. The original that I’m building with my teacher is http://peintureinconscient.wordpress.com/
  Sorry but I didn’t know you need to manipulate the code.

• 

  thesacredpath · Member · Feb 10, 2014 at 12:11 am

  • Copy link

  Sorry, yes, to remove page titles, you would have to have the Custom Design upgrade.

  The comment link I mentioned is the one right below the page title in the content area of your pages. When the title is removed from the page, that comment link will move up right below Accueil › Entrevues. The second CSS rule I gave spaces it down a little so it would look better.

  If you wish to control comments, you can globally turn them off for all new posts and pages at Settings > Discussion in your dashboard.

  For existing pages and posts, you would have to turn comments off individually by opening each post in the editor and deselect “Allow Comments” and “Allow Trackbacks” in the Discussion module down below the post/page text area. If that module does not show, go to screen options and you can activate the Discussion module there.

  For future posts and pages, you can turn comments back on in the Discussion module in the editor as you create them.

  The only other way to hide page titles is to not give them a title in the editor when you create them, but from a web design and Search Engine Optimization standpoint, this is not a good idea. Search engines like to see titles for posts and pages and will rank a site that does not have them lower in search results than for sites that have titles.

• 

  peintureetinconscient · Member · Feb 10, 2014 at 3:11 am

  • Copy link

  Thanks thesacredpath,
  I will upgrade the themes and contact you if I have a problem
  Thanks for your help
  ^^

• 

  thesacredpath · Member · Feb 10, 2014 at 4:37 am

  • Copy link

  You are welcome and let us know if you have any further questions.

• 

  lisefradetpeintre · Member · Feb 24, 2014 at 1:46 am

  • Copy link

  Hi there,
  I bought the Custom Design extension but I don’t have any extra information as you told me (“…is the one right below the page title in the content area of your pages”), so I can’t change the CSS code.
  Also the theme Responsive doesn’t allow changes on colors because the template is not ready yet for that. Could you confirm me if the template accepts changes in the CSS please?
  Thanks

• 

  thesacredpath · Member · Feb 24, 2014 at 4:31 am

  • Copy link

  You can hide page titles with the following CSS. Go to Appearance > Customize > CSS, and add the code I gave above after deleting all of the informational text in the CSS edit window. The second rule in that code is to give a little white space on pages that have comments enabled. I see that you currently do not have comments enabled, but the second rule will be there just in case you do in the future. That is why you could not see the comment link I was talking about (you have them turned off).

  Colors can be changed through CSS on anything on your site. Let us know what you are wanting to change and we can help you with that.

• 

  lisefradetpeintre · Member · Feb 24, 2014 at 4:08 pm

  • Copy link

  Thanks Thesacredpath!
  It’s working now! Thanks for your help.

  Eventually, we want to change the colors of menu buttons. All advices are welcome!

  Thanks again! ^^

• 

  thesacredpath · Member · Feb 24, 2014 at 10:58 pm

  • Copy link

  There is a base linear gradient applied to the menu in .menu, and then a hover gradient applied to the buttons on hover. The first color code is the top color (lighter) and the second is the lower color (darker). A base background declaration (the first one listed) is also included for browsers that don’t support gradients. I’ve also included text colors in case you need those as well.

  This would be the base gradient CSS:

  .menu {
  	background-color: #585858;
  	background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
  	background-image: -webkit-linear-gradient(top, #585858, #3d3d3d);
  	background-image: -moz-linear-gradient(top, #585858, #3d3d3d);
  	background-image: -ms-linear-gradient(top, #585858, #3d3d3d);
  	background-image: -o-linear-gradient(top, #585858, #3d3d3d);
  	background-image: linear-gradient(top, #585858, #3d3d3d);
  }
  
  .menu a {
          color: #FFFFFF;
  }

  This would be the hover color gradient.

  .menu a:hover {
  	background-color: #808080;
  	background-image: -webkit-gradient(linear, left top, left bottom, from(#808080), to(#363636));
  	background-image: -webkit-linear-gradient(top, #808080, #363636);
  	background-image: -moz-linear-gradient(top, #808080, #363636);
  	background-image: -ms-linear-gradient(top, #808080, #363636);
  	background-image: -o-linear-gradient(top, #808080, #363636);
  	background-image: linear-gradient(top, #808080, #363636);
  	color: #FFFFFF;
  }