Custom /p Pages

Creating a custom header
To customized your header, you can either add simple CSS to edit the actual html text, or you can upload a custom title image. 

How to simply center your header text, make it larger and open up a little more space in the header(http://dola.com/p/las-best-skate-parks:

 .ds-listings-header .ds-detail-title {
    font-size: 3.5em !important;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    color: #ffffff; 
}

How to simply center your header text, make it larger, open up a little more space in the header and create a border around the title (http://do503.com/p/do503-sasquatch-survival-guide):

  1.  .ds-listings-header .ds-detail-title {
  2.     text-align: center;
  3.     font-style: italic;
  4.     border: 6px solid;
  5.     line-height: 2em !Important;
  6.     width: 78%;
  7.     margin: 0 auto !important;
  8.     font-size: 4em !important;
  9.     padding-top: 14px;
  10. }

Adding in a title image to replace the text (http://do312.com/p/the-do312-guide-to-winter-survival): 

h1.ds-detail-title b{
    display: none; 
}

 .ds-listings-header .ds-detail-title {
    font-size: 2.5em;
    background-image: url(https://dostuff-assets.s3.amazonaws.com/property_asset/28252/Do312_Winter_Survival_Text_Image.png);
    background-size: contain;
    width: 89% !important;
    min-height: 290px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-bottom: 0;
    margin:0 auto;
    max-width: 800px;
}

  @media (max-width:580px) {
  .ds-listings-header .ds-detail-title {
      font-size: 0;
      background-size: contain;
      width: 100% !important;
      min-height: 100px;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      margin-bottom: 0;
  }
  }

* You will need to upload the image to your assets in radmin. Once you upload that image, it will give you a URL. Copy and paste that URL in-between
the (). 
* You can alter the size of the title image by editing the max-width. 

Change the page background color

body {
    background-color: #222222;
}

Style Content Headers

h3{
border-top: 3px #000000 solid; 
border-bottom: 3px #000000 solid; 
text-align: center; 
}

Hide Sidebar ads 

.ds-sidebar .ds-featured-events {
    display: none !important;
}
.ds-module.ds-latest-links-list {
    display: none !important;
}
div#ds-sidebar-ad {
    display: none;
}

Want to create a grid of images? View this article. 
Comments