Jump to content


Photo
- - - - -

Mobile menu background color and font color

mobile menu color background

  • Please log in to reply
19 replies to this topic

#1 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 19 March 2014 - 10:10 AM

While trying to change BG color and font color of the dropdown menu of mobile , I identified the specific section and css codes like this >> http://screencast.com/t/HYGvSGgkbMr

 

So I used the following code  >>

 
#body .pl-mobile-menu {
   background-color: #252525;
   color: #FFFFFF;
}

which is not working!

 

Then searching the forum , I found the following code from here >>http://forum.pagelin...or-mobile-menu/

 
#site .navbar .dropdown-menu a {
padding: 6px 15px;
background: none repeat scroll 0% 0% #2525255;
color: rgb(255, 255, 255);
}

This isn't working too!

I'm referring to background and font color



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 19 March 2014 - 03:32 PM

please link us to your site so we can look at this for you ourselves. 



#3 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 19 March 2014 - 03:40 PM

techgainer.com



#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 19 March 2014 - 04:02 PM

thank you. 

 

Ok so you you have the correct CSS in the first place - the second lot of CSS you added is taken from a forum for a completley different PageLines product (the PageLines Framework) http://screencast.com/t/yZMnrLySMEh

 

The second set of CSS has an error in the CSS code itself. Any errors in your code will likely affect ALL the custom code you add to your site. add an error and it is likely any code you add after this will not take effect. Please please use the validator tool i linked previously to check your code before posting to the forum. The validator will tell you line by line where the problems are. 

 

The selectors are incorrect but the validator will not tell you that - Firebug will tell you the selectors. 

 

You can find the validator here http://jigsaw.w3.org...lidate_by_input

 

#site .navbar .dropdown-menu a {
padding: 6px 15px;
background: none repeat scroll 0% 0% #2525255;
color: rgb(255, 255, 255);
}

 

The red text here is incorrect. 

 

The CSS you pasted in the forum before that - works for me 

 
#body .pl-mobile-menu {
   background-color: #252525;
   color: #FFFFFF;
}

please see here. http://screencast.com/t/By7FLhJM

 

Step 1 - run CSS through the validator 

rectify the errors and then re add the CSS 


  • batman likes this

#5 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 19 March 2014 - 04:54 PM

Hey! IT working in console for me too! 

But not working when in custom css!

Here's all of my codes from my custom css >>

 
#body .pl-mobile-menu {
   background-color: #252525;
   color: #FFFFFF;
}

//not working
//.SideSocialLikeButtons {
//  border-top:solid;
//border-color:#cbd2d6;
//}

//rmv spc
.SocialFont .mediabox-wrap {min-height: 0px;}
.SocialFont .the-media {margin-top: 0px}

//disable the view of taggs
.tags {display: none;}


//adding Border
.abox .media.author-info {
border-top:solid;
border-color:#cbd2d6;
border-bottom:solid;
border-color:#cbd2d6;
}

//Removes space from headerlogo bottom(the logo made with mediabox html)
//from my forum post
.the-media-html p { margin: 0; }

//Used to Disable "visit author's website" beneath author box
.author-details {display:none}

//Used to disable author thumbnail link author box. Referral: http://goo.gl/vAmR1r and http://goo.gl/iMmGB
  .thumbnail {pointer-events: none;cursor: default;text-decoration:none; width: 95px; height:95px;}

//Used to control the color of the label "AUTHOR" in Author box
.author-note {font-size: 13px; color: #404040;}

//image frame type control in post excerpts  ....regards: http://goo.gl/Q59CNS and http://docs.pagelines.com/tutorials/html-css-utilities
//.img-polaroid .attachment-thumbnail.wp-post-image, .entry_content img { border-radius: 50%;
// -webkit-border-radius: 50%; -moz-border-radius: 50%;}
//learn css to make it squire! polaroid!

//change navbar color
//code from http://forum.pagelines.com/topic/32904-navbar-color/?hl=navbar
//my thread 
#site .navbar {background-color: #252525; 
 //color: #ffffff;
//background-image: none;
//box-shadow: none;
//border-top: none;}
//ff6400

//changing header color http://forum.pagelines.com/topic/33192-header-color-changing-code-not-working/#entry196850    violate:#5e2750
#header .pl-area {background-color: #252525;}

//Controling metabar font....refer: http://forum.pagelines.com/topic/33170-metabar-font-size/
.post-meta .metabar em { font-size: 110%; }

//Global Navbar font control with custom class
.SectionOfGNavBar {font-size: 120%;}

//gnav bar font color white http://forum.pagelines.com/topic/33202-cannot-change-navbar-font-color/#entry196882
.navbar.pl-color-base .navline > li > a {  color: white;}

//Change Footer color and font control
.footerbgClr {background-color: #252525; color: white;}
.footer-simp-nav {font-size: 105%;}

Do you think anything here conflicting?


Edited by rijans, 19 March 2014 - 04:55 PM.


#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 19 March 2014 - 04:57 PM

 

 

The second set of CSS has an error in the CSS code itself. Any errors in your code will likely affect ALL the custom code you add to your site. add an error and it is likely any code you add after this will not take effect. Please please use the validator tool i linked previously to check your code before posting to the forum. The validator will tell you line by line where the problems are. 

 

The selectors are incorrect but the validator will not tell you that - Firebug will tell you the selectors. 

 

You can find the validator here http://jigsaw.w3.org...lidate_by_input

 

 

Step 1 - run CSS through the validator 

rectify the errors and then re add the CSS 

 

 

Also 

 

 

comment out your css with  /* */ 



#7 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 19 March 2014 - 04:58 PM

i try and type this with the utmost respect to you and your work - All your recent posts have been related to CSS syntax issues,. I suggest taking a course in CSS as nearly everyone else has had to, using the validator and online tools etc. 

 

we cannot help you fix your purely CSS related issues but we can support you using DMS. CSS was not 'created' by us and therefore we cannot support just purely that. 

 

The are many many websites and forums with resources relating to CSS support. 

 

Also please use the pastebin feature when pasting rafts of Code to the forum. 

 

EDIT = you can paste anything you like here but we may not be able to support it is what i meant 


  • rijans likes this

#8 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 19 March 2014 - 04:59 PM

Okay!



#9 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 19 March 2014 - 05:14 PM

thanks 

 

all that aside - have you got this working? 



#10 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 19 March 2014 - 05:18 PM

I'll keep you posted! Thanks!



#11 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 19 March 2014 - 05:25 PM

I'v tried it on test site http://sb.techgainer.com/ where everything is fresh and no single customization in dms!

It only working in console >> http://screencast.com/t/gBcEHWOBl3r

BUt

The code 

 
#body .pl-mobile-menu {background-color : #252525;
color : #FFFFFF;}

http://screencast.com/t/Lxz2evs19

Isn't working there too! and nor the code 

#body .pl-mobile-menu {

   background: #252525;
   color: #FFFFFF;
}

Edited by rijans, 19 March 2014 - 05:30 PM.


#12 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 19 March 2014 - 07:48 PM

ok - if you create me an admin logon for your site and send the credentials to hello at pagelines dot com i will take a look for you. can you make sure you put the URl for this topic in the email so if anyone else picks up the email it will tie up with the topic :) 



#13 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 19 March 2014 - 08:00 PM

@Martin Davies 

 

Done with your request. Check it out plz



#14 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 19 March 2014 - 11:21 PM

Hi there, I've looked at your code. The Hex value for #252525 is black, so its not really different from the default, what color are you trying to make the nav?

 

Try something like

 

body .pl-mobile-menu {
   background: #4312e3 !important;
   color: #FFFFFF !important;
}

 

This is bright blue and you should see the code working correctly. If you're testing in another browser, you might need to flush the LESS first in settings > reset > flush less before viewing in the other browser and seeing the changes.



#15 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 20 March 2014 - 09:58 AM

@James B Not working it too! I flushed several times


Edited by rijans, 20 March 2014 - 09:59 AM.


#16 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 20 March 2014 - 02:21 PM

Can you paste in the exact code you are inputting please?

#17 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 20 March 2014 - 02:23 PM

#body .pl-mobile-menu {background-color : #252525;
color : #FFFFFF;}



#18 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 March 2014 - 09:13 AM

Hi there, something in your custom code above must be incorrect then and its stopping the code below from being read. I've just tested that code provided on my test site in the custom css panel and its working.

 

Try copy/paste all your custom css into a blank text doc so you have a coy saved. Then delete it from the site and insert the mobile menu code only and test. Once you've done that you can paste back your other code in sections to find the part where its breaking.


  • batman likes this

#19 rijans

rijans

    Super Member

  • Members
  • PipPipPipPip
  • 125 posts
  • Framework Version:DMS 1.1.8
  • Country: Country Flag

Posted 21 March 2014 - 05:28 PM

@James B I'v tried the code on a fresh site too where no customizations! not worked!

 

BTW I no more want to mess with you guys about this! Thanks for your times! :)



#20 batman

batman

    Bat Learning

  • Members

  • 2027 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 21 March 2014 - 08:49 PM

Hi @rijans

I see your code, the James B code have "!important", you can make a probe with

 

#body .pl-mobile-menu {background-color : #252525 !important;
color : #FFFFFF !important;}

or 

body .pl-mobile-menu {background-color : #252525 !important;
color : #FFFFFF !important;}







Also tagged with one or more of these keywords: mobile menu, color, background