• Resolved spanspek

    (@spanspek)


    Hi there

    I managed to change the banner colour from the default pink to a maroon colour, however when I alternate between the different pages (via the nav bar),before it fully loads it flickers from the default Pink to the now changed Maroon colour. Why is that?
    And can someone help me make that stop? O.o

    URL: http://www.onjala.com/spazensations/

    Regards

Viewing 15 replies - 1 through 15 (of 19 total)
  • Imran Ali

    (@imranaliweb)

    Hi

    copy and paste this code in custom css (Theme Dashboard >> appearance >> custom css )field

    .pink-container
    {
    background-color: #7F0000;
    }

    Thanks.

    Thread Starter spanspek

    (@spanspek)

    Hi Imran

    I already have that code in my Custom css field.

    Thread Starter spanspek

    (@spanspek)

    Hi Imran

    I already have that code in my Custom css field. But nothing has changed, it is still doing the same flickering from Pink to Maroon as it loads the page.

    Imran Ali

    (@imranaliweb)

    Hi

    find this code in default.css file

    .pink-container {
      background: none repeat scroll 0 0 #F22853;
    }

    Then remove this code in default.css file (line no 42)

    Thanks.

    Thread Starter spanspek

    (@spanspek)

    Hi Imran

    I cannot find the code you provided.
    Below is all I have with .pink-container in my style.css file.

    /* Pinkstrip Container Css -----------------------------------------------------------------------------------------------------*/
    
        /* Large desktop */
     @media (min-width: 1025px) {
    
    .pink-container {
    
        bottom: 0px;
        left: 0;
        padding-top: 20px;
    	padding-bottom: 0px;
    	padding-left: 20px;
    	padding-right: 0px;
    
        position: relative;
        right: 0;
    
    	margin:	auto;
    
    }
    .pink-container h1{
        color: #FFFFFF;
        line-height: 1.25;
        margin: 0;
    
    }
    .pink_title{
    
    	margin-top:3px;
    	margin-bottom:20px;
    }
    .pink-container p{
    
        font-family: roboto;
        font-size: 13px;
        padding-left: 30px;
    	line-height: 21px;
    }
    .pink_title  dt{
    	font-family: Raleway-Light;
    	color: #ffffff;
    	font-size: 21px;
    	text-transform:uppercase;
    }
    .pink-head{
    	font-family: Raleway-Xbold;
    	color: #ffffff;
    	font-size: 36px;
    }
    .spa_tag{	bottom: 8px;height: 105px;position: relative;float:right;width:170px;display:block;margin-right:20px;}
    .spa_tag span{
    
        display: block;
        font-size: 12px;
        font-weight: 600;
    	font-family: Raleway-Medium;
        height: 40px;
        left: 18px;
        line-height: 20px;
        overflow: hidden;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        top: 48px;
        width: 135px;
    }
    .spa_tag span p{
        font-size: 18px;
    
    	font-family: Raleway-Sbold;
    	border: 0px;
    	padding: 0px;
    }
    
    }
    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px)  { 
    
    .pink-container {
    display:none;
    
    }
    .slidesDescription
    {
    display:none;
    }
    
    }
    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) {
    .pink-container
    {
    	display:none;
    
    }
    .slidesDescription
    {
    display:none;
    }
    
    	}
    /* Landscape phones and down */
    @media (max-width: 480px) {
    .pink-container
    {
    	display:none;
    
    }
    .slidesDescription
    {
    display:none;
    }
    
    }
    Imran Ali

    (@imranaliweb)

    Hi

    Please find code in default.css (Theme Package >> css >> skins >> defaulr.css)

    (line no 42)

    Thanks.

    Thread Starter spanspek

    (@spanspek)

    Hi Imran

    Thank you again.
    I managed to remove the code from the default.css and re-uploaded it on our server.

    However, one little thing changed. it removed all my Pages’ banner description and put the default ones (Not a big issues there, I just retyped them.) and also changed the font type and colour of the Description text :-/.

    How can I change the font type, colour and size?

    Imran Ali

    (@imranaliweb)

    Hi

    Change the color of pink container description text
    for Below css code in custom css filed

    .slidesDescription p
    {
    color:#fff; ( ) Change the color code according to your need.
    }

    for pink container font size

    .slidesDescription p
    {
    font-size: 13px; ( Change the size according to your need)
    }

    and change the Font type is our part of the customization.

    Thanks.

    Thread Starter spanspek

    (@spanspek)

    Hi Imran

    Thank you, once more.:-D
    I placed the codes in the custom css, and it worked, but just for the home page.
    How can I apply them to all my pages?

    Regards

    Imran Ali

    (@imranaliweb)

    Hi

    Change the color of pink container description text in all pages
    for Below css code in custom css filed

    .pink-container p
    {
    color: #000000 !important; ( Change the color according your need)
    }

    Thanks.

    Thread Starter spanspek

    (@spanspek)

    Hi

    I added the new code, & it went into effect.
    Maybe you can take a look at the URL http://www.onjala.com/spazensations/services/our-team/

    All seems to be well, except when I load another page it still shows pink in the background
    (pink container) banner before it fully loads.
    I have deleted the cache, but nothing happens.

    I really do hope this is the last question I have for you… :))))

    Imran Ali

    (@imranaliweb)

    Hi

    For this add below code in custom css

    .navbar-inverse .nav li.current_page_item
    {
    background-color: #7F0000 !important;
    }

    Thanks.

    Imran Ali

    (@imranaliweb)

    Hi

    Did your issue resolved. can I close this ticket
    Thanks.

    Thread Starter spanspek

    (@spanspek)

    Hi Imran

    No, it is still not resolved yet.
    I did everything you suggested, but it still flickers the default pink before it fully loads.

    Please check URL: http://www.onjala.com/spazensations/

    Thread Starter spanspek

    (@spanspek)

    Especially when navigating between pages, using the navigation bar… (The used to be pink container).

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Banner colour flickers’ is closed to new replies.