Banner colour flickers
-
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.oURL: http://www.onjala.com/spazensations/
Regards
-
Hi
copy and paste this code in custom css (Theme Dashboard >> appearance >> custom css )field
.pink-container
{
background-color: #7F0000;
}Thanks.
Hi Imran
I already have that code in my Custom css field.
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.
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.
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; } }
Hi
Please find code in default.css (Theme Package >> css >> skins >> defaulr.css)
(line no 42)
Thanks.
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?
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.
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
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.
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… :))))
Hi
For this add below code in custom css
.navbar-inverse .nav li.current_page_item { background-color: #7F0000 !important; }
Thanks.
Hi
Did your issue resolved. can I close this ticket
Thanks.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/
Especially when navigating between pages, using the navigation bar… (The used to be pink container).
- The topic ‘Banner colour flickers’ is closed to new replies.