Gazette removing images from navigation buttons css

• 

  antoniacollages · Member · Feb 4, 2016 at 9:05 pm

  • Copy link
  • Add topic to favorites

  Dear all,
  The blog I need help with is;antoniacollages.com.
  I would like to remove the images from the navigation buttons at the end of my blogposts. It would be better for my lay-out id only the text prevoiuos and next would appear.

  Is there a css code for altering the butoons?

  I do hope so!
  Best,
  Antonia

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

• 

  thesacredpath · Member · Feb 4, 2016 at 11:59 pm

  • Copy link

  Hi Antonia, Let’s start with this CSS. I suspect you are going to want to make some other adjustments to things.

  .post-navigation .nav-previous, .post-navigation .nav-next {
      background-image: none;
  }
  .post-navigation .nav-previous a, .post-navigation .nav-next a {
      background-color: rgba(0, 0, 0, 0);
      text-shadow: none;
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .post-navigation .nav-previous .post-title, .post-navigation .nav-previous a:hover .post-title, .post-navigation .nav-previous .meta-nav, .post-navigation .nav-next .post-title, .post-navigation .nav-next a:hover .post-title, .post-navigation .nav-next .meta-nav {
      color: #000;
      text-align: center;
  }
  .post-navigation .nav-previous .post-title, .post-navigation .nav-next .post-title {
      display: none;
  }
  .post-navigation .nav-previous a:hover, .post-navigation .nav-next a:hover {
      background-color: rgba(0, 0, 0, 0);
  }

• 

  charliescheer · Member · Feb 5, 2016 at 12:14 am

  • Copy link

  Try this. Go to your CSS customization section and add this code.

  .post-navigation .nav-previous {
  background-image: url( );
  }

  .post-navigation .nav-previous{
  background-image: url( );
  }

  That should override the current image code.

• 

  antoniacollages · Member · Feb 5, 2016 at 6:10 pm

  • Copy link

  @sacredpath; thanks, that worked well.
  The only change i would like to make ia that the previous text is placed on the left, and NEXT on the right. next to each other. Is that a possibility?

• 

  thesacredpath · Member · Feb 5, 2016 at 9:50 pm

  • Copy link

  Give this a try and see if this is what you are looking for. Place this below all your other CSS.

  .post-navigation .nav-previous a {
      float: left;
      padding-left: 0;
  }
  .post-navigation .nav-next a {
      float: right;
      padding-right: 0;
  }

• 

  antoniacollages · Member · Feb 6, 2016 at 11:03 am

  • Copy link

  That looks great!
  Thanks you @thesacredpath
  Antonia

• 

  thesacredpath · Member · Feb 6, 2016 at 7:37 pm

  • Copy link

  Antonia, you are welcome.