This topic contains 13 replies, has 2 voices, and was last updated by  Kharis Sulistiyono 2 years, 12 months ago.

Template Background

  • Hello,
    I can not find how to change the background color of the template. Can you help me?

    Hello there,

    Thank you for getting in touch. To make me a bit easier to provide assistance based on your setup, could you please post your URL here?

    Regards,
    Kharis

    Hello, I send the url: http://www.terramarpinamar.com.ar
    Greeting

    Hello there,

    Try to use the following CSS codes.

    Slide #1

    .sub-page {
      background: red;
    }
    

    Slide #2, #3, & #4

    .page-container {
      background-color: yellow;
    }
    

    Slide #5

    .about-side, .about-contents {
      background: green;
    }
    

    Slide #6

    #contact-left {
      background-color: pink;
    }
    

    Adjust the background color values to meet you need.

    Regards,
    Kharis

    Thanks for the reply.
    I tested the code including both the CSS skin, as in the general css. I also tried embedding the index.html. None worked.
    Any other ideas?
    I saw that in the SKIN2 use another background color, but failed to find the line of code where editing.

    Hello there,

    Thank you for reporting.

    Could you please try to paste the CSS codes above to assets/css/skins/skin3/style.css?

    Let me know how it goes.

    Regards,
    Kharis

    Hi,

    .page-side h1,
    .page-side h2,
    .page-side h3,
    .page-side h4,
    .page-side h5,
    .page-side h6,
    .page-side .h1,
    .page-side .h2,
    .page-side .h3,
    .page-side .h4,
    .page-side .h5,
    .page-side .h6 {
    color: #363636;
    }
    .page-side{
    color:#363636; /* cambia color de la fuente*/
    }

    .ps-container .ps-scrollbar-y{
    background-color: #3666af;
    }
    #taskbar{
    background-color: #1e1f1a;
    }
    #menu-trigger{
    background: url(‘menu-trigger.png’);
    }
    ul#socialicons li a, ul.socialicons li a, #audioplayback a{
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5MYXllciAxPC90aXRsZT4NCiAgPHBhdGggc3Ryb2tlPSIjMzZDIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMi4zNzQ5IDEzLjYyNSkiIGlkPSJzdmdfMyIgZD0ibS0xLjAwMDAwNSwxMy42MjUwMTNsNS43MzIyODcsLTExLjg3NTAxNmwxNS4yODU1MzcsMGw1LjczMTkxMywxMS44NzUwMTZsLTUuNzMxOTEzLDExLjg3NTAxN2wtMTUuMjg1NTM3LDBsLTUuNzMyMjg3LC0xMS44NzUwMTd6IiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiMzNkMiLz4NCiA8L2c+DQo8L3N2Zz4=) no-repeat;
    }
    #audioplayback:hover, #audioplayback:focus, #audioplayback.onside {
    background-color: #3666af;
    }

    #menu-pannel{
    background-color: #36C;
    }
    #menu-pannel-navigation .item{
    background: #12120F;
    }
    #menu-pannel-navigation .item:hover, #menu-pannel-navigation .active {
    background: #36C;
    }

    #upstream {
    background-color: #272822;
    }

    .portfolio-side {
    background-color: #3666af;
    }
    .portfolio-side:before{
    border-right-color: #3666af;
    }

    div.jp-audio {
    background: #3666af;
    }

    .swiper-nav-thumbs > div{
    background-color: #20211D;
    }
    .swiper-nav-thumbs > div.active-nav{
    background:#36C;
    }
    .page-side, .sub-page-title {
    background-color: #e6e6e6;
    }
    .btn-theme,
    .btn-lg.btn-theme{
    border-bottom-color: #036;
    background: #3666af;
    }
    .btn-theme:hover{
    background-color: #3666af;
    }
    .page-container{
    background-color: #272822;
    }

    .vertical-portfolio .item-info .item-description,
    .vertical-portfolio .item-info .list-items .list-des {
    color: #A9A9A9;
    }
    .vertical-portfolio .item-info .title,
    .vertical-portfolio .item-info .list-items{
    border-bottom-color: #2B3629;
    box-shadow: 0px 1px 0 0 #151712;
    }

    ul.list-items .list-label {
    color: #fff;
    }
    .gal2-thumb-container{
    background: #22231e;
    }
    .gal2-images{
    box-shadow: -4px 0px 5px -4px #000;
    }
    .shadow-right{
    box-shadow: 4px 0 5px -4px #000;
    }
    .blog-item .inside,
    .post-more a{
    background-color: #1e1f1a;
    }
    .blog-item .inside{
    box-shadow: 0 0 4px -1px #000;
    }
    .post-intro{
    border-bottom: 1px solid #34362D;
    }
    .post-more a{
    color:#fff;
    }
    #blog-more{
    background-color: #1e1f1a;;
    margin-bottom: 0;
    }
    ul#blog-filters li a {
    background-color: #3666af;
    }
    ul#blog-filters li.active-cat a{
    background-color: #2e2626;
    }
    .single-post{
    background-color: #1e1f1a;
    box-shadow: 0 0 3px -1px #000;
    }

    .about-side, .about-contents{
    background: #272822;
    }
    #about-slides .slidesjs-previous{
    color:#fff;
    background-color: #3666af;
    }
    #about-slides .slidesjs-next{
    color:#fff;
    background-color: #272822;
    }
    .sub-page-title h2{
    color: #363636;
    }

    #contact-left{
    background-color: #272822;
    }
    .contact-details,
    #contact-form .form-control{
    color:#f1f1f1;
    }

    #contact-form::-webkit-input-placeholder { /* WebKit browsers */
    color: #fff;
    }
    #contact-form:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff;
    }
    #contact-form::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fff;
    }
    #contact-form:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #fff;
    }

    .team-container .title {
    background: #e6e6e6;
    }
    .team-container .team-carousel-wrapper,
    .team-container .team-carousel .item{
    background: #272822;
    }
    .team-container .title h2,
    .team-container .title span {
    color:#363636;
    }
    #map-marker i{
    color: #3666af;
    }

    Hello there,

    Could you please elaborate the current status of your initial question? Has it answered?

    Regards,
    Kharis

    Hello, you asked me the code of /skin3/style.css
    Paste the entire code.
    Do you need anything else?

    Regards,

    Hello there,

    My apologize. Perhaps I didn’t explain myself well. I mean please add custom CSS code I wrote here to /skin3/style.css file. So your /skin3/style.css file should be like this.

    Take a look at the most bottom lines. The new code additions are placed after /** Custom CSS codes **/ comment.

    I hope this clarifies things a bit.

    Regards,
    Kharis

    • This reply was modified 2 years, 12 months ago by  Kharis Sulistiyono. Reason: Added a screenshot
    Attachments:
    You must be logged in to view attached files.

The topic ‘Template Background’ is closed to new replies.