CSS to change my textblock/background/widget

• 

  petravdzwaag · Member · Apr 25, 2016 at 9:45 am

  • Copy link
  • Add topic to favorites

  Hello,

  My website: wiebekamminga.wordpress.com

  I’d like to change:
  – The position of the below textblock (white background) on the hero image in the center.
  – The white background of the textblock must be orange
  – The widget photo gallery must be bigger and in the center on the hero image.

  Is that possible?

• 

  thesacredpath · Member · Apr 25, 2016 at 9:06 pm

  • Copy link

  Hi, I see you have orange text right now with no background on the title and excerpt over the image on your main page. The following will center that text. I have specifically targeted your home page by using the “home” CSS class in the opening body HTML tag on that page.

  .home .entry-wrapper {
      text-align: center;
  }
  .home .entry-wrapper .entry-header, .home .entry-wrapper .entry-summary {
      margin-left: auto;
      margin-right: auto;
  }

  And the following will center the slideshow widget and make it larger.

  .home #secondary {
      margin-top: 0 !important;
      width: 100%;
  }
  .home #primary {
      width: 100%;
  }
  .home #secondary .widget-column {
      float: none;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
  }
  .widget-column::after, .widget-column + .widget-column::before {
      background: rgba(0, 0, 0, 0);
  }

  If you wish to take away the black background on the slideshow, add the following.

  .slideshow-window {
      background: rgba(0, 0, 0, 0);
      border: none;
  }

• 

  petravdzwaag · Member · Apr 29, 2016 at 10:40 am

  • Copy link

  Thank you

  Is this also possible for the other pages:
  modeatelierpetra.com/over-mij

  ?

• 

  thesacredpath · Member · Apr 29, 2016 at 6:11 pm

  • Copy link

  Certainly. On these selectors,

  .home .entry-wrapper
  .home .entry-wrapper .entry-header, .home .entry-wrapper .entry-summary
  .home #secondary
  .home #primary
  .home #secondary .widget-column

  remove the .home and the trailing space so they look like this.

  .entry-wrapper
  .entry-wrapper .entry-header, .entry-wrapper .entry-summary
  #secondary
  #primary
  #secondary .widget-column

• 

  petravdzwaag · Member · May 2, 2016 at 7:52 am

  • Copy link

  Thank you very much!

  Is it also possible to change the background color of the entry-content? The background color is white and must be orange.

• 

  thesacredpath · Member · May 2, 2016 at 11:40 pm

  • Copy link

  Hi, add the following to the bottom of your custom CSS.

  .content-area {
      background: rgba(0, 0, 0, 0);
  }