• 0
Sign in to follow this  
Followers 0

A little troubles with customizing


Question

Posted (edited) · Report post

Hello!

 

Following http://docs.pagelines.com/tutorials/creating-a-branding-area create branding area.

Want to customize uszing 

Nicks Base Theme. Place this code into style.css 

/* Social media color variables */
@dribbble:          #EA4C89;
@envelope:          #08CF90;   
@facebook:          #3B5998;
@googleplus:        #E14107;
@instagram:         #517FA4;
@linkedin:          #0181B2;
@pinterest:         #CB2027;
@rss:               #E5842F;
@twitter:           #00ACED;
@youtube:           #CD332D;
@vk:		    #2B587A;

.social-bar {
    a {
        margin-right: 0px; // Here in-case you wish to add margins
        padding: 0px; // Here in-case you wish to add padding
    }
    li {
        display: inline;
    }
    .icon {
        .border-radius(0px); // Here in-case you wish to add a radius
        margin-bottom: 0px;
        min-width: 25px;
        color: #FFF;
        text-align: center;
        font-size: 13px;
        line-height: 25px;
    &:hover { .transition(background 400ms linear); }
    }
    .icon-dribbble {
        background-color: @dribbble;
    &:hover { background-color: lighten(@dribbble, 10%); }
    }
    .icon-envelope {
        background-color: @envelope;
    &:hover { background-color: lighten(@envelope, 10%); }
    }
    .icon-facebook {
        background-color: @facebook;
    &:hover { background-color: lighten(@facebook, 10%); }
    }
    .icon-google-plus {
        background-color: @googleplus;
    &:hover { background-color: lighten(@googleplus, 10%); }
    }
     .icon-instagram {
        background-color: @instagram;
    &:hover { background-color: lighten(@instagram, 10%); }
    }
    .icon-pinterest {
        background-color: @pinterest;
    &:hover { background-color: lighten(@pinterest, 10%); }
    }
     .icon-rss {
        background-color: @rss;
    &:hover { background-color: lighten(@rss, 10%); }
    }
    .icon-twitter {
        background-color: @twitter;
    &:hover { background-color: lighten(@twitter, 10%); }
    }
    .icon-youtube-play {
        background-color: @youtube;
    &:hover { background-color: lighten(@youtube, 10%); }
    }
}
 

And site looks like this: 

 

social_troubles.png

 

First of all, found that doesnt add 

.icon-vk {
        background-color: @vk;
    &:hover { background-color: lighten(@vk, 10%); }
    }

Added. But still get this picture. Same picture with style.less for nick theme and customize-pagelines plugin. (separatly for each try).

 

Added code shown above in PageLines Editor aaaaannnd 

image.jpg

 

 

Everything ok.

 

 

1) What i am doing wrong?

 

2) Custom CSS will be losed when DMS/Nick themes updates?

 

3) Why when i am adding this code to style.less/css in active child theme may not work?

 

 

Offtop. if on page we have javascript counter in DMS in text box, and changing to another theme (like base template), with adding new textbox i'm loosing all configuration of site. Must i write a video to show this to you?

Edited by save4eg

Share this post


Link to post
Share on other sites

1 answer to this question

  • 0

Posted · Report post

Forget Nick's Base Theme.  Place the code provided by our Docs in Custom Code.

 

Works fine http://dev.epicurus.com/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0